<!--
 * @Author: zwq
 * @Date: 2021-11-18 14:16:25
 * @LastEditors: DY
 * @LastEditTime: 2024-03-22 08:53:20
 * @Description:
-->
<template>
	<el-drawer
		:visible.sync="visible"
		:show-close="false"
		:wrapper-closable="true"
		class="drawer"
		size="55%"
		:before-close="beforeClose"
		@closed="$emit('destroy')"
		>
		<small-title slot="title" :no-padding="true">
			{{ '分配产量' }}
		</small-title>
		<div class="content">
			<div class="formContent">
				<el-form :model="dataForm" ref="dataForm" label-width="120px" label-position="top" class="demo-ruleForm" :rules="rules">
					<el-row :gutter="20">
						<el-col :span="8">
							<el-form-item label="工单名称" prop="name">
								<!-- <el-input v-model="dataForm.name" autocomplete="off"></el-input> -->
								<span>{{ dataForm.name }}</span>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="工单编码" prop="code">
								<span>{{ dataForm.code }}</span>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="产品名称" prop="productName">
								<span>{{ dataForm.productName }}</span>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col :span="8">
							<el-form-item label="产品规格" prop="specifications">
								<span>{{ dataForm.specifications }}</span>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="实际生产数量" prop="actualQuantity">
								<el-input v-model.number="dataForm.actualQuantity" autocomplete="off" style="width: 80%" />
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="实际生产完成时间" prop="finishProduceTime">
								<el-date-picker
									v-model="dataForm.finishProduceTime"
									type="datetime"
									value-format="timestamp"
									placeholder="选择实际生产完成时间" />
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</div>

			<div v-show="!isdetail" class="attr-list">
				<!-- <el-button v-show="!isdetail" type="success" size="small" style="float: right" @click="addRow()">添加一行</el-button> -->
				<el-form ref="tableForm" :model="form" style="padding: 0">
					<el-table
						ref="table"
						:data="form.tableData"
						row-key="id"
						style="width: 100%">
						<el-table-column type="index" label="序号" />
						<el-table-column prop="orderName" label="订单名称" />
						<el-table-column prop="orderCode" label="订单编码" />
						<el-table-column prop="priority" label="优先级" />
						<el-table-column prop="planAssignmentQuantity" label="计划分配数量" >
							<template slot-scope="scope">
								<el-form-item prop="planAssignmentQuantity">
									<el-input v-model.number="scope.row.planAssignmentQuantity" :disabled="scope.row.isallocation"></el-input>
								</el-form-item>
							</template>
						</el-table-column>
						<el-table-column label="*实际分配数量">
							<template slot-scope="scope">
								<el-form-item :prop="`tableData.${scope.$index}.actualAssignmentQuantity`" :rules="[{ required: true, message: '实际分配数量不能为空', trigger: 'blur' }]">
									<el-input v-model.number="scope.row.actualAssignmentQuantity" :disabled="scope.row.isallocation"></el-input>
								</el-form-item>
							</template>
						</el-table-column>
						<!-- <el-table-column label="操作">
							<template slot-scope="scope">
								<el-button type="text" size="small" @click="saveData(scope.row)">保存</el-button>
							</template>
						</el-table-column> -->
					</el-table>
				</el-form>
				<pagination
					v-show="listQuery.total > 0"
					:total="listQuery.total"
					:page.sync="listQuery.pageNo"
					:limit.sync="listQuery.pageSize"
					:page-sizes="[5, 10, 15]"
					@pagination="getList" />
			</div>

			<div class="drawer-body__footer">
				<el-button style="" @click="goback()">取消</el-button>
				<!-- <el-button v-if="isdetail" type="primary" @click="goEdit()">
					编辑
				</el-button> -->
				<el-button type="primary" @click="dataFormSubmit()">确定</el-button>
			</div>
		</div>

		<!-- <attr-add
			v-if="addOrUpdateVisible"
			ref="addOrUpdate"
			:material-id="dataForm.id"
			@refreshDataList="getList" /> -->
	</el-drawer>
</template>

<script>
import basicAdd from '../../core/mixins/basic-add';
import { getConOrderList, updateConCoreWOr, updateBatchConCoreWOr, getCoreWO, statusChange } from '@/api/base/coreWorkOrder';
import SmallTitle from '../material/SmallTitle';
// import { parseTime } from '../../core/mixins/code-filter';
// import attrAdd from './attr-add';

export default {
	mixins: [basicAdd],
	components: { SmallTitle },
	data() {
		return {
			addOrUpdateVisible: false,
			urlOptions: {
				infoURL: getCoreWO,
			},
			listQuery: {
				pageSize: 10,
				pageNo: 1,
				total: 0,
			},
			dataForm: {
        id: undefined,
        code: undefined,
        productId: '',
        remark: undefined,

			},
			form: {
				tableData: []
			},
			productList: [],
			materialAttrList: [],
			materialList: [],
			tableData: [],
			visible: false,
			isdetail: false,
			idAttrShow: false,
			rules: {
        name: [{ required: true, message: "工单名称不能为空", trigger: "blur" }],
        finishProduceTime: [{ required: true, message: "实际生产完成时间不能为空", trigger: "change" }]
      },
		};
	},
	mounted() {},
	methods: {
		beforeClose(done) {
			// if (this.mode.includes('edit')) {
			this.$confirm('确认关闭？')
				.then(_ => {
					done();
				})
				.catch(_ => {});
		},
		// 表单提交
    dataFormSubmit() {
			// console.log('嗨害嗨', this.$refs['table'])
			console.log('nihc ', this.form.tableData)
			// this.$refs['tableForm'].validate((valid) => {
      //   if (valid) {
      //     alert('提交成功!');
      //   } else {
      //     alert('表单验证失败!');
      //     return false;
      //   }
      // });
      this.$refs["dataForm"].validate((valid) => {
        if (!valid) {
          return false;
        }
				this.$refs['tableForm'].validate((valid) => {
					if (!valid) {
						return false;
					}
					// 修改的提交
					console.log('aaaaaaa', this.form.tableData)
					// 判断分配数量
					let num = 0
					const tempList = this.form.tableData.map((item) => {
						item.workOrderId = this.dataForm.id
						num += item.actualAssignmentQuantity
						return item
					})
					if (num <= this.dataForm.actualQuantity) {
						if (this.dataForm.id) {
							statusChange({
								id: this.dataForm.id,
								status: 4,
								finishProduceTime: this.dataForm.finishProduceTime,
								actualQuantity: this.dataForm.actualQuantity
							}).then(response => {
								this.$modal.msgSuccess("操作成功！工单状态稍后将会更新！");
								this.saveData(tempList)
								this.visible = false;
								this.$emit("refreshDataList");
							});
							return;
						}
					} else {
						this.$message.error('实际分配数量超过实际生产数量！')
					}
					console.log('2111', num, tempList)
				});
        // 修改的提交
        // if (this.dataForm.id) {
        //   statusChange({
				// 		id: this.dataForm.id,
				// 		status: 4,
				// 		finishProduceTime: this.dataForm.finishProduceTime,
				// 		actualQuantity: this.dataForm.actualQuantity
				// 	}).then(response => {
        //     this.$modal.msgSuccess("操作成功！工单状态稍后将会更新！");
        //     this.visible = false;
        //     this.$emit("refreshDataList");
        //   });
        //   return;
        // }
        // 添加的提交
        // this.urlOptions.createURL(this.dataForm).then(response => {
        //   this.$modal.msgSuccess("新增成功");
        //   this.visible = false;
        //   this.$emit("refreshDataList");
        // });
      });
    },
		initData() {
			// this.materialAttrList.splice(0);
			this.listQuery.total = 0;
		},
		edit(row) {
			row.isEdit = true
		},
		saveData(list) {
			console.log('你好', list)
			// 修改的提交
			updateBatchConCoreWOr(list).then((response) => {
				this.$modal.msgSuccess('分配成功');
				// this.visible = false;
				this.getList();
			});
		},
		getList() {
			// 获取工单分配详细列表
			getConOrderList({
				...this.listQuery,
				workOrderId: this.dataForm.id
			}).then((response) => {
				this.tableData = response.data.map(item => {
					item.isEdit = false
					item.isallocation = item.actualAssignmentQuantity ? true : false
					return item
				});
				this.$set(this.form, 'tableData', this.tableData)
				this.listQuery.total = response.data.length;
			});
		},
		// 构造一行
		// addRow() {
		// 	const row = {
		// 		bomId: this.dataForm.id,
		// 		materialId: '',
		// 		num: 0,
		// 		materialCode: undefined,
		// 		unit: undefined,
		// 		remark: '',
		// 		isEdit: true
		// 	}
		// 	this.tableData.push(row)
		// },
		init(id, isdetail) {
			this.initData();
			this.isdetail = isdetail || false;
			this.dataForm.id = id || undefined;
			this.visible = true;
			// if (id) {
			// 	this.idAttrShow = true
			// } else {
			// 	this.idAttrShow = false
			// }

			this.$nextTick(() => {
				// this.$refs['dataForm'].resetFields();

				if (this.dataForm.id) {
					// 获取工单详情
					this.urlOptions.infoURL(id).then(response => {
            this.dataForm = response.data;
          });
					// 获取工单订单明细
					this.getList();
				} else {}
			});
		},
		goback() {
			this.$emit('refreshDataList');
			this.visible = false;
			// this.initData();
		},
		goEdit() {
			this.isdetail = false;
		},
		// 新增 / 修改
		addNew(id) {
			this.addOrUpdateVisible = true;
			this.$nextTick(() => {
				this.$refs.addOrUpdate.init(id);
			});
		}
	}
};
</script>
<style scoped>
/* .item .el-form-item__label {
	color: red;
} */
.drawer >>> .el-drawer {
	border-radius: 8px 0 0 8px;
	display: flex;
	flex-direction: column;
}

.drawer >>> .el-form-item__label {
	padding: 0;
	font-weight: 600;
}

.drawer >>> .el-drawer__header {
	margin: 0;
	padding: 32px 32px 24px;
	border-bottom: 1px solid #dcdfe6;
}
.drawer >>> .el-drawer__body {
	flex: 1;
	height: 1px;
	display: flex;
	flex-direction: column;
}

.drawer >>> .content {
	padding: 30px 24px;
	flex: 1;
	display: flex;
	flex-direction: column;
	/* height: 100%; */
}

.drawer >>> .visual-part {
	flex: 1 auto;
	max-height: 30vh;
	overflow: hidden;
	overflow-y: scroll;
	padding-right: 10px; /* 调整滚动条样式 */
}

.drawer >>> .el-form,
.drawer >>> .attr-list {
	padding: 0 16px;
}

.drawer-body__footer {
	display: flex;
	justify-content: flex-end;
	padding: 18px;
}
.formContent {
	font-size: 16px;
	line-height: 1.5;
	margin-bottom: 10px;
	width: 100%;
}
.blodTip {
	height: 16px;
	font-size: 14px;
	font-weight: 600;
	color: rgba(0,0,0,0.85);
	margin-bottom: 8px;
}
.lightTip {
	/* height: 16px; */
	font-size: 14px;
	font-weight: 400;
	color: rgba(102,102,102,0.75);
	margin-bottom: 12px;
}
</style>
