<!--
 * @Author: zwq
 * @Date: 2021-11-18 14:16:25
 * @LastEditors: zwq
 * @LastEditTime: 2026-01-15 09:16:36
 * @Description:
-->
<template>
	<el-form
		:model="dataForm"
		:rules="dataRule"
		ref="dataForm"
		@keyup.enter.native="dataFormSubmit()"
		label-width="80px">
		<div class="stat-card">
			<div class="stat-icon">
				<i class="el-icon-s-grid" style="color: #fff"></i>
			</div>
			<div class="stat-title">库位信息</div>
			<div class="stat-content">
				<div class="stat-value">{{ lineInfo.lineEdgeLibraryCode }}</div>
				<div class="stat-label">{{ lineInfo.lineEdgeLibraryName }}</div>
			</div>
		</div>
		<el-row :gutter="20">
			<el-col :span="24">
				<el-form-item label="物料" prop="materialId">
					<el-select
						style="width: 100%"
						v-model="dataForm.materialId"
						filterable
						@change="setMaterial"
						placeholder="请选择物料">
						<el-option
							v-for="item in productArr"
							:key="item.id"
							:label="
								item.materialCode +
								'-' +
								item.materialName +
								'-' +
								item.material
							"
							:value="item.id"></el-option>
					</el-select>
				</el-form-item>
			</el-col>
			<el-col :span="8">
				<el-form-item label="本盘长度" prop="cableLength">
					<el-input-number
						v-model="dataForm.cableLength"
						:min="0"
						:precision="2"></el-input-number>
				</el-form-item>
			</el-col>
			<el-col :span="8">
				<el-form-item label="设备" prop="equipmentId">
					<el-select
						v-model="dataForm.equipmentId"
						@change="setEquipment"
						placeholder="请选择绞体">
						<el-option
							v-for="item in options1"
							:key="item.id"
							:label="item.equipmentName"
							:value="item.id"></el-option>
					</el-select>
				</el-form-item>
			</el-col>
			<el-col :span="8">
				<el-form-item label="应用套号" prop="suite">
					<el-select v-model="dataForm.suite" placeholder="请选择应用套号">
						<el-option
							v-for="item in options2"
							:key="item.value"
							:label="item.label"
							:value="item.value"></el-option>
					</el-select>
				</el-form-item>
			</el-col>
			<span v-if="dataForm.suite == 2">
				<el-col :span="8">
					<el-form-item label="选择套号" prop="time">
						<el-date-picker
							v-model="dataForm.time"
							value-format="yyyy-MM-dd"
							type="date"></el-date-picker>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="" prop="productionLine">
						<el-select v-model="dataForm.productionLine">
							<el-option
								v-for="item in options3"
								:key="item.value"
								:label="item.label"
								:value="item.value"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="" prop="numb">
						<el-select v-model="dataForm.numb">
							<el-option
								v-for="item in options4"
								:key="item.value"
								:label="item.label"
								:value="item.value"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
			</span>
		</el-row>
	</el-form>
</template>

<script>
import basicAdd from '@/mixins/basic-add';
import { getAllProductPage } from '@/api/ssdl/product&recipe';
import {
	QKLineEdgeLibrary,
	getEquipmentPage,
} from '@/api/areavisual/lineEdgeLibrary';
import { parseTime } from '@/filter/code-filter';

export default {
	mixins: [basicAdd],
	data() {
		return {
			urlOptions: {
				createURL: QKLineEdgeLibrary,
			},
			dataForm: {
				id: undefined,
				materialId: undefined,
				materialName: undefined,
				materialCode: undefined,
				material: undefined,
				cableLength: undefined,
				equipmentId: undefined,
				equipmentName: undefined,
				suite: undefined, //是否成套
				suiteCode: undefined, //套号
				time: this.parseTime(new Date(), '{y}-{m}-{d}'),
				productionLine: undefined,
				numb: undefined,
			},
			lineInfo: {},
			productArr: [],
			options1: [],
			options2: [
				{
					value: 2,
					label: '是',
				},
				{
					value: 1,
					label: '否',
				},
			],
			options3: [
				{
					value: '6#',
					label: '6#',
				},
				{
					value: '7#',
					label: '7#',
				},
				{
					value: '8#',
					label: '8#',
				},
			],
			options4: [
				{
					value: 0,
					label: '0',
				},
				{
					value: 1,
					label: '1',
				},
				{
					value: 2,
					label: '2',
				},
				{
					value: 3,
					label: '3',
				},
				{
					value: 4,
					label: '4',
				},
				{
					value: 5,
					label: '5',
				},
				{
					value: 6,
					label: '6',
				},
			],
			dataRule: {
				materialId: [
					{ required: true, message: '物料不能为空', trigger: 'change' },
				],
				time: [{ required: true, message: '不能为空', trigger: 'change' }],
				productionLine: [
					{ required: true, message: '不能为空', trigger: 'change' },
				],
				numb: [{ required: true, message: '不能为空', trigger: 'change' }],
			},
		};
	},
	methods: {
		showLine(val) {
			getAllProductPage().then((res) => {
				this.productArr = res.data;
			});
			getEquipmentPage({ pageNo: 1, pageSize: 100, equipmentType: 2 }).then(
				(res) => {
					this.options1 = res.data.list;
				}
			);
			this.lineInfo = { ...val };
		},
		setMaterial() {
			const data = this.productArr.find(
				(i) => i.id === this.dataForm.materialId
			);
			this.dataForm.materialName = data.materialName;
			this.dataForm.material = data.material;
			this.dataForm.materialCode = data.materialCode;
		},
		setEquipment() {
			const data = this.options1.find(
				(i) => i.id === this.dataForm.equipmentId
			);
			this.dataForm.equipmentName = data.equipmentName;
		},
		// 表单提交
		dataFormSubmit() {
			this.$refs['dataForm'].validate((valid) => {
				if (!valid) {
					return false;
				}
				if (this.dataForm.suite == 2) {
					this.dataForm.suiteCode =
						this.dataForm.time +
						'-' +
						this.dataForm.productionLine +
						'-' +
						this.dataForm.numb;
				}
				QKLineEdgeLibrary({
					...this.lineInfo,
					...this.dataForm,
					lineEdgeLibraryState: 1,
					id: this.lineInfo.id,
				}).then((response) => {
					this.$modal.msgSuccess('操作成功');
					this.visible = false;
					this.$emit('refreshDataList');
				});
				return;
			});
		},
	},
};
</script>

<style scoped>
.stat-card {
	display: flex;
	align-items: center;
	padding: 10px;
	background: white;
	border-radius: 12px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	transition: all 0.3s ease;
	border-left: 4px solid;
	border-color: #1a56db;
	margin-bottom: 30px;
}

/* .stat-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
} */
.stat-title {
	margin: 0 10px;
	color: #0051ff;
	font-size: 20px;
}
.stat-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	border-radius: 12px;
	margin-right: 15px;
	background: linear-gradient(to right, #1a56db, #0d47a1);
}

.stat-content {
	display: flex;
	flex-direction: column;
}

.stat-value {
	font-size: 28px;
	font-weight: 700;
	line-height: 1.2;
	color: #1a56db;
}

.stat-label {
	font-size: 14px;
	color: #64748b;
}
</style>
