<template>
	<el-container>
		<!-- 当天任务列表 -->
		<el-header style="height: 55%; padding: 0">
			<el-container>
				<el-aside style="width: 50%">
					<el-container>
						<el-header>
							<div class="left-panel">
								<el-date-picker
									v-model="queryMtask.start_date"
									type="date"
									value-format="YYYY-MM-DD"
									@change="handleQueryMtask"
								/>
								<el-checkbox
									style="margin-left: 10px"
									v-model="queryMtaskState"
									label="已终止"
									@change="handleQueryMtask"
								/>
							</div>
						</el-header>
						<el-main>
							<scTable
								ref="table"
								:apiObj="apiObj"
								row-key="id"
								stripe
								:params="paramsMtask"
								:query="queryMtask"
								@row-click="rowClick"
							>
								<el-table-column type="index" width="50" />
								<el-table-column
									label="任务编号"
									prop="number"
									width="150"
								>
								</el-table-column>
								<el-table-column
									label="产物"
									prop="material_out_name"
									show-overflow-tooltip
									width="250"
								>
								</el-table-column>
								<el-table-column label="计划数量" prop="count">
								</el-table-column>
								<el-table-column
									label="生产日期"
									prop="start_date"
								>
								</el-table-column>
								<el-table-column label="状态" prop="state">
									<template #default="scope">
										<el-tag v-if="scope.row.state == 20">
											{{ state_[scope.row.state] }}
										</el-tag>
										<el-tag v-if="scope.row.state == 30">
											{{ state_[scope.row.state] }}
										</el-tag>
										<el-tag
											v-if="scope.row.state == 34"
											type="danger"
										>
											{{ state_[scope.row.state] }}
										</el-tag>
										<el-tag
											v-if="scope.row.state == 40"
											type="success"
										>
											{{ state_[scope.row.state] }}
										</el-tag>
									</template>
								</el-table-column>
							</scTable>
						</el-main>
					</el-container>
				</el-aside>
				<el-main style="padding: 0">
					<el-container>
						<el-header>
							<div class="left-panel">
								<span style="font-size: 14px">各工序进度</span>
							</div>
						</el-header>
						<el-main>
							<scTable
								ref="tableprocess"
								row-key="id"
								stripe
								:hideDo="hideDo"
								:data="processList"
								@row-click="itemClick"
							>
								<el-table-column
									label="任务编号"
									prop="number"
									width="150"
								>
								</el-table-column>
								<el-table-column
									label="日期"
									prop="start_date"
									width="120"
								>
								</el-table-column>
								<el-table-column
									label="工序"
									prop="mgroup_name"
								>
								</el-table-column>
								<el-table-column label="计划数量" prop="count">
								</el-table-column>
								<el-table-column
									label="合格数量"
									prop="count_ok"
								>
								</el-table-column>
								<el-table-column
									label="提交人"
									prop="submit_user_name"
								>
								</el-table-column>
								<el-table-column
									label="操作"
									fixed="right"
									width="60"
								>
									<template #default="scope">
										<el-link
											type="primary"
											@click.stop="
												table_submit(scope.row)
											"
											v-auth="'mtask.submit'"
											v-if="
												scope.row.state != 40 &&
												scope.row.state != 34
											"
											>提交
										</el-link>
									</template>
								</el-table-column>
							</scTable>
						</el-main>
					</el-container>
				</el-main>
			</el-container>
		</el-header>
		<!-- 交接记录&车间库存 -->
		<el-main class="nopadding">
			<el-container>
				<el-aside style="width: 50%">
					<!-- 交接记录 -->
					<el-container>
						<el-header>
							<div class="left-panel">
								<span style="font-size: 14px">交接记录</span>
								<el-button
									type="primary"
									@click="addHandover"
									v-auth="'handover.create'"
								>新增
								</el-button>
							</div>
							<div class="right-panel">
								<el-input
									v-model="queryHandover.search"
									placeholder="批次号"
									clearable
									style="margin-right: 5px"
								></el-input>
								<el-button
									type="primary"
									icon="el-icon-search"
									@click="queryHandoverChange"
								></el-button>
								<el-button
									type="primary"
									@click="materialsChoses('handover')"
									>选择物料</el-button
								>
							</div>
						</el-header>
						<el-main>
							<scTable
								ref="table_handover"
								:apiObj="apiObjHandover"
								row-key="id"
								stripe
								:params="paramsHandover"
								:query="queryHandover"
							>
								<el-table-column
									label="送料日期"
									prop="send_date"
								>
								</el-table-column>
								<el-table-column
									label="产物"
									prop="material_name"
									show-overflow-tooltip
								>
								</el-table-column>
								<el-table-column label="批次" prop="batch">
								</el-table-column>
								<el-table-column label="数量" prop="count">
								</el-table-column>
								<el-table-column
									label="交送人"
									prop="send_user_name"
								>
								</el-table-column>
								<el-table-column
									label="接收人"
									prop="recive_user_name"
								>
								</el-table-column>
								<el-table-column
									label="是否确认"
									prop="submit_time"
								>
									<template #default="scope">
										<span v-if="scope.row.submit_time"
											>是</span
										>
										<span v-else>否</span>
									</template>
								</el-table-column>
								<el-table-column
									label="操作"
									fixed="right"
									align="left"
								>
									<template #default="scope">
										<el-button
											link
											type="primary"
											@click.stop="
												handover_submit(scope.row)
											"
											v-auth="'handover.submit'"
											v-if="scope.row.submit_time == null"
										>
											确认
										</el-button>
									</template>
								</el-table-column>
							</scTable>
						</el-main>
					</el-container>
				</el-aside>
				<el-main style="padding: 0 0 0 8px">
					<!-- 车间库存 -->
					<el-container>
						<el-header>
							<div class="left-panel">
								<span style="font-size: 14px">车间库存</span>
							</div>
							<div class="right-panel">
								<el-input
									v-model="queryWm.search"
									placeholder="批次号"
									clearable
									style="margin-right: 5px"
								></el-input>
								<el-button
									type="primary"
									icon="el-icon-search"
									@click="paramsWmChange"
								></el-button>
								<el-button
									type="primary"
									@click="materialsChoses('wm')"
									>选择物料</el-button
								>
								<el-button
									type="primary"
									@click="tomio"
									v-auth="'mio.do'"
									>领料</el-button
								>
								<el-button
									type="primary"
									@click="tomio"
									v-auth="'mio.do'"
									>入库</el-button
								>
							</div>
						</el-header>
						<el-main style="padding: 0">
							<scTable
								ref="table_wm"
								:apiObj="apiObjWm"
								row-key="id"
								:params="paramsWm"
								:query="queryWm"
								stripe
								hidePagination
							>
								<el-table-column label="物料名" prop="material">
									<template #default="scope">
										{{ scope.row.material_.name }}
									</template>
								</el-table-column>
								<el-table-column label="规格" prop="material">
									<template #default="scope">
										{{ scope.row.material_.specification }}
									</template>
								</el-table-column>
								<el-table-column label="型号" prop="material">
									<template #default="scope">
										{{ scope.row.material_.model }}
									</template>
								</el-table-column>
								<el-table-column
									label="已到工序"
									prop="material"
								>
									<template #default="scope">{{
										scope.row.material_.process_name
									}}</template>
								</el-table-column>
								<el-table-column label="批次" prop="batch">
								</el-table-column>
								<el-table-column
									label="数量"
									prop="count"
									width="80"
								>
								</el-table-column>
							</scTable>
						</el-main>
					</el-container>
				</el-main>
			</el-container>
		</el-main>
	</el-container>
	<showDrawer
		ref="showDrawer"
		v-if="visibleDrawer"
		:mtaskId="mtaskId"
		@closed="visibleDrawer = false"
	>
	</showDrawer>
	<el-dialog title="选择物料" v-model="materialsVisible" width="90%">
		<materials
			style="height: 500px"
			:materialType="materialType"
			ref="materialsChose"
			@choseChange="choseChange"
		></materials>
	</el-dialog>
	<handover-dialog
			v-if="dialogHandover"
			ref="handoverDialog"
			:dept="currentDeptId"
			@success="handleHandoverSuccess"
			@closed="dialogHandover = false">
		</handover-dialog>
</template>

<script>
import handoverDialog from "./handover_form.vue";
import showDrawer from "./mlog_dept6_detail.vue";
import materials from "./../mtm/materials.vue";
export default {
	components: {
		showDrawer,
		materials,
		handoverDialog
	},
	data() {
		return {
			dialog: {
				detail: false,
			},
			apiObj: null,
			query: {},
			processList: [], //工序进度
			state_: {
				10: "创建中",
				20: "已下达",
				30: "生产中",
				34: "已终止",
				40: "已提交",
			},
			wmaterials: [],
			hideDo: true,
			materialsVisible: false,
			queryMtaskState: false,
			apiObjWm: this.$API.wpm.wmaterial.list,
			paramsMlog: {
				mtask: "",
			},
			apiObjHandover: this.$API.wpm.handover.list,
			paramsHandover: {
				recive_dept__name: "6车间",
			},
			queryHandover: {
				search: "",
				material: "",
			},
			paramsWm: {
				belong_dept__name: "6车间",
				count__gte: 1,
				page: 0,
			},
			queryWm: {
				search: "",
				material: "",
			},
			paramsMtask: {
				mgroup__belong_dept__name: "6车间",
				is_count_utask: true,
				state__in: "20,30,40",
			},
			queryMtask: {
				state__in: "",
			},
			currentDeptId:'',
			mtaskId: "",
			dataWm: [],
			dataWmOrigin: [],
			materialType: "wm",
			visibleDrawer: false,
			dialogHandover:false,
		};
	},
	mounted() {
		let NowDate = new Date();
		// this.queryMtask.start_date = NowDate.getFullYear() + '-' + (NowDate.getMonth() + 1) + '-' + NowDate.getDate();
		this.apiObj = this.$API.pm.mtask.list;
		this.$API.system.dept.list.req({ page: 0, name: "6车间" }).then((res) => {
			if (res.length > 0) {
				this.currentDeptId = res[0].id;
			} else {
				this.$message.error("未找到车间");
			}
		});
	},
	methods: {
		tomio() {
			this.$router.push({ name: "halfgood_mio" });
		},
		materialsChoses(str) {
			this.materialType = str;
			this.materialsVisible = true;
		},
		choseChange(data) {
			if (this.materialType == "wm") {
				this.queryWm.material = data;
				this.$refs.table_wm.queryData(this.queryWm);
			} else {
				this.queryHandover.material = data;
				this.$refs.table_handover.queryData(this.queryHandover);
			}

			this.materialsVisible = false;
		},
		queryHandoverChange() {
			this.$refs.table_handover.queryData(this.queryHandover);
		},
		paramsWmChange() {
			this.$refs.table_wm.queryData(this.queryWm);
		},
		//点击任务
		rowClick(row) {
			let that = this;
			this.$API.pm.mtask.list
				.req({
					start_date: row.start_date,
					end_date: row.end_date,
					mgroup__belong_dept__name: "6车间",
					utask: row.utask,
				})
				.then((res) => {
					that.processList = res.results;
				});
		},
		//工序详情
		itemClick(row) {
			this.mtaskId = row.id;
			this.visibleDrawer = true;
			this.$nextTick(() => {
				this.$refs.showDrawer.open();
			});
		},
		handleQueryMtask() {
			if (this.queryMtaskState) {
				this.queryMtask.state__in = "20,30,34,40";
			} else {
				this.queryMtask.state__in = "20,30,40";
			}
			this.$refs.table.queryData(this.queryMtask);
		},
		table_submit(row) {
			let that = this;
			let lengths = row.mlogs.length,
				infoText = "";
			if (lengths > 0) {
				infoText = "该任务有" + lengths + "条日志，确定提交吗？";
			} else {
				infoText = "该任务没有日志，确定提交吗？";
			}
			that.$confirm(infoText, "提示", {
				type: "warning",
			}).then(() => {
				that.$API.pm.mtask.submit
					.req(row.id)
					.then((res) => {
						that.$message.success("操作成功");
						that.$refs.table_mtask.refresh();
						that.mtaskClick(that.currentMtask);
					})
					.catch((err) => {});
			});
		},
		handover_submit(row) {
			let that = this;
			that.$API.wpm.handover.submit
				.req(row.id)
				.then((res) => {
					that.$message.success("操作成功");
					that.$refs.table_handover.refresh();
					that.$refs.table_wm.refresh();
				})
				.catch((err) => {});
		},
		//从生产日志生成交接记录
		addHandover() {
			this.dialogHandover = true;
			this.$nextTick(() => {
				this.$refs.handoverDialog.open('add');
			})
		},
	},
};
</script>

<style scoped>
.tabsHeader {
	display: inline-block;
	position: absolute;
	right: 20px;
	margin-top: 4px;
	z-index: 100;
}

.right-panel > * + * {
	margin-left: 10px;
}

.el-main.nopadding {
	padding: 0 20px 0 20px;
}

.tableTitle {
	height: 40px;
	line-height: 40px;
	font-size: 14px;
	box-sizing: border-box;
	border-bottom: 1px solid #eeeeee;
}
</style>
