﻿<template>
  <div class="mesProcess-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="processCode">
              <el-input v-model="ruleForm.processCode" 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="processName">
              <el-input v-model="ruleForm.processName" 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="factoryCode">
              <el-select clearable="" filterable="" v-model="ruleForm.factoryCode" placeholder="请选择所属工厂">
                <el-option v-for="(item, index) in  mesFactoryFactoryCodeDropdownList" :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="workShopCode">
              <el-select clearable filterable v-model="ruleForm.workShopCode"
                         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-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="版本" prop="ver">
              <el-input v-model="ruleForm.ver" 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="sorts">
              <el-input-number v-model="ruleForm.sorts" placeholder="请输入执行顺序" 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="workSectionCode">
              <el-select clearable filterable v-model="ruleForm.workSectionCode" placeholder="请选择所属工段">
                <el-option v-for="(item,index) in workSectionList" :key="index" :value="item.workSectionCode" :label="item.workSectionName" />

              </el-select>
              <!-- <el-input v-model="ruleForm.workSectionCode" 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="isKey">
              <el-select clearable v-model="ruleForm.isKey" placeholder="请选择是否关键工序">
                <el-option v-for="(item, index) in  ifStatus" :key="index" :value="item.value" :label="item.label"></el-option>
              </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="isInspect">-->
<!--              <el-select clearable v-model="ruleForm.isInspect" placeholder="请选择是否检验工序">-->
<!--                <el-option v-for="(item, index) in  ifStatus" :key="index" :value="item.value" :label="item.label"></el-option>-->
<!--              </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="inspectTypes">-->
<!--              <el-select clearable v-model="ruleForm.inspectTypes" placeholder="请选择检验类型">-->
<!--                <el-option v-for="(item,index) in dl('CheckType')" :key="index" :value="item.code" :label="`[${item.code}] ${item.value}`" />-->
<!--              </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="isJj">-->
<!--              <el-select clearable v-model="ruleForm.isJj" placeholder="请选择是否军检点">-->
<!--                <el-option v-for="(item, index) in  ifStatus" :key="index" :value="item.value" :label="item.label"></el-option>-->
<!--              </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="isWx">-->
<!--              <el-select clearable v-model="ruleForm.isWx" placeholder="请选择是否外协工序">-->
<!--                <el-option v-for="(item, index) in  ifStatus" :key="index" :value="item.value" :label="item.label"></el-option>-->
<!--              </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="isWork">-->
<!--              <el-select clearable v-model="ruleForm.isWork" placeholder="请选择是否下线报工">-->
<!--                <el-option v-for="(item, index) in  ifStatus" :key="index" :value="item.value" :label="item.label"></el-option>-->
<!--              </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="remark">
              <el-input v-model="ruleForm.remark" placeholder="请输入备注" maxlength="0" show-word-limit clearable />

            </el-form-item>

          </el-col>
        </el-row>
      </el-form>
      <el-tabs>
        <el-tab-pane label="关联设备"></el-tab-pane>
      </el-tabs>
      <el-button icon="el-icon-plus" type="primary" @click="subAdd" class="subaddBtn" style="margin-bottom:5px;">新增</el-button>
      <el-table :data="equipmentTableData" style="width: 100%" tooltip-effect="light" row-key="id" border="">
        <el-table-column type="index" label="序号" width="55" align="center" />
        <el-table-column prop="equipmentCode" label="设备编码" show-overflow-tooltip="" />
        <el-table-column prop="equipmentName" label="设备名称" show-overflow-tooltip="" />
        <el-table-column label="操作" width="140" align="center" fixed="right">
          <template #default="scope">
            <el-button icon="ele-Delete" size="small" type="primary" @click="subDelete(scope.row, scope.$index)">
              删除 </el-button>
          </template>
        </el-table-column>
      </el-table>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="submit">确 定</el-button>
        </span>
      </template>
    </el-dialog>
    <!--  设备选择组件  -->
    <choose-equipment title="选择设备" ref="chooseEquipmentRef" :is-any="true" @finish="onChooseFinish"></choose-equipment>
  </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 { addMesProcess, updateMesProcess, detailMesProcess, getworkSectionList } from '/@/api/mes/mesProcess';
import chooseEquipment from '/@/businessComponents/chooseEquipment.vue';
import internal from 'stream';
import {getMesWorkShopFactoryCodeDropdown} from "/@/api/mes/mesProductionLine";
import {getMesFactoryFactoryCodeDropdown} from "/@/api/mes/mesRuleProcessProdCycle";
let fullScreen = ref(false);
//父级传递来的参数
var props = defineProps({
	title: {
		type: String,
		default: '',
	},
});

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

const mesFactoryFactoryCodeDropdownList = ref<any>([]);
const getMesFactoryFactoryCodeDropdownList = async () => {
  let list = await getMesFactoryFactoryCodeDropdown();
  mesFactoryFactoryCodeDropdownList.value = list.data.result ?? [];
};
getMesFactoryFactoryCodeDropdownList();



//父级传递来的函数，用于回调
const emit = defineEmits(['reloadTable']);
const ruleFormRef = ref();
const isShowDialog = ref(false);
const ruleForm = ref<any>({});
const equipmentTableData = ref([]);
const ifStatus = ref([
	{ label: '否', value: 0 },
	{ label: '是', value: 1 },
]);
//自行添加其他规则
const rules = ref<FormRules>({
	processCode: [{ required: true, message: '请输入工序编码！', trigger: 'blur' }],
	processName: [{ required: true, message: '请输入工序名称！', trigger: 'blur' }],
	workSectionCode: [{ required: true, message: '请输入所属工段编码！', trigger: 'blur' }],
  // factoryCode: [{ required: true, message: '请选择所属工厂！', trigger: 'blur' }],
  // workShopCode: [{ required: true, message: '请选择所属车间！', trigger: 'blur' }],
	isKey: [{ required: true, message: '请输入是否关键工序！', trigger: 'blur' }],
	// isInspect: [{ required: true, message: '请输入是否检验工序！', trigger: 'blur' }],
	// isJj: [{ required: true, message: '请输入是否军检点！', trigger: 'blur' }],
	// isWx: [{ required: true, message: '请输入是否外协工序！', trigger: 'blur' }],
	// isWork: [{ required: true, message: '请输入是否下线报工！', trigger: 'blur' }],
});

// 打开弹窗
const openDialog = async (row: any) => {
	// ruleForm.value = JSON.parse(JSON.stringify(row));
	// 改用detail获取最新数据来编辑
	equipmentTableData.value = [];
	let rowData = JSON.parse(JSON.stringify(row));
	if (rowData.id) {
		let data = (await detailMesProcess(rowData.id)).data.result;
		ruleForm.value = data;
		equipmentTableData.value = (data.equipmentCodes || '')
			.split(',')
			.filter((item: any) => item)
			.map((item: any, index: any) => {
				return {
					equipmentCode: item || '',
					equipmentName: (data.equipmentNames || '').split(',').filter((item: any) => item)?.[index] || '',
				};
			});
	} else {
		ruleForm.value = rowData;
	}
	isShowDialog.value = true;
};
const workSectionList = ref<any>([]);
const getworkSectionListList = async () => {
	let list = await getworkSectionList();
	workSectionList.value = list.data.result ?? [];
};
getworkSectionListList();

// 关闭弹窗
const closeDialog = () => {
	emit('reloadTable');
	isShowDialog.value = false;
};

// 取消
const cancel = () => {
	isShowDialog.value = false;
};

// 提交
const submit = async () => {
	ruleFormRef.value.validate(async (isValid: boolean, fields?: any) => {
		if (isValid) {
			let values = ruleForm.value;
			values.equipmentCodes = equipmentTableData.value.map((item: any) => item.equipmentCode).join(',');
			values.equipmentNames = equipmentTableData.value.map((item: any) => item.equipmentName).join(',');
			if (ruleForm.value.id == undefined || ruleForm.value.id == null || ruleForm.value.id == '' || ruleForm.value.id == 0) {
				await addMesProcess(values);
			} else {
				await updateMesProcess(values);
			}
			closeDialog();
		} else {
			ElMessage({
				message: `表单有${Object.keys(fields).length}处验证失败，请修改后再提交`,
				type: 'error',
			});
		}
	});
};
const chooseEquipmentRef = ref();
const subAdd = () => {
	chooseEquipmentRef.value.openDialog({});
};
const subDelete = (row: any, index: number) => {
	equipmentTableData.value.splice(index, 1);
};
const onChooseFinish = (data: any) => {
	let list: any[] = (data?.rows || []).map((item: any) => ({
		...item,
		equipmentName: item.equipmentName,
		equipmentCode: item.equipmentCode,
	}));
	equipmentTableData.value.push(...list);
};

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

//将属性或者函数暴露给父组件
defineExpose({ openDialog });
</script>




