﻿<template>
	<div class="mesWeekProducePlan-container">
		<el-dialog v-model="state.isShowDialog" v-if="state.isShowDialog" :width="800" draggable="" :close-on-click-modal="false">
			<template #header>
				<div style="color: #fff">
					<!--<el-icon size="16" style="margin-right: 3px; display: inline; vertical-align: middle"> <ele-Edit /> </el-icon>-->
					<span>{{ props.title }}</span>
				</div>
			</template>
			<el-form :model="state.ruleForm" ref="ruleFormRef" label-width="auto" :rules="rules">
				<el-row :gutter="35">
					<el-form-item v-show="false">
						<el-input v-model="state.ruleForm.id" />
					</el-form-item>
					<!-- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="计划号" prop="orderCode">
							<el-input v-model="state.ruleForm.orderCode" placeholder="请输入计划号" disabled="true" maxlength="50" 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="sourceCode">
							<el-input v-model="state.ruleForm.sourceCode" placeholder="请输入来源计划号" maxlength="50" 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="customerCode">
							<el-input v-model="state.ruleForm.customerCode" placeholder="请输入客户编码" maxlength="50" 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="customerName">
							<el-input v-model="state.ruleForm.customerName" placeholder="请输入客户名称" maxlength="50" 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="产品ERP编码" prop="partCode">
							<el-input v-model="state.ruleForm.partCode" placeholder="请输入产品ERPCode" readonly="true" maxlength="50" 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="partName">
							<el-input v-model="state.ruleForm.partName" placeholder="请输入产品ERP名称" readonly="true" maxlength="50" 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="partModel">
							<el-input v-model="state.ruleForm.partModel" placeholder="请输入产品规格型号" readonly="true" maxlength="150" 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="saleNumber">
							<el-input v-model="state.ruleForm.saleNumber" placeholder="请输入销售未完成数量" readonly="true" maxlength="16" 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="planOrderNumber">
							<el-input v-model="state.ruleForm.planOrderNumber" placeholder="请输入生产未完成数量" readonly="true" maxlength="16" 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="planNumber">
							<el-input v-model="state.ruleForm.planNumber" placeholder="请输入产值数量" maxlength="16" disabled="true" 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="month">
							<el-date-picker v-model="monthvalue" type="month" placeholder="请输入月份" readonly="true" maxlength="32" @change="ChangeTime($event)"  :default-value="new Date(2024,10)" 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="weekLabelfirst" prop="firstWeek">
							<el-input-number v-model="state.ruleForm.firstWeek" min="0" placeholder="请输入第一周" :precision="0" maxlength="16" 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="weekLabeltwo" prop="tuesday">
							<el-input-number v-model="state.ruleForm.tuesday" min="0" placeholder="请输入第二周" :precision="0" maxlength="16" 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="weekLabelthree" prop="threeWeek">
							<el-input-number v-model="state.ruleForm.threeWeek" min="0" placeholder="请输入第三周"  :precision="0"maxlength="16" 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="weekLabelfour" prop="fourWeek">
							<el-input-number v-model="state.ruleForm.fourWeek" min="0" placeholder="请输入第四周" :precision="0" maxlength="16" 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="weekLabelfive" prop="fiveWeek" v-if="weeklabel>4==true">
							<el-input-number v-model="state.ruleForm.fiveWeek" min="0" placeholder="请输入第五周" :precision="0" maxlength="16" 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="sumPlanNuber">
							<el-input v-model="state.ruleForm.sumPlanNuber" placeholder="请输入总计划数" disabled="true" maxlength="16" 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="sumNuber">
							<el-input v-model="state.ruleForm.sumNuber" placeholder="请输入总完成数" disabled="true" maxlength="16" 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="stopState">
							<el-switch v-model="state.ruleForm.stopState" active-text="是" inactive-text="否" />
							
						</el-form-item>
						
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="完工状态" prop="recrdState">
							<el-switch v-model="state.ruleForm.recrdState" active-text="是" inactive-text="否" />
							
						</el-form-item>
						
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="排序" prop="sortCode">
							<el-input-number v-model="state.ruleForm.sortCode" 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="remark">
							<el-input v-model="state.ruleForm.remark"  show-word-limit clearable />
							
						</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="submit">确 定</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>
<style lang="scss" scoped>
:deep(.el-select),
:deep(.el-input-number) {
	width: 100%;
}
</style>
<script lang="ts" setup>
    import { ref,onMounted, reactive } from "vue";
	import { ElMessage } from "element-plus";
	import type { FormRules } from "element-plus";
	import { addMesWeekProducePlan, updateMesWeekProducePlan, detailMesWeekProducePlan } from "/@/api/simple/mesWeekProducePlan";
	import { pageMesWeekProducePlan, deleteMesWeekProducePlan } from '/@/api/simple/mesWeekProducePlan';

  	import { formatDate } from '/@/utils/formatTime';
	  const monthvalue=ref(new Date());
	//父级传递来的参数
	var props = defineProps({
		title: {
		type: String,
		default: "",
	},
	});
	//父级传递来的函数，用于回调
	const emit = defineEmits(["reloadTable"]);
	const ruleFormRef = ref();
    const state = reactive({
    isShowDialog: false,
    ruleForm: {} as any,
});

	//自行添加其他规则
	const rules = ref<FormRules>({
		firstWeek: [{required: true, message: '第一周值不可以为空！', trigger: 'blur',},],
		tuesday: [{required: true, message: '第二周值不可以为空！', trigger: 'blur',},],
		threeWeek: [{required: true, message: '第三周值不可以为空！', trigger: 'blur',},],
		fourWeek: [{required: true, message: '第四周值不可以为空！', trigger: 'blur',},],
		fiveWeek: [{required: true, message: '第五周值不可以为空！', trigger: 'blur',},],
	});

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

	});

	// 打开弹窗
	const openDialog = async (row: any) => {
		// state.ruleForm = JSON.parse(JSON.stringify(row));
		// 改用detail获取最新数据来编辑
		let rowData = JSON.parse(JSON.stringify(row));
		if (rowData.id)
	    {
			state.ruleForm = (await detailMesWeekProducePlan(rowData.id)).data.result;
	    	monthvalue.value=new Date(state.ruleForm.month+"-01");
			state.ruleForm.saleNumber=rowData.saleNumber;
			state.ruleForm.planOrderNumber=rowData.planOrderNumber;
	    }
		else
			state.ruleForm = rowData;
		state.isShowDialog = true;
		ChangeTime(monthvalue.value);
	};

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

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

	// 提交
	const submit = async () => {
		ruleFormRef.value.validate(async (isValid: boolean, fields?: any) => {
			if (isValid) {
				let values = state.ruleForm;
				const data=new Date();
				var date=data.getFullYear()+"-"+('0' + (data.getMonth() + 1)).slice(-2)+"-1";
				if(monthvalue.value<new Date(date))
			    {
			    	return ElMessage({
                     message: `不可以创建或修改当前月之前的周生产计划！`,
                     type: "error",
                    });
			    }
				var monthvalues=monthvalue.value.getFullYear()+"-"+('0' + (monthvalue.value.getMonth() + 1)).slice(-2);
				state.ruleForm.month=monthvalues;
				// if(parseFloat(state.ruleForm.sumPlanNuber)*1.1<(parseFloat(state.ruleForm.firstWeek)+parseFloat(state.ruleForm.tuesday)+parseFloat(state.ruleForm.threeWeek)+parseFloat(state.ruleForm.fourWeek)+parseFloat(state.ruleForm.fiveWeek)))
				// {
				// 		ElMessage({
				// 	        message: `周总计划数量不可以超过产品预投未完工数上限10%`,
				// 	        type: "error",
			    //            	});
				// }
				// else
				// {
					if (state.ruleForm.id == undefined || state.ruleForm.id == null || state.ruleForm.id == "" || state.ruleForm.id == 0) {
					    await addMesWeekProducePlan(values);
						closeDialog();
				    } else {
					    //await updateMesWeekProducePlan(values);
						var result=(await updateMesWeekProducePlan(values)).data.result;
					if(result=="修改成功")
					 closeDialog();
					else
					{
						ElMessage({
					message: `${result}`,
					type: "error",
				});
					}
				    } 
				//}
			} else {
				ElMessage({
					message: `表单有${Object.keys(fields).length}处验证失败，请修改后再提交`,
					type: "error",
				});
			}
		});
	};


	const weekLabelfirst=ref();//第一周label变量
	const weekLabeltwo=ref();//第二周label变量
	const weekLabelthree=ref();//第三周label变量
	const weekLabelfour=ref();//第四周label变量
	const weekLabelfive=ref();//第五周label变量
	const weeklabel=ref();
	//日期事件
	const ChangeTime = (val)=>{
	  //debugger
	  //获取月份的年和月
      var monthvalues=monthvalue.value.getFullYear()+"-"+('0' + (monthvalue.value.getMonth() + 1)).slice(-2);
	  //获取当前月份所有天数
	  const daysInMonth = new Date(monthvalue.value.getFullYear(), (monthvalue.value.getMonth() + 1), 0).getDate();
	  const sundaysInMonth = [];//数组接收需要的所有周
	  //循环当前月所有天	 
      for (let day = 1; day <= daysInMonth; day++) {
        const date = new Date(monthvalue.value.getFullYear(), monthvalue.value.getMonth(), day);//取当前日期
        if (date.getDay() === 0) { // 0 表示周日
			//取本月的周日
	        var last=('0' + (date.getMonth() + 1)).slice(-2)+"."+('0' + (date.getDate())).slice(-2);
			//取本月周日对应的周一事件
			const da = new Date(date);
			da.setDate(date.getDate() - 6);
			//值取月和日
			var first=('0' + (da.getMonth() + 1)).slice(-2)+"."+('0' + (da.getDate())).slice(-2);

            sundaysInMonth.push(first+"-"+last);
        }
      }
	  weeklabel.value=sundaysInMonth.length;
	  if(sundaysInMonth.length<=4)
	  {
		weekLabelfirst.value=sundaysInMonth[0];
		weekLabeltwo.value=sundaysInMonth[1];
		weekLabelthree.value=sundaysInMonth[2];
		weekLabelfour.value=sundaysInMonth[3];
	  }
	  else{
		weekLabelfirst.value=sundaysInMonth[0];
		weekLabeltwo.value=sundaysInMonth[1];
		weekLabelthree.value=sundaysInMonth[2];
		weekLabelfour.value=sundaysInMonth[3];
		weekLabelfive.value=sundaysInMonth[4];
	  }

	}

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




