<template>
	<el-container>
		<el-main class="nopadding">
			<el-card style="margin: 6px; position: relative">
				<el-descriptions title="日志信息" :column="3">
					<el-descriptions-item label="所属工段:">
						<span>{{ form.mgroup_name }}</span>
					</el-descriptions-item>
					<el-descriptions-item label="工作班次:" :span="3">
						{{ form.shift_name }}
					</el-descriptions-item>
					<el-descriptions-item label="开始时间:">
						<span>{{ form.start_time }}</span>
					</el-descriptions-item>
					<el-descriptions-item label="结束时间:" :span="3">
						{{ form.end_time }}
					</el-descriptions-item>
				</el-descriptions>
			</el-card>
			<el-card style="margin: 6px; position: relative">
				<el-button
					type="primary"
					icon="el-icon-plus"
					@click.stop="addExp"
					v-if="activeName == 'fourth'"
					style="
						position: absolute;
						top: 6px;
						right: 10px;
						z-index: 100;
					"
				></el-button>
				<el-tabs
					v-model="activeName"
					class="demo-tabs"
					@tab-click="handleClick"
					height="600px"
				>
					<el-tab-pane label="班组" name="first">
						<el-form
							ref="teamForm"
							:model="form"
							label-width="100px"
							label-position="right"
						>
							<el-row>
								<el-col :md="12" :sm="24">
									<el-form-item label="当班班组" prop="team">
										<el-select
											v-model="form.team"
											placeholder="当班班组"
											clearable
											style="width: 100%"
											@change="teamChange"
										>
											<el-option
												v-for="item in teamOptions"
												:key="item.id"
												:label="item.name"
												:value="item.id"
											></el-option>
										</el-select>
									</el-form-item>
								</el-col>
								<el-col :md="12" :sm="24">
									<el-form-item
										label="班组班长"
										prop="leader_name"
									>
										<el-input
											v-model="form.leader_name"
											placeholder="班组班长"
											disabled
										/>
									</el-form-item>
								</el-col>
								<el-col
									:md="12"
									:sm="24"
									v-if="
										form.shift_name == '白班' &&
										mgroupId == '3347217246321065984'
									"
								>
									<el-form-item label="煤粉热值">
										<el-input-number
											v-model="form.pcoal_heat"
											controls-position="right"
											placeholder="煤粉热值"
										/>
									</el-form-item>
								</el-col>
								<!-- 石灰石破碎 -->
								<el-col :md="12" :sm="24">
									<el-form-item label="电石渣干粉">
										<el-input-number
											v-model="form.pcoal_heat"
											controls-position="right"
											placeholder="电石渣干粉"
										/>
									</el-form-item>
								</el-col>
							</el-row>
						</el-form>
						<el-footer style="text-align: center">
							<el-button
								type="primary"
								:loading="isSaveing"
								@click="submit"
								>保存</el-button
							>
						</el-footer>
					</el-tab-pane>
					<el-tab-pane label="检验" name="second">
						<el-form
							ref="dialogForm"
							:model="form"
							label-width="85px"
							label-position="right"
						>
							<el-row>
								<el-col :md="12" :sm="24">
									<el-form-item label="当前班组">
										{{ form.team_name }}
									</el-form-item>
								</el-col>
								<el-col :md="12" :sm="24">
									<el-form-item label="班组组长">
										{{ form.leader_name }}
									</el-form-item>
								</el-col>
								<el-divider />
							</el-row>
						</el-form>
						<sc-form-table
							v-model="checkList"
							:hideAdd="hideAdd"
							:hideDelete="hideDelete"
							placeholder="暂无数据"
						>
							<el-table-column
								prop="material"
								label="关联产物"
								min-width="150"
							>
								<template #default="scope">
									<span v-if="scope.row.id">{{
										scope.row.material_name
									}}</span>
								</template>
							</el-table-column>
							<el-table-column
								prop="testitem"
								label="质检项目"
								min-width="150"
							>
								<template #default="scope">
									<span v-if="scope.row.id">{{
										scope.row.testitem_name
									}}</span>
								</template>
							</el-table-column>
							<el-table-column
								prop="val_avg"
								label="平均值"
								min-width="150"
							>
								<template #default="scope">
									<el-input
										v-model="scope.row.val_avg"
										placeholder="请输入内容"
									></el-input>
								</template>
							</el-table-column>
							<el-table-column
								prop="num_test"
								label="检验次数"
								min-width="150"
							>
								<template #default="scope">
									<el-input
										v-model="scope.row.num_test"
										placeholder="请输入内容"
									></el-input>
								</template>
							</el-table-column>
							<el-table-column
								prop="num_ok"
								label="合格次数"
								min-width="150"
							>
								<template #default="scope">
									<el-input
										v-model="scope.row.num_ok"
										placeholder="请输入内容"
									></el-input>
								</template>
							</el-table-column>
						</sc-form-table>
						<el-footer style="text-align: center">
							<el-button
								type="primary"
								:loading="isSaveing"
								@click="submit2"
								>保存</el-button
							>
						</el-footer>
					</el-tab-pane>
					<el-tab-pane label="其他成本" name="third">
						<div
							v-if="
								mgroupId == '3346491835287007232' ||
								mgroupId == '3347217651339837440' ||
								mgroupId == '3347217246321065984'
							"
						>
							<el-form
								ref="thirdForms"
								:model="thirdForm"
								label-width="100px"
								label-position="right"
							>
								<!-- 电石渣 -->
								<el-row
									v-if="mgroupId == '3346491835287007232'"
								>
									<el-col :md="12" :sm="24">
										<el-form-item label="湿电石渣">
											<el-input-number
												v-model="thirdForm.num"
												controls-position="right"
												placeholder="湿电石渣"
											/>
										</el-form-item>
									</el-col>
								</el-row>
								<!-- 回转窑 -->
								<el-row
									v-if="mgroupId == '3347217246321065984'"
								>
									<el-col :md="12" :sm="24">
										<el-form-item label="柴油">
											<el-input-number
												v-model="thirdForm.num"
												controls-position="right"
												placeholder="柴油"
											/>
										</el-form-item>
									</el-col>
								</el-row>
								<!-- 水泥磨 -->
								<el-row
									v-if="mgroupId == '3347217651339837440'"
								>
									<el-col :md="12" :sm="24">
										<el-form-item label="助剂">
											<el-input-number
												v-model="thirdForm.num"
												controls-position="right"
												placeholder="助剂"
											/>
										</el-form-item>
									</el-col>
									<el-col :md="12" :sm="24">
										<el-form-item label="包装">
											<el-input-number
												v-model="thirdForm.num"
												controls-position="right"
												placeholder="包装"
											/>
										</el-form-item>
									</el-col>
								</el-row>
							</el-form>
							<el-footer style="text-align: center">
								<el-button
									type="primary"
									:loading="isSaveing"
									@click="submit"
									>保存</el-button
								>
							</el-footer>
						</div>
						<div
							v-else
							style="
								width: 100%;
								height: 200px;
								line-height: 200px;
								text-align: center;
							"
						>
							无其他成本
						</div>
					</el-tab-pane>
					<el-tab-pane label="异常" name="fourth">
						<el-table
							ref="expTable"
							:data="stlogList"
							row-key="id"
							stripe
							highlightCurrentRow
						>
							<el-table-column type="index" width="50" />
							<el-table-column label="异常类别" prop="duration">
								<template #default="scope">
									<span v-if="scope.row.duration > 0"
										>停机</span
									>
									<span v-else>其他</span>
								</template>
							</el-table-column>
							<el-table-column
								label="发生时间"
								prop="happen_time"
							></el-table-column>
							<el-table-column
								label="原因类别"
								prop="cate"
							></el-table-column>
							<el-table-column
								label="异常名称"
								prop="title"
							></el-table-column>
							<el-table-column
								label="事件原因"
								prop="reason"
							></el-table-column>
							<el-table-column
								label="处置措施"
								prop="measure"
							></el-table-column>
							<el-table-column
								label="停机时长"
								prop="duration"
							></el-table-column>
							<el-table-column
								label="操作"
								fixed="right"
								align="center"
								width="120"
							>
								<template #default="scope">
									<el-button
										link
										size="small"
										@click="sflogexp_edit(scope.row)"
										type="primary"
										>编辑</el-button
									>
									<el-divider
										direction="vertical"
									></el-divider>
									<el-button
										link
										size="small"
										@click="sflogexp_delete(scope.row)"
										type="danger"
										>删除</el-button
									>
								</template>
							</el-table-column>
						</el-table>
						<el-row :gutter="20">
							<el-col :span="12">
								<p>异常详情</p>
								<el-form
									ref="expForms"
									:rules="rules"
									label-width="100px"
									:model="expForm"
								>
									<el-row>
										<el-col :md="12" :sm="24">
											<el-form-item label="异常类别">
												<el-select
													style="width: 100%"
													v-model="sflogexpType"
													placeholder="异常类别"
													:disabled="1"
												>
													<el-option
														v-for="item in typeOptions"
														:key="item.value"
														:label="item.name"
														:value="item.value"
													>
													</el-option>
												</el-select>
											</el-form-item>
										</el-col>
										<el-col :md="12" :sm="24">
											<el-form-item
												label="异常名称"
												prop="title"
											>
												<el-input
													v-model="expForm.title"
													placeholder="异常名称"
												/>
											</el-form-item>
										</el-col>
										<el-col :md="12" :sm="24">
											<el-form-item
												label="发生时间"
												prop="happen_time"
											>
												<el-date-picker
													v-model="
														expForm.happen_time
													"
													type="datetime"
													placeholder="发生时间"
													value-format="YYYY-MM-DD HH:mm:ss"
													style="width: 100%"
													:disabled="
														expTitle !==
															'新增异常' &&
														expForm.duration > 0
													"
												>
												</el-date-picker>
											</el-form-item>
										</el-col>
										<el-col :md="12" :sm="24">
											<el-form-item
												label="原因类别"
												prop="cate"
											>
												<el-select
													style="width: 100%"
													v-model="expForm.cate"
													placeholder="原因类别"
												>
													<el-option
														v-for="item in options"
														:key="item"
														:label="item"
														:value="item"
													>
													</el-option>
												</el-select>
											</el-form-item>
										</el-col>
										<el-col
											:md="12"
											:sm="24"
											v-if="sflogexpType == 0"
										>
											<el-form-item label="停机时长">
												<el-input-number
													v-model="expForm.duration"
													:precision="2"
													:min="0"
													controls-position="right"
													placeholder="停机时长"
													:disabled="
														expTitle !==
															'新增异常' &&
														expForm.duration > 0
													"
													style="width: 100%"
												/>
											</el-form-item>
										</el-col>
									</el-row>
									<el-row>
										<el-col :md="12" :sm="24">
											<el-form-item
												label="异常原因"
												prop="reason"
											>
												<el-input
													type="textarea"
													:rows="2"
													v-model="expForm.reason"
													placeholder="异常原因"
												/>
											</el-form-item>
										</el-col>
										<el-col :md="12" :sm="24">
											<el-form-item
												label="处置措施"
												prop="measure"
											>
												<el-input
													type="textarea"
													:rows="2"
													v-model="expForm.measure"
													placeholder="处置措施"
												/>
											</el-form-item>
										</el-col>
									</el-row>
								</el-form>
							</el-col>
							<el-col :span="12">
								<el-table
									ref="expTable"
									:data="sflogexpList"
									row-key="id"
									stripe
									highlightCurrentRow
								>
									<el-table-column type="index" width="50" />
									<el-table-column
										label="操作人"
										prop="measure"
									></el-table-column>
									<el-table-column
										label="操作时间"
										prop="happen_time"
									></el-table-column>
									<el-table-column
										label="原因类别"
										prop="cate"
									></el-table-column>
									<el-table-column
										label="事件原因"
										prop="reason"
									></el-table-column>
									<el-table-column
										label="处置措施"
										prop="measure"
									></el-table-column>
									<el-table-column
										label="操作"
										fixed="right"
										align="center"
										width="60"
									>
										<template #default="scope">
											<el-button
												link
												size="small"
												@click="
													sflogexp_edit(scope.row)
												"
												type="primary"
												>编辑</el-button
											>
										</template>
									</el-table-column>
								</el-table>
							</el-col>
						</el-row>
						<el-dialog :title="expTitle" v-model="visible">
							<el-form
								ref="expForms"
								:rules="rules"
								label-width="100px"
								:model="expForm"
							>
								<el-row>
									<el-col :md="12" :sm="24">
										<el-form-item label="异常类别">
											<el-select
												style="width: 100%"
												v-model="sflogexpType"
												placeholder="异常类别"
												:disabled="1"
											>
												<el-option
													v-for="item in typeOptions"
													:key="item.value"
													:label="item.name"
													:value="item.value"
												>
												</el-option>
											</el-select>
										</el-form-item>
									</el-col>
									<el-col :md="12" :sm="24">
										<el-form-item
											label="异常名称"
											prop="title"
										>
											<el-input
												v-model="expForm.title"
												placeholder="异常名称"
											/>
										</el-form-item>
									</el-col>
									<el-col :md="12" :sm="24">
										<el-form-item
											label="发生时间"
											prop="happen_time"
										>
											<el-date-picker
												v-model="expForm.happen_time"
												type="datetime"
												placeholder="发生时间"
												value-format="YYYY-MM-DD HH:mm:ss"
												style="width: 100%"
												:disabled="
													expTitle !== '新增异常' &&
													expForm.duration > 0
												"
											>
											</el-date-picker>
										</el-form-item>
									</el-col>
									<el-col :md="12" :sm="24">
										<el-form-item
											label="原因类别"
											prop="cate"
										>
											<el-select
												style="width: 100%"
												v-model="expForm.cate"
												placeholder="原因类别"
											>
												<el-option
													v-for="item in options"
													:key="item"
													:label="item"
													:value="item"
												>
												</el-option>
											</el-select>
										</el-form-item>
									</el-col>
									<el-col
										:md="12"
										:sm="24"
										v-if="sflogexpType == 0"
									>
										<el-form-item label="停机时长">
											<el-input-number
												v-model="expForm.duration"
												:precision="2"
												:min="0"
												controls-position="right"
												placeholder="停机时长"
												:disabled="
													expTitle !== '新增异常' &&
													expForm.duration > 0
												"
												style="width: 100%"
											/>
										</el-form-item>
									</el-col>
								</el-row>
								<el-row>
									<el-col :md="12" :sm="24">
										<el-form-item
											label="异常原因"
											prop="reason"
										>
											<el-input
												type="textarea"
												:rows="2"
												v-model="expForm.reason"
												placeholder="异常原因"
											/>
										</el-form-item>
									</el-col>
									<el-col :md="12" :sm="24">
										<el-form-item
											label="处置措施"
											prop="measure"
										>
											<el-input
												type="textarea"
												:rows="2"
												v-model="expForm.measure"
												placeholder="处置措施"
											/>
										</el-form-item>
									</el-col>
								</el-row>
							</el-form>
							<el-footer>
								<el-button
									type="primary"
									:loading="isSaveing"
									@click="submit4"
									>保存</el-button
								>
								<el-button @click="visible = false"
									>取消</el-button
								>
							</el-footer>
						</el-dialog>
					</el-tab-pane>
				</el-tabs>
			</el-card>
		</el-main>
	</el-container>
</template>
<script>
import saveDialog from "./handover_form.vue";
import quastatDialog from "./quastat_form.vue";
import otherDialog from "./other_form.vue";
export default {
	name: "listSon",
	components: {
		saveDialog,
		otherDialog,
		quastatDialog,
	},
	data() {
		return {
			deptId: "",
			mgroupId: "",
			hideAdd: true,
			visible: false,
			hideDelete: true,
			isSaveing: false,
			activeName: "fourth",
			expTitle: "新增异常",
			sflogItem: {},
			form: {},
			thirdForm: {
				num: "",
			},
			expForm: {
				happen_time: "",
				cate: "",
				title: "",
				reason: "",
				measure: "",
				duration: 0,
				sflog: "",
			},
			query: {
				page: 0,
			},
			rules: {
				happen_time: [{ required: true, message: "请选择发生时间" }],
				title: [{ required: true, message: "请填写异常名称" }],
				cate: [{ required: true, message: "请选择原因类别" }],
				reason: [{ required: true, message: "请填写异常原因" }],
				measure: [{ required: true, message: "请填写处置措施" }],
			},
			sflogexpType: "1",
			typeOptions: [
				{ value: "0", name: "停机" },
				{ value: "1", name: "其他" },
			],
			options: ["工艺", "电器", "机械", "其他"],
			checkList: [],
			stlogList: [],
			teamOptions: [],
			sflogexpList: [],
			apiObj: this.$API.wpm.sflogexp.list,
		};
	},
	mounted() {
		this.deptId = this.$route.query.deptId;
		this.mgroupId = this.$route.query.mgroupId;
		let form = this.$TOOL.data.get("sflogItem");
		this.form = JSON.parse(form);
		this.getTeam();
		this.getSflogexp();
	},
	methods: {
		handleClick(e) {
			this.activeName = e.paneName;
			if (e.paneName == "second") {
				this.getsflogItem();
			}
		},
		//******first 班组确定  ******* */
		getTeam() {
			let that = this;
			let form = {};
			form.page = 0;
			form.belong_dept = that.deptId;
			that.$API.mtm.team.list.req(form).then((res) => {
				that.teamOptions = res;
			});
		},
		teamChange(data) {
			let that = this;
			that.teamOptions.forEach((item) => {
				if (item.id == data) {
					that.form.leader_name = item.leader_name;
					that.form.leader = item.leader;
				}
			});
		},
		//班组表单提交
		submit() {
			let that = this;
			that.$refs.teamForm.validate(async (valid) => {
				if (valid) {
					that.isSaveing = true;
					let obj = {};
					obj.team = that.form.team;
					obj.shift = that.form.shift;
					obj.leader = that.form.leader;
					obj.pcoal_heat = that.form.pcoal_heat;
					that.$API.wpm.sflog.update
						.req(that.form.id, obj)
						.then((res) => {
							that.isSaveing = false;
							that.$message.success("操作成功");
						})
						.catch((res) => {
							that.isSaveing = false;
						});
				}
			});
		},
		//****** seconed 质量检验  ******* */
		//检验
		getsflogItem() {
			this.$API.wpm.sflog.init_test.req(this.form.id).then((res) => {
				this.checkList = res;
			});
		},
		submit2() {
			this.isSaveing = true;
			this.$API.qm.updateQuastat
				.req("bulk", this.checkList)
				.then((res) => {
					this.isSaveing = false;
					this.$message.success("操作成功");
				})
				.catch((res) => {
					this.isSaveing = false;
				});
		},
		//质量检验
		sflog_check(row) {
			this.dialog.check = true;
			this.$nextTick(() => {
				this.$refs.checkDialog.open("edit").setData(row);
			});
		},
		//***** fourth 异常  ****** */
		//获取异常列表
		getSflogexp() {
			let obj = {};
			obj.page = 0;
			obj.sflog = this.form.id;
			this.$API.wpm.sflogexp.list.req(obj).then((res) => {
				this.sflogexpList = res;
			});
		},
		//异常添加
		addExp() {
			this.expForm = {};
			this.expForm.happen_time = "";
			this.expForm.cate = "";
			this.expForm.title = "";
			this.expForm.reason = "";
			this.expForm.measure = "";
			this.expForm.duration = 0;
			this.expForm.sflog = this.form.id;
			this.expTitle = "新增异常";
			this.visible = true;
		},
		//异常编辑
		sflogexp_edit(row) {
			Object.assign(this.expForm, row);
			this.expTitle = "编辑异常";
			this.expForm.handler = this.$TOOL.data.get("USER_INFO").id;
			if (this.expForm.duration > 0) {
				this.sflogexpType = "0";
			} else {
				this.sflogexpType = "1";
			}
			this.visible = true;
		},
		//异常删除
		async sflogexp_delete(row) {
			this.$confirm(`确定删除选中的记录吗？`, "提示", {
				type: "warning",
			}).then(() => {
				this.$API.wpm.sflogexp.delete
					.req(row.id)
					.then((res) => {
						this.$message.success("删除成功");
						this.$refs.expTable.refresh();
					})
					.catch((err) => {
						this.$message.success(err);
					});
			});
		},
		submit4() {
			let that = this;
			that.$refs.expForms.validate(async (valid) => {
				if (valid) {
					that.isSaveing = true;
					if (that.expTitle == "新增异常") {
						that.$API.wpm.stlog.create
							.req(that.expForm)
							.then((res) => {
								that.isSaveing = false;
								that.visible = false;
								that.$message.success("操作成功");
								this.$refs.expTable.refresh();
							})
							.catch((res) => {
								that.isSaveing = false;
							});
					} else {
						that.$API.wpm.sflogexp.update
							.req(that.expForm.id, that.expForm)
							.then((res) => {
								that.isSaveing = false;
								that.visible = false;
								that.$message.success("操作成功");
								this.$refs.expTable.refresh();
							})
							.catch((res) => {
								that.isSaveing = false;
							});
					}
				}
			});
		},

		handlePrint() {
			this.$PRINT("#myReport");
		},
		exportExcel() {
			this.exportLoading = true;
			this.$XLSX("#myTable", this.tableName);
			this.exportLoading = false;
		},
	},
};
</script>

<style scoped>
#numTable {
	margin-left: 37px;
}
#numTable td {
	height: 32px;
	padding-left: 5px;
}
.numCell {
	width: 80px;
}
.numCell.numCell_last {
	width: 100px;
}
.searchHead {
	display: flex;
}
.middleText {
	height: 32px;
	line-height: 32px;
	margin: 0 5px;
	display: inline-block;
}
.searchBtn {
	margin-left: 5px;
}
</style>
