<template>
	<el-container>
		<el-header>
			<div class="left-panel">
				<el-button type="primary" icon="el-icon-plus" @click="add">新建工艺</el-button>
				<el-select
					v-model="query.state"
					placeholder="审批状态"
					@change="handleQuery"
					style="margin-left: 2px; width: 150px"
					clearable
				>
					<el-option
						v-for="item in stateOptions"
						:key="item.value"
						:label="item.label"
						:value="item.value"
					></el-option>
				</el-select>
			</div>
			<div class="right-panel">
				<el-input
					v-model="query.search"
					placeholder="名称"
					clearable
					@keyup.enter="handleQuery"
				></el-input>
				<el-button
					type="primary"
					icon="el-icon-search"
					@click="handleQuery"
				></el-button>
			</div>
		</el-header>
		<el-main class="nopadding">
			<scTable
				ref="table"
				:apiObj="apiObj"
				:params="params"
				row-key="id"
				stripe
				@resetQuery="resetQuery"
			>
				<el-table-column
					label="#"
					type="index"
					fixed="left"
					width="50"
				></el-table-column>
				<el-table-column
					label="名称"
					prop="name"
					fixed="left"
					:show-overflow-tooltip="true"
				></el-table-column>
				<el-table-column label="产品" prop="material_name">
				</el-table-column>
				<el-table-column label="审批状态">
					<template #default="scope">
						<el-tag :type="getType(scope.row.state)">
							{{ state_[scope.row.state] }}
						</el-tag>
					</template>
				</el-table-column>
				<el-table-column
					label="创建人"
					prop="create_by_name"
				></el-table-column>
				<el-table-column
					label="创建时间"
					prop="create_time"
				></el-table-column>
				<el-table-column
					label="操作"
					fixed="right"
					align="center"
					width="180"
				>
					<template #default="scope">
						<el-button
							link
							type="primary"
							size="small"
							v-if="scope.row.state == 10"
							@click="table_edit(scope.row, scope.$index)"
							>继续编辑
						</el-button>
						<el-button
							link
							type="primary"
							size="small"
							v-if="scope.row.state != 10"
							@click="table_show(scope.row, scope.$index)"
							>查看
						</el-button>
						<el-button
							link
							type="success"
							size="small"
							v-if="scope.row.state == 30"
							@click="table_copy(scope.row)"
							>复制
						</el-button>
						<el-button
							link
							type="success"
							size="small"
							@click="table_state(scope.row)"
							>更改状态
						</el-button>
						<el-popconfirm
							v-if="scope.row.state == 10"
							title="确定删除吗？"
							@confirm="table_del(scope.row, scope.$index)"
						>
							<template #reference>
								<el-button link type="danger" size="small"
									>删除</el-button
								>
							</template>
						</el-popconfirm>
						<!-- <el-link :underline="false"  type="primary" 
							@click="handleWatch(scope.row)"
						>流程图</el-link> -->
					</template>
				</el-table-column>
			</scTable>
		</el-main>
	</el-container>
	<el-dialog title="复制工艺" v-model="dialogVisible">
        <el-form ref="dialogForm" :model="form" :rules="rules" label-position="right" label-width="80px">
            <el-row>
				<el-col>
					<el-form-item label="名称" prop="new_name">
						<el-input
							v-model="form.new_name"
							type="text"
							clearable
						></el-input>
					</el-form-item>
				</el-col>
				<el-col>
					<el-form-item label="原料" prop="material_in">
						<el-select
							v-model="form.material_in"
							style="width: 100%"
							filterable
						>
							<el-option
								v-for="item in materialIn"
								:key="item.id"
								:label="item.full_name"
								:value="item.id"
							/>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col>
					<el-form-item label="产品" prop="material_out">
						<el-select
							v-model="form.material_out"
							style="width: 100%"
							filterable
						>
							<el-option
								v-for="item in materialOut"
								:key="item.id"
								:label="item.full_name"
								:value="item.id"
							/>
						</el-select>
					</el-form-item>
				</el-col>
            </el-row>
        </el-form>
        <template #footer>
            <el-button type="primary" :loading="isSaveing" @click="form_save">保存</el-button>
            <el-button @click="dialogVisible = false">取消</el-button>
        </template>
    </el-dialog>
	<save-dialog
		v-if="dialog.save"
		ref="saveDialog"
		@success="handleSaveSuccess"
		@closed="saveClose"
	>
	</save-dialog>
	<el-drawer
	    v-model="dialog.show"
		title="查看"
		:size="'90%'"
		destroy-on-close
		@closed="dialog.show = false"
		:close-on-click-modal="false"
	>
	<show-dialog ref="showDialog"></show-dialog>
	</el-drawer>
	
</template>
<script>
import saveDialog from "./routepack_form.vue";
import showDialog from "./route_show.vue";
export default {
	name: "route",
	components: {
		saveDialog,
		showDialog,
	},
	data() {
		return {
			dialog: {
				save: false,
				edit: false,
				show: false,
			},
			adminform: {
				username: "",
			},
			routepack: "",
			apiObj: this.$API.mtm.routepack.list,
			params: {
				need_route: true,
			},
			query: {},
			userId: "",
			selection: [],
			search: {
				search: "",
				keyword: null,
			},
			form:{
				routepack:"",
				new_name:"",
				material_in:"",
				material_out:""
			},
			rules: {
				new_name:[{required: true,message: "请填写新工艺名称",trigger: "blur"}],
				material_in:[{required: true,message: "请选择新工艺所用原料",trigger: "blur"}],
				material_out:[{required: true,message: "请选择新工艺最终产品",trigger: "blur"}],
			},
			nodes:[],
			edges:[],
			timeRange: [],
			materialIn: [],
			materialOut: [],
			filteType: "all",
			stateOptions: [
				{
					label: "创建中",
					value: 10,
				},
				{
					label: "审批中",
					value: 20,
				},
				{
					label: "已确认",
					value: 30,
				},
			],
			state_: {
				10: "创建中",
				20: "审批中",
				30: "已确认",
			},
			filterType: "all",
			isSaveing:false,
			limitedWatch:false,
			dialogVisible:false,
		};
	},
	mounted() {
		let userInfo = this.$TOOL.data.get("USER_INFO");
		this.userId = userInfo.id;
		this.getMaterialIn();
		this.getMaterialOut();
	},
	methods: {
		getMaterialIn() {
			let that = this;
			that.$API.mtm.material.list.req({ page: 0, type__in: "20,30",is_hidden: false}).then((res) => {
				that.materialIn = res;
			});
		},
		getMaterialOut() {
			let that = this;
			that.$API.mtm.material.list.req({ page: 0, type__in: "10,20",is_hidden: false}).then((res) => {
				that.materialOut = res;
			});
		},
		getType(state) {
			if (state == 10) {
				return "warning";
			} else if (state == 20) {
				return "primary";
			} else if (state == 30) {
				return "success";
			}
		},
		//添加
		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);
			});
		},
		//查看
		table_show(row) {
			this.dialog.show = true;
			this.$nextTick(() => {
				this.$refs.showDialog.open().setData(row);
			});
		},
		saveClose() {
			this.$refs.table.refresh();
			this.dialog.save = false;
		},
		//复制
		table_copy(row){
			let that = this;
			that.form.routepack = row.id;
			that.form.new_name = '';
			that.form.material_in = '';
			that.form.material_out ='';
			that.dialogVisible = true;
		},
		form_save(){
			let that = this;
			that.$refs.dialogForm.validate(async (valid) => {
				if (valid) {
					that.isSaveing = true;
					that.$API.mtm.routepack.copy.req(that.form).then((res) => {
						that.$message.success("复制成功");
						that.$refs.table.refresh();
						that.isSaveing = false;
						that.dialogVisible = false;
						return res;
					}).catch((err) => {
						that.isSaveing = false;
						return err;
					});
				}
			})
		},
		// handleWatch(row) {
		// 	let that = this;
		// 	that.$API.mtm.routepack.dag.req(row.id).then((res) => {
		// 	    that.nodes = res.nodes;
		// 		that.edges = res.edges;
		// 		that.limitedWatch = true;
		// 		that.$nextTick(() => {
		// 			that.$refs.degraDialogs.open();
		// 		});
		// 	})
		// },
		table_state(row){
			let that = this;
			that.$API.mtm.routepack.togglestate.req(row.id).then((res) => {
				that.$message.success("更改成功");
				that.$refs.table.refresh();
			}).catch((err) => {
				return err;
			})
		},
		//权限设置
		permission() {
			this.dialog.permission = true;
			this.$nextTick(() => {
				this.$refs.permissionDialog.open();
			});
		},
		//删除
		async table_del(row) {
			this.$API.mtm.routepack.delete
				.req(row.id)
				.then((res) => {
					this.$message.success("删除成功");
					this.$refs.table.refresh();
					return res;
				})
				.catch((err) => {
					return err;
				});
		},
		next_add(row) {
			this.$router.push({
				name: "",
				query: {
					rpjid: row.id,
				},
			});
		},

		//本地更新数据
		handleSaveSuccess(data, mode) {
			if (mode == "add") {
				this.$refs.table.refresh();
			} else if (mode == "edit") {
				this.$refs.table.refresh();
			}
		},
		resetQuery() {
			this.query = {};
		},
		//搜索
		handleQuery() {
			if (this.timeRange) {
				this.query.start_come = this.timeRange[0];
				this.query.end_come = this.timeRange[1];
			} else {
				this.query.end_come = null;
				this.query.start_come = null;
			}
			this.$refs.table.queryData(this.query);
		},
		handleFilterTypeChange(val) {
			if (val == "all") {
				this.query.create_by = null;
			} else if (val == "my") {
				this.query.create_by = this.userId;
			}
			this.$refs.table.queryData(this.query);
		},
	},
};
</script>
