<template>
  <div class="construct-container">
    <div class="construct-left">
      <div class="tag-image">
        <img src="../assets/images/建设.png" />
      </div>
      <div class="construct-left-map">
        <Map />
      </div>
    </div>
    <div class="construct-right">
      <div>
        <div class="info-title">项目概况</div>
        <div>
          <CommonTotal :numberList="projectList" />
        </div>
      </div>
      <div>
        <div class="info-title">投资完成情况</div>
        <div>
          <CommonTotal :numberList="investmentList" />
        </div>
      </div>
      <div>
        <div class="info-title">经营计划完成情况</div>
        <div>
          <CommonComplete :numberList="completeList" />
        </div>
      </div>
      <div>
        <div class="info-title">投资回收完成情况</div>
        <div>
          <CommonTotal :numberList="recycleList" />
        </div>
      </div>
      <div>
        <div class="info-title">2025年经营计划完成进度</div>
        <div>
          <CommonPlant :numberList="operationList" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import Map from "./Map.vue";
import CommonTotal from "./CommonTotal.vue";
import CommonComplete from "./CommonComplete.vue";
import CommonPlant from "./CommonPlant.vue";
import { reactive, ref, onMounted, onUnmounted } from "vue";
const projectList = reactive([
  { title: "总个数（个）", value: "59" },
  { title: "总投资（亿元）", value: "2733.35" },
  { title: "总规模（公里）", value: "5116.72" },
]);
const investmentList = reactive([
  { title: "10月完成投资（亿元）", value: "0" },
  { title: "2025年完成投资（亿元）", value: "19.725" },
  { title: "累计完成投资（亿元）", value: "807.56" },
]);
const recycleList = reactive([
  { title: "10月完成投资（亿元）", value: "0" },
  { title: "2025年完成投资（亿元）", value: "2.98" },
  { title: "完成率", value: "50.2%" },
]);
const operationList = reactive([
  { title: "营业收入完成进度", value: "68.1%" },
  { title: "运营成本完成进度", value: "68.1%" },
  { title: "利润总额完成进度", value: "68.1%" },
]);
const completeList = reactive([
  { title: "营业收入" },
  { title: "运营成本" },
  { title: "利润总额" },
]);
</script>

<style scoped lang="less">
.construct-container {
  display: flex;
  .construct-left {
    // width: 65%;
    flex: 1;
    height: 100%;
    .construct-left-map {
      .vh(height, 700);
      .vh(padding-top, 4);
    }
  }
  .construct-right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .info-title {
      .vw(width, 200);
      .vh(height, 30);
      .vh(line-height, 30);
      .vw(margin-left,10);
      .font(14);
      .vw(padding-left,23);
      text-align: left;
      color: #fff;
      font-family: YouSheBiaoTiYuan;
      background-image: url("../assets/images/tag.png");
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      font-weight: 700;
      letter-spacing: 3px;
      background-size: 100% 100%;
    }
  }
}
</style>
