<template>
  <div class="block-event">
    <div class="panel-header">
      <span class="title">阻断事件</span>
    </div>

    <!-- 统计卡片 -->
    <div class="stats-grid">
      <div
        v-for="stat in stats"
        :key="stat.id"
        class="stat-card"
      >
        <img src="../assets/img/block-stat-icon.png" alt="icon" class="stat-icon" />
        <div class="stat-content">
          <div class="stat-title">{{ stat.title }}</div>
          <div class="stat-value-container">
            <div class="stat-value">{{ stat.value }}</div>
            <div class="stat-unit">公里</div>
          </div>
          
          <!-- <img src="../assets/img/block-stat-decoration.png" alt="decoration" class="stat-decoration" /> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const stats = ref([
  { id: 1, title: '当前封闭交通', value: 12 },
  { id: 2, title: '当前累计封闭交通', value: 45 },
  { id: 3, title: '当前限速通行', value: 30 },
  { id: 4, title: '当年累计限速通行', value: 60 },
  { id: 5, title: '当前累计抢通', value: 60 }
])
</script>

<style scoped lang="scss">
@use '@/styles/mixins.scss' as *;

.block-event {
  background: url(../assets/img/block-panel-bg.png) no-repeat;
  background-size: 100% 100%;
  padding: vw(20) vw(30);
  flex: 1;
  display: flex;
  flex-direction: column;
}

.panel-header {
  position: relative;
  width: 100%;
  height: vh(49);
  background: url(../assets/img/common-panel-header-bg.png) no-repeat;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  padding-left: vw(44);
  margin-bottom: vh(40);

  .title {
    color: rgba(255, 255, 255, 1);
    font-size: fs(22);
    font-family: SourceHanSansCN-Medium, sans-serif;
    font-weight: 500;
  }
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: vh(40) vw(20);
  flex: 1;
  align-content: flex-start;
}

.stat-card {
  display: flex;
  align-items: center;
  gap: vw(10);

  .stat-icon {
    width: vw(84);
    height: vw(84);
    flex-shrink: 0;
  }

  .stat-content {
    flex: 1;
    position: relative;

    .stat-title {
      height: vh(28);
      background: url(../assets/img/block-stat-title-bg.png) no-repeat;
      background-size: 100% 100%;
      color: rgba(255, 255, 255, 1);
      font-size: fs(15);
      font-family: SourceHanSansCN-Bold, sans-serif;
      font-weight: 700;
      display: flex;
      align-items: center;
      padding-left: vw(10);
      margin-bottom: vh(10);
    }

    .stat-value {
      color: rgba(255, 255, 255, 1);
      font-size: fs(42);
      font-family: SourceHanSansCN-Bold, sans-serif;
      font-weight: 700;
      line-height: 1;
      padding-left: vw(10);
    }

    .stat-unit {
      // position: absolute;
      // top: vh(50);
      // right: vw(20);
      color: rgba(255, 255, 255, 1);
      font-size: fs(15);
    }


    .stat-value-container {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      background: url(../assets/img/block-stat-decoration.png) no-repeat;
      background-size: 100% auto;
      background-position: bottom;
      padding: 0 vw(40) vh(10) 0;
    }

    .stat-decoration {
      width: vw(154);
      height: vh(29);
      margin-top: vh(5);
    }
  }
}

/* 单独处理最后一个卡片占满整行 */
.stat-card:nth-child(5) {
  grid-column: span 1;
}
</style>
