<template>
  <div>
    <TopTitle title="交通安全" />
    <div class="counts">
      <div class="count-item top-item">
        <div class="count-value vehicle-count">{{ vehicleCount }}</div>
        <div class="count-label">本月车流数</div>
      </div>
      <div class="count-item top-item">
        <div class="count-value regulation-count">{{ regulationCount }}</div>
        <div class="count-label">本月违章数</div>
      </div>
      <div class="count-item bottom-item">
        <div class="count-value notice-count">{{ noticeCount }}</div>
        <div class="count-label">本月通报数</div>
      </div>
      <div class="count-item bottom-item">
        <div class="count-value accident-count">{{ accidentCount }}</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 TopTitle from './TopTitle.vue';
  import { getViolationStatisticsOverview } from '@/api/traffic-overview';
  import { getVehicleOverview } from '@/api/security-confidentiality-overview';

  const vehicleCount = ref<number>(0); // 本月车流数
  const regulationCount = ref<number>(0); // 本月违章数
  const noticeCount = ref<number>(0); // 本月通报数
  const accidentCount = ref<number>(0); // 本月事故数

  onMounted(async () => {
    const res = await getViolationStatisticsOverview();
    regulationCount.value = res.vehicleViolationCount;
    noticeCount.value = res.violationNoticeCount;
    accidentCount.value = res.trafficAccidentCount;

    const vehicleOverview = await getVehicleOverview();
    vehicleCount.value = vehicleOverview.vehicleCountMonth;
  });
</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;
    }
    .vehicle-count {
      color: #117af1;
    }
    .regulation-count {
      color: #ff9237;
    }
    .notice-count {
      color: #ff6257;
    }
    .accident-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>
