<template>
	<el-container>
		<el-main id="elMain" class="nopadding">
			<el-card id="logDetail" 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"
					@click.stop="addStlog"
					v-if="activeName == 'fourth'"
					v-auth="'sflogexp.create'"
					style="
						position: absolute;
						top: 6px;
						right: 43%;
						z-index: 100;
					"
					>新增异常</el-button
				>
				<el-select
				v-if="activeName == 'mpoint'"
							v-model="querymplog.mpoint"
							placeholder="请选择"
							clearable
							class="mpointChange"
							@change="mpointChange"
						>
							<el-option
								v-for="item in mpointOptions"
								:key="item.id"
								:label="item.name"
								:value="item.id"
							></el-option>
						</el-select>
				<el-tabs
					ref="infoTabd"
					v-model="activeName"
					class="demo-tabs"
					@tab-click="handleClick"
					height="600px"
				>
					<el-tab-pane label="班组" name="first">
						<el-form
							ref="teamForm"
							:model="form"
							:rules="rules"
							label-width="120px"
							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 == '白班' &&
										form.mgroup_name == '电石渣'
									"
								>
									<el-form-item label="煤粉热值">
										<el-input-number
											v-model="form.pcoal_heat"
											controls-position="right"
											placeholder="煤粉热值"
											style="width: 100%"
										/>
									</el-form-item>
								</el-col> -->
								<!-- 煤粉热值 -->
								<el-col
									:md="12"
									:sm="24"
									v-if="form.mgroup_name == '回转窑' && (form.shift_name == '白班' || form.shift_name == '早班')"
								>
									<el-form-item label="煤粉热值">
										<el-input-number
											v-model="form.pcoal_heat"
											controls-position="right"
											placeholder="煤粉热值"
											style="width: 100%"
										/>
									</el-form-item>
								</el-col>
							</el-row>
						</el-form>
						<el-footer style="text-align: center">
							<el-button
								type="primary"
								:loading="isSaveing"
								@click="submit" v-auth="'sflog.update'"
								>保存</el-button
							>
						</el-footer>
					</el-tab-pane>
					<el-tab-pane label="测点录入" name="mpoint">
						<el-row>
							<el-col :md="12" :sm="24" :key="updateKey">
								<el-form
									:key="updateKey"
									ref="mpointForm"
									:rules="rules"
									label-width="150px"
									label-position="right"
									v-if="mpointOptions.length > 0"
								>
									<template
										v-for="item in mpointOptions"
										:key="item.id"
									>
										<el-row>
											<el-col :span="20">
												<el-form-item
													:label="item.name"
													required="1"
												>
													<el-input-number
														v-model="item.mpFormVal"
														controls-position="right"
														placeholder="请输入"
														style="width: 100%"
													/>
												</el-form-item>
											</el-col>
											<el-col :span="4">
												<el-button
													type="primary"
													:loading="isSaveing"
													@click="submit5(item)"
													style="margin-left: 20px" v-auth="'mpointstat.create'"
													>保存</el-button
												>
											</el-col>
										</el-row>
									</template>
								</el-form>
							</el-col>
							<el-col :md="12" :sm="24">
								<scTable
									ref="mpointStatTable"
									:apiObj="apiObj"
									:query="querymplog"
									:params="querymplogX"
									row-key="id"
									stripe
									hideSetting
									:height="heightTable"
									highlightCurrentRow
								>
									<el-table-column type="index" width="50" />
									<el-table-column label="名称">
										<template #default="scope">
											<span v-if="scope.row.mpoint_nickname !=null">
												{{ scope.row.mpoint_nickname }}
											</span>
											<span v-else>
												{{ scope.row.mpoint_name }}
											</span>
										</template>
									</el-table-column>
									<el-table-column label="录入值" prop="val">
									</el-table-column>
									<el-table-column label="班组开始时间">
										<template #default="scope">
											<span>
												{{ scope.row.sflog_start_time}}
											</span>
										</template>
									</el-table-column>
									<el-table-column label="班组结束时间">
										<template #default="scope">
											<span>
												{{ scope.row.sflog_end_time}}
											</span>
										</template>
									</el-table-column>
									<el-table-column
										label="录入时间"
										prop="create_time"
									>
									</el-table-column>
									<el-table-column
										label="操作"
										fixed="right"
										align="center"
										width="60"
									>
										<template #default="scope">
											<el-button
												link
												size="small"
												@click="mpointStat_del(scope.row)"
												type="danger"
												v-auth="'mpointstat.delete_write'"
												>删除</el-button
											>
										</template>
									</el-table-column>
								</scTable>
							</el-col>
						</el-row>
					</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>
							<el-form
								ref="thirdForms"
								:model="thirdForm"
								label-width="100px"
								label-position="right"
							>
								<el-row v-if="form.mgroup_name == '电石渣'">
									<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="form.mgroup_name == '回转窑'">
									<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="form.mgroup_name == '水泥磨'">
									<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="form.mgroup_name == '水泥包装'">
									<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>
					</el-tab-pane> -->
					<el-tab-pane label="异常" name="fourth">
						<el-row :gutter="20">
							<el-col :span="14">
								<scTable
									ref="stlogTable"
									:apiObj="apiObjStlog"
									:query="querystlog"
									:params="querystlog"
									row-key="id"
									stripe
									hideSetting
									:height="heightTable"
									@row-click="stlogRowClick"
									highlightCurrentRow
								>
									<!-- <el-table
									ref="stlogTable"
									:data="stlogList"
									row-key="id"
									stripe
									@row-click="stlogRowClick"
									:height="300"
									highlightCurrentRow
								> -->
									<el-table-column type="index" width="50" />
									<el-table-column
										label="异常类别"
										prop="duration"
									>
										<template #default="scope">
											<span v-if="scope.row.is_shutdown"
												>停机</span
											>
											<span v-else>其他</span>
										</template>
									</el-table-column>
									<el-table-column
										label="发生时间"
										prop="start_time"
									></el-table-column>
									<el-table-column
										label="结束时间"
										prop="end_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="停机时长(h)">
										<template #default="scope">
											<span>{{Number((scope.row.duration_sec/3600).toFixed(2))}}</span>
										</template>
                    				</el-table-column>
									<el-table-column
										label="操作"
										fixed="right"
										align="center"
										width="120"
									>
										<template #default="scope">
											<el-button
												link
												size="small"
												@click.stop="editStlog(scope.row)"
												type="primary"
												>编辑</el-button
											>
											<el-divider
												direction="vertical"
											></el-divider>
											<el-button
												link
												size="small"
												@click="stlog_delete(scope.row)"
												type="danger"
												>删除</el-button
											>
										</template>
									</el-table-column>
								</scTable>
							</el-col>
							<el-col :span="10">
								<scTable
									ref="expTable"
									:data="sflogexpList"
									row-key="id"
									stripe
									:height="heightTable"
									hidePagination
									highlightCurrentRow
									hideDo
								>
									<el-table-column type="index" width="50" />
									<el-table-column label="班组名称">
										<template #default="scope">
											<span v-if="scope.row.sflog_">{{
												scope.row.sflog_.shift_name
											}}</span>
										</template>
									</el-table-column>
									<el-table-column label="开始时间">
										<template #default="scope">
											<span v-if="scope.row.sflog_">{{
												scope.row.sflog_.start_time
											}}</span>
										</template>
									</el-table-column>
									<el-table-column label="结束时间">
										<template #default="scope">
											<span v-if="scope.row.sflog_">{{
												scope.row.sflog_.end_time
											}}</span>
										</template>
									</el-table-column>
									<el-table-column label="所在工段">
										<template #default="scope">
											<span v-if="scope.row.sflog_">{{
												scope.row.sflog_.mgroup_name
											}}</span>
										</template>
									</el-table-column>
									<el-table-column
										label="处理备注"
										prop="note"
									></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)
												"
												v-auth="'sflogexp.update'"
												type="primary"
												>编辑</el-button
											>
										</template>
									</el-table-column>
								</scTable>
							</el-col>
						</el-row>
						<el-dialog :title="stlogTitle" v-model="visible">
							<el-form
								ref="sflogExpForm"
								label-width="100px"
								:model="sflogExpForm"
							>
								<el-row>
									<el-col :md="12" :sm="24">
										<el-form-item
											label="处理备注"
											prop="current_note"
										>
											<el-input
												type="textarea"
												:rows="2"
												v-model="sflogExpForm.note"
												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>
						<stlog-dialog
							v-if="stlogVisiable"
							ref="stlogDialog"
							:current_sflog="current_sflog"
							:mgroupId="mgroupId"
							@success="stLogSuccess"
							@closed="stlogVisiable = false"
						></stlog-dialog>
					</el-tab-pane>
				</el-tabs>
			</el-card>
		</el-main>
	</el-container>
</template>
<script>
import stlogDialog from "./stlog_form.vue";
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,
		stlogDialog,
	},
	data() {
		return {
			deptId: "",
			mgroupId: "",
			sflogId: "",
			hideAdd: true,
			visible: false,
			hideDelete: true,
			isSaveing: false,
			activeName: "first",
			stlogTitle: "新增异常",
			clickItem: {},
			sflogItem: {},
			form: {},
			thirdForm: {
				num: "",
			},
			stlogForm: {
				current_sflog: "",
				current_note: "",
				title: "",
				start_time: null,
				end_time: null,
				is_shutdown: false,
			},
			query: {
				page: 0,
			},
			rules: {
				start_time: [{ required: true, message: "请选择发生时间" }],
				current_note: [
					{ required: true, message: "请填写值班异常处理备注" },
				],
			},
			sflogExpForm: {
				note: "",
			},
			querymplog:{
				mpoint:''
			},
			querymplogX: {
				page: 0,
				mpoint__type: 30,
				has_create_by: 1,
			},
			querystlog: { mgroup: "", sflogs: ""},
			stlogVisiable: false,
			cateOptions: ["工艺", "机械", "电气", "其他"],
			checkList: [],
			stlogList: [],
			mpointStat: [],
			teamOptions: [],
			sflogexpList: [],
			mpointOptions: [],
			apiObj: null,
			apiObjStlog: null,
			heightTable: null,
			updateKey: false,
		};
	},
	mounted() {
		this.deptId = this.$route.query.deptId;
		this.mgroupId = this.$route.query.mgroupId;
		this.sflogId = this.$route.query.sflogId;
		this.querymplogX.mgroup = this.mgroupId;
		
		this.apiObj = this.$API.enm.mpoint.stat;
		
		let form = this.$TOOL.data.get("sflogItem");
		this.form = JSON.parse(form);
		console.log('----------------',this.form);
		this.querystlog.mgroup = this.mgroupId;
		this.querystlog.sflogs = this.form.id;
		this.apiObjStlog = this.$API.wpm.stlog.list;
		this.getMpoint();
		this.getTeam();
		let height = document.getElementById("elMain").clientHeight;
		let heightdetail = document.getElementById("logDetail").clientHeight;
		let heightTabs = height - heightdetail - 40;
		this.heightTable = heightTabs - 45 + "px";
		this.$nextTick(() => {
			this.$refs.infoTabd.$el.style.height = heightTabs + "px";
		});
	},
	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;
			});
		},
		getMpoint() {
			let that = this;
			let form = {};
			form.page = 0;
			form.type = 30;
			form.enabled = 1;
			form.mgroup = that.mgroupId;
			that.$API.enm.mpoint.list.req(form).then((res) => {
				if (res.length > 0) {
					that.mpointOptions = [];
					res.forEach((item) => {
						item.mpFormVal = null;
						item.mpFormValAble = false;
						that.mpointOptions.push(item);
					});
					that.mpointOptions.forEach((item) =>{
						that.$API.enm.mpoint.stat.req({mpoint: item.id, sflog: this.form.id, page: 0}).then(res=>{
							if(res.length>0){
								item.mpFormVal = res[0].val;
							}else{
							    item.mpFormVal = 0;
							}
						})
					})
					that.getMpointStat();
				}
			});
		},
		getMpointStat() {
			let that = this;
			let form = {};
			form.mpoint__type = 30;
			form.has_create_by = 1;
			form.mgroup = that.mgroupId;
			that.$API.enm.mpoint.stat.req(form).then((res) => {
				that.mpointStat = res.results;
			});
		},
		mpointStat_del(row) {
			let that = this;
			that.$confirm(`确定删除吗？`, "提示", {
				type: "warning",
			}).then(() => {
				that.$API.enm.mpoint.statDelete
					.req(row.id)
					.then((res) => {
						that.getMpointStat();
						that.$refs.mpointStatTable.refresh();
						that.$message.success("删除成功");
					})
					.catch((err) => {
						this.$message.success(err);
					});
			});
		},
		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.val = that.form.val;
					obj.mpoint = that.form.mpoint;
					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;
							
						});
				}
			});
		},
		mpointChange(){
			this.$refs.mpointStatTable.queryData(this.querymplog);
		},
		//****** 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 异常  ****** */
		stLogSuccess(stlogid){
			this.$refs.stlogTable.refresh();
			if(stlogid != undefined || stlogid != null){
				this.getSflogexp(stlogid);
			}else{
				this.sflogexpList = [];
			}
			
		},

		//异常添加
		addStlog() {
			this.current_sflog = this.form.id;
			this.stlogVisiable = true;
			this.$nextTick(() => {
				this.$refs.stlogDialog.open("add");
			});
		},
		//异常编辑
		editStlog(row) {
			this.current_sflog = this.form.id;
			this.stlogVisiable = true;
			this.$nextTick(() => {
				this.$refs.stlogDialog.open("edit").setData(row);
			});
		},
		handleStlog() {
			this.stlogTitle = "异常处理";
			this.stlogForm = row;
			this.visible = true;
		},
		//异常处理
		submit4() {
			let that = this;
			that.$API.wpm.sflogexp.update
				.req(that.sflogExpForm.id, that.sflogExpForm)
				.then((res) => {
					that.isSaveing = false;
					that.visible = false;
					that.$message.success("操作成功");
					that.getSflogexp(that.clickItem.id);
				})
				.catch((res) => {
					that.isSaveing = false;
				});
		},
		//异常删除
		async stlog_delete(row) {
			this.$confirm(`确定删除选中的异常吗？`, "提示", {
				type: "warning",
			}).then(() => {
				this.$API.wpm.stlog.delete
					.req(row.id)
					.then((res) => {
						this.$message.success("删除成功");
						this.stLogSuccess();
					})
			});
		},
		//点击stlog，展示sflogexp
		stlogRowClick(row) {
			console.log(row);
			this.clickItem = row;
			this.getSflogexp(row.id);
		},
		getSflogexp(id) {
			let obj = {};
			obj.page = 0;
			obj.stlog = id;
			this.$API.wpm.sflogexp.list.req(obj).then((res) => {
				this.sflogexpList = res;
			});
		},
		//异常编辑
		sflogexp_edit(row) {
			this.stlogTitle = "本班处理情况";
			this.sflogExpForm.id = row.id;
			this.sflogExpForm.note = row.note;
			this.visible = true;
		},
		//异常处理
		sflogexp_handle(row) {
			this.stlogForm = row;
			this.stlogTitle = "异常处理";
			this.stlogForm.handler = this.$TOOL.data.get("USER_INFO").id;
			this.visible = true;
		},
		//测点录入提交
		submit5(item) {
			let that = this;
			that.isSaveing = true;
			let obj = {};
			obj.val = item.mpFormVal;
			obj.sflog = that.form.id;
			obj.mgroup = that.mgroupId;
			obj.mpoint = item.id;
			that.$API.enm.mpoint.statCreate
				.req(obj)
				.then((res) => {
					that.isSaveing = false;
					that.$message.success("保存成功");
					that.getMpointStat();
					that.$refs.mpointStatTable.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;
}
.mpointChange{
	width:150px;
	position: absolute;
	top: 6px;
	right:10px;
	z-index: 100;
}
</style>
