<template>
  <div class="force-preset">
    <!-- 自定义下拉框 -->
    <div class="custom-dropdown" v-click-outside="closeDropdown">
      <!-- 触发器 -->
      <div class="dropdown-trigger" @click="toggleDropdown">
        <span class="trigger-text"
          >距离灾害点{{ forcePreset.searchRadius }}km范围内</span
        >
        <div class="trigger-icon" :class="{ 'is-open': isDropdownOpen }">
          <img
            src="../../assets/images/SketchPng8063f445fba047c290a9620343b62ea51d767b8cdcd86769502b5b160998aacc.png"
            alt="dropdown"
          />
        </div>
      </div>

      <!-- 下拉面板 -->
      <transition name="dropdown-slide">
        <div v-if="isDropdownOpen" class="dropdown-panel">
          <div
            v-for="option in distanceOptions"
            :key="option.value"
            class="dropdown-item"
            :class="{ 'is-active': forcePreset.searchRadius === option.value }"
            @click="selectOption(option.value)"
          >
            <span class="item-text">{{ option.label }}</span>
            <div
              v-if="forcePreset.searchRadius === option.value"
              class="item-icon"
            >
              <svg
                viewBox="0 0 24 24"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <circle
                  cx="12"
                  cy="12"
                  r="10"
                  stroke="currentColor"
                  stroke-width="2"
                />
                <path
                  d="M8 12L11 15L16 9"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                />
              </svg>
            </div>
          </div>
        </div>
      </transition>
    </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--base">
            <span class="stat-label flexBox"
              >应急基地

              <img
                src="../../assets/images/SketchPng157040b93d0288f48b67022319d8789e5ccded19d94fa14634044ed62a722b1c.png"
                alt="base"
                class="stat-icon"
              />
            </span>

            <div class="stat-value-wrapper">
              <span class="stat-value">{{ forcePreset.bases }}</span>
              <span class="stat-unit">处</span>
            </div>
          </div>
          <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--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 { ref, inject } from "vue";

const { forcePreset } = inject("disasterData");
const onDistanceChange = inject("onDistanceChange");

// 下拉框状态
const isDropdownOpen = ref(false);

// 距离选项
const distanceOptions = [
  // { value: 10, label: "距离灾害点10km范围内" },
  { value: 30, label: "距离灾害点30km范围内" },
  { value: 50, label: "距离灾害点50km范围内" },
];

/**
 * 切换下拉框显示/隐藏
 */
const toggleDropdown = () => {
  isDropdownOpen.value = !isDropdownOpen.value;
};

/**
 * 关闭下拉框
 */
const closeDropdown = () => {
  isDropdownOpen.value = false;
};

/**
 * 选择选项
 * @param {number} value - 选中的距离值
 */
const selectOption = (value) => {
  if (onDistanceChange) {
    onDistanceChange(value);
  }
  closeDropdown();
};

// 点击外部关闭下拉框的指令
const vClickOutside = {
  mounted(el, binding) {
    el.clickOutsideEvent = (event) => {
      if (!(el === event.target || el.contains(event.target))) {
        binding.value();
      }
    };
    document.addEventListener("click", el.clickOutsideEvent);
  },
  unmounted(el) {
    document.removeEventListener("click", el.clickOutsideEvent);
  },
};
</script>

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

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

  // 自定义下拉框
  .custom-dropdown {
    position: relative;
    margin-bottom: vh(8);
  }

  // 触发器
  .dropdown-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: vh(8) vw(16);
    background: rgba(28, 70, 130, 0.9);
    border: 1px solid rgba(28, 161, 255, 0.3);
    border-radius: vw(8);
    cursor: pointer;
    transition: all 0.3s ease;

    &:hover {
      background: rgba(28, 70, 130, 1);
      border-color: rgba(28, 161, 255, 0.5);
    }

    .trigger-text {
      flex: 1;
      color: var(--text-white);
      font-size: fs(15);
      font-family: SourceHanSansCN-Medium, sans-serif;
      font-weight: 500;
    }

    .trigger-icon {
      width: 16px;
      height: 16px;
      flex-shrink: 0;
      transition: transform 0.3s ease;

      img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }

      &.is-open {
        transform: rotate(180deg);
      }
    }
  }

  // 下拉面板
  .dropdown-panel {
    position: absolute;
    top: calc(100% + vh(4));
    left: 0;
    right: 0;
    background: rgba(15, 35, 75, 0.98);
    border: 1px solid rgba(28, 161, 255, 0.3);
    border-radius: vw(8);
    overflow: hidden;
    z-index: 100;
    box-shadow: 0 vh(4) vh(16) rgba(0, 0, 0, 0.5);
  }

  // 下拉项
  .dropdown-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: vh(12) vw(16);
    cursor: pointer;
    transition: background 0.2s ease;

    &:hover {
      background: rgba(28, 161, 255, 0.1);
    }

    &.is-active {
      background: rgba(28, 161, 255, 0.15);
    }

    .item-text {
      flex: 1;
      color: rgba(255, 255, 255, 0.9);
      font-size: fs(15);
      font-family: SourceHanSansCN-Medium, sans-serif;
      font-weight: 400;
    }

    .item-icon {
      width: vw(20);
      height: vh(20);
      flex-shrink: 0;
      color: var(--primary-color);

      svg {
        width: 100%;
        height: 100%;
      }
    }
  }

  // 下拉动画
  .dropdown-slide-enter-active,
  .dropdown-slide-leave-active {
    transition: all 0.3s ease;
  }

  .dropdown-slide-enter-from,
  .dropdown-slide-leave-to {
    opacity: 0;
    transform: translateY(vh(-10));
  }

  &__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(22);

        .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(104);

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

          .flexBox{
            display: flex;
            align-items: center;
          }

          .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(12);
            height: vw(10);
            // opacity: 0.5;
          }
        }
      }

      .station-list {
        display: flex;
        flex-direction: column;
        gap: vh(8);
        max-height: vw(120);
        overflow-y: auto;

        // 滚动条
        &::-webkit-scrollbar {
          width: vw(4);
        }

        &::-webkit-scrollbar-thumb {
          background: rgba(20, 53, 118, 0.5);
          border-radius: vw(2);
        }

        .station-item {
          display: flex;
          align-items: center;
          gap: vw(12);
          padding: vh(0) vw(12);
          // background: rgba(20, 53, 118, 0.3);
          background: url("../../assets/images/文本线条框.png") no-repeat center
            center;
          background-size: 100% 100%;
          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);
            padding: vh(5) 0;

            .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>
