<template>
	<div class="leftTop">
		<Card title="智能设备">
			<div class="deviceData">
				<div class="deviceDataA">
					<div class="num">
						<i>{{ statisticsCount.devcount.ufaceDevNum || 0 }}</i>
					</div>
					<div class="text">实名制设备数</div>
				</div>
				<div class="deviceDataB">
					<div class="num">
						<i>{{ statisticsCount.devcount.environmentDevNum || 0 }}</i>
					</div>
					<div class="text">环境设备数</div>
				</div>
			</div>
		</Card>
	</div>
</template>

<script setup lang="ts">
import Card from "@/components/card.vue";
import { ref, onMounted, watch } from "vue";
// ts
type Props = {
	statisticsCount?: any; // 传入人员数据
};
// withDefaults 定义默认值(传入的数据类型同默认值)
const props = withDefaults(defineProps<Props>(), {
	statisticsCount: {
		devcount: {}
	}
});
// 人员概况数据
const statisticsCount = ref({
	devcount: {}
} as any);

watch(
	() => props.statisticsCount,
	newVal => {
		// console.log(newVal, "newVal");
		if (newVal) {
			// props.xData = newVal;
			statisticsCount.value = newVal;
		}
	}
);
</script>

<style lang="scss" scoped>
.leftTop {
	width: 100%;
	height: 100%;
	display: flex;

	.deviceData {
		width: 100%;
		height: 100%;
		display: flex;

		.deviceDataA {
			width: 40%;
			height: 85%;
			background: url("@/assets/images/comprehensiveManage/project13.png") no-repeat;
			background-size: 100% 100%;
			margin: 4% 5%;
			color: #fff;
			text-align: center;
		}
		.deviceDataB {
			width: 40%;
			height: 85%;
			background: url("@/assets/images/comprehensiveManage/project13.png") no-repeat;
			background-size: 100% 100%;
			margin: 4% 5%;
			color: #fff;
			text-align: center;
		}
		.num {
			margin-top: 30%;
			font-size: 32px;
			font-weight: bold;
		}
		.text {
			font-size: 14px;

			color: #ccc;
		}
	}
}
::v-deep .h-card .content {
	height: 80%;
}
</style>
