<template>
  <div>
    <TopTitle title="保卫保密" />
    <div class="counts">
      <div class="count-item top-item">
        <div class="count-value position-count">{{ positionCount }}</div>
        <div class="count-label">要害及重点监控区域数</div>
      </div>
      <div class="count-item top-item">
        <div class="count-value intrusion-capture-count">{{ intrusionCaptureCount }}</div>
        <div class="count-label">本月要害部位闯入抓拍数</div>
      </div>
      <div class="count-item bottom-item">
        <div class="count-value personnel-intrusion-count">{{ aroundCameraAlarmsCount }}</div>
        <div class="count-label">本月周界系统报警数</div>
      </div>
      <div class="count-item bottom-item">
        <div class="count-value visitor-count">{{ visitorCount }} / {{ foreignVisitorCount }}</div>
        <div class="count-label">今日访客/外籍访客数</div>
      </div>
      <div class="divider-horizontal"></div>
      <div class="divider-vertical"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { onMounted, ref } from 'vue';
  import dayjs from 'dayjs';
  import TopTitle from './TopTitle.vue';
  import {
    getConfidentialityPositionList,
    getSecurityPositionList,
    getInvasionSnapshotList,
  } from '@/api/security-confidentiality-position';
  import { getPersonOverview } from '@/api/security-confidentiality-overview';

  const confidentialityPositionCameraCount = ref<number>(0);
  const securityPositionCameraCount = ref<number>(0);
  const positionCount = ref<number>(0); // 要害及重点监控区域数
  const intrusionCaptureCount = ref<number>(0); // 本月要害部位闯入抓拍数
  const aroundCameraAlarmsCount = ref<number>(0); // 本月周界系统报警数
  const visitorCount = ref<number>(0); // 今日访客
  const foreignVisitorCount = ref<number>(0); // 外籍访客数

  onMounted(async () => {
    // 要害及重点监控区域数
    await getConfidentialityPositionList({
      groupName: '',
      cameraName: '',
    }).then((res) => {
      const confidentialityPositionCameraInfo = res.flatMap((item) => {
        return item.children.map((child) => ({
          ...child,
          positionName: item.groupName,
        }));
      });
      confidentialityPositionCameraCount.value = confidentialityPositionCameraInfo.length;
    });
    await getSecurityPositionList({
      groupName: '',
      cameraName: '',
    }).then((res) => {
      const securityPositionCameraInfo = res.flatMap((item) => {
        return item.children.map((child) => ({
          ...child,
          positionName: item.groupName,
        }));
      });
      securityPositionCameraCount.value = securityPositionCameraInfo.length;
    });
    positionCount.value = confidentialityPositionCameraCount.value + securityPositionCameraCount.value;
    // 本月要害部位闯入抓拍数
    await getInvasionSnapshotList({
      pageNumber: 1,
      pageSize: 10,
      queryParam: {
        startTime: dayjs().startOf('month').format('YYYY-MM-DD HH:mm:ss'),
        endTime: dayjs().endOf('month').format('YYYY-MM-DD HH:mm:ss'),
      },
    }).then((res) => {
      intrusionCaptureCount.value = res.totalRow || 0;
    });
    // 本月周界系统报警数 + 今日访客/外籍访客数
    await getPersonOverview().then((res) => {
      visitorCount.value = res.foreignVisitorCount + res.nonForeignVisitorCount;
      foreignVisitorCount.value = res.foreignVisitorCount;
      aroundCameraAlarmsCount.value = res.aroundCameraAlarmsCount;
    });
  });
</script>

<style scoped lang="scss">
  .counts {
    width: 314px;
    height: 131px;
    margin: 20px 8px;
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 0;

    .count-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      position: relative;
    }
    .top-item {
      justify-content: flex-start;
    }
    .bottom-item {
      justify-content: flex-end;
    }

    .count-label {
      font-weight: 400;
      font-size: 12px;
      color: #999999;
      line-height: 17px;
    }

    .count-value {
      font-family: DINAlternate;
      font-weight: bold;
      font-size: 24px;
      line-height: 28px;
    }
    .position-count {
      color: #117af1;
    }
    .intrusion-capture-count {
      color: #ff9237;
    }
    .personnel-intrusion-count {
      color: #ff6257;
    }
    .visitor-count {
      color: #17cba5;
    }

    .divider-horizontal {
      position: absolute;
      left: 0;
      right: 0;
      top: 50%;
      height: 1px;
      background-color: #e8e8e8;
      transform: translateY(-50%);
      z-index: 1;
    }

    .divider-vertical {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 50%;
      width: 1px;
      background-color: #e8e8e8;
      transform: translateX(-50%);
      z-index: 1;
    }
  }
</style>
