﻿<template>
	<div class="mesProductionLine-container">
		<el-dialog v-model="isShowDialog" :width="800" draggable="" :close-on-click-modal="false" :fullscreen="fullScreen">
      <template #header>
        <div style="color: #fff;display: flex;align-items: center;justify-content: space-between;">
          <span>{{ props.title }}</span>
          <el-icon size="16" @click="fullScreen = !fullScreen" style="margin-right: 16px; display: block; vertical-align: middle;cursor: pointer">
            <ele-FullScreen v-if="!fullScreen" />
            <ele-Notification v-else />
          </el-icon>
        </div>
      </template>
			<el-form :model="ruleForm" ref="ruleFormRef" label-width="auto" :rules="rules">
				<el-row :gutter="35">
					<el-form-item v-show="false">
						<el-input v-model="ruleForm.id" />
					</el-form-item>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="产线编码" prop="productionLineCode">
							<el-input disabled v-model="ruleForm.productionLineCode" placeholder="请输入产线编码"
								maxlength="100" show-word-limit clearable />

						</el-form-item>

					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="产线名称" prop="productionLineName">
							<el-input disabled v-model="ruleForm.productionLineName" placeholder="请输入产线名称"
								maxlength="100" show-word-limit clearable />

						</el-form-item>

					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="产线类别" prop="productionLineTypeCode">
							<el-select disabled clearable filterable v-model="ruleForm.productionLineTypeCode"
								placeholder="请选择产线类别" @change="detail">
								<el-option
									v-for="(item, index) in mesProductionLineTypeProductionLineTypeCodeDropdownList"
									:key="index" :value="item.value" :label="item.label" />

							</el-select>

						</el-form-item>

					</el-col>

					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="所属车间编码" prop="factoryCode">
							<el-select disabled clearable filterable v-model="ruleForm.factoryCode"
								placeholder="请选择所属车间编码">
								<el-option v-for="(item, index) in mesWorkShopFactoryCodeDropdownList" :key="index"
									:value="item.value" :label="item.label" />

							</el-select>

						</el-form-item>

					</el-col>

				</el-row>
			</el-form>
			<div class="gllbj">关联零部件</div>
			<el-transfer v-model="partCodes" @change="handleChange" :data="datas" :titles="['待选零部件信息', '已选零部件信息']" />
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="cancel">取 消</el-button>
					<el-button type="primary" @click="submit">确 定</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>
<style scoped>
:deep(.el-select),
:deep(.el-input-number) {
	width: 100%;
}
</style>
<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { getDictDataItem as di, getDictDataList as dl } from '/@/utils/dict-utils';
import { ElMessage } from "element-plus";
import type { FormRules } from "element-plus";
import { addMesProductionLine, updateMesProductionLine, detailMesProductionLine } from "/@/api/mes/mesProductionLine";
import { getMesProductionLineTypeProductionLineTypeCodeDropdown } from '/@/api/mes/mesProductionLine';
import { getMesWorkShopFactoryCodeDropdown } from '/@/api/mes/mesProductionLine';
import { pageMesMaterial } from '/@/api/mes/mesMaterial';
//父级传递来的参数
var props = defineProps({
	title: {
		type: String,
		default: "",
	},
});
interface Option {
	key: number
	label: string
	disabled: boolean
}
let fullScreen = ref(false);
const partCodes = ref([])
//父级传递来的函数，用于回调
const emit = defineEmits(["reloadTable"]);
const ruleFormRef = ref();
const isShowDialog = ref(false);
const ruleForm = ref<any>({});
//自行添加其他规则
const rules = ref<FormRules>({
	productionLineCode: [{ required: false, message: '请输入产线编码！', trigger: 'blur', },],
	productionLineTypeCode: [{ required: false, message: '请输入选择产线类别！', trigger: 'blur', },],
	productionLineName: [{ required: false, message: '请输入产线名称！', trigger: 'blur', },],
	holidayType: [{ required: false, message: '请选择公休日类型！', trigger: 'change', },],
});

// 打开弹窗
const openDialog = async (row: any) => {
	// ruleForm.value = JSON.parse(JSON.stringify(row));
	// 改用detail获取最新数据来编辑
	let rowData = JSON.parse(JSON.stringify(row));
	if (rowData.id)
		ruleForm.value = (await detailMesProductionLine(rowData.id)).data.result;
	else
		ruleForm.value = rowData;
	isShowDialog.value = true;
};

// 关闭弹窗
const closeDialog = () => {
	emit("reloadTable");
	isShowDialog.value = false;
};
const handleChange = (
	value: number[] | string[],
	direction: 'left' | 'right',
	movedKeys: string[] | number[]
) => {
	console.log(value, direction, movedKeys)
	partCodes.value = value
}
// 取消
const cancel = () => {
	isShowDialog.value = false;
};
const detail = (r) => {
	console.log(r)
	ruleForm.value.sign = mesProductionLineTypeProductionLineTypeCodeDropdownList.value.filter(item => item.value == r)[0].sign
};
// 提交
const submit = async () => {
	const values = {
		id: ruleForm.value.id,
		partCodes: partCodes.value.join(',')
	}
	await updateMesProductionLine(values);
	closeDialog();
};

const mesProductionLineTypeProductionLineTypeCodeDropdownList = ref<any>([]);
const getMesProductionLineTypeProductionLineTypeCodeDropdownList = async () => {
	let list = await getMesProductionLineTypeProductionLineTypeCodeDropdown();
	mesProductionLineTypeProductionLineTypeCodeDropdownList.value = list.data.result ?? [];
};
getMesProductionLineTypeProductionLineTypeCodeDropdownList();

const mesWorkShopFactoryCodeDropdownList = ref<any>([]);
const getMesWorkShopFactoryCodeDropdownList = async () => {
	let list = await getMesWorkShopFactoryCodeDropdown();
	mesWorkShopFactoryCodeDropdownList.value = list.data.result ?? [];
};
getMesWorkShopFactoryCodeDropdownList();

const queryParams = ref<any>({});
const tableParams = ref({
	page: 1,
	pageSize: 10,
	total: 0,
}); const tableData = ref<any>([]);
const datas = ref<any>([]);
// 查询操作
const handleQuery = async () => {
	var res = await pageMesMaterial(Object.assign(queryParams.value, tableParams.value));
	tableData.value = res.data.result?.items ?? [];
	tableData.value.forEach(item => {
		datas.value.push({
			label: item.materialName,
			key: item.materialCode,
		})
	})
}
handleQuery()



// 页面加载时
onMounted(async () => {
});

//将属性或者函数暴露给父组件
defineExpose({ openDialog });
</script>
<style scoped>
.gllbj :deep(.el-transfer-panel .el-transfer-panel__header .el-checkbox .el-checkbox__label) {
  font-size: 14px !important;
}
</style>
