<template>
	<div class="reportListDetail">
		<headNav :title="'单位信息'" class="headNav"></headNav>
		<!-- 单位信息 -->
		<div class="companyInfo">
			<div class="missionInfo_cardInfo">
				<div class="missionInfo_cardInfo_contentCard">
					<van-cell title="单位名称" class="visible_cell__value" :value="enforeObj.enforce_obj_name"></van-cell>
                    <van-cell title="统一社会信用代码" :value="enforeObj.credit_code"></van-cell>
					<van-cell title="单位地址" class="visible_cell__value" :value="enforeObj.enforce_obj_address" />
					<van-cell title="成立日期" :value="enforeObj.register_date" />
					<van-cell title="营业期限" :value="enforeObj.operating_date"/>
					<van-cell title="单位法人" :value="enforeObj.legal_person" />
					<van-cell title="联系方式" :value="enforeObj.legal_person_phone" />
                </div>
			</div>
			<div class="missionInfo_cardInfo">
                <div class="missionInfo_cardInfo_contentCard">
                    <div class="headTip FontColorInfo">消防信息</div>
					<van-cell title="单位类型" :value="enforceObjType[enforeObj.enforce_obj_type]" />
					<van-cell title="场所类型" :value="enforceObjPlaceType[enforeObj.place_type]" />
					<van-cell title="面积大小" :value="enforeObj.area" />
					<van-cell title="建筑类型" :value="enforceObjArchitectureType[enforeObj.architecture_type]" />
				</div>
            </div>
            <div class="missionInfo_cardInfo">
                <div class="missionInfo_cardInfo_contentCard">
                    <div class="headTip FontColorInfo">消防联系人</div>
					<van-cell title="消防安全责任人" :value="enforeObj.charge_person" />
					<van-cell title="联系方式" :value="enforeObj.charge_person_phone" />
					<van-cell title="消防安全管理人" :value="enforeObj.manage_person" />
					<van-cell title="联系方式" :value="enforeObj.manage_person_phone" />
				</div>
            </div>
            <div class="missionInfo_cardInfo">
                <div class="missionInfo_cardInfo_contentCard">
                    <div class="headTip FontColorInfo">相关文件</div>
					<van-cell title="文件编号" :value="enforeObj.certificates && enforeObj.certificates.map(el => el.cer_no).join(',')" />
					<van-cell title="消防设施" :value="enforeObj.certificates && enforeObj.certificates.map(el => el.facility).join(',')" />
					<van-cell title="证件文件">
						<template>
							<van-image v-for="(item, index) in certificateImageList" :key="item"
								width="60px"
								height="60px"
								fit="contain"
								:src="item"
								@click="clickImage(item, index)"
							>
							<template v-slot:loading>
								<van-loading type="spinner" size="20" />
							</template>
							</van-image>
						</template>
					</van-cell>
				</div>
            </div>
			<div class="missionInfo_cardInfo">
                <div class="missionInfo_cardInfo_contentCard">
                    <div class="headTip FontColorInfo">近期隐患</div>
					<van-cell title="2021-08-01" :value="`${historyNotPassTotal}项隐患`" class="history_not_pass" is-link :to="{
						path: `/reportJobHistoryNotPass/${$route.params.id}`
					}"/>
				</div>
            </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 { ImagePreview } from 'vant';
import { get, post, put } from "@/utils/http.js";
import dayjs from 'dayjs'
import { enfoceJobStatus, enfoceJobSource, enforceObjPlaceType, enforceObjType,enforceObjArchitectureType } from "@/utils/variables.js";
import { handleProblemImgs } from "@/utils/index.js";
import baiduMap from "@/components/baiduMap.vue";
import mask_overLay from "@/components/overLay_xy.vue";

export default {
	name: "enforceObjInfo",
	components: {
		headNav,
		baiduMap,
		"v-mask": mask_overLay,
	},
	data() {
		return {
			dayjs,
            enforceObjArchitectureType,
            enforceObjType,
            enforceObjPlaceType,
			enfoceJobStatus,
			enfoceJobSource,
			docIist: [],
			dataList: "",
			companyInfo: "",
			showMap: false,
			showOverLay: false,
			zoom: 14,
			center: "重庆市",
			contNum: "",
			isShowCheckResult: false,
			startCheckBtn: false,
			isReportCheck: false,
			hasJudge: false,
			resultValue: "改正通知书",
			historyNotPass: null,
			historyNotPassTotal: 0
		};
	},
    computed: {
        enforeObj() {
            const enforeObj = this.$route.query.enforeObj
            return enforeObj ? JSON.parse(enforeObj) : {}
        },
		certificateImageList() {
			if (!this.enforeObj || !this.enforeObj.certificates) return []
			let res = []
			this.enforeObj.certificates.forEach(el => {
				if (!el.file_ids) return
				res = res.concat(el.file_ids.split(',').map(ele => handleProblemImgs(ele)))
			})
			return res
		}
    },
    created() {
        this.init()
    },
	mounted() {
		// 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: {
		clickImage(url, index) {
			ImagePreview({
				images: this.certificateImageList,
				startPosition: index,
				closeable: true
			})
		},
		// 初始化
		async init() {
			this.showOverLay = true;
			await this.gethistoryProblem();
			this.showOverLay = false;
		},

		// 获取任务详情信息
		async gethistoryProblem() {
			const id = this.$route.params.id
			await this.$http.get(`/v2/api/enforce-job`, {
				params: {
					page: 1,
					size: 10000,
					query: `enforce_obj_id=='${id}';enforce_result=='NOT_PASS'`
				}
			})
				.then((res) => {
					this.historyNotPass = res.data.data
					this.historyNotPassTotal = res.data.total
				})
				.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.hasJudge = true;
			// 	} else {
			// 		this.resultValue = "检查合格";
			// 	}
			// });
		},

		// 后退一个页面
		backPage() {
			this.$router.push("/");
		},

		goBack() {
			this.$router.push("/");
		},

		// 跳转单位信息
		turnToCompany(id) {
			this.$router.push(`/companyInfo/${id}`);
		},

		// 获取地图中心位置
		getCenter(location) {
			this.showMap = true;
			this.center = location;
		},

		// 跳转消防监督检查记录
		turnToRecord() {
			this.$router.push(
				`/reviewRecord/${this.$route.params.ID}/${this.dataList.taskId}/1`
			);
		},

		turnToResult() {
			if (this.hasJudge) {
				this.$router.push(
					`/checkResultDetail/${this.$route.params.ID}/${this.dataList.taskId}/1`
				);
			} else {
				return;
			}
		},

		// 开始检查
		startCheck(id) {
			if (this.dataList.excuteStatus === "1") {
				if (this.dataList.excuteTime) {
					put("/cdsupervisionOthertask/edit", {
						id: this.$route.params.ID,
						excuteStatus: "3",
					}).then((res) => {
						if (res.success === true) {
							this.$router.push(
								`/reviewRecord/${this.$route.params.ID}/${this.dataList.taskId}/1`
							);
						}
					});
				} else {
					this.$toast.fail("暂无检查时间");
				}
			} else {
				this.$router.push(
					`/reviewRecord/${this.$route.params.ID}/${this.dataList.taskId}/1`
				);
			}
		},

		// 复查
		review() {
			this.$router.push("/review");
		},
	},
};
</script>

<style lang="scss" scoped>
.reportListDetail {
	font-size: 14px;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    .headNav {
        flex: 0 0 50px;
    }
    .companyInfo {
        flex: 1;
        overflow: auto;
    }
	.mt2 {
		margin-top: 3px;
	}

	.headTip {
		padding: 8px 15px;
        background-color: rgba(0,0,0,.1);
        color: #565656; 
	}

	.missionInfo {
		margin-top: 57px;

		.missionInfo_cardInfo {
			background-color: #fff;
            /deep/ {
                .van-cell {
                    padding: 8px 15px;
                    border-bottom: 1px solid #ddd;
                    &:after {
                        display: none;
                    }
                }
            }
		}
	}

	.companyInfo {
		@extend .missionInfo;
        margin-top: 50px;
	}


	.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;
			}
		}
	}
}
.history_not_pass {
	/deep/ {
		.van-cell__value {
			color: red;
		}
	}
}
</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>
