<template>
	<el-drawer
		:title="titleMap[mode]"
		v-model="visible"
		:size="'90%'"
		destroy-on-close
		@closed="$emit('closed')"
	>
		<el-container>
			<el-header>
				<el-steps
					:active="active"
					style="width: 100%"
					:align-center="true"
					finish-status="success"
				>
					<el-step
						v-for="(item, index) of stepes"
						:key="index"
						:title="item"
						style="50%"
						@click="handleStep(index)"
					>
					</el-step>
				</el-steps>
			</el-header>
			<!--基本信息!-->
			<el-main class="nopadding" v-if="active === 0">
				<el-form
					ref="dialogForm"
					:model="form"
					:rules="rules"
					label-width="110px"
					style="margin: 40px"
				>
					<el-row>
						<el-col :md="24" :sm="12" :xs="24">
							<el-form-item label="名称" prop="name">
								<el-input
									v-model="form.name"
									type="text"
									clearable
								></el-input>
							</el-form-item>
						</el-col>
						<el-col :md="24" :sm="12" :xs="24">
							<el-form-item label="产品" prop="type">
								<el-select
									v-model="form.material"
									style="width: 100%"
									filterable
								>
									<el-option
										v-for="item in materials"
										:key="item.id"
										:label="item.full_name"
										:value="item.id"
									/>
								</el-select>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :md="24" :sm="12" :xs="24">
							<el-form-item>
								<el-button
									style="margin-top: 20px"
									type="primary"
									:loading="isSaveing"
									:disabled="isSaveing"
									@click="handleNextStep"
									>下一步
								</el-button>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</el-main>

			<!--工序!-->
			<el-main class="nopadding" v-if="active === 1">
				<div class="left-panel" style="margin: 10px">
					<el-button
						type="primary"
						icon="el-icon-plus"
						@click="table_add"
					></el-button>
				</div>
				<scTable
					ref="tables"
					:apiObj="apiObj"
					:query="query"
					:params="query"
					row-key="id"
					hidePagination
					hideDo
					stripe
					style="height: 680px"
				>
					<el-table-column label="排序" prop="sort" width="50">
					</el-table-column>
					<el-table-column label="工序" prop="process_name">
					</el-table-column>
					<el-table-column label="输入" prop="material_in_name">
					</el-table-column>
					<el-table-column label="输出" prop="material_out_name">
					</el-table-column>
					<el-table-column label="出材率" prop="out_rate">
					</el-table-column>
					<el-table-column label="工时" prop="hour_work">
					</el-table-column>
					<el-table-column label="批次校验" prop="batch_bind">
					</el-table-column>
					<el-table-column
						label="操作"
						fixed="right"
						align="center"
						width="200"
					>
						<template #default="scope">
							<el-button
								text
								type="primary"
								size="small"
								@click="table_edit(scope.row)"
								>编辑</el-button
							>
							<el-popconfirm
								title="确定删除该工序吗？"
								@confirm="delWorker(scope.row)"
							>
								<template #reference>
									<el-button text type="danger" size="small"
										>删除</el-button
									>
								</template>
							</el-popconfirm>
						</template>
					</el-table-column>
				</scTable>
				<div style="margin-top: 20px; text-align: center">
					<el-button @click="handleLastStep" style="margin-right: 4px"
						>上一步</el-button
					>
					<el-button
						v-for="item in initForm.transitions"
						:key="item.id"
						type="primary"
						:loading="isSaveing"
						:disabled="isSaveing"
						@click="submitTicketCreate(item.id)"
						style="margin-right: 4px"
						>{{ item.name }}</el-button
					>
					<el-button @click="$emit('closed')" type="warning"
						>退出</el-button
					>
				</div>
			</el-main>
		</el-container>
		<save-dialog
			v-if="dialog.save"
			ref="saveDialog"
			:routepack="routepack"
			@success="handleSaveSuccess"
			@closed="dialog.save = false"
		></save-dialog>
	</el-drawer>
</template>
<script>
import saveDialog from "./route_form.vue";

export default {
	name: "routepack_form",
	components: { saveDialog },
	data() {
		return {
			active: 0,
			stepSuc: [0],
			stepes: ["基本信息", "工艺步骤"],
			titleMap: { add: "新增工艺", edit: "编辑工艺" },
			mode: "add",
			isSaveing: false, //控制基本信息提交
			search: {
				keyword: null,
			},
			dialogTitle: "新增",
			visible: false,
			dialog: {
				save: false,
			},
			form: {
				name: "",
				material: "",
			},
			apiworkerObj: null,
			materials: [],
			apiObj: null,
			query: {
				routepack: "",
			},
			rules: {
				name: [{ required: true, message: "请输入" }],
			},
			routepack: "",
		};
	},
	mounted() {
		this.isSaveing = false;
		this.getInit();
		this.getMaterials();
	},
	methods: {
		open(mode) {
			this.mode = mode;
			this.visible = true;
			return this;
		},
		setData(data) {
			Object.assign(this.form, data);
			console.log("setData this.form", this.form);
		},
		getMaterials() {
			let that = this;
			this.$API.mtm.material.list
				.req({ page: 0, type__in: "10,20", is_hidden: false })
				.then((res) => {
					this.materials = res;
				});
		},
		handleStep(val) {
			//点击步骤条
			if (this.stepSuc.includes(val) === true) {
				this.active = val;
			}
		},
		//组件点击上一步
		handleLastStep() {
			this.active = 0;
		},
		//组件点击下一步
		handleNextStep() {
			let that = this;
			let form = {};
			form.name = that.form.name;
			form.material = that.form.material;
			if (that.form.id) {
				that.$API.mtm.routepack.update
					.req(that.form.id, that.form)
					.then((res) => {
						that.routepack = res.id;
						that.query.routepack = res.id;
						console.log("that.query", that.query);
						that.apiObj = that.$API.mtm.route.list;
						that.active = 1;
						// that.$refs.tables.refresh();
					});
			} else {
				that.$API.mtm.routepack.create.req(form).then((res) => {
					this.active = 1;
					that.routepack = res.id;
				});
			}
		},
		table_add() {
			this.dialog.save = true;
			this.$nextTick(() => {
				this.$refs.saveDialog.open("add");
			});
		},
		table_edit(row) {
			this.dialog.save = true;
			this.$nextTick(() => {
				this.$refs.saveDialog.open("edit").setData(row);
			});
		},
		productClick(data) {
			let materialId = this.selectedProduct.id;
			if (data) {
				this.selectedProduct = data;
				materialId = data.id;
			}
			this.$API.mtm.route.list
				.req({ page: 0, material: materialId })
				.then((res) => {
					this.currentRoute = res;
				});
		},
		submitOut() {},
		//删除工序步骤
		delWorker(row) {
			let that = this;
			that.$API.mtm.route.delete
				.req(row.id)
				.then((res) => {
					that.$message.success("工序步骤删除成功");
					that.$refs.tables.refresh();
					return res;
				})
				.catch((err) => {
					return err;
				});
		},

		//渲染工单提交按钮
		getInit() {
			let that = this;
			that.$API.wf.workflow.initkey.req("routepack").then((res) => {
				that.initForm = res;
			});
		},

		//提交,创建工单
		submitTicketCreate(id) {
			let that = this;
			let ticket = {};
			that.isSaveing = true;
			ticket.title = that.form.name;
			ticket.workflow = that.initForm.workflow;
			ticket.ticket_data = {
				t_id: that.routepack,
			};
			ticket.transition = id;
			that.$API.wf.ticket.create
				.req(ticket)
				.then((res) => {
					that.tLoading = false;
					that.$message.success("提交成功");
					that.$emit("close");
					that.visible = false;
				})
				.catch((e) => {
					that.tLoading = false;
				});
		},

		//本地更新数据
		handleSaveSuccess() {
			this.$refs.tables.refresh();
		},
	},
};
</script>
