<template>
  <div class="project-container">
    <CommonTotal :numberList="initiationList" />
  </div>
  <Map ref="mapRef" />
</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 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 }
);

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

<style scoped lang="less">
.project-container {
  display: flex;
  justify-content: center;
  .vh(margin-top, 20);
}
</style>
