<template>
	<div>
		<div class="title" v-if="fxxxList">
			<div style="display: flex;align-items: flex-end;height: 30px;">
				<div class="tText">警情等级：</div>
				<div class="tNumb on">{{fxxxList.ajdj || '-'}}</div>
			</div>
			<div style="display: flex;align-items: flex-end;height: 30px;">
				<div class="tText">隐患数量：</div>
				<div class="tNumb">{{fxxxList.yhs || '-'}}
					<div style="font-size: 18px;margin-bottom: 3px;">个</div>
				</div>
			</div>
		</div>
		<div class="paet">隐患部位</div>
		<div class="paetCont" v-if="fxxxList">
			<div class="paetBox">
				<div class="pael">
					<div class="wier">1</div>
					<div class="hidTxt">隐患部位：</div>
					<div class="hidTxt on">{{fxxxList.yhbw || '-'}}</div>
				</div>
				<div class="paer">
					<div class="hidTxt">隐患原因：</div>
					<div class="hidTxt on">{{fxxxList.yhyy1 || '-'}}</div>
				</div>
			</div>
			<div class="paetBox">
				<div class="paer">
					<div class="wier">2</div>
					<div class="hidTxt">位置：</div>
					<div class="hidTxt on">{{fxxxList.wz ||'-'}}</div>
				</div>
				<div class="paer">
					<div class="hidTxt">隐患原因：</div>
					<div class="hidTxt on">{{fxxxList.yhyy2 || '-'}}</div>
				</div>
			</div>
		</div>
		<div class="paet">历史火灾处置情况:</div>
		<div class="maintenance-supervision" style="margin: 0 15px;" v-if="lshzList">
			<div>
				<div class="row header">
					<span class="time">起火时间</span>
					<span class="person">人员伤亡数量</span>
					<span class="result">财产损失</span>
					<span class="result1">火灾原因</span>
				</div>
				<VueSeamlessScroll :data="lshzList" :class-option="classOption" class="warp">
					<ul class="item">
						<li class="row" v-for="(item, index) in lshzList" :key="index">
							<span class="time">{{ item.zqsj ||'-'}}</span>
							<span class="person">{{item.rysws}}</span>
							<span class="result" style="text-align: right;width: 110px;">{{item.zjccss}}</span>
							<span class="result1">{{item.qhyy}}</span>
						</li>
					</ul>
				</VueSeamlessScroll>
			</div>
		</div>
	</div>
</template>
<script>
	import VueSeamlessScroll from "vue-seamless-scroll";

	export default {
		name: "MaintenanceSupervision",
		data() {
			return {
				value: "",

				checked: 0,
			};
		},
		props: ['fxxxList', 'lshzList'],
		components: {
			VueSeamlessScroll,
		},
		computed: {
			classOption() {
				return {
					singleHeight: 43,
				};
			},
		},
		methods: {
			change(idx) {
				this.checked = idx;
				console.log("切换索引", idx);
			},
			resultType(text) {
				return {
					合格: "#23f59d",
					不合格: "#df575b",
					是: "#23f59d",
					否: "#df575b",
				} [text];
			},
		},
	};
</script>

<style scoped lang="less">
	.wier {
		width: 20px;
		height: 20px;
		border-radius: 100%;
		background: #0085FF;
		text-align: center;
		line-height: 20px;
		margin-right: 6px;
	}

	.hidTxt {
		font-family: 'Abel';
		font-style: normal;
		font-weight: 400;
		font-size: 16px;
	}

	.hidTxt.on{
		width: 100px;
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
	}

	.title {
		width: 309px;
		display: flex;
		justify-content: space-between;
		margin: 0 15px;
		margin-top: 17px;
	}

	.paet {
		background: rgba(0, 213, 255, 0.16);
		padding: 6px 14px;
		box-sizing: border-box;
		font-family: 'Abel';
		font-style: normal;
		font-weight: 400;
		font-size: 18px;
		margin: 0 15px;
		margin-top: 16px;
		margin-bottom: 16px;
	}

	.paetCont {
		height: 60px;
		overflow: auto;
	}

	.paetBox {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 0 15px;
		margin-bottom: 10px;
	}

	.pael {
		display: flex;
		align-items: center;
		width: 250px;
	}

	.paer {
		display: flex;
		align-items: center;
		width: 210px;
	}

	.tText {
		font-family: 'Abel';
		font-style: normal;
		font-weight: 400;
		font-size: 18px;
		margin-bottom: 4px;
	}

	.tNumb {
		display: flex;
		align-items: flex-end;
		font-family: 'Abel';
		font-style: normal;
		font-weight: 400;
		font-size: 30px;
	}

	.tNumb.on {
		color: #36F6F6;
	}

	.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);
		}
	}


	/deep/.el-input__inner {
		background-color: #184254;
		width: 150px;
		height: 30px;
		margin-bottom: 5px;
	}

	/deep/.el-button {
		width: 160px;
		height: 32px;
		font-size: 14px;
		line-height: 2px;
		background: #184254;
		margin: 0 20px 0 30px;
		color: #fff;
		border-radius: 5px;
		border: none;
	}

	// /deep/.el-select-dropdown{

	//     background-color:#184254 !important;
	//     position: fixed;

	//   }
	/deep/.select_btn {
		position: absolute;
		top: 225px;
		right: 320px;
		//下拉框
	}

	// /deep/.el-select-dropdown{
	//      border: none;
	//      background-color: #184254 ;
	//  }
	//输入框
	//  /deep/.el-input__inner{
	//      color:#eee;
	//      border-color: #00fff6;
	//      background-color: rgba(1, 28, 82, 0.8);
	//  }
	//  //聚焦时的样式
	//  /deep/.el-select .el-input.is-focus .el-input__inner{
	//      border-color: #0B61AA;
	//      background-color: rgba(1, 28, 82, 0.8);
	//      color:#00D3E9;
	//  }
	//  //下拉框选中
	//  /deep/.el-select-dropdown__item{
	//      color: #eee;
	//  }
	//  //鼠标经过下拉框
	//  /deep/.el-select-dropdown__item.hover,
	//  /deep/.el-select-dropdown__item:hover{
	//      color:#00D3E9;
	//      background-color: #0F3360;
	//  }
</style>