<template>
  <div class="force-preset">
    <div class="force-preset__filter">
      <span class="filter-text">距离灾害点{{ forcePreset.searchRadius }}km范围内</span>
      <img src="../../assets/images/SketchPng8063f445fba047c290a9620343b62ea51d767b8cdcd86769502b5b160998aacc.png" alt="dropdown" class="filter-icon" />
    </div>

    <div class="force-preset__summary">
      <!-- <img src="../../assets/images/SketchPnga96e6ce64e80f6d935217d64400481f3e0361d9e60a7425f6f09c8287716904d.png" alt="background" class="summary-bg" /> -->

      <div class="summary-stats">
        <div class="stat-group">
          <div class="stat-card stat-card--equipment">
            <span class="stat-label">应急装备</span>
            <div class="stat-value-wrapper">
              <span class="stat-value">{{ forcePreset.equipment }}</span>
              <span class="stat-unit">台</span>
            </div>
          </div>

          <div class="stat-card stat-card--base">
            <span class="stat-label">应急基地</span>
            <div class="stat-value-wrapper">
              <span class="stat-value">{{ forcePreset.bases }}</span>
              <span class="stat-unit">处</span>
            </div>
            <!-- <img src="../../assets/images/SketchPng157040b93d0288f48b67022319d8789e5ccded19d94fa14634044ed62a722b1c.png" alt="base" class="stat-icon" /> -->
          </div>

          <div class="stat-card stat-card--personnel">
            <span class="stat-label">应急人员</span>
            <div class="stat-value-wrapper">
              <span class="stat-value">{{ forcePreset.personnel }}</span>
              <span class="stat-unit">人</span>
            </div>
          </div>
        </div>

        <div class="station-list">
          <div
            v-for="station in forcePreset.stations"
            :key="station.id"
            class="station-item"
          >
            <img src="../../assets/images/路线icon.png" alt="station" class="station-icon" />
            <div class="station-info">
              <span class="station-name">{{ station.name }}</span>
              <span class="station-distance">距离灾害点{{ station.distance }}公里</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

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

const { forcePreset } = inject('disasterData')
</script>

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

.force-preset {
  padding: 0;
  margin-top: 0;

  &__filter {
    display: flex;
    align-items: center;
    gap: vw(8);
    padding: vh(10) vw(16);
    background: rgba(20, 53, 118, 0.5);
    border-radius: vw(4);
    margin-bottom: vh(16);
    cursor: pointer;

    .filter-text {
      flex: 1;
      color: var(--text-white);
      font-size: fs(14);
      font-family: SourceHanSansCN-Medium, sans-serif;
    }

    .filter-icon {
      width: vw(12);
      height: vh(12);
    }
  }

  &__summary {
    position: relative;
    display: flex;
    gap: vw(16);

    .summary-bg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      pointer-events: none;
      opacity: 0.1;
    }

    .summary-stats {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: vh(12);
      position: relative;
      z-index: 1;

      .stat-group {
        display: flex;
        justify-content: center;
        gap: vw(32);

        .stat-card {
          // flex: 1;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          gap: vh(8);
          padding: vh(12) vw(12) vh(30);
          border-radius: vw(6);
          position: relative;
          background: url('../../assets/images/完成里程.png') no-repeat center bottom;
          // background-size: 100% 100%;
          width: vw(84);

          .stat-label {
            color: var(--text-white);
            font-size: fs(14);
            font-family: SourceHanSansCN-Medium, sans-serif;
          }

          .stat-value-wrapper {
            display: flex;
            align-items: baseline;
            gap: vw(4);

            .stat-value {
              color: var(--text-white);
              font-size: fs(24);
              font-family: FZZYJW--GB1-0, sans-serif;
              font-weight: bold;
            }

            .stat-unit {
              color: var(--text-white);
              font-size: fs(14);
              font-family: SourceHanSansCN-Medium, sans-serif;
            }
          }

          .stat-icon {
            position: absolute;
            right: vw(8);
            bottom: vh(8);
            width: vw(24);
            height: vh(24);
            opacity: 0.5;
          }
        }
      }

      .station-list {
        display: flex;
        flex-direction: column;
        gap: vh(8);

        .station-item {
          display: flex;
          align-items: center;
          gap: vw(12);
          padding: vh(10) vw(12);
          // background: rgba(20, 53, 118, 0.3);
          background: url('../../assets/images/文本线条框.png') no-repeat center center;
          border-radius: vw(6);

          .station-icon {
            width: vw(32);
            height: vh(32);
            flex-shrink: 0;
          }

          .station-info {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: vh(4);

            .station-name {
              color: var(--text-white);
              font-size: fs(14);
              font-family: SourceHanSansCN-Medium, sans-serif;
              font-weight: 500;
            }

            .station-distance {
              color: var(--text-gray);
              font-size: fs(12);
              font-family: SourceHanSansCN-Regular, sans-serif;
            }
          }
        }
      }
    }
  }
}
</style>
