<template>
  <div class="project-container">
    <CommonTotal :numberList="initiationList" />
  </div>
  <Map />
</template>

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

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

const props = defineProps({
  currentName: {
    type: String,
    default: "立项",
  },
});
// 使用静态数据避免重复创建
const STATIC_DATA = {
  立项: [
    { title: "总个数（个）", value: "59" },
    { title: "总投资（亿元）", value: "2733.35" },
    { title: "总规模（公里）", value: "5116.72" },
  ],
  转让: [
    { title: "总个数（个）", value: "59" },
    { title: "总投资（亿元）", value: "2733.35" },
    { title: "总规模（公里）", value: "5116.72" },
    { title: "累计完成投资（亿元）", value: "3116.44" },
  ],
  退出: [
    { title: "总个数（个）", value: "59" },
    { title: "总投资（亿元）", value: "2733.35" },
    { title: "总规模（公里）", value: "5116.72" },
    { title: "累计完成投资（亿元）", value: "3116.44" },
  ],
};

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

<style scoped lang="less">
.project-container {
  display: flex;
  justify-content: center;
}
</style>
