<template>
	<div id="centerLeft1">
		<div class="bg-color-black">
			<div class="d-flex pt-2 pl-2">
				<span style="color:#5cd9e8">
					<icon name="chart-bar"></icon>
				</span>
				<div class="d-flex">
					<span class="fs-xl text mx-2 fontvw">门锁概况</span>
					<dv-decoration-3 style="width:1.25rem;height:.25rem; position:relative;top:-.0375rem;" />
				</div>
			</div>
			<div class="d-flex jc-center">
				<CenterLeft1Chart />
			</div>
			<!-- 4个主要的数据 -->
			<div class="bottom-data">
				<div class="item-box" v-for="(item,index) in numberData" :key="index" v-show="numberstatu"
					@click="jumpDevicePage(item.type,1)" :title="item.text">
					<div class="d-flex">
						<span class="coin"></span>
						<p class="text"
							style="text-align: center;font-size:1.5vw;width:100%;line-height:3vw;color:#3ce3c7;">
							{{item.number.number[0]}}
						</p>
					</div>
					<p class="text" style="text-align: center;font-size:1vw;">
						{{item.text}}
						<span class="colorYellow">(把)</span>
					</p>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import CenterLeft1Chart from "../../components/echart/centerLeft/centerLeft1Chart";
	import RequestSet from "../../api/allFun.js"
	import {
		httpPost,
		httpGet
	} from "../../api";
	export default {
		data() {
			return {
				numberstatu: true,
				numberData: [{
						number: {
							number: [0],
							toFixed: 0,
							content: "{nt}"
						},
						text: "在线数",
						type:'1',
					},
					{
						number: {
							number: [0],
							toFixed: 0,
							content: "{nt}"
						},
						text: "门锁总数",
						type:'',
					},
					{
						number: {
							number: [0],
							toFixed: 0,
							content: "{nt}"
						},
						text: "离线数",
						type:'0',
					},
					{
						number: {
							number: [0],
							toFixed: 0,
							content: "{nt}"
						},
						text: "异常数",
						type:'2',
					}
				]
			};
		},
		created() {},
		components: {
			CenterLeft1Chart
		},
		mounted() {
			this.getcard()
			this.changeTiming();
		},
		methods: {
			// 跳转门锁设备筛选
			jumpDevicePage(type, lockType) {
				this.$router.replace({
					path: '/allDevice',
					name:"allDevice",
					params: {
						isOnline: type, //0离线，1在线，2异常
						lockType: lockType
					},
				})
			},
			// 获取门卡概况
			getcard() {
				RequestSet.getAnalysis("", -1, (callback) => {
					this.numberstatu = false
					this.$nextTick(function() {
						this.numberData[1].number.number[0] = callback.total
						this.numberData[0].number.number[0] = callback.onlineTotal
						this.numberData[2].number.number[0] = callback.offlineTotal
						this.numberData[3].number.number[0] = callback.isAppBind
						this.numberstatu = true
					})
					this.$store.commit('setanalysis', callback)
				})
			},
			changeTiming() {
				setTimeout(() => {
					this.changeNumber();
				}, 1000);
			},
			changeNumber() {
				this.numberData.forEach((item, index) => {
					// item.number.number[0] += ++index;
					item.number = {
						...item.number
					};
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	#centerLeft1 {
		padding: 0.8vw;
		height: 20vw;
		min-width: 15.675vw;
		border-radius: 0.0625rem;

		.bg-color-black {
			height: 20.5vw;
			border-radius: 0.125rem;
		}

		.text {
			color: #c3cbde;
		}

		.chart-box {
			margin-top: 0.2rem;
			width: 2.125rem;
			height: 2.125rem;

			.active-ring-name {
				padding-top: 0.125rem;
			}
		}

		.fontvw {
			font-size: 0.8vw;
		}

		.bottom-data {
			.item-box {
				cursor: pointer;
				float: right;
				position: relative;
				width: 50%;
				color: #d3d6dd;

				// 金币
				.coin {
					position: absolute;
					left: 0.1rem;
					top: 0.2125rem;
					font-size: 1vw;
					color: #ffc107;
				}

				.dv-digital-flop {
					font-size: 1vw;
				}

				.colorYellow {
					color: yellowgreen;
				}
			}
		}
	}
</style>
