﻿<template>
	<div class="mesProducePlan-container">
		<el-card shadow="hover" :body-style="{ padding: '20px 20px 16px 10px', display: 'flex', width: '100%', height: '100%', alignItems: 'start' }">
			<el-form :model="state.queryParams" ref="queryForm" :show-message="false" :inlineMessage="true" label-width="auto" style="flex: 1 1 0%" @submit.prevent="handleQuery">
				<el-row :gutter="10">
					<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" class="mb5">
						<el-form-item label="关键字" prop="searchKey">
							<el-input v-model="state.queryParams.searchKey" placeholder="请输入模糊查询关键字" clearable @keyup.enter.native="handleQuery" />
						</el-form-item>
					</el-col>
					<!-- <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" class="mb5" v-if="state.showAdvanceQueryUI">
						<el-form-item label="计划单号" prop="producePlanNo">
							<el-input v-model="state.queryParams.producePlanNo" placeholder="计划单号" clearable @keyup.enter.native="handleQuery" />
						</el-form-item>
					</el-col> -->
					<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" class="mb5" v-if="state.showAdvanceQueryUI">
						<el-form-item label="产品编码" prop="productCode">
							<el-input v-model="state.queryParams.productCode" placeholder="产品编码" clearable @keyup.enter.native="handleQuery" />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" class="mb5" v-if="state.showAdvanceQueryUI">
						<el-form-item label="产品名称" prop="productName">
							<el-input v-model="state.queryParams.productName" placeholder="产品名称" clearable @keyup.enter.native="handleQuery" />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" class="mb5" v-if="state.showAdvanceQueryUI">
						<el-form-item label="产品ERP编码" prop="materialNo">
							<el-input v-model="state.queryParams.materialNo" placeholder="产品ERP编码" clearable @keyup.enter.native="handleQuery" />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" class="mb5" v-if="state.showAdvanceQueryUI">
						<el-form-item label="规格型号" prop="specs">
							<el-input v-model="state.queryParams.specs" placeholder="规格型号" clearable @keyup.enter.native="handleQuery" />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" class="mb5" v-if="state.showAdvanceQueryUI">
						<el-form-item label="客户编码" prop="customerCode">
							<el-input v-model="state.queryParams.customerCode" placeholder="客户编码" clearable @keyup.enter.native="handleQuery" />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" class="mb5" v-if="state.showAdvanceQueryUI">
						<el-form-item label="客户名称" prop="customerName">
							<el-input v-model="state.queryParams.customerName" placeholder="客户名称" clearable @keyup.enter.native="handleQuery" />
						</el-form-item>
					</el-col>
					<!-- <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" class="mb5" v-if="state.showAdvanceQueryUI">
						<el-form-item label="指令号" prop="cmdNo">
							<el-input v-model="state.queryParams.cmdNo" placeholder="指令号" clearable @keyup.enter.native="handleQuery" />
						</el-form-item>
					</el-col> -->
					<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" class="mb5" v-if="state.showAdvanceQueryUI">
						<el-form-item label="周计划号" prop="produceOrderNo">
							<el-input v-model="state.queryParams.produceOrderNo" placeholder="周计划号" clearable @keyup.enter.native="handleQuery" />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" class="mb5" v-if="state.showAdvanceQueryUI">
						<el-form-item label="车间编码" prop="workShopCode">
							<el-input v-model="state.queryParams.workShopCode" placeholder="车间编码" clearable @keyup.enter.native="handleQuery" />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" class="mb5" v-if="state.showAdvanceQueryUI">
						<el-form-item label="车间名称" prop="workShopName">
							<el-input v-model="state.queryParams.workShopName" placeholder="车间名称" clearable @keyup.enter.native="handleQuery" />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" class="mb5" v-if="state.showAdvanceQueryUI">
						<el-form-item label="工段编码" prop="workSectionCode">
							<el-input v-model="state.queryParams.workSectionCode" placeholder="工段编码" clearable @keyup.enter.native="handleQuery" />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" class="mb5" v-if="state.showAdvanceQueryUI">
						<el-form-item label="工段名称" prop="workSectionName">
							<el-input v-model="state.queryParams.workSectionName" placeholder="工段名称" clearable @keyup.enter.native="handleQuery" />
						</el-form-item>
					</el-col>
					<!-- <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" class="mb5" v-if="state.showAdvanceQueryUI">
						<el-form-item label="工序编码" prop="processCode">
							<el-input v-model="state.queryParams.processCode" placeholder="工序编码" clearable @keyup.enter.native="handleQuery" />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" class="mb5" v-if="state.showAdvanceQueryUI">
						<el-form-item label="工序名称" prop="processName">
							<el-input v-model="state.queryParams.processName" placeholder="工序名称" clearable @keyup.enter.native="handleQuery" />
						</el-form-item>
					</el-col> -->
					<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" class="mb5" v-if="state.showAdvanceQueryUI">
						<el-form-item label="计划开工日期" prop="planStartDate">
							<el-date-picker
								type="daterange"
								v-model="state.queryParams.planStartDateRange"
								value-format="YYYY-MM-DD HH:mm:ss"
								start-placeholder="开始日期"
								end-placeholder="结束日期"
								:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
							/>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" class="mb5" v-if="state.showAdvanceQueryUI">
						<el-form-item label="计划完工日期" prop="planEndDate">
							<el-date-picker
								type="daterange"
								v-model="state.queryParams.planEndDateRange"
								value-format="YYYY-MM-DD HH:mm:ss"
								start-placeholder="开始日期"
								end-placeholder="结束日期"
								:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
							/>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" class="mb5" v-if="state.showAdvanceQueryUI">
						<el-form-item label="生产计划状态">
							<!--							<el-input-number v-model="state.queryParams.producePlanStatus" placeholder="请输入生产计划状态 0.未下发 1.已下发" clearable @keyup.enter.native="handleQuery" />-->
							<el-select v-model="state.queryParams.producePlanStatus" placeholder="请选择生产计划状态" clearable @keyup.enter.native="handleQuery">
								<el-option :value="0" label="未下发"></el-option>
								<el-option :value="1" label="已下发"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" class="mb5" v-if="state.showAdvanceQueryUI">
						<el-form-item label="批次号" prop="batchNo">
							<el-input v-model="state.queryParams.batchNo" placeholder="批次号" clearable @keyup.enter.native="handleQuery" />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" class="mb5" v-if="state.showAdvanceQueryUI">
						<el-form-item label="工厂名称" prop="factoryName">
							<el-input v-model="state.queryParams.factoryName" placeholder="工厂名称" clearable @keyup.enter.native="handleQuery" />
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>

			<el-divider style="height: calc(100% - 5px); margin: 0 10px" direction="vertical" />

			<el-row>
				<el-col>
					<el-button-group>
						<el-button type="primary" icon="ele-Search" @click="handleQuery" v-auth="'mesProducePlan/page'" :loading="options.loading"> 查询 </el-button>
						<el-button icon="ele-Refresh" @click="resetQuery" :loading="options.loading"> 重置 </el-button>
						<el-button icon="ele-ZoomIn" @click="changeAdvanceQueryUI" v-if="!state.showAdvanceQueryUI" style="margin-left: 5px"> 高级查询 </el-button>
						<el-button icon="ele-ZoomOut" @click="changeAdvanceQueryUI" v-if="state.showAdvanceQueryUI" style="margin-left: 5px"> 隐藏 </el-button>
					</el-button-group>
				</el-col>
			</el-row>
		</el-card>

		<el-card class="full-table" shadow="hover" style="margin-top: 5px">
			<vxe-grid ref="xGrid" class="xGrid-style" v-bind="options" v-on="gridEvents">
				<template #toolbar_buttons>
					<!--					<el-button type="primary" icon="ele-Plus" @click="handleAdd" v-auth="'mesProducePlan/add'"> 新增 </el-button>-->
					<el-button type="primary" icon="ele-Plus" @click="planAdd"> 新增批次 </el-button>
					<el-button type="primary" style="margin-left: 5px" icon="ele-Promotion" @click="PlanPost"> 下发批次 </el-button>
					<el-button type="primary" style="margin-left: 5px" icon="ele-Close" @click="PlanClose"> 关闭批次 </el-button>
					<el-button type="primary" style="margin-left: 5px" icon="ele-Calendar" @click="PlanChange"> 批次变更 </el-button>
				</template>
				<template #toolbar_tools> </template>
				<template #empty>
					<el-empty :image-size="200" />
				</template>
				<template #row_record="{ row }">
					<ModifyRecord :data="row" />
				</template>
				<!--				<template #row_buttons="{ row }">-->
				<!--					<el-tooltip content="编辑" placement="top">-->
				<!--						<el-button icon="ele-Edit" size="small" text type="primary" @click="handleEdit(row)" v-auth="'mesProducePlan/update'" />-->
				<!--					</el-tooltip>-->
				<!--					<el-tooltip content="删除" placement="top">-->
				<!--						<el-button icon="ele-Delete" size="small" text type="danger" @click="handleDelete(row)" v-auth="'mesProducePlan/delete'" />-->
				<!--					</el-tooltip>-->
				<!--				</template>-->
			</vxe-grid>
		</el-card>

		<PrintDialog ref="printDialogRef" :title="state.title" @reloadTable="handleQuery" />
		<EditDialog ref="editDialogRef" :title="state.title" @reloadTable="handleQuery" />
		<!--  计划下发  -->
		<el-dialog v-model="openPlanPostDialog" width="40%" draggable="" destroy-on-close :fullscreen="fullScreen">
			<template #header>
				<div style="color: #fff; display: flex; align-items: center; justify-content: space-between">
					<span>计划下发</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-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label="排产日期" prop="planDate">
							<!-- <el-select clearable filterable v-model="ruleForm.planCode" placeholder="请选择日排产数据">
								<el-option v-for="(item, index) in planList" :key="index" :value="item.value" :label="`${item.value}`"></el-option>
							</el-select> -->
							<el-date-picker v-model="ruleForm.planDate" type="date" placeholder="请选择日期" />
						</el-form-item>
					</el-col>
					<!-- <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label="备注" prop="remark">
							<el-input type="textarea" v-model="ruleForm.reMark" placeholder="请输入备注" maxlength="100" show-word-limit clearable> </el-input>
						</el-form-item>
					</el-col> -->
				</el-row>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="cancel">取 消</el-button>
					<el-button type="primary" @click="postPlan">下发</el-button>
				</span>
			</template>
		</el-dialog>
		<!-- 计划变更 -->
		<el-dialog v-model="showChangeModal" width="40%" draggable="" destroy-on-close :fullscreen="fullScreen">
			<template #header>
				<div style="color: #fff; display: flex; align-items: center; justify-content: space-between">
					<span>计划变更</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="planChangeForm" ref="planChangeFormRef" label-width="auto" :rules="planChangeRules">
				<el-row :gutter="35">
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-space fill style="width: 100%">
							<el-alert type="warning" show-icon :closable="false">
								<p>减少数量可以使用负数，例如：-3 为减少3个数量</p>
							</el-alert>
							<el-form-item label="变更数量" prop="changeNum">
								<el-input type="number" v-model="planChangeForm.changeNum" placeholder="请输入"></el-input>
							</el-form-item>
						</el-space>
					</el-col>

					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label="变更日期" prop="changeDate">
							<el-date-picker v-model="planChangeForm.changeDate" type="date" placeholder="变更日期" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="cancel">取 消</el-button>
					<el-button type="primary" @click="submitPlanChange">下发</el-button>
				</span>
			</template>
		</el-dialog>

		<!--  新建生产计划  -->
		<el-dialog v-model="openAddPlanDialog" width="40%" draggable="" destroy-on-close>
			<template #header>
				<div style="color: #fff; display: flex; align-items: center; justify-content: space-between">
					<span>新建生产批次</span>
				</div>
			</template>
			<el-form :model="addForm" ref="addFormRef" label-width="auto" :rules="addFormRules">
				<el-row :gutter="35">
					<el-col :span="24" class="mb20">
						<el-row>
							<el-col :span="6" style="text-align: center">
								<el-statistic title="预投未完工数量" :value="numData.preNotFinishNum || 0" />
							</el-col>
							<el-col :span="6" style="text-align: center">
								<el-statistic title="月生产数量" :value="numData.monthNum || 0" />
							</el-col>
							<el-col :span="6" style="text-align: center">
								<el-statistic title="周生产数量" :value="numData.weekNum || 0" />
							</el-col>
							<el-col :span="6" style="text-align: center">
								<el-statistic title="零件在制总数量" :value="partMakeNum || 0" />
							</el-col>
						</el-row>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="周生产计划" prop="weekProducePlanNo">
							<el-input v-model="addForm.weekProducePlanNo" placeholder="点击选择周生产计划" maxlength="100" readonly @click="onShowChooseWeekPlan" :suffix-icon="Search"> </el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="产品编码" prop="productCode">
							<el-input v-model="addForm.productCode" placeholder="选择周生产计划带出" maxlength="100" readonly> </el-input>
						</el-form-item>
					</el-col>
					<el-col :span="24" class="mb20">
						<el-form-item label="选择零件" prop="productCode">
							<!-- <el-cascader style="width: 100%" @change="onBomChange" :options="bomTreeData" :props="{ checkStrictly: true }" :collapse-tags-tooltip="true"> </el-cascader> -->
							<el-tree-select v-model="addForm.productBomId" :data="bomTreeData" clearable :check-strictly="true" :render-after-expand="false" @change="onBomChange" style="width: 100%" />
						</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 filterable="" v-model="addForm.factoryCode" placeholder="请选择工厂" clearable>
								<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="num">
							<el-input-number v-model="addForm.num" placeholder="请输入下发数量" :min="1" :precision="0" :step="1" clearable> </el-input-number>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="计划开始日期" prop="planStartDate">
							<el-date-picker v-model="addForm.planStartDate" type="date" placeholder="请选择日期" />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="计划结束日期" prop="planEndDate">
							<el-date-picker v-model="addForm.planEndDate" type="date" placeholder="请选择日期" />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="批次号" prop="batchNo">
							<el-input v-model="addForm.batchNo" placeholder="请输入批次号" clearable> </el-input>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="cancel">取 消</el-button>
					<el-button type="primary" @click="addPlanSubmit" :loading="state.opLoading">保存</el-button>
				</span>
			</template>
		</el-dialog>
		<chooseWeekProducePlan ref="chooseWeekProducePlanRef" @onChoose="onWeekPlanChoose"></chooseWeekProducePlan>
	</div>
</template>

<script lang="ts" setup name="mesProducePlan">
import { onMounted, reactive, ref } from 'vue';
import { ElMessageBox, ElMessage, type FormRules } from 'element-plus';
import { auth } from '/@/utils/authFunction';
import { Search } from '@element-plus/icons-vue';
import { VxeGridInstance, VxeGridListeners, VxeGridPropTypes } from 'vxe-table';
import { useVxeTable } from '/@/hooks/useVxeTableOptionsHook';
import { Local } from '/@/utils/storage';

import { formatDate } from '/@/utils/formatTime';

// 子窗口
import PrintDialog from '/@/views/system/print/component/hiprint/preview.vue';
import EditDialog from '/@/views/mes/mesProducePlan/component/editDialog.vue';
import ModifyRecord from '/@/components/table/modifyRecord.vue';

import { pageMesProducePlan, deleteMesProducePlan, createMesProducePlan, productNums, getPartMakeNum, genProduceBatchNo } from '/@/api/mes/mesProducePlan';
import { Change, Close, SendProducePlan } from '/@/api/mes/mesProduceOrder';
import { useRoute } from 'vue-router';
import chooseWeekProducePlan from '/@/views/mes/mesProducePlan/component/chooseWeekProducePlan.vue';
import { getBomList } from '/@/api/mes/mesProduct';
import { getMesFactoryFactoryCodeDropdown, pageMesWorkShop } from '/@/api/mes/mesWorkShop';

// 子窗口对象
const xGrid = ref<VxeGridInstance>();
const printDialogRef = ref<InstanceType<typeof PrintDialog>>();
const editDialogRef = ref<InstanceType<typeof EditDialog>>();

// 变量
const state = reactive({
	opLoading: false,
	showAdvanceQueryUI: false,
	queryParams: {
		searchKey: undefined,
		producePlanNo: undefined,
		productCode: undefined,
		productName: undefined,
		materialNo: undefined,
		specs: undefined,
		customerCode: undefined,
		customerName: undefined,
		batchNo: undefined,
		produceOrderNo: undefined,
		productPcs: undefined,
		workShopCode: undefined,
		workShopName: undefined,
		workSectionCode: undefined,
		workSectionName: undefined,
		processCode: undefined,
		processName: undefined,
		planStartDate: undefined,
		planEndDate: undefined,
		planNum: undefined,
		planNumM: undefined,
		finishNum: undefined,
		finishNumM: undefined,
		producePlanStatus: undefined,
		produceOrderProductId: undefined,
		factoryCode: undefined,
		factoryName: undefined,
		productPcsLength: undefined,
	},
	localPageParam: {
		pageSize: 50 as number,
		defaultSort: { field: 'id', order: 'desc', descStr: 'desc' },
	},
	visible: false,
	title: '',
});

let fullScreen = ref(false);
const openPlanPostDialog = ref(false);
const openAddPlanDialog = ref(false);
const ruleForm = ref({
	planCode: '',
	reMark: '',
	planDate: null,
});
const addForm = ref({
	weekProducePlanNo: null,
	productCode: null,
	num: null,
	planStartDate: null,
	planEndDate: null,
	factoryCode: null,
	batchNo: null,
	productBomId:null,
});
const rules = ref<FormRules>({
	planDate: [{ required: true, message: '请选择计算完成日期', trigger: 'blur' }],
});
const addFormRules = ref<FormRules>({
	weekProducePlanNo: [{ required: true, message: '请选择周生产计划', trigger: 'change' }],
	productCode: [{ required: true, message: '请选择零件', trigger: 'blur' }],
	num: [{ required: true, message: '请输入下发数量', trigger: 'blur' }],
	factoryCode: [{ required: true, message: '请选择工厂', trigger: 'blur' }],
	planStartDate: [{ required: true, message: '请选择开始日期', trigger: 'blur' }],
	// planEndDate: [{ required: true, message: '请选择结束日期', trigger: 'blur' }],
	batchNo: [{ required: true, message: '请填写批次号', trigger: 'blur' }],
});

const planChangeRules = ref<FormRules>({
	changeNum: [{ required: true, message: '请输入变更数量！', trigger: 'blur' }],
	changeDate: [{ required: true, message: '请选择变更日期！', trigger: 'blur' }],
});
const PlanPost = () => {
	const $grid = xGrid.value;
	const selectRecords = $grid?.getCheckboxRecords(true);
	if (selectRecords.length == 0) return ElMessage.warning('请选择计划');
	openPlanPostDialog.value = true;

	// getPlanList();
	// const $grid = xGrid.value;
	// const selectRecords = $grid?.getCheckboxRecords(true);
	// if (selectRecords.length == 0) return ElMessage.warning('请选择计划');
	// ElMessageBox.confirm('是否确认下发选择的计划?', '警告', {
	// 	confirmButtonText: '确定',
	// 	cancelButtonText: '取消',
	// 	type: 'warning',
	// }).then(async () => {
	// 	await SendProducePlan({ id: selectRecords?.map((item) => item.id).join(',') });
	// 	ElMessage.success('操作成功');
	// 	handleQuery();
	// });
};

const PlanClose = async () => {
	const $grid = xGrid.value;
	const selectRecords = $grid?.getCheckboxRecords(true);
	if (selectRecords.length == 0) return ElMessage.warning('请选择计划');
	ElMessageBox.confirm('是否确认关闭选择的计划?', '警告', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning',
	}).then(async () => {
		await Close({
			producePlanNos: selectRecords?.map((item) => item.producePlanNo),
		});
		// SendProducePlan({id:selectRecords?.map(item=> item.id).join(',')})
		ElMessage.success('操作成功');
		handleQuery();
	});
};

const showChangeModal = ref(false);
const planChangeForm = ref({
	changeNum: '',
	changeDate: '',
});
const planChangeFormRef = ref();
const PlanChange = () => {
	const $grid = xGrid.value;
	const selectRecords = $grid?.getCheckboxRecords(true);
	if (selectRecords.length !== 1) return ElMessage.warning('请选择一条计划');
	showChangeModal.value = true;
};


const submitPlanChange = () => {
	const $grid = xGrid.value;
	const selectRecords = $grid?.getCheckboxRecords(true);
	if (selectRecords.length !== 1) return ElMessage.warning('请选择一条计划');
	planChangeFormRef.value.validate(async (isValid: boolean, fields?: any) => {
		if (isValid) {
			let values = planChangeForm.value;
			// request
			await Change({
				producePlanNo: selectRecords?.[0]?.producePlanNo,
				...values,
			});
			ElMessage.success('操作成功');
			cancel();
			handleQuery();
		} else {
			ElMessage({
				message: `表单有${Object.keys(fields).length}处验证失败，请修改后再提交`,
				type: 'error',
			});
		}
	});
};

const getPlanList = () => {
	// request
};

const cancel = () => {
	openPlanPostDialog.value = false;
	ruleForm.value = {
		planCode: '',
		reMark: '',
	};
	planChangeForm.value = {
		curNum: '',
		finishNum: '',
		changeNum: '',
		curDate: '',
		changeDate: '',
		remark:'',
	};
	showChangeModal.value = false;
	// handleQuery();
};
const ruleFormRef = ref();
const postPlan = () => {
	ruleFormRef.value.validate(async (isValid: boolean, fields?: any) => {
		if (isValid) {
			let values = ruleForm.value;
			// request
			const $grid = xGrid.value;
			const selectRecords = $grid?.getCheckboxRecords(true);
			for (var i = 0; i < selectRecords.length; i++) {
				await SendProducePlan({ id: selectRecords?.[i]?.id, planDate: ruleForm.value.planDate });
			}

			ElMessage.success('操作成功');
			openPlanPostDialog.value = false;
			handleQuery();
		} else {
			ElMessage({
				message: `表单有${Object.keys(fields).length}处验证失败，请修改后再提交`,
				type: 'error',
			});
		}
	});
};

// 本地存储参数
const localPageParamKey = 'localPageParam:mesProducePlan';

// 改变高级查询的控件显示状态
const changeAdvanceQueryUI = () => {
	state.showAdvanceQueryUI = !state.showAdvanceQueryUI;
};

// 表格参数配置
const options = useVxeTable<any>(
	{
		id: 'MesProducePlan',
		name: '生产计划',
		columns: [
			{ type: 'checkbox', title: '选择', fixed: 'left' },
			{ type: 'seq', title: '序号', width: 60, fixed: 'left' },
			//  { field: 'processName', title: '工序名称', minWidth: 100, showOverflow: 'tooltip', sortable: false },
			// { field: 'producePlanNo', title: '计划单号', minWidth: 100, showOverflow: 'tooltip', sortable: false },
			{
				field: 'producePlanStatus',
				title: '生产计划状态',
				minWidth: 100,
				showOverflow: 'tooltip',
				formatter: ({ cellValue }) => (cellValue == 0 ? '未下发' : cellValue == 1 ? '已下发' : cellValue),
				sortable: false,
			},
			{ field: 'partName', title: '零件名称', minWidth: 150, showOverflow: 'tooltip', sortable: false },
			{
				field: 'planStartDate',
				title: '计划开工日期',
				minWidth: 100,
				showOverflow: 'tooltip',
				formatter: ({ cellValue }) => (cellValue == null ? '' : formatDate(new Date(cellValue), 'YYYY-mm-dd')),
				sortable: false,
			},
			{
				field: 'planEndDate',
				title: '计划完工日期',
				minWidth: 100,
				showOverflow: 'tooltip',
				formatter: ({ cellValue }) => (cellValue == null ? '' : formatDate(new Date(cellValue), 'YYYY-mm-dd')),
				sortable: false,
			},
			{ field: 'planNum', title: '计划数量', minWidth: 100, showOverflow: 'tooltip', sortable: false },
			{ field: 'finishNum', title: '实际完工数量', minWidth: 100, showOverflow: 'tooltip', sortable: false },
			{ field: 'batchNo', title: '批次号', minWidth: 200, showOverflow: 'tooltip', sortable: false },
			{ field: 'specs', title: '规格', minWidth: 150, showOverflow: 'tooltip', sortable: false },
			{ field: 'productCode', title: '产品编码', minWidth: 150, showOverflow: 'tooltip', sortable: false },
			{ field: 'productName', title: '产品名称', minWidth: 150, showOverflow: 'tooltip', sortable: false },
			{ field: 'materialNo', title: '产品ERP编码', minWidth: 150, showOverflow: 'tooltip', sortable: false },
			
			{ field: 'partCode', title: '零件编码', minWidth: 150, showOverflow: 'tooltip', sortable: false },
			
			{ field: 'customerCode', title: '客户编码', minWidth: 100, showOverflow: 'tooltip', sortable: false },
			{ field: 'customerName', title: '客户名称', minWidth: 100, showOverflow: 'tooltip', sortable: false },
			// { field: 'cmdNo', title: '指令号', minWidth: 100, showOverflow: 'tooltip', sortable: false },
			{ field: 'produceOrderNo', title: '周计划号', minWidth: 150, showOverflow: 'tooltip', sortable: false },
			// { field: 'productPcs', title: '产品出数PCS', minWidth: 100, showOverflow: 'tooltip', sortable: false },
			{ field: 'workShopCode', title: '车间编码', minWidth: 100, showOverflow: 'tooltip', sortable: false },
			{ field: 'workShopName', title: '车间名称', minWidth: 100, showOverflow: 'tooltip', sortable: false },
			// { field: 'workSectionCode', title: '工段编码', minWidth: 100, showOverflow: 'tooltip', sortable: false },
			// { field: 'workSectionName', title: '工段名称', minWidth: 100, showOverflow: 'tooltip', sortable: false },
			// { field: 'processCode', title: '工序编码', minWidth: 100, showOverflow: 'tooltip', sortable: false },
		
			
			// { field: 'planNumM', title: '计划数量(m)', minWidth: 100, showOverflow: 'tooltip', sortable: false },
		
			// { field: 'finishNumM', title: '实际完工(m)', minWidth: 100, showOverflow: 'tooltip', sortable: false },

			// { field: 'produceOrderProductId', title: '生产订单产品Id', minWidth: 100, showOverflow: 'tooltip', sortable: false},
			// { field: 'factoryCode', title: '工厂编码', minWidth: 100, showOverflow: 'tooltip', sortable: false },
			// { field: 'factoryName', title: '工厂名称', minWidth: 100, showOverflow: 'tooltip', sortable: false },
			// { field: 'productPcsLength', title: '出数长度(m)', minWidth: 100, showOverflow: 'tooltip', sortable: false },
			{ title: '修改记录', width: 100, showOverflow: 'tooltip', slots: { default: 'row_record' } },
			// { title: '操作', fixed: 'right', width: 180, showOverflow: true, slots: { default: 'row_buttons' } },
		],
	},
	// vxeGrid配置参数(此处可覆写任何参数)，参考vxe-table官方文档
	{
		// 代理配置
		proxyConfig: { autoLoad: true, ajax: { query: ({ page, sort }) => handleQueryApi(page, sort) } },
		// 排序配置
		sortConfig: { defaultSort: Local.get(localPageParamKey)?.defaultSort || state.localPageParam.defaultSort },
		// 分页配置
		pagerConfig: { pageSize: Local.get(localPageParamKey)?.pageSize || state.localPageParam.pageSize },
		// 工具栏配置
		toolbarConfig: { export: false },
		// 行设置
		// rowConfig: { height: 80 },
	}
);

// 页面初始化
onMounted(() => {});

// 查询api
const handleQueryApi = async (page: VxeGridPropTypes.ProxyAjaxQueryPageParams, sort: VxeGridPropTypes.ProxyAjaxQuerySortCheckedParams) => {
	const params = Object.assign(state.queryParams, { page: page.currentPage, pageSize: page.pageSize, field: sort.field, order: sort.order, descStr: 'desc' }) as any;
	return pageMesProducePlan(params);
};

// 查询操作
const handleQuery = async (reset = false) => {
	options.loading = true;
	await xGrid.value?.commitProxy('query');
	options.loading = false;
};

// 重置操作
const resetQuery = async () => {
	(state.queryParams.searchKey = undefined),
		(state.queryParams.producePlanNo = undefined),
		(state.queryParams.productCode = undefined),
		(state.queryParams.productName = undefined),
		(state.queryParams.customerCode = undefined),
		(state.queryParams.customerName = undefined),
		(state.queryParams.cmdNo = undefined),
		(state.queryParams.produceOrderNo = undefined),
		(state.queryParams.productPcs = undefined),
		(state.queryParams.workShopCode = undefined),
		(state.queryParams.workShopName = undefined),
		(state.queryParams.workSectionCode = undefined),
		(state.queryParams.workSectionName = undefined),
		(state.queryParams.processCode = undefined),
		(state.queryParams.processName = undefined),
		(state.queryParams.planStartDate = undefined),
		(state.queryParams.planEndDate = undefined),
		(state.queryParams.planNum = undefined),
		(state.queryParams.planNumM = undefined),
		(state.queryParams.finishNum = undefined),
		(state.queryParams.finishNumM = undefined),
		(state.queryParams.producePlanStatus = undefined),
		(state.queryParams.produceOrderProductId = undefined),
		(state.queryParams.factoryCode = undefined),
		(state.queryParams.factoryName = undefined),
		(state.queryParams.productPcsLength = undefined),
		await xGrid.value?.commitProxy('reload');
};

// 打开新增页面
const handleAdd = () => {
	state.title = '添加生产计划';
	editDialogRef.value?.openDialog({ type: 1 });
};

// 打开编辑页面
const handleEdit = (row: any) => {
	state.title = '编辑生产计划';
	editDialogRef.value?.openDialog(row);
};

// 打开打印页面
const handlePrint = async (row: any) => {
	state.title = '打印生产计划';
};

// 删除
const handleDelete = (row: any) => {
	ElMessageBox.confirm(`确定删除生产计划：【${row.title}】?`, '提示', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning',
	})
		.then(async () => {
			await deleteMesProducePlan(row);
			await handleQuery();
			ElMessage.success('删除成功');
		})
		.catch(() => {});
};

// 表格事件
const gridEvents: VxeGridListeners<any> = {
	// 只对 pager-config 配置时有效，分页发生改变时会触发该事件
	async pageChange({ pageSize }) {
		state.localPageParam.pageSize = pageSize;
		Local.set(localPageParamKey, state.localPageParam);
	},
	// 当排序条件发生变化时会触发该事件
	async sortChange({ field, order }) {
		state.localPageParam.defaultSort = { field: field, order: order!, descStr: 'desc' };
		Local.set(localPageParamKey, state.localPageParam);
	},
};
const mesFactoryFactoryCodeDropdownList = ref<any>([]);
const getMesFactoryFactoryCodeDropdownList = async () => {
	let list = await getMesFactoryFactoryCodeDropdown();
	mesFactoryFactoryCodeDropdownList.value = list.data.result ?? [];
};
getMesFactoryFactoryCodeDropdownList();
const chooseWeekProducePlanRef = ref();
const planAdd = () => {
	openAddPlanDialog.value = true;

	addForm.value.weekProducePlanNo= null;
	addForm.value.productCode= null;
	addForm.value.num= null;
	addForm.value.planStartDate= null;
	addForm.value.planEndDate= null;
	addForm.value.factoryCode= null;
	addForm.value.batchNo= null;
	addForm.value.productBomId=null;
	if (mesFactoryFactoryCodeDropdownList.value) {
		addForm.value.factoryCode = mesFactoryFactoryCodeDropdownList.value[0].value;
	}
};
const onShowChooseWeekPlan = () => {
	chooseWeekProducePlanRef.value?.openDialog();
};
const bomTreeData = ref([]);
const bomTreeList = ref([]);
const numData = ref({});
const onWeekPlanChoose = async (item: any) => {
	addForm.value.weekProducePlanNo = item.row.orderCode;
	addForm.value.productCode = item.row.partCode;

	var res = await getBomList({ productCode: item.row.partCode });
	console.log(res);
	var treeData = res.data.result.filter((u: any) => u.pid == 0); //&& u.processList && u.processList.length>0

	treeData.forEach((el: any) => {
		el.value = el.id;
		el.label = `${el.materialName}[${el.materialCode}]`;
		el.disabled = !el.processList || el.processList.length == 0;
		recBom(res.data.result, el);
	});
	bomTreeData.value = treeData;
	bomTreeList.value = res.data.result;

	var numRes = await productNums({ productCode: addForm.value.productCode, weekProducePlanNo: addForm.value.weekProducePlanNo });
	numData.value = numRes.data.result;
};
const recBom = (bomList: any[], row: any) => {
	if (bomList) {
		var list = bomList.filter((u: any) => u.pid == row.productBomId); //&& u.processList && u.processList.length>0
		row.children = list;
		list.forEach((el: any) => {
			el.value = el.id;
			el.label = `${el.materialName}[${el.materialCode}]`;
			el.disabled = !el.processList || el.processList.length == 0;
			recBom(bomList, el);
		});
	}
};
const partMakeNum = ref('');
const onBomChange = async (e: any) => {
	console.log(e);
	addForm.value.productBomId = e;

	var node = bomTreeList.value.find((u: any) => u.id == e);
	var res = await getPartMakeNum({ partCode: node?.materialCode });
	partMakeNum.value = res.data.result;

	var genRes = await genProduceBatchNo({ partCode: node?.materialCode });
	addForm.value.batchNo = genRes.data.result;
};
const addFormRef = ref();
//保存计划
const addPlanSubmit = async () => {
	state.opLoading = true;
	addFormRef.value.validate(async (isValid: boolean, fields?: any) => {
		if (isValid) {
			let values = JSON.parse(JSON.stringify(addForm.value));
			if(!values.planEndDate){
				values.planEndDate = values.planStartDate;
			}
			await createMesProducePlan(values).catch(() => {
				state.opLoading = false;
			});
			state.opLoading = false;
			openAddPlanDialog.value = false;
			handleQuery();
		} else {
			state.opLoading = false;
			ElMessage({
				message: `表单有${Object.keys(fields).length}处验证失败，请修改后再提交`,
				type: 'error',
			});
		}
	});
};
</script>

<style lang="scss" scoped>
:deep(.el-input),
:deep(.el-select),
:deep(.el-input-number) {
	width: 100%;
}
</style>
