<template>
	<!--基本信息!-->
	<el-main v-loading="mainLoading" style="margin-top: -10px;">
		<div class="exportBtn" @click="handleExport">导出</div>
		<div id="exportDiv" class="exportDiv">
			<p style="font-weight: 600px;font-size: 18px;text-align: center;margin-top: 40px;">{{form.cate_name}}作业许可证<span>（{{ form.number }}）</span></p>
			<p class="tables-title">作业信息</p>
			<el-card shadow="hover">
				<el-descriptions column=2 id="opl__opre">
					<el-descriptions-item label="作业名称:">
						{{ operationObj.name }}
					</el-descriptions-item>
					<el-descriptions-item label="作业区域:">
						<span v-if="operationObj.area_">
							{{ operationObj.area_.name }}
						</span>
					</el-descriptions-item>
					<el-descriptions-item label="生产状态:">
						{{ operationObj.state_work }}
					</el-descriptions-item>
					<el-descriptions-item label="状态:">
						{{ state_[operationObj.state] }}
					</el-descriptions-item>
					<el-descriptions-item label="预计开始:">
						{{ operationObj.start_time }}
					</el-descriptions-item>
					<el-descriptions-item label="预计结束:">
						{{ operationObj.end_time }}
					</el-descriptions-item>
					<el-descriptions-item label="属地部门:">
						<span v-if="operationObj.dept_ter_">
							{{operationObj.dept_ter_.name}}
						</span>
					</el-descriptions-item>
					<el-descriptions-item label="业务部门:">
						<span v-if="operationObj.dept_bus_">
							{{operationObj.dept_bus_.name}}
						</span>
					</el-descriptions-item>
					<el-descriptions-item label="协调员:">
						<span v-if="operationObj.coordinator_">
							{{operationObj.coordinator_.name}}
						</span>
					</el-descriptions-item>
					<el-descriptions-item label="监控设备:" v-if="operationObj.vchannels">
						<span v-for="item in operationObj.vchannels_" :key="item.id">
							{{ item.name}}({{item.code}})/
						</span>
					</el-descriptions-item>
				</el-descriptions>
			</el-card>
			<p class="tables-title">进度流程</p>
			<el-card shadow="hover">
				<work-step v-if="ticketDetail.state" ref="workStep" :ticket="ticketDetail"></work-step>
			</el-card>
			<p class="tables-title">许可证信息</p>
			<el-card shadow="hover">
				<el-descriptions column=2 id="opl__opre">
					<el-descriptions-item label="编号:">
						{{ form.number }}
					</el-descriptions-item>
					<el-descriptions-item label="作业级别:">
						{{ form.level }}
					</el-descriptions-item>
					<el-descriptions-item label="开始时间:">
						{{ form.start_time }}
					</el-descriptions-item>
					<el-descriptions-item label="结束时间:">
						{{ form.end_time }}
					</el-descriptions-item>
					<el-descriptions-item label="状态:">
						<span v-if="form.ticket_&&form.ticket_.state_" style="margin-right: 5px;">{{form.ticket_.state_.name }}</span>
						<span :class="['btnState' ,form.ticket_.act_state===0?'nomalState':form.ticket_.act_state===1?'nomalState':form.ticket_.act_state===2?'dangerState':form.ticket_.act_state===3?'dangerState':form.ticket_.act_state===5?'dangerState':form.ticket_.act_state===4?'successState':'nomalState']"
						v-if="form.ticket_&&form.ticket_.act_state">{{act_states[form.ticket_.act_state]}}</span>
					</el-descriptions-item>
					<el-descriptions-item label="作业部门:">
						<span v-if="form.dept_do_">
							{{form.dept_do_.name}}
						</span>
					</el-descriptions-item>
					<el-descriptions-item label="作业负责人:">
						<span v-if="form.charger_">
							{{form.charger_.name}}
						</span>
					</el-descriptions-item>
					<el-descriptions-item label="作业监护人:">
						<span v-if="form.monitor_">
							{{form.monitor_.name}}
						</span>
					</el-descriptions-item>
					<el-descriptions-item label="风险分析:" span=2>
						<span v-for="item in form.risks_checked_" :key="item.id">
							{{item.name}}<el-divider direction="vertical"></el-divider>
						</span>
					</el-descriptions-item>
					<el-descriptions-item label="控制措施:" span=2>
						<span v-for="item in form.measures_checked_" :key="item.id">
							{{item.name}}<el-divider direction="vertical"></el-divider>
						</span>
					</el-descriptions-item>
					<el-descriptions-item label="监控状态:" span=2  v-if="form.mtask_uid">
						<span>进行中</span>
					</el-descriptions-item>
					<el-descriptions-item label="现场照片:" span=2 v-if="form.create_imgs&&form.create_imgs.length>0">
							<el-image 
								v-for = "item in form.create_imgs_"
								:key = "item.id"
								style="margin-right: 8px;height: 120px;"
								:src="item.path"
								:preview-src-list="[item.path]"
								fit="cover"
							/>
					</el-descriptions-item>
					<el-descriptions-item label="审批照片:" span=2 v-if="form.audit_imgs&&form.audit_imgs.length>0">
						<el-image 
								v-for = "item in form.audit_imgs_"
								:key = "item.id"
								style="margin-right: 8px;height: 146px;height:146px;"
								:src="item.path"
								:preview-src-list="[item.path]"
								fit="cover"
							/>
					</el-descriptions-item>
					<el-descriptions-item label="开始照片:" span=2 v-if="form.work_imgs&&form.work_imgs.length>0">
						<el-image 
								v-for = "item in form.work_imgs_"
								:key = "item.id"
								style="margin-right: 8px;height: 146px;height:146px;"
								:src="item.path"
								:preview-src-list="[item.path]"
								fit="cover"
							/>
					</el-descriptions-item>
					<el-descriptions-item label="作业照片:" span=2 v-if="form.work_imgs&&form.work_imgs.length>0">
						<el-image 
								v-for = "item in form.work_imgs_"
								:key = "item.id"
								style="margin-right: 8px;height: 146px;height:146px;"
								:src="item.path"
								:preview-src-list="[item.path]"
								fit="cover"
							/>
					</el-descriptions-item>
					<el-descriptions-item label="关闭照片:" span=2 v-if="form.close_imgs&&form.close_imgs.length>0">
						<el-image 
								v-for = "item in form.close_imgs_"
								:key = "item.id"
								style="margin-right: 8px;height: 146px;height:146px;"
								:src="item.path"
								:preview-src-list="[item.path]"
								fit="cover"
							/>
					</el-descriptions-item>
				</el-descriptions>
			</el-card>
			<p class="tables-title">作业人员</p>
			<table class="tables" cellspacing="0">
				<tbody>
				<tr class="tableTh tableThS">
					<td class="tableTd">序号</td>
					<td class="tableTd" style="width:100px">姓名</td>
					<td class="tableTd" style="width:120px">工作职责</td>
					<td class="tableTd" style="flex: auto;">证书</td>
					<td class="tableTd" style="width:180px">创建时间</td>
				</tr>
				<tr v-if="workerData.length==0" class="noDataTr"> 无数据</tr>
				<tr class="tableTr tableTrS" v-for="(item,index) in workerData" :key="item.id">
					<td class="tableTd" >{{ index+1 }}</td>
					<td class="tableTd" style="width:100px">{{ item.worker_.name }}</td>
					<td class="tableTd" style="width:120px">{{ item.duty }}</td>
					<td class="tableTd" style="flex: auto;">
						<span v-for="cer in item.certificates_" :key="cer.number">{{cer.name}}-{{cer.number }}</span>
					</td>
					<td class="tableTd" style="width:180px">{{ item.create_time }}</td>
				</tr>
				</tbody>
			</table>
			<p class="tables-title">气体检测记录</p>
			<table class="tables" cellspacing="0">
				<tbody>
				<tr class="tableTh tableThS">
					<td class="tableTd">序号</td>
					<td class="tableTd">检测部位</td>
					<td class="tableTd">O₂（%）</td>
					<td class="tableTd">CO</td>
					<td class="tableTd" style="line-height: 18px;">可燃气体<span style="12px;font-weight:500">(V%LEL)</span></td>
					<td class="tableTd">检验结论</td>
					<td class="tableTd">检测人</td>
					<td class="tableTd">检测时间</td>
					<td class="tableTd">创建时间</td>
				</tr>
				<tr v-if="gasData.length==0" class="noDataTr"> 无数据</tr>
				<tr class="tableTr tableTrS" v-for="(item,index) in gasData" :key="item.id"> 
					<td class="tableTd">{{ index+1 }}</td>
					<td class="tableTd">{{ item.check_place }}</td>
					<td class="tableTd">{{ item.o2 }}</td>
					<td class="tableTd">{{item.co}}</td>
					<td class="tableTd">{{ item.lel }}</td>
					<td class="tableTd">{{ is_ok_[item.is_ok] }}</td>
					<td class="tableTd">{{ item.checker_.name }}</td>
					<td class="tableTd">{{ item.check_time }}</td>
					<td class="tableTd">{{ item.create_time }}</td>
				</tr>
				</tbody>
			</table>
			<p class="tables-title">处理日志</p>
			<table class="tables" cellspacing="0">
				<tbody>
				<tr class="tableTh">
					<td class="tableTd">进行状态</td>
					<td class="tableTd attributeTd">操作类型</td>
					<td class="tableTd attributeTd">操作属性</td>
					<td class="tableTd">操作意见</td>
					<td class="tableTd">操作人</td>
					<!-- <td class="tableTd">电子签名</td> -->
					<td class="tableTd">更新时间</td>
				</tr>
				<tr v-if="logsData.length==0" class="noDataTr"> 无处理日志</tr>
				<tr class="tableTr" v-for="item in logsData" :key="item.id">
					<td class="tableTd" v-if="item.participant_str==null">{{ item.state_.name }}</td>
					<td class="tableTd attributeTd" v-if="item.participant_str==null">{{ typeOptions[item.intervene_type] }}</td>
					<td class="tableTd attributeTd" v-if="item.participant_str==null">
						<span v-if="item.transition_attribute == 1" class="successText">同意</span>
						<span v-else-if="item.transition_attribute == 2" class="dangerText">拒绝</span>
						<span v-else class="dangerText"></span>
					</td>
					<td class="tableTd" v-if="item.participant_str==null">{{ item.suggestion }}</td>
					<td class="tableTd" v-if="item.participant_str==null">
						<span v-if="item.participant_">{{item.participant_.name}}</span>
						<span v-if="item.participant_str">{{item.participant_str}}</span>
						<el-image v-if="item.participant_ && item.participant_.signature" :src="item.participant_.signature" style="width: 60px"></el-image>
						<!-- <img style="width:60px;vertical-align: bottom;" src="./../../../public/img/signature.jpg"> -->
					</td>
					<td class="tableTd" v-if="item.participant_str==null">{{ item.update_time }}</td>
				</tr>
				</tbody>
			</table>
		</div>
		
	</el-main>
</template>

<script>
	import workStep from "./../../views/wf/steps.vue";
	import PdfLoader from '@/utils/html2pdf';
	export default {
		name: "scFire",
		components: {
			workStep
		},
		props: {
			id: { type: String, default: "" },
			wfId: { type: String, default: "" },
		},
		data() {
			return {
				create_imgs_list: [],
				close_imgs_list: [],
				mainLoading: false,
				issave: false, //控制基本信息提交
				search: {
					keyword: null,
				},
				form: {
					id: "",
					start_time: null,
					end_time: null,
					operation: "",
					cate: "",
					risks_checked: [],
				},
				oplcateCode: 'fire',
				operationId: "",
				oplId: "",
				leveloptions: [
					{id: 10, name: "特殊动火"},
					{id: 20, name: "一级动火"},
					{id: 30, name: "二级动火"},
				],
				ticketId:'',
				ticketDetail:{},
				operationObj:{},
				workerData: [],
				gasData: [],
				logsData:[],
				is_ok_: {
					true: "正常",
					false: "不正常",
				},
				state_: {
					10: "创建中",
					20: "审批中",
					30: "待开始",
					40: "进行中",
					50: "已完成",
				},
				act_states: {
					0: "草稿中",
					1: "进行中",
					2: "被退回",
					3: "被撤回",
					4: "已完成",
					5: "已关闭",
				},
				typeOptions: {
					0: "正常处理",
					1: "转交",
					2: "加签",
					3: "加签完成",
					4: "接单",
					5: "评论",
					6: "删除",
					7: "强制关闭",
					8: "强制修改状态",
					9: "hook",
					10: "撤回",
					11: "抄送",
				},
			};
		},
		mounted() {
			let that = this;
			that.oplId = that.id; //许可证ID
			
			this.$nextTick(()=>{
				that.getOplData();
				that.getworkerList();
				that.getgasList();
				
			})
		},
		methods: {
			handleExport() {
				let exportDiv = document.getElementById('exportDiv')  // 需要导出部分页面的id名
    			this.pdfDownLoader = new PdfLoader(exportDiv, '作业许可证', 'exportDiv')  // fileName -->导出文件名,  question-table -->防止被截断的class名
				this.pdfDownLoader.outPutPdfFn(this.form.number);
				exportDiv.style.width = "100%"

			},

			//根据oplId，查许可证
			getOplData() {
				let that = this;
				that.mainLoading = true;
				that.$API.opm.opl.read.req(that.oplId).then((res) => {
					that.mainLoading = false
					that.form = res;
					that.oplcateCode = res.cate_code;
					that.ticketId = res.ticket;
					that.operationId = res.operation; //zuoyeID
					that.$API.wf.ticket.ticketItem.req(that.ticketId).then((ress) => {
						that.ticketDetail = ress;
						that.ticketDetailState = true;
					}).catch(e=>{});
					that.getOperation();
					res.create_imgs_.forEach(item=>{
						console.log(item)
						that.create_imgs_list.push({
							url: item.path,
							name: '',
						})
					})
					res.close_imgs_.forEach(item=>{
						that.close_imgs_list.push({
							url: item.path,
							name: '',
						})
					})
					that.$nextTick(()=>{
						this.$API.wf.ticket.ticketFlowlogs.req(that.ticketId).then((res2) => {
							if (res2.err_msg) {
							} else {
							that.logsData = res2;
							}
						});
					})
				}).catch(e=>{this.mainLoading=false});
			},
			getOperation() {
				this.mainLoading = true;
				this.$API.opm.operation.read
				.req(this.operationId)
				.then((res) => {
				this.mainLoading = false;
				this.operationObj = res;
				})
				.catch((e) => {
				this.mainLoading = false;
				});
			},
			//作业人员列表
			getworkerList() {
				this.$API.opm.worker.list.req({opl: this.oplId, page: 0}).then((res) => {
					this.workerData = res;
				});
			},
			//气体检测记录列表
			getgasList() {
				this.$API.opm.gas.list.req({opl: this.oplId, page: 0}).then((res) => {
					this.gasData = res;
				});
			},
		},
	}
</script>

<style scoped>

.el-drawer__header {
    margin-bottom: 0px;
}
.btnState{
	font-size: 12px;
	padding: 0 9px;
	height: 24px;
	line-height: 23px;
	border-radius: 5px;
	vertical-align: top;
	display: inline-block;
}
.nomalState{
	color: #536dfe;
	border: 1px solid #dcdfe6;
}
.dangerState{
	color: #FF0000;
	border: 1px solid #fbe0e0;
}
.successState{
	color: #14c532;
    border: 1px solid #e6f3e6;
}
.successText{
	color: #14c532;
}
.dangerText{
	color: #FF0000;
}
.tables{
	width: 100%;
	color: #606266;
	border-top: 1px solid #e4e7ed;
	border-left: 1px solid #e4e7ed;
	border-collapse: collapse;
}
.tables-title{
	color: #303331;
    font-size: 16px;
    /* font-weight: 700; */
	margin: 10px 0;
}
.tableTh,.tableTr{
	display: flex;
}
.tableTh>td{
	font-weight: 700;
	/* color: #909399; */
	height: 35px;
	line-height: 35px;
	padding: 0 5px;
	/* background: #fafafa; */
}
.tableThS>td:first-child{
	flex-shrink:0;
	width: 70px;
}

.tableTr>td{
	min-height: 30px;
	line-height: 30px;
	padding: 0 5px;
}
.tableTrS>td:first-child{
	flex-shrink:0;
	width: 70px;
}
.tableTh>td.attributeTd{
	flex-shrink:0;
	width: 90px;
}
.tableTr>td.attributeTd{
	flex-shrink:0;
	width: 90px;
}
td{
	width: 25%;
	border-right: 1px solid #e4e7ed;
	border-bottom: 1px solid #e4e7ed;
}
.noDataTr{
	text-align: center;
	height: 50px;
	line-height: 50px;
	box-sizing: border-box;
	border-bottom: 1px solid #e4e7ed;
	border-right: 1px solid #e4e7ed;
}
.exportDiv{
	margin-top: -30px;
}
.exportBtn{
    width: 120px;
    height: 40px;
    color: #ffffff;
    line-height: 40px;
    text-align: center;
    background: #438af4;
    font-size: 18px;
    border-radius: 5px;
	cursor: pointer;
    /* box-shadow: 0 0 9px 0px rgba(0,0,0,.2); */
}
</style>
