<template>
	<el-form
		ref="dataForm"
		:rules="rules"
		label-width="130px"
		:model="dataForm"
		label-position="top">
		<el-row :gutter="20">
			<el-col :span="8">
				<el-form-item label="工单名称" prop="name">
					<el-input
						v-model="dataForm.name"
						placeholder="请输入工单名称"></el-input>
				</el-form-item>
			</el-col>
			<el-col :span="8">
				<el-form-item label="工单编码" prop="code">
					<el-input
						v-model="dataForm.code"
						disabled
						placeholder="请输入工单编码"></el-input>
				</el-form-item>
			</el-col>
			<el-col :span="8">
				<el-form-item label="产品名称" prop="planProductId">
					<el-select
						v-model="dataForm.planProductId"
						placeholder="请选择产品"
						style="width: 100%"
						filterable
						@change="selectProduct">
						<el-option
							v-for="item in productList"
							:key="item.id"
							:label="item.name"
							:value="item.id"></el-option>
					</el-select>
				</el-form-item>
			</el-col>
		</el-row>
		<el-row :gutter="20">
			<el-col :span="8">
				<el-form-item label="产品规格" prop="specifications">
					<el-input
						v-model="dataForm.specifications"
						placeholder="请输入产品规格"
						disabled/>
				</el-form-item>
			</el-col>
			<el-col :span="8">
				<el-form-item label="计划开始时间">
					<el-date-picker
						v-model="dataForm.planStartTime"
						type="datetime"
						value-format="timestamp"
						style="width: 100%"
						placeholder="请选择计划开始时间"></el-date-picker>
				</el-form-item>
			</el-col>
			<el-col :span="8">
				<el-form-item label="计划完成时间">
					<el-date-picker
						v-model="dataForm.planFinishTime"
						type="datetime"
						value-format="timestamp"
						style="width: 100%"
						placeholder="请选择计划完成时间"></el-date-picker>
				</el-form-item>
			</el-col>
		</el-row>
		<el-row :gutter="20">
			<el-col :span="8">
				<el-form-item label="计划投入数量" prop="planAssignQuantity">
					<el-input-number
						v-model="dataForm.planAssignQuantity"
						:min="0"
						:max="9999999999999"
						style="width: 100%"
						placeholder="请输入计划投入数量"></el-input-number>
				</el-form-item>
			</el-col>
			<el-col :span="8">
				<el-form-item label="计划生产数量" prop="planQuantity">
					<el-input-number
						v-model="dataForm.planQuantity"
						:min="0"
						:max="9999999999999"
						style="width: 100%"
						placeholder="请输入计划生产数量"></el-input-number>
				</el-form-item>
			</el-col>
			<el-col :span="8">
				<el-form-item label="优先级" prop="priority">
					<el-select
						v-model="dataForm.priority"
						placeholder="请选择优先级"
						style="width: 100%">
						<el-option
							v-for="item in getDictDatas(DICT_TYPE.ORDER_PRIORITY)"
							:key="item.value"
							:label="item.label"
							:value="item.value"></el-option>
					</el-select>
				</el-form-item>
			</el-col>
		</el-row>
		<el-row :gutter="20">
			<el-col :span="8">
				<el-form-item label="工单类型" prop="type">
					<el-select
						v-model="dataForm.type"
						placeholder="请选择工单类型"
						style="width: 100%">
						<el-option
							v-for="item in workOrderTypeList"
							:key="item.id"
							:label="item.name"
							:value="item.id"></el-option>
					</el-select>
				</el-form-item>
			</el-col>
			<el-col :span="8">
				<el-form-item label="负责部门" prop="deptId">
					<el-select
						v-model="dataForm.deptId"
						placeholder="请选择负责部门"
						style="width: 100%">
						<el-option
							v-for="item in deptList"
							:key="item.id"
							:label="item.name"
							:value="item.id"></el-option>
					</el-select>
				</el-form-item>
			</el-col>
			<el-col :span="8">
				<el-form-item label="负责人" prop="workers">
					<el-input
						v-model="dataForm.workers"
						placeholder="请输入负责人"></el-input>
				</el-form-item>
			</el-col>
		</el-row>
		<el-row :gutter="20">
			<el-col :span="12">
				<span class="add-type">物料计算方式</span>
				<el-radio-group
					v-model="dataForm.materialMethod"
					@change="materialMethodChange">
					<el-radio :label="1">产品基础BOM</el-radio>
					<el-radio :label="2">工艺扩展BOM</el-radio>
				</el-radio-group>
			</el-col>
		</el-row>
		<div v-if="dataForm.materialMethod === 1">
			<el-row :gutter="20">
				<el-col :span="24">
					<span style="margin: 8px 0;" class="add-type">关联产线</span>
					<el-button style="margin-left: 20px" type="text" @click="addBind">
						新增
					</el-button>
				</el-col>
			</el-row>
			<el-row
				:gutter="20"
				v-for="(item, index) in dataForm.productLineIds"
				:key="index + 'line'"
				style="margin-bottom: 8px">
				<el-col :span="8">
					<el-select
						v-model="item.lineId"
						placeholder="请选择产线"
						style="width: 100%">
						<el-option
							v-for="item in productLineList"
							:key="item.id"
							:label="item.name"
							:value="item.id"></el-option>
					</el-select>
				</el-col>
				<el-col :span="8">
          <el-tooltip effect="dark" content="该产线分配生产数量" placement="top-end">
					<el-input-number
						style="width: 100%"
						v-model="item.num"
						placeholder="请输入数量"
						:step="1"
						:min="0"
						step-strictly />
            </el-tooltip>
				</el-col>
			</el-row>
		</div>
		<div v-else>
			<el-row :gutter="20">
				<el-col :span="24">
					<span style="margin: 8px 0; display: inline-block">
						关联产线及工艺
					</span>
					<el-button style="margin-left: 20px" type="text" @click="addBind">
						新增
					</el-button>
				</el-col>
			</el-row>
			<el-row
				:gutter="20"
				v-for="(item, index) in dataForm.productLineIds"
				:key="index + 'process'"
				style="margin-bottom: 8px">
				<el-col :span="8">
					<el-select
						v-model="item.lineId"
						placeholder="请选择产线"
						style="width: 100%"
						@change="processLineIdChange">
						<el-option
							v-for="item in productLineList"
							:key="item.id"
							:label="item.name"
							:value="item.id"></el-option>
					</el-select>
				</el-col>
				<el-col :span="8">
					<el-select
						v-model="item.processId"
						placeholder="请选择工艺"
						filterable
						style="width: 100%">
						<el-option
							v-for="item in processFlowList"
							:key="item.id"
							:label="item.name"
							:value="item.id"></el-option>
					</el-select>
				</el-col>
				<el-col :span="8">
          <el-tooltip effect="dark" content="该产线分配生产数量" placement="top-end">
					<el-input-number
						style="width: 100%"
						v-model="item.num"
						:step="1"
						:min="0"
						step-strictly />
          </el-tooltip>
				</el-col>
			</el-row>
		</div>
	</el-form>
</template>
<script>
import { getProductList } from '@/api/base/product';
import { getProcessFlowPage, workOrderList } from '@/api/base/orderManage';
import {
	createCoreWO,
	updateCoreWO,
	getCode,
	getCoreWO,
} from '@/api/base/coreWorkOrder';
import { getLineAll } from '@/api/base/productionLine';
import basicAdd from '../../core/mixins/basic-add';
import { listDept } from '@/api/system/dept';
export default {
	name: 'AddWorkOrder',
	mixins: [basicAdd],
	data() {
		return {
			urlOptions: {
				isGetCode: true,
				codeURL: getCode,
				createURL: createCoreWO,
				updateURL: updateCoreWO,
				infoURL: getCoreWO,
			},
			dataForm: {
				id: undefined,
				workOrderId: '',
				name: '',
				code: '',
				deptId: undefined,
				planProductId: '',
				specifications: '',
				planStartTime: '',
				planFinishTime: '',
				planAssignQuantity: 0,
				planQuantity: 0,
				materialMethod: 1,
				triggerOrigin: 1,
				priority: '',
				productLineIds: [{ lineId: null, processId: null, num: null }],
				type: '',
				workers: '',
				status: 1,
			},
			rules: {
				name: [
					{ required: true, message: '工单名称不能为空', trigger: 'blur' },
				],
				planProductId: [
					{ required: true, message: '产品名称不能为空', trigger: 'change' },
				],
				planAssignQuantity: [
					{ required: true, message: '计划投入数量不能为空', trigger: 'blur' },
				],
				planQuantity: [
					{ required: true, message: '计划生产数量不能为空', trigger: 'blur' },
				],
				deptId: [
					{ required: true, message: '负责部门不能为空', trigger: 'change' },
				],
			},
			productList: [],
			processFlowList: [],
			productLineList: [],
			deptList: [],
			workOrderTypeList: [
				{ id: 1, name: '普通' },
				{ id: 2, name: '特殊' },
			],
			workOrderList: [],
		};
	},
	mounted() {
		this.getDict();
	},
	methods: {
		// 工艺变更
		materialMethodChange(val) {
			console.log(val);
			this.processFlowList = [];
			this.dataForm.productLineIds = [];
			const obj = { lineId: null, processId: null, num: null };
			this.dataForm.productLineIds.push(obj);
		},
		// 产线工艺关联
		processLineIdChange(val) {
			const params = {
				pageNo: 1,
				pageSize: 100,
				lineId: val,
			};
			// 工艺
			getProcessFlowPage(params).then((res) => {
				this.processFlowList = res.data.list || [];
				console.log(this.processFlowList);
			});
		},
		init(id) {
			this.dataForm.id = id || '';
			this.visible = true;
			if (this.urlOptions.getOption) {
				this.getArr();
			}
			this.$nextTick(() => {
				this.$refs['dataForm'].resetFields();
				this.dataForm.planStartTime = '';
				this.dataForm.planFinishTime = '';
				this.dataForm.productLineIds = [{ lineId: null, processId: null, num: null }];
				if (this.dataForm.id) {
					getCoreWO(id).then((response) => {
						this.dataForm = response.data;
						this.dataForm.planStartTime = response.data.planStartTime ? response.data.planStartTime : '';
						this.dataForm.planFinishTime = response.data.planFinishTime ? response.data.planFinishTime : '';
						if (this.dataForm.priority !== undefined) {
							this.dataForm.priority = String(this.dataForm.priority);
						}
						this.dataForm.priority;
						// 根据产线获取工艺
						if (this.dataForm.materialMethod === 2) {
							this.dataForm.productLineIds.forEach((item) => {
								if (item.lineId) {
									this.processLineIdChange(item.lineId);
								}
							})
						}
					});
				} else {
					if (this.urlOptions.isGetCode) {
						this.getCode();
					}
				}
			});
		},
		// 表单提交
		dataFormSubmit() {
			this.$refs['dataForm'].validate((valid) => {
				if (!valid) {
					return false;
				}
				let isContinue = true;
				if (this.dataForm.materialMethod === 1) {
					this.dataForm.productLineIds.forEach((item) => {
						if (!item.lineId) {
							this.$message('关联产线不能为空');
							isContinue = false;
						}
					});
				} else {
					this.dataForm.productLineIds.forEach((item) => {
						if (!item.lineId || !item.processId) {
							this.$message('关联产线及工艺不能为空');
							isContinue = false;
						}
					});
				}
				// 修改的提交
				if (this.dataForm.id && isContinue) {
					this.urlOptions.updateURL(this.dataForm).then((response) => {
						this.$modal.msgSuccess('修改成功');
						this.visible = false;
						this.$emit('refreshDataList');
					});
					return;
				}
				// 添加的提交
				if (isContinue) {
					this.urlOptions.createURL(this.dataForm).then((response) => {
						this.$modal.msgSuccess('新增成功');
						this.visible = false;
						this.$emit('refreshDataList');
					});
				}
			});
		},
		getCode() {
			this.urlOptions
				.codeURL()
				.then(({ data: res }) => {
					this.dataForm.code = res;
				})
				.catch(() => {});
		},
		getDict() {
			// 产品
			getProductList().then((res) => {
				this.productList = res.data || [];
			});
			// 产线
			getLineAll().then((res) => {
				this.productLineList = res.data || [];
			});
			listDept().then((res) => {
				this.deptList = res.data || [];
			});
			// 工单list
			workOrderList({
				status: 1,
			}).then((res) => {
				this.workOrderList = res.data || [];
			});
		},
		// 选产品带出规格
		selectProduct(val) {
			if (val) {
				this.productList.map((item) => {
					if (val === item.id) {
						this.dataForm.specifications = item.specifications;
					}
				});
			} else {
				this.dataForm.specifications = '';
			}
		},
		addBind() {
			const obj = { lineId: null, processId: null, num: null };
			this.dataForm.productLineIds.push(obj);
		},
	},
};
</script>
<style scoped>
.add-type {
	margin: 0 20px 15px 0;
	display: inline-block;
}
.add-type::before {
	content: '*';
	color: #ff4949;
	margin-right: 4px;
}
</style>
