<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>
        <CommonTotal :numberList="projectList" />
      </div>
      <div>
        <div class="info-title">投资完成情况</div>
        <CommonTotal :numberList="investmentList" />
      </div>
      <div>
        <div class="info-title">投资完成情况</div>
        <div class="progress">
          <div><CircleProgress /></div>
          <div class="investment-progress">
            <span>19.72/58.42亿元</span>
            <div class="progress-image">
              <div class="progress-show-value"></div>
              <div
                class="progress-show-value-rel"
                :style="{ width: `${33.8}%` }"
              ></div>
            </div>
          </div>
        </div>
      </div>
      <div>
        <div class="info-title">投资回收完成情况</div>
        <CommonTotal :numberList="recycleList" />
      </div>
    </div>
  </div>
</template>

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

// 定义组件名称，用于keep-alive缓存
defineOptions({
  name: "Construct",
});
// 使用shallowReactive减少深层响应式开销
const projectList = shallowReactive([
  { title: "总个数", value: "10", unit: "个" },
  { title: "总投资", value: "1334.05", unit: "亿元" },
  { title: "总规模", value: "1051.56", unit: "公里" },
]);
const investmentList = shallowReactive([
  { title: "10月完成投资", value: "*", unit: "亿元" },
  { title: "2025年完成投资", value: "*", unit: "亿元" },
  { title: "累计完成投资", value: "*", unit: "亿元" },
]);
// recycleList
const recycleList = shallowReactive([
  { title: "10月完成投资", value: "*", unit: "亿元" },
  { title: "2025年完成投资", value: "*", unit: "亿元" },
  { title: "完成率", value: "*", unit: "" },
]);
</script>

<style scoped lang="less">
.construct-container {
  display: flex;
  .vh(margin-top,10);
  .construct-left {
    width: 100%;
    height: 100%;
    .tag-image {
      img {
        .vw(width, 85);
      }
    }
    .construct-left-map {
      .vh(height, 700);
      .vh(padding-top, 4);
    }
  }
  .construct-right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .vh(height,700);
    .info-title {
      .vw(width, 180);
      .vh(height, 30);
      .vh(line-height, 30);
      .font(16);
      .vw(padding-left,20);
      .vh(margin-bottom,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%;
    }
    .progress {
      display: flex;
      align-items: center;
      .vw(margin-left, 10);
      .investment-progress {
        display: flex;
        flex-direction: column;
        align-items: end;
        span {
          .vh(margin-bottom,-20);
          font-family: "DIN";
        }
        .progress-image {
          .vw(width,430);
          .vh(height,85);
          background-image: url("@/assets/images/箭头.png");
          background-repeat: no-repeat;
          background-position: center;
          background-size: 100% 100%;
          position: relative;
          .progress-show-value {
            position: absolute;
            .vh(top,26);
            .vw(left,65);
            width: 85%;
            height: 30%;
            background-image: url("@/assets/images/baseRate.png");
            background-size: 100% 100%;
            background-repeat: no-repeat;
          }
          .progress-show-value-rel {
            position: absolute;
            .vh(top,26);
            .vw(left,65);
            max-width: 83%;
            height: 30%;
            background-image: url(/src/assets/images/progress.png);
            background-size: 100% 100%;
            background-repeat: no-repeat;
            -webkit-transform: skew(-30deg);
            transform: skew(-30deg);
          }
        }
      }
    }
  }
}
</style>
