<template>
  <div class="project-container">
    <CommonTotal :numberList="initiationList" />
    <div class="map-wrapper">
      <Map ref="mapRef" @province-selected="onProvinceSelected" />
      <div class="back-to-country-btn" @click="backToCountry" v-show="showBackBtn">
        返回全国
      </div>
    </div>
  </div>
</template>

<script setup>
import CommonTotal from "@/components/CommonTotal.vue";
import Map from "@/components/CommonMap.vue";
import {
  onMounted,
  reactive,
  watch,
  ref,
  computed,
  shallowRef,
  defineOptions,
  onActivated,
} from "vue";

// 定义组件名称，用于keep-alive缓存
defineOptions({
  name: "ProjectApproval",
});

const props = defineProps({
  currentName: {
    type: String,
    default: "立项",
  },
});

const mapRef = ref(null);
const showBackBtn = ref(false);
// 使用静态数据避免重复创建
const STATIC_DATA = {
  立项: [
    { title: "总个数", value: "0", unit: "个" },
    { title: "总投资", value: "0", unit: "亿元" },
    { title: "总规模", value: "0", unit: "公里" },
  ],
  转让: [
    { title: "总个数", value: "59", unit: "个" },
    { title: "总投资", value: "2733.35", unit: "亿元" },
    { title: "总规模", value: "5116.72", unit: "公里" },
    { title: "累计完成投资", value: "3116.44", unit: "亿元" },
  ],
  退出: [
    { title: "总个数", value: "3", unit: "个" },
    { title: "总投资", value: "141.29", unit: "亿元" },
    { title: "总规模", value: "108.35", unit: "公里" },
    { title: "累计完成投资", value: "0", unit: "亿元" },
  ],
};

// 使用computed进行响应式计算，避免不必要的重新渲染
const initiationList = computed(() => {
  return STATIC_DATA[props.currentName] || STATIC_DATA.立项;
});

// 监听props.currentName的变化
watch(
  () => props.currentName,
  (newValue, oldValue) => {
    // 调用地图组件的updateMarkers方法来更新标记
    if (mapRef.value && mapRef.value.updateMarkers) {
      mapRef.value.updateMarkers(newValue);
    }
  },
  { immediate: true }
);

// 返回全国地图
const backToCountry = () => {
  if (mapRef.value && mapRef.value.backToCountry) {
    mapRef.value.backToCountry();
    showBackBtn.value = false;
  }
};

// 监听省份选择事件
const onProvinceSelected = (show) => {
  showBackBtn.value = show;
};

// 监听地图缩放级别来显示/隐藏返回按钮
const handleMapZoomChange = () => {
  if (mapRef.value) {
    // 这里可以添加监听地图缩放变化的逻辑
    // 当缩放级别大于某个值时显示返回按钮
    showBackBtn.value = true;
  }
};

// 组件被激活时重置地图
onActivated(() => {
  if (mapRef.value && mapRef.value.resetMap) {
    mapRef.value.resetMap();
    showBackBtn.value = false;
  }
});
</script>

<style scoped lang="less">
.project-container {
  display: flex;
  flex-direction: column; // 垂直排列子元素
  justify-content: center; // 水平居中
  align-items: center; // 垂直居中
  .vh(margin-top, 20);
  height: 100%;
  width: 100%;

  .map-wrapper {
    position: relative;
    width: 100%;
    height: 100%;

    .back-to-country-btn {
      position: absolute;
      top: 20px;
      right: 20px;
      background: rgba(4, 66, 126, 0.9);
      border: 1px solid #00ddeb;
      border-radius: 4px;
      color: #fff;
      padding: 8px 16px;
      cursor: pointer;
      font-size: 14px;
      z-index: 1000;
      backdrop-filter: blur(4px);
      transition: all 0.3s ease;

      &:hover {
        background: rgba(0, 221, 235, 0.2);
        border-color: #fff;
        transform: scale(1.05);
      }
    }
  }
}
</style>
