<template>
	<div class="alarming-situation-dynamics"
		v-if="PoliceList.length > 0"
		style="padding: 6px 19px 0px 19px; overflow: hidden">
		<!-- 隐患处理排行榜 -->
		<div class="row header">
			<span class="time">发生时间</span>
			<span class="address">所在辖区</span>
			<span class="name">建筑名称</span>
			<span class="type">警情类型</span>
			<span class="org">主管机构</span>
			<span class="state">处置状态</span>
			<span class="level">风险等级</span>
		</div>
		<VueSeamlessScroll :data="PoliceList" :class-option="classOption" class="warp" hoverStop>
			<ul class="item">
				<li class="row" v-for="(item, index) in PoliceList" :key="index" @click="rowClickHandler(item.ajid)"> 
					<span class="time">{{ item.fssj }}</span>
					<span class="address">{{ item.szxq }}</span>
					<span class="name" style="overflow: hidden; text-overflow: ellipsis">{{ item.gcjzmc }}</span>
					<span class="type">{{ item.jqlx }}</span>
					<span class="org">{{ item.zgjg }}</span>
					<span class="state">{{ item.czzt }}</span>
					<span class="level" :style="{
              color: levelText(item.fxdj),
            }">{{ item.fxdj }}</span>
				</li>
			</ul>
		</VueSeamlessScroll>
	</div>
	<div class="jqdt-panel" v-else>
		<div class="item" v-for="(item,index) in totalData" :key="index">
			<div><span class="value">{{ item.con }}</span><span class="unit">起</span></div>
			<div>{{ item.type }}</div>
		</div>
	</div>
</template>

<script>
	// 接警 下达 出动 到场 展开 出水 控制 熄灭 停水 清理 返回 #归队
	import VueSeamlessScroll from "vue-seamless-scroll";
	import { getJqdtListWithZero } from '../../../api/index'
	export default {
		props: {
			PoliceList: {
				type: Array,
				default: () => []
			},
			qx: String
		},
		name: "AlarmingSituationDynamics",
		components: {
			VueSeamlessScroll,
		},
		data() {
			return {
				id: null,
				totalData: [
					{
						type: '今日',
						con: 0
					},
					{
						type: '本周',
						con: 0
					},
					{
						type: '本月',
						con: 0
					}
				]
			};
		},
		watch: {
			qx: {
				handler(){
					this.loadData()
				},
				immediate: true
			}
		},
		computed: {
			classOption() {
				return {
					singleHeight: 46,
				};
			},
		},
		methods: {
			rowClickHandler(id) {
				this.id = id
			  this.$router.push(`/police?id=${id}`);
			},
			levelText(text) {
				return {
					高风险: "#FF0B0B",
					较高风险: "#ff833d",
					一般风险: "#fbff3d",
					低风险: "#35c2ff",
				} [text];
			},
			loadData() {
				getJqdtListWithZero({
					qx: this.qx
				}).then(res => {
					this.totalData = res.data.data
				})
			}
		},
	};
</script>

<style lang="less">
	.alarming-situation-dynamics li.row:hover {
		background: rgba(0, 194, 255, 0.14) !important;
	}
	.jqdt-panel {
		display: flex;
		justify-content: space-around;
		align-items: centers;
		padding: 54px 0px;
		.item {
			width: 244px;
			height: 166px;
			display: flex;
			justify-content: center;
			flex-direction: column;
			align-items: center;
			background-color: rgba(0, 213, 255, 0.12);
			background-image: url('../../../assets/images/border-jqdt.png');
			background-repeat: no-repeat;
			background-position: center center;
			font-size: 16px;
			.value {
				font-size: 30px;
				color: #FFD749;
			}
			.unit {
				font-size: 12px;
				display: inline-block;
				margin-left: 5px;
			}
		}
	}
</style>

<style scoped lang="less">
	.warp {
		height: 230px;
		margin: 0 auto;
		overflow: hidden;

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

	.header {
		color: #fff;
		height: 38px !important;
		line-height: 38px !important;
		background-color: rgba(68, 241, 255, 0.1) !important;
	}

	li.row>span {
		text-align: center;
		font-size: 16px;
		position: relative;
		display: inline-block;

		&::before {
			position: absolute;
			content: "";
			left: 0;
			top: 50%;
			transform: translateY(-50%);
			background-color: #1d525f;
			height: 14px;
			width: 1px;
		}

		&:nth-child(1) {
			&::before {
				background-color: #44f1ff;
				box-shadow: 0px 0px 2px 0px #44f1ff;
			}
		}
	}

	li.row {
		.address {
			color: #99e0ff;
		}

		.name,
		.type,
		.org,
		.state,
		.level {
			color: #44f1ff;
		}

		border-bottom: 1px dashed #1d525f;
		box-sizing: border-box;
	}

	.row,
	li,
	a {
		display: block;
		height: 46px;
		line-height: 46px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 16px;
		background-color: rgba(0, 0, 0, 0.2);

		.time,
		.address,
		.name,
		.type,
		.org,
		.state,
		.level {
			flex: 0.15;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.org {
			flex: 0.4;
			overflow: hidden;
			text-overflow: ellipsis !important; // 超出隐藏
			white-space: nowrap;
		}

		.name {
			flex: 0.3;
		}
	}
</style>
