<template>
	<el-container>
		<el-header>
			<div class="left-panel">
				<div style="margin-right: 20px">交接班日志</div>
				<el-date-picker
					v-model="query.start_time__gte"
					type="datetime"
					value-format="YYYY-MM-DD HH:mm:ss"
					placeholder="班开始时间起"
					style="width: 200px"
				/>
				<el-date-picker
					v-model="query.start_time__lte"
					type="datetime"
					value-format="YYYY-MM-DD HH:mm:ss"
					placeholder="班开始时间止"
					style="margin-left: 2px; width: 200px"
				/>
				<el-select
					v-model="query.shift"
					placeholder="班次"
					clearable
					style="margin-left: 2px; width: 120px"
				>
					<el-option
						v-for="item in optionsShift"
						:key="item.id"
						:label="item.name"
						:value="item.id"
					></el-option>
				</el-select>
				<el-select
					v-model="query.team"
					placeholder="班组"
					clearable
					style="margin-left: 2px; width: 120px"
				>
					<el-option
						v-for="item in options"
						:key="item.id"
						:label="item.name"
						:value="item.id"
					></el-option>
				</el-select>
				<el-button
					type="primary"
					icon="el-icon-search"
					@click="handleQuery"
					style="margin-left: 2px"
				></el-button>
			</div>
		</el-header>
		<el-main class="nopadding">
			<scTable
				ref="table"
				:apiObj="apiObj"
				row-key="id"
				stripe
				:params="query"
				highlightCurrentRow
				@row-click="rowClick"
			>
				<el-table-column type="index" width="50" />
				<el-table-column label="开始时间" prop="start_time">
					<template #default="scope">
						<span>{{ scope.row.start_time.slice(0, 16) }}</span>
					</template>
				</el-table-column>
				<el-table-column label="结束时间" prop="end_time">
					<template #default="scope">
						<span>{{ scope.row.end_time.slice(0, 16) }}</span>
					</template>
				</el-table-column>
				<el-table-column
					label="班组名称"
					prop="team_name"
				></el-table-column>
				<el-table-column
					label="当前班次"
					prop="shift_name"
				></el-table-column>
				<el-table-column
					label="班长"
					prop="leader_name"
				></el-table-column>

				<el-table-column label="检验时间">
					<template #default="scope">
						<span v-if="scope.row.last_test_time">{{
							scope.row.last_test_time.slice(0, 16)
						}}</span>
					</template>
				</el-table-column>
				<el-table-column
					label="操作"
					fixed="right"
					align="center"
					width="120"
				>
					<template #default="scope">
						<el-button
							link
							size="small"
							@click="sflog_edit(scope.row)"
							v-auth="'sflog.update'"
							type="primary"
							>编辑</el-button
						>
						<!-- <el-button link size="small" @click="sflog_check(scope.row)" type="primary">质量检验</el-button> -->
						<!-- <el-button link size="small" @click="sflog_other(scope.row)" type="primary">其他能源</el-button> -->
						<!-- <el-divider direction="vertical"></el-divider> -->
						<el-button
							link
							size="small"
							@click="sflog_export(scope.row)"
							type="success"
							>报表</el-button
						>
					</template>
				</el-table-column>
			</scTable>
		</el-main>
		<el-drawer v-model="limitedExport" size="60%" :show-close="false">
			<template #header="{ close, titleId, titleClass }">
				<h4 :id="titleId" :class="titleClass">交接班日志</h4>
				<el-button type="danger" @click="close">
					<el-icon class="el-icon--left">
						<CircleCloseFilled />
					</el-icon>
					关闭
				</el-button>
			</template>
			<div class="left-panel">
				<el-button
					type="primary"
					@click="exportExcel()"
					:loading="exportLoading"
					>导出xlsx
				</el-button>
				<el-button type="primary" @click="handlePrint">打印 </el-button>
			</div>
			<el-main class="nopadding">
				<div ref="print" id="myReport" class="printContainer">
					<div
						style="
							margin-right: 20px;
							text-align: center;
							font-size: 16px;
							font-weight: bold;
							margin-bottom: 20px;
						"
					>
						<span v-if="sflogItem.end_time">{{
							sflogItem.end_time.slice(0, 10)
						}}</span>
						<span
							v-if="sflogItem.shift_name"
							style="margin: 0 10px"
							>{{ sflogItem.shift_name }}</span
						>
						<span v-if="sflogItem.team_name">{{
							sflogItem.team_name
						}}</span>
					</div>
					<table
						border="1"
						width="1000"
						cellspacing="0"
						:key="timeStamp"
						id="myTable"
					>
						<tbody>
							<tr>
								<td class="numCell">产量（t）</td>
								<td class="numCell">
									{{ reportItem.total_production }}
								</td>
								<td class="numCell">台时（t/h）</td>
								<td class="numCell">
									{{ reportItem.production_hour }}
								</td>
								<td class="numCell">运转时间（h）</td>
								<td class="numCell">
									{{ reportItem.run_hour }}
								</td>
							</tr>
							<tr>
								<td class="numCell">运转率（%）</td>
								<td class="numCell">
									{{ reportItem.run_rate }}
								</td>
								<td class="numCell">停机时长（h）</td>
								<td class="numCell">
									{{ reportItem.shut_hour }}
								</td>
								<td class="numCell">煤磨分布电耗（kW·h/t）</td>
								<td class="numCell">
									{{ reportItem.elec_consume_unit }}
								</td>
							</tr>

							<tr v-if="sflogexpList.length > 0">
								<td
									class="numCell"
									:rowspan="sflogexpList.length + 1"
								>
									生产情况记录
								</td>
								<td class="numCell">时间</td>
								<td class="numCell">类别</td>
								<td class="numCell">原因</td>
								<td class="numCell">处置措施</td>
								<td class="numCell">处置人</td>
							</tr>
							<tr v-for="item in sflogexpList" :key="item.id">
								<td class="numCell">{{ item.happen_time }}</td>
								<td class="numCell">{{ item.cate }}</td>
								<td class="numCell">{{ item.reason }}</td>
								<td class="numCell">{{ item.measure }}</td>
								<td class="numCell">{{ item.handler }}</td>
							</tr>
						</tbody>
					</table>
				</div>
			</el-main>
		</el-drawer>
	</el-container>
</template>
<script>
export default {
	name: "sflog",
	data() {
		return {
			apiObj: null,
			apiObj2: null,
			query: {
				shift: "",
				team: "",
				end_time__lt: "",
				start_time__gte: "",
				mgroup: "",
			},
			deptId: "",
			sflogItem: {},
			options: [],
			optionsShift: [],
			limitedExport: false,
			reportItem: {},
			sflogexpList: [],
		};
	},
	mounted() {
		this.$API.mtm.mgroup.list
			.req({ page: 0, search: "煤磨" })
			.then((res) => {
				console.log("煤磨", res);
				this.query.mgroup = res[0].id;
				this.apiObj = this.$API.wpm.sflog.list;
				this.deptId = res[0].belong_dept;
				this.getTeam();
				this.getShfit();
			});
	},
	methods: {
		getTeam() {
			let form = {};
			form.page = 0;
			form.belong_dept = this.deptId;
			this.$API.mtm.team.list.req(form).then((res) => {
				this.options = res;
			});
		},
		getShfit() {
			this.$API.mtm.shift.list.req({ page: 0 }).then((res) => {
				this.optionsShift = res;
			});
		},
		handleQuery() {
			this.$refs.table.queryData(this.query);
		},
		sflog_export() {
			this.limitedExport = true;
		},
		rowClick(row) {
			this.sflogId = row.id;
			this.sflogItem = row;
			this.getSflogItem(row.id);
			this.getSflogexp(row.id);
		},
		getSflogexp(id) {
			let that = this;
			that.$API.wpm.sflogexp.list
				.req({ page: 0, sflog: id })
				.then((res) => {
					that.sflogexpList = res;
				});
		},
		getSflogItem(id) {
			let that = this;
			that.$API.enm.enstat
				.req({ type: "sflog", sflog: id, page: 0 })
				.then((res) => {
					if (res.length > 0) {
						that.reportItem = res[0];
					}
					console.log(res[0]);
				});
		},
		//编辑
		sflog_edit(row) {
			let jsonStr = JSON.stringify(row);
			this.$TOOL.data.remove("sflogItem");
			this.$TOOL.data.set("sflogItem", jsonStr);
			this.$router.push({
				name: "logDetail",
				query: {
					mgroupId: row.mgroup,
					deptId: this.deptId,
				},
			});
		},
		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>
