<template>
  <div class="leftPage">
    <div class="topPage">
      <Title title="项目进度分析" style="font-size: 22px" />
      <div class="progress">
        <div class="progress_item">
          <div class="progress_imgBox">
            <div class="progress_img">
              <img src="@/assets/large/capacity.png" style="width: 100%; height: 100%" />
            </div>
          </div>
          <div class="progress_text">
            <div class="progress_text_title">
              <div>{{ capacityData.gridConnectedCapacity ?? '0' }}</div>
              <div>MW</div>
            </div>
            <div class="content_text">井网总容量</div>
          </div>
        </div>
        <div class="progress_item">
          <div class="progress_imgBox">
            <div class="progress_img">
              <img src="@/assets/large/plan.png" style="width: 100%; height: 100%" />
            </div>
          </div>
          <div class="progress_text">
            <div class="progress_text_title">
              <div>{{ capacityData.plannedCapacity ?? '0' }}</div>
              <div>MW</div>
            </div>
            <div class="content_text">计划总容量</div>
          </div>
        </div>
        <div class="progress_item">
          <div class="progress_imgBox">
            <div class="progress_img">
              <img src="@/assets/large/delay.png" style="width: 100%; height: 100%" />
            </div>
          </div>
          <div class="progress_text">
            <div class="progress_text_title">
              <div>{{ capacityData.delayedProjectCount ?? '0' }}</div>
              <div>个</div>
            </div>
            <div class="content_text">延期项目</div>
          </div>
        </div>
      </div>
    </div>
    <div class="projectItem">
      <div class="chart_container">
        <div ref="pieChartRef" class="echart" />
      </div>
    </div>
    <div class="output">
      <Title title="实际产值与预期产值对比" style="font-size: 22px" />
      <div class="chart_container">
        <div ref="lineChartRef" class="echart" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, nextTick } from 'vue';
import Title from './title.vue';
import * as echarts from 'echarts';
import { pieOption, barOption } from './optionList';
import { projectProgress, outpuProgress } from '@/api/outputApi';
const capacityData: any = ref({});
const props = defineProps({
  projectId: {
    type: String,
    default: 0
  }
});

const generalize = ref();
// 饼图相关
const pieChartRef = ref<HTMLDivElement | null>(null);
let pieChart: any = null;
const totalPercent = ref(0);
// 折线图相关
const lineChartRef = ref<HTMLDivElement | null>(null);
let lineChart: any = null;
// 土地数据 折线图
const designAreaData = ref([]);
const transferAreaData = ref([]);
const barNames = ref([]);
// // 饼图数据
// const pieData = [
//   { label: 'areaPercentage', name: '厂区', value: 0 },
//   { label: 'roadPercentage', name: '道路', value: 0 },
//   { label: 'collectorLinePercentage', name: '集电线路', value: 0 },
//   { label: 'exportLinePercentage', name: '送出线路', value: 0 },
//   { label: 'substationPercentage', name: '升压站', value: 0 },
//   { label: 'boxTransformerPercentage', name: '箱变', value: 0 }
// ];

// 响应窗口大小变化
const handleResize = () => {
  if (pieChart) pieChart.resize();
  if (lineChart) lineChart.resize();
};

const processedDataList = ref([]);
//获取数据
const getData = async () => {
  const res = await projectProgress();
  if (res.code == 200) {
    capacityData.value = res.data;
    // processedDataList.value = res.data.projectProgressDetailList;
    let totalCapacity = 0;
    const processedData = res.data.projectProgressDetailList.map((item) => {
      const capacity = parseInt(item.projectCapacity) || 0;
      totalCapacity += capacity;
      return {
        name: item.projectName,
        value: capacity,
        completionRate: item.completionRate
      };
    });

    // 计算每个项目的百分比
    processedData.forEach((item) => {
      item.percentage = totalCapacity > 0 ? ((item.value / totalCapacity) * 100).toFixed(2) : '0%';
    });
    processedDataList.value = processedData;
    initPieChart();
  }
};
// 初始化饼图
const initPieChart = () => {
  if (!pieChartRef.value) {
    console.error('未找到饼图容器元素');
    return;
  }
  const data = processedDataList.value.map((item: any) => {
    return {
      name: item.name,
      value: item.percentage,
      completionRate: item.value
    };
  });
  pieOption.series.data = data;

  // pieOption.graphic[0].style.text = totalPercent.value + '%';
  pieChart = echarts.init(pieChartRef.value, null, {
    renderer: 'canvas',
    useDirtyRect: false
  });
  pieChart.setOption(pieOption);
};
//获取产值数据
const getOutputData = async () => {
  const res = await outpuProgress();
  if (res.code == 200) {
    designAreaData.value = res.data.map((item: any) => Number(item.planValue));
    transferAreaData.value = res.data.map((item: any) => Number(item.actualValue));
    barNames.value = res.data.map((item: any) => item.projectName);
    initLineChart();
  }
};
// 初始化柱状图图
const initLineChart = () => {
  if (!lineChartRef.value) {
    console.error('未找到柱状图容器元素');
    return;
  }
  console.log(barOption);
  barOption.xAxis.data = barNames.value;
  barOption.series[0].data = designAreaData.value;
  barOption.series[1].data = transferAreaData.value;
  lineChart = echarts.init(lineChartRef.value, null, {
    renderer: 'canvas',
    useDirtyRect: false
  });
  lineChart.setOption(barOption);
};
// /**
//  * 获取项目土地统计数据
//  */
// const getScreenLandData = async () => {
//   const res = await getScreenLand(props.projectId);
//   const { data, code } = res;
//   if (code === 200) {
//     designAreaData.value = data.map((item: any) => Number(item.designArea));
//     transferAreaData.value = data.map((item: any) => Number(item.transferArea));
//     // initLineChart();
//   }
// };

// /**
//  * 获取项目形象进度数据
//  */
// const getScreenImgProcessData = async () => {
//   const res = await getScreenImgProcess(props.projectId);
//   const { data, code } = res;
//   if (code === 200) {
//     totalPercent.value = data.totalPercentage;
//     pieData.forEach((item: any) => {
//       item.value = data[item.label];
//     });
//     initPieChart();
//   }
// };

// /**
//  * 获取项目概况数据
//  */
// const getScreenGeneralizeData = async () => {
//   const res = await getScreenGeneralize(props.projectId);
//   const { data, code } = res;
//   if (code === 200) {
//     generalize.value = data;
//   }
// };

// 组件挂载时初始化图表
onMounted(() => {
  // getScreenLandData();
  // getScreenImgProcessData();
  // getScreenGeneralizeData();
  getData();
  getOutputData();
  nextTick(() => {
    initPieChart();
    window.addEventListener('resize', handleResize);
  });
});

// 组件卸载时清理
onUnmounted(() => {
  window.removeEventListener('resize', handleResize);
  if (pieChart) {
    pieChart.dispose();
    pieChart = null;
  }
  if (lineChart) {
    lineChart.dispose();
    lineChart = null;
  }
});
</script>

<style scoped lang="scss">
.leftPage {
  display: flex;
  flex-direction: column;
  height: 100%;

  .topPage {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 15px 0 0 0;
    border: 1px solid rgba(29, 214, 255, 0.1);
    box-sizing: border-box;
    height: 20%;
  }
}

// .content {
//   height: 100px;
//   margin: 0 15px;
//   padding: 0 10px;
//   margin-top: 15px;
//   box-sizing: border-box;
//   overflow-y: auto;

//   &::-webkit-scrollbar-track {
//     background: rgba(204, 204, 204, 0.1);
//     border-radius: 10px;
//   }

//   &::-webkit-scrollbar-thumb {
//     background: rgba(29, 214, 255, 0.78);
//     border-radius: 10px;
//   }

//   .content_item {
//     font-size: 14px;
//     font-weight: 400;
//     color: rgba(230, 247, 255, 1);
//     margin-bottom: 10px;

//     &:last-child {
//       margin-bottom: 0;
//     }
//   }
// }

.progress {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 10px;
  .progress_item {
    width: 100%;
    height: 100%;
    // background: rgba(29, 214, 255, 1);
    display: flex;
    flex-direction: column;
    position: relative;
    .progress_imgBox {
      width: 100%;
      height: 35%;
      position: relative;
      .progress_img {
        width: 84px;
        height: 48px;
        position: absolute;
        left: 50%;
        top: 80%;
        transform: translate(-50%, -50%);
      }
    }

    .progress_text {
      width: 100%;
      height: 65%;
      background: rgba(29, 214, 255, 0.1);
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      padding: 15px 5px 5px 5px;
      .progress_text_title {
        width: 100%;
        // height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        & > div:first-child {
          // 第一个子元素的样式
          width: 50%;
          font-size: 24px;
          // font-weight: bold;
          font-family: 'AlimamaShuHeiTi', sans-serif;
          text-align: center;
        }

        & > div:last-child {
          // 最后一个子元素的样式
          width: 50%;
          font-size: 12px;
          color: #999;
          text-align: center;
        }
      }
      .content_text {
        width: 100%;
        font-size: 14px;
        color: #c6d1db;
        text-align: center;
      }
    }
  }
}
.projectItem {
  width: 100%;
  height: 40%;
  // background: rgba(29, 214, 255, 1);
  padding: 10px 10px 10px 0;
  // border: 1px solid rgba(29, 214, 255, 0.1);
  .chart_container {
    width: 100%;
    height: 100%;
    .echart {
      height: 100%;
      width: 100%;
    }
  }
}
.output {
  width: 100%;
  height: 40%;
  // background: rgba(29, 214, 255, 0.5);
  padding: 10px 10px 10px 0;
  border: 1px solid rgba(29, 214, 255, 0.1);

  .chart_container {
    width: 100%;
    height: 100%;
    .echart {
      height: 90%;
      width: 100%;
    }
  }
}
</style>
