<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" @click="handleJump"
              >应急基地与预置点

              <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--materials">
            <span class="stat-label">应急物资</span>
            <div class="stat-value-wrapper">
              <span class="stat-value">{{ forcePreset.materials }}</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-value">{{ distance === 30 ? 47 : 69 }}</span> -->
              <span class="stat-unit">人</span>
            </div>
          </div>
        </div>

        <div class="station-list" ref="scrollContainer">
          <div class="station-list-inner" ref="stationListInner">
            <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>
  </div>
</template>

<script setup>
import { ref, inject, onMounted, watchEffect, nextTick } from "vue";

// 修改这里：直接获取 forcePreset ref 对象
const disasterData = inject("disasterData");
const forcePreset = disasterData.forcePreset; // 这是 ref 对象
const onDistanceChange = inject("onDistanceChange");

const viewer = inject("cesiumViewer");
const triggerJump = inject("triggerJump");
// 触发跳动
const handleJump = () => {
  console.log("viewer", viewer.value);
  console.log("triggerJump", triggerJump);

  if (viewer.value && triggerJump) {
    triggerJump(5, 10); // 触发5秒跳动，高度10像素
  }
};

// 下拉框状态
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 distance = ref(30);
const selectOption = (value) => {
  distance.value = 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);
  },
};

const stationListInner = ref(null);
const scrollContainer = ref(null);

// 初始化滚动
let scrollTimer1 = null;
let scrollTimer2 = null;

const initScroll = () => {
  // 清除之前的定时器
  if (scrollTimer1) {
    clearTimeout(scrollTimer1);
    scrollTimer1 = null;
  }
  if (scrollTimer2) {
    clearTimeout(scrollTimer2);
    scrollTimer2 = null;
  }

  if (
    stationListInner.value &&
    scrollContainer.value &&
    forcePreset.value.stations
  ) {
    const content = stationListInner.value;
    const container = scrollContainer.value;

    // 强制重新计算布局
    void content.offsetHeight;

    // console.log("内容高度:", content.scrollHeight);
    // console.log("容器高度:", container.clientHeight);

    // 重置位置和动画
    content.style.transition = "none";
    content.style.transform = "translateY(0)";

    // 如果内容高度大于容器高度，需要滚动
    if (content.scrollHeight > container.clientHeight) {
      const scrollDistance = content.scrollHeight - container.clientHeight;
      // console.log("滚动距离:", scrollDistance);

      // 设置滚动动画
      const scroll = () => {
        // console.log("开始滚动");
        const animationDuration = scrollDistance / 20; // 2.8秒
        content.style.transition = `transform ${animationDuration}s linear`;
        content.style.transform = `translateY(-${scrollDistance}px)`;

        // 动画结束后回到起点并暂停2秒
        scrollTimer1 = setTimeout(() => {
          // console.log("滚动完成，回到起点");
          content.style.transition = "none";
          content.style.transform = "translateY(0)";

          // 2秒后重新开始滚动
          scrollTimer2 = setTimeout(() => {
            // console.log("暂停结束，重新开始滚动");
            scroll();
          }, 2000);
        }, animationDuration * 1000);
      };

      // 初始暂停2秒后开始滚动
      scrollTimer1 = setTimeout(() => {
        // console.log("初始暂停结束，开始滚动");
        scroll();
      }, 2000);
    } else {
      console.log("内容高度小于容器高度，不需要滚动");
    }
  } else {
    console.log("stations未定义或DOM未准备好");
  }
};

onMounted(() => {
  nextTick(() => {
    initScroll();
  });
});

// 使用 watchEffect 来监听 forcePreset.value.stations 的变化
watchEffect(() => {
  // 强制依赖 stations 数组的长度
  const stationsLength = forcePreset.value.stations?.length || 0;
  // console.log("stations长度变化:", stationsLength);

  nextTick(() => {
    setTimeout(() => {
      initScroll();
    }, 100);
  });
});
</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(3) 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) 0 vh(30);
          border-radius: vw(6);
          position: relative;
          background: url("../../assets/images/完成里程.png") no-repeat center
            bottom;
          // background-size: 100% 100%;
          width: vw(90);

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

          .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);
        position: relative;
        max-height: vw(120);
        overflow-y: hidden;
        margin: vh(5) 0;

        &-inner {
          display: flex;
          flex-direction: column;
          gap: vh(8);
          padding-right: vw(4);
          /* 添加这些属性确保正确计算高度 */
          min-height: 0;
          flex-shrink: 0;
        }

        .station-item {
          display: flex;
          align-items: center;
          gap: vw(12);
          padding: vh(0) vw(12);
          background: url("../../assets/images/文本线条框.png") no-repeat center
            center;
          background-size: 100% 100%;
          border-radius: vw(6);
          /* 移除 flex-shrink: 0 或者改为 flex-shrink: 1 */
          flex-shrink: 1;
          .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>
