<template>
  <div class="construct-container">
    <div class="construct-left">
      <div class="construct-left-map">
        <Map ref="mapRef" />
      </div>
    </div>
    <div class="construct-right">
      <div>
        <div class="info-title">项目概况</div>
        <CommonTotal :numberList="projectList" />
      </div>
      <div>
        <div class="info-title">投资完成情况</div>
        <CommonTotal :numberList="investmentList" />
      </div>
      <div>
        <div class="info-title">经营计划完成情况</div>
        <CommonComplete :numberList="completeList" />
      </div>
      <div>
        <div class="info-title">投资回收完成情况</div>
        <CommonTotal :numberList="recycleList" />
      </div>
      <div>
        <div class="info-title">2025年经营计划完成进度</div>
        <CommonPlant :numberList="operationList" />
      </div>
    </div>
  </div>
</template>

<script setup>
import Map from "@/components/CommonMap.vue";
import CommonTotal from "@/components/CommonTotal.vue";
import CommonComplete from "@/components/CommonComplete.vue";
import CommonPlant from "@/components/CommonPlant.vue";
import {
  shallowReactive,
  ref,
  onMounted,
  onUnmounted,
  defineOptions,
  onActivated,
} from "vue";

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

// 地图组件引用
const mapRef = ref(null);
// 使用shallowReactive减少深层响应式开销
const projectList = shallowReactive([
  { title: "总个数", value: "2", unit: "个" },
  { title: "总投资", value: "114.23", unit: "亿元" },
  { title: "总规模", value: "233.22", unit: "公里" },
]);
const investmentList = shallowReactive([
  { title: "10月完成投资", value: "*", unit: "亿元" },
  { title: "2025年完成投资", value: "*", unit: "亿元" },
  { title: "累计完成投资", value: "*", unit: "亿元" },
]);
const recycleList = shallowReactive([
  { title: "10月完成投资", value: "*", unit: "亿元" },
  { title: "2025年完成投资", value: "*", unit: "亿元" },
  { title: "完成率", value: "*", unit: "" },
]);
const operationList = shallowReactive([
  { title: "营业收入完成进度", value: "*", actualValue: "*", planValue: "*" },
  { title: "运营成本完成进度", value: "*", actualValue: "*", planValue: "*" },
  { title: "利润总额完成进度", value: "*", actualValue: "*", planValue: "*" },
]);
const completeList = shallowReactive([
  {
    title: "营业收入",
    protitle: "11月完成",
    proValue: "*",
    thirdTtile: "第三季度完成",
    thirdValue: "*",
    compareValue: "*",
    cumulativeValue: "*",
  },
  {
    title: "运营成本",
    protitle: "11月完成",
    proValue: "*",
    thirdTtile: "第三季度完成",
    thirdValue: "*",
    compareValue: "*",
    cumulativeValue: "*",
  },
  {
    title: "利润总额",
    protitle: "11月完成",
    proValue: "*",
    thirdTtile: "第三季度完成",
    thirdValue: "*",
    compareValue: "*",
    cumulativeValue: "*",
  },
]);

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

  // 确保显示运营阶段的标记
  if (mapRef.value && mapRef.value.updateMarkers) {
    mapRef.value.updateMarkers("运营");
  }
});
</script>

<style scoped lang="less">
.construct-container {
  display: flex;
  height: 100%;
  width: 100%;
  .construct-left {
    flex: 1;
    height: 100%;
    .tag-image {
      img {
        .vw(width, 85);
      }
    }
    .construct-left-map {
      height: 100%;
    }
  }
  .construct-right {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    height: 100%;
    .info-title {
      .vw(width, 180);
      .vh(height, 30);
      .vh(line-height, 30);
      .font(16);
      .vw(padding-left,20);
      .vh(margin-bottom,10);
      .vh(margin-top,15);
      text-align: left;
      color: #fff;
      white-space: nowrap;
      font-family: YouSheBiaoTiYuan;
      background-image: url("@/assets/images/tag.png");
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      background-size: 100% 100%;
    }
  }
}
</style>
