<template>
	<div class="h5">
		<div class="top"></div>
		<div class="name">
			<div class="" v-if="detail">{{detail.gcjzmc || '暂无'}}</div>
		</div>
		<div class="content" v-if="detail">
			<div class="fxewm">
				<div style="width: 60%;">
					<div style="margin-bottom: 19px;">
						<div class="fxdj">风险等级</div>
						<div class="fxdjFlex">
							<div class="fxTxt" :style="'background-color: ' + color">{{detail.fxdj}}</div>
						</div>
					</div>
					<div class="fxdj">主要风险点</div>
					<div style="display: flex;
				flex-wrap: wrap;">
						<!-- <div class="gdst">疏通管道拥堵</div>
						<div class="gdst">疏通管道</div>
						<div class="gdst">疏通管道拥堵</div>
						<div class="gdst">疏通管道拥堵</div> -->
						<span class="gdst" v-for="(item, i) in fxd" :key="i">{{ item }},</span>
					</div>
				</div>
				<div class="ewm">
					<img class="ewmImg" :src="'data:image/png;base64,' + qrcode" alt="" v-if="qrcode" />
				</div>
			</div>
			<div class="title">基础信息</div>
			<!-- <div class="contPlate">
				<div class="text">区域</div>
				<div class="txt">{{detail.qx || '-'}}</div>
			</div> -->
			<div class="contPlate">
				<div class="text">详细地址</div>
				<div class="txt">{{detail.xxdz || '-'}}</div>
			</div>
			<div class="contPlate">
				<div class="text">乡镇街道</div>
				<div class="txt">{{detail.xzjd || '-'}}</div>
			</div>
			<div class="contPlate">
				<div class="text">高度</div>
				<div class="txt">{{detail.gd || '-'}}m</div>
			</div>
			<div class="archText">建筑照片</div>
			<div class="attImg">
				<div v-for="(item,index) in img" :key="index">
					<el-image style="width: 64px; height: 49px; margin-right: 4px" :src="item.url"
						:preview-src-list="srcList">
					</el-image>
				</div>
			</div>
			<div class="contPlate">
				<div class="text">建筑面积</div>
				<div class="txt">{{detail.jzmj || '-'}}㎡</div>
			</div>
			<div class="contPlate">
				<div class="text">地上楼层</div>
				<div class="txt">{{detail.dslc || '-'}}</div>
			</div>
			<div class="contPlate">
				<div class="text">地下楼层</div>
				<div class="txt">{{detail.dxlc || '-'}}</div>
			</div>
			<div class="contPlate">
				<div class="text">建筑年代</div>
				<div class="txt">{{detail.jcnd || '-'}}</div>
			</div>
			<div class="contPlate">
				<div class="text">建筑定性</div>
				<div class="txt">{{detail.jzdx || '-'}}</div>
			</div>
			<div class="contPlate">
				<div class="text">建筑内使用功能</div>
				<div class="txt">{{detail.jznsygn || '-'}}</div>
			</div>
			<div class="title">管理信息</div>
			<div class="contPlate">
				<div class="text">消防安全管理形式</div>
				<div class="txt">{{detail.xfaqglxs || '-'}}</div>
			</div>
			<div class="contPlate">
				<div class="text">管理主体</div>
				<div class="txt">{{detail.glzthztjzd || '-'}}</div>
			</div>
			<div class="contPlate">
				<div class="text">消防安全管理人</div>
				<div class="txt">{{detail.xfaqglr || '-'}}</div>
			</div>
			<div class="title">维保信息</div>
			<div class="contPlate">
				<div class="text">是否有维保单位</div>
				<div class="txt">{{detail.sfywbdw || '-'}}</div>
			</div>
			<div class="contPlate">
				<div class="text">维保单位名称</div>
				<div class="txt">{{detail.wbdwzl || '-'}}</div>
			</div>
			<div class="title on">维保记录</div>
			<div v-if="list4 && list4.length > 0">
				<div class="wbjl">
					<div>维保日期</div>
					<div>现场巡查人</div>
					<div>维保结果</div>
				</div>
				<div class="wbWb">
					<div class="wbjlList" v-for="(item,index) in list4" :key="index">
						<div class="wbBox">
							<div class="wbCont" style="text-align: left;">{{item.wbsj || '无'}}</div>
							<div class="wbCont">{{item.xcjcr || '无'}}</div>
							<div class="wbCont on">{{item.zyzt || '无'}}</div>
						</div>
					</div>
				</div>
			</div>
			<div v-else class="wbwsj"></div>
			<!-- <div class="title">消防安全资料</div>
			<div style="display: flex;margin-bottom: 17px;" v-for="(item,index) in files " :key="index">
				<div class="textNe">{{item.name}}</div>
				<a :href="item.url" target="_blank" class="fjTxtOn">附件下载</a>
			</div> -->
		</div>
	</div>
</template>
<script>
	import {
		getGcjzjcxx,
		getFxdj,
		getWbqk,
		getQrcode,
		getFile
	} from '@/api/h5.js'
	export default {
		name: "H5",
		components: {},
		data() {
			return {
				img: [],
				files: [],
				color: null,
				list4: [],
				fxd: [],
				params: {
					pageSize: 100,
					pageNum: 1,
					qy: null,
					id: null
				},
				qrcode: null,
				detail: {},
				height: 1000,
				srcList: [],
			};
		},
		mounted() {
			// 获取屏幕高度
			const height = window.screen.height;
			console.log(height);
			this.height = height;
			document.title = "建筑信息";
			// 获取参数
			const id = this.getQueryString("id");
			console.log(id);
			if (!id) {
				return;
			}

			this.params.id = id;
			this.getData();
			this.getFiles();
		},
		methods: {
			getQueryString(name) {
				var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
				var r = window.location.search.substr(1).match(reg);
				if (r != null) {
					return unescape(r[2]);
				}
				return null;
			},
			getData() {
				const pId = {
					id: this.params.id
				}
				getGcjzjcxx(pId).then((res) => {
					this.detail = res.data.data;
					let color = "";
					let bgColor = "";
					if (this.detail.fxdj.indexOf("低风险") >= 0) {
						color = "#00A3FF";
						bgColor = "#00A3FF";
					} else if (this.detail.fxjd.indexOf("一般风险") >= 0) {
						color = "#fbff3d";
					} else if (
						this.detail.fxjd.indexOf("较大风险") >= 0 ||
						this.detail.fxjd.indexOf("较高风险") >= 0
					) {
						color = "#ff833d";
						bgColor = "#ff833d";
					} else if (this.detail.fxjd.indexOf("重大风险") >= 0) {
						color = "#ff0b0b";
						bgColor = "#ff0b0b";
					} else {
						color = "#35c2ff";
						bgColor = "#35c2ff";
					}
					this.color = bgColor;
					getQrcode({
						url: window.location.origin + "/h5?id=" + this.detail.id,
						color,
					}).then((res) => {
						const data = JSON.parse(res.data.data);
						this.qrcode = data.qr_code;
					});
				});
               const wbCs = {
               	jzid:this.params.id,
               	pageSize: 100,
               	pageNum: 1,
               }
				getFxdj(wbCs).then((res) => {
					this.fxd = res.data.rows.map((p) => p.yhxmmc);
				});
				
				getWbqk(wbCs).then((res) => {
					this.list4 = res.data.rows;
					console.log(this.list4,987);
				});
			},
			getFiles() {
				getFile({
					jzid: this.params.id,
					ywid: ""
				}).then((res) => {
					const files = [];
					if (res.data.data && res.data.data.length > 0) {
						res.data.data.forEach((p) => {
							files.push({
								url: `http://183.66.101.53:8787/images/${this.detail.id}/${p.fjlj}`,
								name: p.fjmc,
							});
						});
					}
					this.img = files.filter(i => i.name.indexOf(".jpg") >= 0)
					this.files = files.filter(i => i.name.indexOf(".pdf") >= 0)
					console.log(this.files, 123);
					this.srcList = files
						.filter((p) => p.name.indexOf(".jpg") >= 0)
						.map((p) => p.url);
				});
			},
		},
	};
</script>

<style scoped lang="less">
	.fjTxtOn {
		width: 120px;
		color: #1A1818;
		text-align: center;
		font-size: 16px;
		color: #0085FF;
		background-image: url(../../../src/assets/images/jt.png);
		background-repeat: no-repeat;
		background-position: 100px center;
		background-size: 20px;
	}
	
	.fjTxtNo {
		width: 120px;
		color: #1A1818;
		text-align: center;
		font-size: 16px;
		color: #0085FF;
		background-image: url(../../../src/assets/images/jt.png);
		background-repeat: no-repeat;
		background-position: 100px center;
		background-size: 20px;
	}
	.textNe {
		color: #636262;
		text-align: left;
		font-size: 16px;
	}
	
	.textEn {
		width: 200px;
		color: #636262;
		text-align: left;
		font-size: 16px;
	}
	.h5 {
		width: 100%;
		// height: 100vh;
		background-color: #f6f5f5;

		.top {
			width: 100%;
			height: 144px;
			background: linear-gradient(180deg,
					#5ba7ff 0%,
					rgba(0, 87, 255, 0.87) 100%);
		}

		.name {
			width: calc(100% - 14px);
			height: 56px;
			display: flex;
			justify-content: center;
			background-image: url(../../assets/images/jzimg.png);
			background-position: 20px center;
			background-size: 20px;
			background-repeat: no-repeat;
			background-color: #ffffff;
			margin: 0 7px;
			border-radius: 3px;
			margin-top: -28px;
			color: #000;
			line-height: 56px;
			font-family: 'PingFang SC';
			font-style: normal;
			font-weight: 500;
			font-size: 18px;
		}

		.content {
			width: calc(100% - 14px);
			height: auto;
			background-color: #ffffff;
			margin: 0 7px;
			border-radius: 3px;
			margin-top: 6px;
			padding: 11px 11px 50px 14px;
			box-sizing: border-box;

			.title {
				width: 375px;
				height: 38px;
				background: #56B1E3;
				margin-left: -12px;
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 400;
				font-size: 16px;
				line-height: 38px;
				padding-left: 13px;
				box-sizing: border-box;
				margin-bottom: 17px;
			}

			.title.on {
				margin-bottom: 0;
			}

			.wbjl {
				background: #527391;
				height: 29px;
				display: flex;
				align-content: center;
				justify-content: space-between;
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 400;
				font-size: 14px;
				color: #FFF;
				line-height: 29px;
				padding: 0 16px;
				box-sizing: border-box;
			}

			.wbWb {
				background: #DCEEFF;
				height: 107px;
				overflow: auto;

				.wbjlList {
					background: #DCEEFF;
					padding: 10px 20px;
					box-sizing: border-box;
					color: #000;
					border-bottom: 1px solid #FFF;

					.wbBox {
						display: flex;
						align-items: center;

						.wbCont {
							flex-grow: 1;
							text-align: center;
						}

						.wbCont.on {
							text-align: right;
						}
					}
				}
			}

			.wbwsj {
				width: 100%;
				height: 107px;
				background-image: url(../../assets/images/null2.png);
				background-size: 120px;
				background-repeat: no-repeat;
				background-position: center;
			}

			.row {
				width: 100%;
				height: 22px;
				margin-bottom: 17px;
				display: flex;

				.label {
					width: 65px;
					height: 100%;
					font-family: "PingFang SC";
					font-style: normal;
					font-weight: 400;
					font-size: 16px;
					line-height: 22px;
					color: #636262;
					margin-right: 22px;
				}

				.value {
					flex-grow: 1;
					height: 100%;
					font-family: "PingFang SC";
					font-style: normal;
					font-weight: 400;
					font-size: 16px;
					line-height: 22px;
					color: #1a1818;
				}
			}

			.contPlate {
				display: flex;
				align-items: center;
				// flex-wrap: wrap;
				margin-bottom: 17px;

				.text {
					color: #636262;
					font-size: 16px;
				}


				.txt {
					flex-grow: 1;
					color: #1A1818;
					text-align: center;
					font-size: 16px;
				}
			}

			.contPlate:nth-last-child(1) {
				margin-bottom: 0;
			}

			.archText {
				color: #a5a5a5;
				font-size: 16px;
			}

			.attImg {
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				margin: 17px 0;

				.img {
					width: 50px;
					height: 50px;
					margin-right: 10px;

				}
			}
		}

		.fxewm {
			padding: 19px 0 19px 0;
			box-sizing: border-box;
			// border: 1px solid red;
			color: #000;
			display: flex;
			// margin-bottom: 28px;
			display: flex;
			justify-content: space-between;

			.ewm {
				width: 137px;
				height: 121px;
				// border: 1px solid red;
			}

			.ewmImg {
				width: 137px;
				height: 121px;
			}

			.fxdj {

				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 400;
				font-size: 16px;
				color: #636262;
				margin-bottom: 9px;

			}

			.gdst {
				// padding: 5px 13px;
				box-sizing: border-box;
				// background: #F18787;
				font-family: 'Abel';
				font-style: normal;
				font-weight: 400;
				font-size: 12px;
				color: #454545;
				margin: 0 3px;
				margin-bottom: 9px;
			}

			.fxdjFlex {

				.fxTxt {
					width: 108px;
					height: 22px;
					background: #35C2FF;
					font-family: 'PingFang SC';
					font-style: normal;
					font-weight: 400;
					font-size: 16px;
					line-height: 22px;
					text-align: center;
					color: #FFFFFF;
					margin-bottom: 5px;
				}

			}
		}
	}
</style>
