<template>
	<div class="iot">
		<div class="all-unit">
			<div class="iot-num" v-for="(item, index) in list" :key="index">
				<LinearText style="display: inline-block" :text="item.num" fontSize="24px"></LinearText>
				<div class="text">{{ item.title }}</div>
				<div>
					{{ item.text }}
					<span class="num" :style="{
              color: changaColor(item.text),
            }">{{ item.allNum }}</span>个
				</div>
			</div>
		</div>
		<!-- 检测点位统计 -->
		<div class="PointStatistics">
			<span style="font-size: 16px">检测点位统计</span>
			<div class="online-num">
				<div class="status">
					<span class="online line">在线</span>
				</div>
				<div>
					<span class="offline line">离线</span>
				</div>
			</div>
		</div>
		<div class="ala-n">
			<div v-for="(item, index) in lineList" :key="index" class="alarm">
				<div class="alarm-host">
					<img :src="item.imgs" alt="" />
					<div style="width: 90%">
						<div class="inline-bor">
							<span style="font-size: 14px">{{ item.text }}</span>
							<span class="calc-percent">{{ item.allnum }}/{{ item.average }}</span>个/栋
						</div>
						<div class="on-line">
							<div>
								<span class="online lines"></span>
								<span style="font-size: 16px">{{ item.line }}/{{ item.linelds }}</span>(个/栋)
							</div>
							<div>
								<span class="offline lines"></span>
								<span style="font-size: 16px">{{ item.offNum }}/{{ item.offNumlds }}</span>(个/栋)
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="last-line">
				<img src="../../../assets/images/Group 1321314604.png" alt="" />
				<div style="width: 86%">
					<div class="inline-bor">
						<span style="font-size: 14px">消防控制室人员离岗</span>
						<span> <span
								class="calc-percent">{{dwData.xfkzszs || 0}}/{{dwData.xfkzsds || 0}}</span>个/栋</span>
					</div>
					<div class="on-line">
						<div>
							<span class="online lines"
								style="font-size: 18px">{{dwData.xfkzszxs || 0}}/{{dwData.xfkzszxlds || 0}}</span>(个/栋)
						</div>
						<div>
							<span class="lines offline"
								style="font-size: 18px">{{dwData.xfkzsgjs || 0}}/{{dwData.xfkzsgjlds || 0}}</span>(个/栋)
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import imgs from "../../../assets/images/Group 1321314604.png";
	export default {
		data() {
			return {
				list: [],
				lineList: [],
			};
		},
		props: ["data", "dwData"],
		methods: {
			changaColor(text) {
				return {
					设备总数: "#FFD74B",
					在线: "#00FF66",
					报警: "#FF4B23",
				} [text];
			},
			dealData() {
				this.list = [{
						num: this.data.wlwlds || 0,
						title: "已完成物联网建筑数(栋)",
						text: "设备总数",
						allNum: this.data.jrsbzs || 0,
					},
					{
						num: this.data.zxjzs || 0,
						title: "在线建筑数(栋)",
						text: "在线",
						allNum: this.data.jrsbzxs || 0,
					},
					{
						num: this.data.gjlds || 0,
						title: "告警建筑数(栋)",
						text: "报警",
						allNum: this.data.jrsbgjgs || 0,
					},
				];
				this.lineList = [{
						imgs: imgs,
						text: "火灾报警主机",
						allnum: this.dwData.hzbjzjzs || 0,
						average: this.dwData.hzbjzjds || 0,
						line: this.dwData.hzbjzjzxs || 0,
						linelds: this.dwData.hzbjzjzxlds || 0,
						offNum: this.dwData.hzbjzjgjs || 0,
						offNumlds: this.dwData.hzbjzjgjlds || 0,
					},
					{
						imgs: imgs,
						text: "水压",
						average: this.dwData.syds || 0,
						allnum: this.dwData.syzs || 0,
						line: this.dwData.syzxs || 0,
						linelds: this.dwData.syzxlds || 0,
						offNum: this.dwData.sygjs || 0,
						offNumlds: this.dwData.sygjlds || 0,
					},
					{
						imgs: imgs,
						text: "电器火灾",
						average: this.dwData.dqhzds || 0,
						allnum: this.dwData.dqhzzs || 0,
						line: this.dwData.dqhzzxs || 0,
						linelds: this.dwData.dqhzzxlds || 0,
						offNum: this.dwData.dqhzgjs || 0,
						offNumlds: this.dwData.dqhzgjlds || 0,
					},
					{
						imgs: imgs,
						text: "生命通道",
						average: this.dwData.smtdlds || 0,
						allnum: this.dwData.smtdzs || 0,
						line: this.dwData.smtdzxs || 0,
						linelds: this.dwData.smtdzxlds || 0,
						offNum: this.dwData.smtdgjs || 0,
						offNumlds: this.dwData.smtdgjlds || 0
					},
				];
			}
		},
		watch: {
			data: {
				handler() {
					this.dealData()
				},
				deep: true
			},
			dwData: {
				handler() {
					this.dealData()
				},
				deep: true
			}
		},
		created() {
			this.dealData()
		},
	};
</script>

<style lang="less" scoped>
	.iot {
		margin: 13px 5px 0px 5px;

		.all-unit {
			display: flex;
			justify-content: space-between;
			gap: 11px;
		}

		.iot-num {
			width: 168px;
			height: 88px;
			background: linear-gradient(360deg,
					rgba(0, 148, 255, 0) 0%,
					rgba(0, 148, 255, 0.6) 100%);
			border: 1px solid #1a5878;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			font-size: 12px;
			padding: 4px 0px;
			box-sizing: border-box;
			gap: 4px;

			.num {
				font-size: 24px;
				color: #ffd74b;
				padding: 0px 5px;
			}
		}
	}

	.PointStatistics {
		width: 94%;
		height: 37px;
		background: rgba(0, 213, 255, 0.24); //渐变
		margin: 10px 0;
		color: #fff;
		display: flex;
		justify-content: space-between;

		align-items: center;
		padding: 0 15px;

		.online-num {
			display: flex;
			margin-right: 32px;

			.status {
				margin-right: 22px;
			}
		}
	}

	.ala-n {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.line::before {
		content: "";
		display: inline-block;
		width: 8px;
		height: 8px;
		border-radius: 50%;
		margin-right: 5px;
	}

	.online::before {
		background-color: #2fde60;
	}

	.offline::before {
		background-color: #ff4f4f;
	}

	.alarm {
		width: 264px;
		height: 81px;
		background: linear-gradient(360deg,
				rgba(61, 220, 255, 0.3) 0%,
				rgba(61, 232, 255, 0) 100%);
		line-height: 40px;
		margin-top: 10px;
		letter-spacing: 1px;

		.alarm-host {
			display: inline-block;
			display: flex;
			align-items: center;
			justify-content: space-around;
			text-align: center;
		}

		img {
			display: inline-block;
			width: 52px;
			height: 49px;
		}

		.inline-bor {
			// width: 124px;
			border-bottom: 1px dotted #7789cd;

			.calc-percent {
				color: #44f1ff;
				font-size: 16px;
			}
		}
	}

	.lines::before {
		content: "";
		display: inline-block;
		border-radius: 50%;
		width: 10px;
		height: 10px;
		margin-right: 6px;
	}

	.on-line {
		display: flex;
		justify-content: space-between;
		width: 100%;
	}

	.last-line {
		width: 100%;
		height: 80px;
		background: linear-gradient(360deg,
				rgba(61, 220, 255, 0.3) 0%,
				rgba(61, 232, 255, 0) 100%);
		margin-top: 5px;
		line-height: 40px;
		display: flex;
		align-items: center;

		img {
			display: inline-block;
			width: 52px;
			height: 49px;
		}

		.inline-bor {
			display: flex;
			justify-content: space-between;
			font-size: 16px;
			border-bottom: 1px dotted #7789cd;

			.calc-percent {
				color: #44f1ff;
				font-size: 18px;
			}
		}

		.on-line {
			display: flex;
			justify-content: start;
			gap: 20px;
			padding: 0px 10px;
		}
	}
</style>