<template>
	<div class="reportListDetail">
		<headNav
		@backPage="backPage"
		:title="'任务详情'"></headNav>
		
		<!-- 任务信息 -->
		<div class="missionInfo">
			<div class="headTip FontColorInfo">
				任务信息
			</div>
			<div class="missionInfo_cardInfo">
				<div class="missionInfo_cardInfo_headCard df jfsb aic">
					<div class="missionInfo_location FontColorNormal" @click="turnToCompany(dataList.checkObjId)">
						{{ dataList.checkObjName }}
					</div>
					<div class="missionInfo_status">
						<span v-if="dataList.excuteStatus == 1" class="fb FontColorError">待执行</span>
						<span v-else-if="dataList.excuteStatus == 2" class="fb FontColorSuccess">已完成</span>
						<span v-else-if="dataList.excuteStatus == 3" class="fb FontColorOther">执行中</span>
					</div>
				</div>
				<div class="missionInfo_cardInfo_contentCard">
					 <van-cell title="任务编号" :value="dataList.taskId" />
					 <van-cell title="任务下发" :value="dataList.approverName" />
					 <van-cell title="创建时间" :value="dataList.createdTime" />
					 <van-cell title="任务时间" :value="dataList.excuteTime" />
					 <van-cell title="检查对象" :value="dataList.checkObjName" />
					 <van-cell title="任务地点" :value="dataList.taskAddr">
					   <template #right-icon>
					     <van-icon name="location" class="search-icon" color="#0066cc"  @click="getCenter(dataList.taskAddr)" />
					   </template>
					 </van-cell>
					 <van-cell :value="dataList.excutePersonName">
					   <template #title>
					     <span class="custom-title">执行人员</span>
					   </template>
					 </van-cell>
					 <van-cell title="任务概述" :value="dataList.taskSummary" />
				</div>
			</div>
		</div>
		
		<!-- 单位信息 -->
		<div class="companyInfo">
			<div class="headTip FontColorInfo">
				单位信息
			</div>
			
			<div class="missionInfo_cardInfo">
				<div class="missionInfo_cardInfo_contentCard">
					 <van-cell title="单位名称" :value="companyInfo.unitName" />
					 <van-cell title="统一社会信用代码" :value="companyInfo.unitCreditCode" />
					 <van-cell v-if="companyInfo.fireType === '1'" title="消防类型" value="火灾高危单位" />
					 <van-cell v-if="companyInfo.fireType === '2'" title="消防类型" value="消防安全重点单位" />
					 <van-cell v-if="companyInfo.fireType === '3'" title="消防类型" value="一般单位" />
					 <van-cell v-if="companyInfo.fireType === '4'" title="消防类型" value="一般单位" />
					 <van-cell v-if="companyInfo.siteType === '1'" title="场所类型" value="宾馆场所" />
					 <van-cell v-if="companyInfo.siteType === '2'" title="场所类型" value="餐饮场所" />
					 <van-cell title="面积大小" :value="companyInfo.measureArea?companyInfo.measureArea+'㎡':''" />
				</div>
				<div class="missionInfo_cardInfo_more df jfc">
					<van-button type="info" size="small" @click="turnToCompany(dataList.checkObjId)">更 多</van-button>
				</div>
			</div>
		</div>
		
		<!-- 检查结果 -->
		<div class="checkResult">
			<div class="headTip FontColorInfo">
				检查结果
			</div>
			
			<div class="Checked">
				<div class="checkedItem">
					<van-cell 
					title="消防监督检查记录" 
					is-link 
					@click="turnToRecord">
					<template #default>
						<span v-if="hasRecord">查看</span>
						<span v-else>前往检查</span>
					</template>
					</van-cell>
					<div class="FontColorInfo fz12 mb10">
						<!-- 时间： -->
						<span v-if="hasRecord">{{ dataList.updatedTime }}</span>
						<span v-else>— —</span>
					</div>
				</div>
				<div class="checkedItem">
					<van-cell 
					title="任务情况说明" 
					is-link
					@click="turnToResult">
					<template #default>
						<span v-if="hasExplain">查看</span>
						<span v-else>前往检查</span>
					</template>
					</van-cell>
					<div class="FontColorInfo fz12 mb10">
						时间：
						<span v-if="hasExplain">{{ dataList.updatedTime }}</span>
						<span v-else>未进行</span>
					</div>
				</div>
			</div>
		</div>
		
		<!-- 执法记录 -->
		<div class="lawRecord">
			<div class="headTip FontColorInfo">
				执法记录
			</div>
			
			<div class="unChecked">
				<van-empty description="未查询到相关数据">
				  <van-button v-if="dataList.excuteStatus != '2'" type="info" @click="finishCheck(dataList.taskId)">完成检查</van-button>
				</van-empty>
			</div>
		</div>
		
		<!-- 弹出地图展示 -->
		<van-popup 
		v-model="showMap" 
		position="bottom"
		:style="{ height: '450px' }">
			<div>
				<baiduMap :center="center" :zoom="zoom"></baiduMap>
			</div>
		</van-popup>
		
		<!-- 遮罩层 -->
		<v-mask :showOverLay="showOverLay"></v-mask>
	</div>
</template>

<script>
	import headNav from '@/components/headNav.vue'
	import { get, post, put } from '@/utils/http.js'
	import baiduMap from '@/components/baiduMap.vue'
	import mask_overLay from '@/components/overLay_xy.vue'
	
	export default {
		name: 'reportListDetail',
		components: {
			headNav,
			baiduMap,
			'v-mask': mask_overLay
		},
		data() {
			return {
				docIist: [],
				dataList: '',
				companyInfo: '',
				showMap: false,
				showOverLay: false,
				zoom: 14,
				center: '重庆市',
				contNum: '',
				isShowCheckResult: false,
				startCheckBtn: false,
				isReportCheck: false,
				hasRecord: false,
				hasExplain: false,
			}
		},
		mounted() {
			this.init();
			// if (window.history && window.history.pushState) {
			//     history.pushState(null, null, document.URL);
			//     window.addEventListener('popstate', this.goBack, false);
			// }
		},
		// destroyed(){
		//   window.removeEventListener('popstate', this.goBack, false);
		// },
		methods: {
			// 初始化
			async init() {
				this.showOverLay = true;
				await this.getDetailInfoApi();
				await this.getCompanyInfoApi();
				await this.getCheckJudgeApi();
				await this.getAnswerApi();
				this.showOverLay = false;
			},
			
			// 获取任务详情信息
			async getDetailInfoApi() {
				await get(`/cdsupervisionOthertask/get/${ this.$route.params.ID }`).then(res => {
					if (res.success === true) {
						this.dataList = res.data;
						this.$store.commit('taskInfo/setTaskInfo', {
							taskId: this.dataList.taskId,
							id: this.$route.params.ID,
							checkStatus: this.dataList.excuteStatus,
							companyId:  this.dataList.checkObjId,
						});
					}
				}).catch(err => {
					this.$toast.fail('获取任务信息失败');
					this.showOverLay = false;
				});
			},
			
			// 获取单位信息
			async getCompanyInfoApi() {
				await get(`/cdSuperObjE/get/${ this.dataList.checkObjId }`).then(res => {
					if (res.success == true) {
						this.companyInfo = res.data;
					}
				}).catch(err => {
					this.$toast.fail('获取公司信息失败');
					this.showOverLay = false;
				});
			},
			
			async getCheckJudgeApi() {
				await get('/cdsupervisionCheckRecord/listByCondition', {
					taskId: this.dataList.taskId
				}).then(res => {
					if (res.data.length > 0) {
						this.hasRecord = true;
					}
				});
			},
			
			async getAnswerApi() {
				await get('/cdsupervisionTaskDesc/listByCondition', {
					taskId: this.dataList.taskId
				}).then(res => {
					if (res.data.length > 0) {
						this.hasExplain = true;
					}
				});
			},
			
			// 后退一个页面
			backPage() {
				this.$router.push('/');
			},
			
			goBack() {
				this.$router.push('/');
			},
			
			// 跳转单位信息
			turnToCompany(id) {
				this.$router.push(`/companyInfo/${ id }`);
			},
			
			// 获取地图中心位置
			getCenter(location) {
				this.showMap = true;
				this.center = location;
			},
			
			// 跳转消防监督检查记录
			turnToRecord() {
				if (this.hasExplain && !this.hasRecord) {
					this.$toast.fail('已完成任务情况说明');
				} else {
					if (!this.dataList.excuteTime) {
						this.$toast.fail('未设置检查时间');
						return
					}
					
					if (this.dataList.excuteStatus === '1') {
						put('/cdsupervisionOthertask/edit', {
							id: this.$route.params.ID,
							excuteStatus: '3'
						});
					}
					this.$router.push(`/reviewRecord/${ this.$route.params.ID }/${ this.dataList.taskId }/2`);
				}
			},
			
			turnToResult() {
				if (this.hasRecord && !this.hasExplain) {
					this.$toast.fail('已完成监督检查记录');
				} else {
					if (!this.dataList.excuteTime) {
						this.$toast.fail('未设置检查时间');
						return
					}
					if (this.dataList.excuteStatus === '1') {
						put('/cdsupervisionOthertask/edit', {
							id: this.$route.params.ID,
							excuteStatus: '3'
						});
					}
					this.$router.push(`/missionExplain/${ this.dataList.taskId }`);
				}
			},
			
			// 完成检查
			finishCheck(id) {
				if (this.hasExplain || this.hasRecord) {
					put('/cdsupervisionOthertask/edit', {
						id: this.$route.params.ID,
						excuteStatus: '2'
					}).then(res => {
						if (res.success === true) {
							this.init();
						}
					});
				} else {
					this.$toast.fail('至少完成一项检查');
				}
			},
			
			// 复查
			review() {
				this.$router.push('/review');
			},
		}
	}
</script>

<style lang="scss" scoped>
	.reportListDetail {
		font-size: 14px;
		
		.mt2 {
			margin-top: 3px;
		}
		
		.headTip {
			margin-bottom: 10px;
			padding: 0 15px;
		}
		
		.missionInfo {
			margin-top: 57px;
			
			.missionInfo_cardInfo {
				padding: 0 15px;
				background-color: #fff;
				
				.missionInfo_cardInfo_headCard {
					padding-top: 10px;
					padding-bottom: 5px;
					font-weight: bold;
				}
			}
			
			.missionInfo_cardInfo_more {
				
			}
		}
		
		.companyInfo {
			@extend .missionInfo;
			margin-top: 10px;
		}
		
		.noticeDoc {
			margin-top: 10px;
			
			.noticeDoc_docItem {
				padding: 10px 0;
				background-color: #fff;
				color: #616161;
				border-bottom: 1px solid #eaeaea;
				
				&:last-child {
					border-bottom: none;
				}
				
				
				.noticeDoc_noticeName {
					padding: 5px 0;
				}
				
				.noticeDoc_status {
					display: flex;
					justify-content: space-between;
					align-items: center;
					color: #787878;
					font-size: 12px;
					margin-top: 5px;
					// padding: ;
				}
				
			}
		}
		
		.inspectContent {
			margin-top: 10px;
			
			.inspectContent_content {
				padding: 5px 15px;
				background-color: #fff;
			}
		}
		
		.checkResult {
			margin-top: 10px;
			
			.unChecked, .Checked {
				padding: 5px 15px;
				background-color: #fff;
				
				.checkedItem {
					color: #616161;
					border-bottom: 1px solid #e8e8e8;
					
					&:last-child {
						border-bottom: none;
					}
				}
			}
		}
		
		.reCheckResult {
			margin-top: 10px;
			
			.unChecked, .Checked {
				padding: 5px 15px;
				background-color: #fff;
				
			}
			
			.unChecked {
				padding-bottom: 10px;
			}
		}
		
		.lawRecord {
			margin-top: 10px;
			
			.unChecked, .Checked {
				padding: 8px 15px;
				background-color: #fff;
			
				.checkedItem {
					padding: 8px 0;
					align-items: center;
				}
			}
		}
	}
</style>

<style lang="scss">
	.reportListDetail {
		
		.van-cell {
			padding: 8px 0;
			// border-bottom: 1px solid #cfcfcf;
			font-size: 12px;
			
			&:last-child {
				border-bottom: none;
			}
			
			.van-cell__title {
				color: #565656;
			}
		}
		
		
		
		.missionInfo {
			
			.missionInfo_cardInfo {
				
				.search-icon.van-icon.van-icon-location {
					display: flex;
					align-items: center;
					color: #00f;
					margin-left: 10px;
				}
				
				.van-icon.van-icon-arrow.van-cell__right-icon {
					margin-left: 10px;
				}
			}
		}
		
		.missionInfo_cardInfo_more {
			.van-button.van-button--info.van-button--small {
				padding: 5px 20px;
				height: auto;
				margin-bottom: 5px;
				background-color: transparent;
				border: none;
				color: #448FFF;
				font-size: 13px;
				font-weight: bold;
			}
		}
		
		.inspectContent_content {
			
			.van-cell__value {
				color: #02A7F0;
				
				span {
					font-size: 9px;
				}
			}
			
			.van-icon.van-icon-arrow.van-cell__right-icon {
				color: #02A7F0;
				font-size: 12px;
			}
		}
		
			
		.van-empty {
			padding: 0;
			padding-bottom: 10px;
		}
		
		.van-empty__description {
			color: #878787;
			font-weight: bold;
		}
		
		.checkResult, .reCheckResult {
			
			.unChecked, .Checked {
				
				.checkedItem {
					
					.van-cell, .van-cell.van-cell--clickable {
						border: none;
						
						&::after {
							border: none;
						}
					}
					
					.van-cell__value {
						color: #02A7F0;
						
						span {
							font-size: 9px;
						}
					}
					
					.van-icon.van-icon-arrow.van-cell__right-icon {
						color: #02A7F0;
						font-size: 12px;
					}

				}
			}
		}
		
		.van-empty__image {
				width: 140px;
				height: 130px;
		} 
		
		.van-empty__bottom {
			margin-top: 5px;
			
			.van-button.van-button--info.van-button--normal {
				width: 120px;
				height: 40px;
				border-radius: 5px;
			}
		}
		
	}
</style>

