<template>
	<div>
		<div style="display: flex;justify-content: flex-end;margin-right: 22px;margin-top: 8px;margin-bottom: 3px;">
			<div class="tab">
				<div class="tabTxt" :class="activeTab == 1 ? 'tabTxt':'on'" @click="changeTab(1)">建筑信息</div>
				<div class="tabTxt" :class="activeTab == 2 ? 'tabTxt':'on'" @click="changeTab(2)">案件信息</div>
				<div class="tabTxt" :class="activeTab == 3 ? 'tabTxt':'on'" @click="changeTab(3)">物联网设备</div>
			</div>
		</div>
		<div v-if="activeTab == 1">
			<div class="plate">{{jzxxList.gcjzmc || '-'}}</div>
			<div style="height: 235px; margin: 0 20px;">
				<div class="pCont">
					<div class="pCOntent on">
						<div class="PTxt">建筑年代：</div>
						<div class="Ptext">{{jzxxList.jcnd || '-'}}</div>
					</div>
					<div class="pCOntent">
						<div class="PTxt">建筑类型：</div>
						<div class="Ptext">{{jzxxList.jzdx || '-'}}</div>
					</div>
				</div>
				<div class="pCont">
					<div class="pCOntent on">
						<div class="PTxt">建筑地址：</div>
						<div class="Ptext">{{jzxxList.jzdz || '-'}}</div>
					</div>
					<div class="pCOntent">
						<div class="PTxt">总楼层：</div>
						<div class="Ptext">{{jzxxList.dslc || '-'}}</div>
					</div>
				</div>
				<div class="pCont">
					<div class="pCOntent on">
						<div class="PTxt">建筑结构：</div>
						<div class="Ptext">{{jzxxList.jzdx || '-'}}</div>
					</div>
					<div class="pCOntent">
						<div class="PTxt">建筑用途：</div>
						<div class="Ptext">{{jzxxList.jznsygn || '-'}}</div>
					</div>
				</div>
				<div class="pCont">
					<div class="pCOntent on">
						<div class="PTxt">占地面积：</div>
						<div class="Ptext">{{jzxxList.jzmj || '-'}}</div>
					</div>
					<div class="pCOntent">
						<div class="PTxt">建筑面积：</div>
						<div class="Ptext">{{jzxxList.jzmj || '-'}}</div>
					</div>
				</div>
				<div class="pCont">
					<div class="pCOntent on">
						<div class="PTxt">管理单位：</div>
						<div class="Ptext">{{jzxxList.glzthztjzd || '-'}}</div>
					</div>
					<div class="pCOntent">
						<div class="PTxt">消防控制室：</div>
						<div class="Ptext">{{jzxxList.xfaqglxs || '-'}}</div>
					</div>
				</div>
				<div class="pCont">
					<div class="pCOntent on">
						<div class="PTxt">消防安全责任人：</div>
						<div class="Ptext">{{jzxxList.xfaqzrr || '-'}}</div>
					</div>
					<div class="pCOntent">
						<div class="PTxt">联系方式：</div>
						<div class="Ptext">{{jzxxList.xfaqzrrlxdh || '-'}}</div>
					</div>
				</div>
				<div class="pCont">
					<div class="pCOntent on">
						<div class="PTxt">消防安全管理人：</div>
						<div class="Ptext">{{jzxxList.xfaqlxr || '-'}}</div>
					</div>
					<div class="pCOntent">
						<div class="PTxt">联系方式：</div>
						<div class="Ptext">{{jzxxList.xfaqlxrlxdh || '-'}}</div>
					</div>
				</div>
				<div class="pCont">
					<div class="pCOntent on">
						<div class="PTxt">消防安全联系人：</div>
						<div class="Ptext">{{jzxxList.xfaqzbr || '-'}}</div>
					</div>
					<div class="pCOntent">
						<div class="PTxt">联系方式：</div>
						<div class="Ptext">{{jzxxList.xfaqzbrlxdh || '-'}}</div>
					</div>
				</div>
				<div class="pCont">
					<div class="pCOntent on">
						<div class="PTxt">消防室值班人员：</div>
						<div class="Ptext">{{jzxxList.xfaqzbr || '-'}}</div>
					</div>
					<div class="pCOntent">
						<div class="PTxt">联系方式：</div>
						<div class="Ptext">{{jzxxList.xfaqzbrlxdh || '-'}}</div>
					</div>
				</div>
			</div>
			<div class="att">建筑附件：</div>
			<div style="display: flex;margin: 0 20px;margin-top: 10px;" v-if="jzxxList.jzzp">
				<el-image style="width: 75px; height: 51px;margin-right: 29px;" :src="jzxxList.jzzp"
					:preview-src-list="srcList">
				</el-image>
				<el-image style="width: 75px; height: 51px;margin-right: 29px;" :src="jzxxList.jzzp1"
					:preview-src-list="srcList">
				</el-image>
				<el-image style="width: 75px; height: 51px;margin-right: 29px;" :src="jzxxList.jzzp2"
					:preview-src-list="srcList">
				</el-image>
				<el-image style="width: 75px; height: 51px;margin-right: 29px;" :src="jzxxList.jzzp3"
					:preview-src-list="srcList">
				</el-image>
				<el-image style="width: 75px; height: 51px;margin-right: 29px;" :src="jzxxList.jzzp4"
					:preview-src-list="srcList">
				</el-image>
			</div>
		</div>
		<div v-if="activeTab == 2">
			<div class="plate" v-if="ajxxList">{{ajxxList.zhcs || '-'}}</div>
			<div style="height: 235px; margin: 0 20px;" >
				<div class="pCont">
					<div class="pCOntent on">
						<div class="PTxt">报警电话：</div>
						<div class="Ptext" v-if="ajxxList" >{{ajxxList.bjdh || '-'}}</div>
					</div>
				</div>
				<div class="pCont">
					<div class="pCOntent on">
						<div class="PTxt">案件类型：</div>
						<div class="Ptext" v-if="ajxxList">{{ajxxList.ajlx ||'-'}}</div>
					</div>
					<div class="pCOntent">
						<div class="PTxt">案件等级：</div>
						<div class="Ptext" v-if="ajxxList">{{ajxxList.ajdj ||'-'}}</div>
					</div>
				</div>
				<div class="pCont">
					<div class="pCOntent on">
						<div class="PTxt">案发时间：</div>
						<div class="Ptext" v-if="ajxxList">{{ajxxList.afsj ||'-'}}</a></div>
					</div>
					<div class="pCOntent">
						<div class="PTxt">失踪人数：</div>
						<div class="Ptext" v-if="ajxxList">{{ajxxList.szrs ||'-' }}</div>
					</div>
				</div>
				<div class="pCont">
					<div class="pCOntent on">
						<div class="PTxt">案发地址：</div>
						<div class="Ptext" v-if="ajxxList">{{ajxxList.afdz ||'-'}}</div>
					</div>
					<div class="pCOntent">
						<div class="PTxt">被困人数：</div>
						<div class="Ptext" v-if="ajxxList">{{ajxxList.bkrs || '-'}}</div>
					</div>
				</div>
				<div class="pCont">
					<div class="pCOntent on">
						<div class="PTxt">主管机构：</div>
						<div class="Ptext" v-if="ajxxList">{{ajxxList.zgjg || '-'}}</div>
					</div>
					<div class="pCOntent">
						<div class="PTxt">死亡人数：</div>
						<div class="Ptext" v-if="ajxxList">{{ajxxList.swss || '-'}}</div>
					</div>
				</div>
				<div class="pCont">
					<div class="pCOntent on">
						<div class="PTxt">案件描述：</div>
						<div class="Ptext" v-if="ajxxList">{{ajxxList.ajms || '-'}}</div>
					</div>
					<div class="pCOntent">
						<div class="PTxt">受伤人数：</div>
						<div class="Ptext" v-if="ajxxList">{{ajxxList.ssrs || '-'}}</div>
					</div>
				</div>
				<div class="pCont">
					<div class="pCOntent on">
						<div class="PTxt">建筑结构：</div>
						<div class="Ptext" v-if="ajxxList">{{ajxxList.jzjg ||'-'}}</div>
					</div>
					<div class="pCOntent">
						<div class="PTxt">烟雾情况：</div>
						<div class="Ptext" v-if="ajxxList">{{ajxxList.ywqk ||'-'}}</div>
					</div>
				</div>
				<div class="pCont">
					<div class="pCOntent on">
						<div class="PTxt">楼房层数：</div>
						<div class="Ptext" v-if="ajxxList">{{ajxxList.lfcs ||'-'}}</div>
					</div>
					<div class="pCOntent">
						<div class="PTxt">燃烧楼层：</div>
						<div class="Ptext" v-if="ajxxList">{{ajxxList.rslc ||'-'}}</div>
					</div>
				</div>
				<div class="pCont">
					<div class="pCOntent on">
						<div class="PTxt">燃烧对象：</div>
						<div class="Ptext" v-if="ajxxList">{{ajxxList.rsdx ||'-'}}</div>
					</div>
					<div class="pCOntent">
						<div class="PTxt">燃烧面积：</div>
						<div class="Ptext" v-if="ajxxList">{{ajxxList.rsmj ||'-'}}</div>
					</div>
				</div>
			</div>
		</div>
		<div v-if="activeTab == 3">

			<div class="maintenance-supervision">
				<div class="maintenance-supervision_header" style="display: flex;justify-content: space-between;">
					<el-select style="width: 140px;" v-model="value" placeholder="选择设备类型">
						<el-option v-for="item in wlwsb" :key="item.value" :label="item.label" :value="item.sblx">
						</el-option>
					</el-select>
					</el-select>
					<el-button>搜索</el-button>
				</div>
				<div>
					<div class="row header">
						<span class="time">设备类型</span>
						<span class="person">位置</span>
						<span class="result">监控值</span>
						<span class="result1">业务状态</span>
					</div>
					<VueSeamlessScroll :data="wlwsb" :class-option="classOption" class="warp" hoverStop>
						<ul class="item">
							<li class="row" v-for="(item, index) in wlwsb" :key="index" @click="tab(item.id)"
								:class="item.id === id ? 'selected' : ''">
								<span class="time"
									style="width: 110px;overflow: hidden;height: 40px;">{{item.sblx}}</span>
								<span class="person"
									style="width: 110px;overflow: hidden;height: 40px;">{{item.wz}}</span>
								<span class="result">{{item.jkz ||'-'}}</span>
								<span class="result1"
									style="width: 100px;overflow: hidden;height: 40px;text-align: right;">{{item.zt}}</span>
							</li>
						</ul>
					</VueSeamlessScroll>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import VueSeamlessScroll from "vue-seamless-scroll";
	export default {
		data() {
			return {
				value: "",
				activeTab: 1,
				tabPosition: 'left',
				jzzp: '',
				jzzp1: '',
				jzzp2: '',
				jzzp3: '',
				jzzp4: '',
				srcList: [
					'',
					'',
					'',
					'',
					''
				],
			};
		},
		props: ['ajxxList', 'jzxxList', 'wlwsb'],
		components: {
			VueSeamlessScroll,
		},
		computed: {
			classOption() {
				return {
					singleHeight: 43,
				};
			},
		},
		methods: {
			changeTab(tab) {
				this.activeTab = tab;
			}
		},
	};
</script>

<style scoped lang='less'>
	.maintenance-supervision {

		// padding: 10px 10px 0px 20px;
		::v-deep(.el-input__inner) {
			border: none;
			background: linear-gradient(360deg, rgba(0, 148, 255, .5) 0%, rgba(0, 148, 255, .31) 100%);
			color: #fff;
		}

		::v-deep(.el-button) {
			border: none;
			background: linear-gradient(360deg, #0094ff90 0%, #0094ff10 100%);
			color: #fff;
		}

		.maintenance-supervision_header {
			display: flex;
			justify-content: space-around;
			border-bottom: 1px solid #154956;
			padding-bottom: 2px;
			margin-top: 15px;
			font-size: 12px;
			color: rgb(79, 149, 186);
		}

		.warp {
			margin: 0 auto;
			overflow: hidden;

			.item {
				list-style: none;
				padding: 0;
				margin: 0 auto;
				cursor: pointer;
			}
		}

		.header {
			color: #fff;
			height: 33px !important;
			line-height: 33px !important;
			background-color: rgba(0, 163, 255, 0.3) !important;
			color: #61dbff;
			margin-top: 15px;
			margin-bottom: 6px;
		}

		.row {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-left: 12px;
			padding-right: 70px;
			box-sizing: border-box;
		}

		li,
		a {
			height: 39px;
			line-height: 39px;
			margin-bottom: 4px;
			display: flex;
			font-size: 12px;
			background-color: rgba(0, 0, 0, 0.2);
		}
	}

	.img {
		width: 75px;
		height: 51px;
	}

	.tab {
		padding: 0 14px;
		box-sizing: border-box;
		line-height: 24px;
		display: flex;
		justify-content: space-between;
		width: 226px;
		height: 26px;
		background: linear-gradient(180deg, rgba(0, 148, 255, 0.5) 0%, rgba(0, 148, 255, 0.155) 100%);
		border-radius: 5px;
	}

	.tabTxt.on {
		font-family: 'Abel';
		font-style: normal;
		font-weight: 400;
		font-size: 12px;
		color: #95CCFF
	}

	.plate {
		margin: 0 20px;
		margin-bottom: 6px;
		background: rgba(0, 213, 255, 0.14);
		padding: 6px 12px;
		box-sizing: border-box;
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 500;
		font-size: 16px;
	}

	.pCont {
		display: flex;
		justify-content: start;

		.pCOntent {
			display: flex;
			height: 24px;
			line-height: 24px;
			margin-bottom: 2px;
			font-family: 'Abel';
			font-style: normal;
			font-weight: 400;
			font-size: 12px;
		}

		.pCOntent.on {
			width: 60%;
		}
	}

	.PTxt {
		font-family: 'Abel';
		font-style: normal;
		font-weight: 400;
		font-size: 12px;
		color: #78C3CD;
	}

	.Ptext {
		font-family: 'Abel';
		font-style: normal;
		font-weight: 400;
		font-size: 12px;
		width: 110px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.att {
		line-height: 24px;
		height: 24px;
		font-family: 'Abel';
		font-style: normal;
		font-weight: 400;
		font-size: 12px;
		color: #78C3CD;
		margin: 0 20px;
		margin-top: 5px;
	}

	.attImg {
		display: flex;
		align-items: center;
	}
</style>