<template>
  <div class="right3-container">
    <InfoHeader 
      name="维修内容比例" 
      eName="Maintenance Content Ratio"
    ></InfoHeader>
    <InfoContent height="4rem">
      <div class="date-picker">
        <VantCalendarPicker @dateChange="dateChange" width="100%"></VantCalendarPicker>
      </div>
      <PieChart
        :chartData="chartPieData"
        :chartSetting="chartSetting"
        chartId="maintenance-pie"
      ></PieChart>
    </InfoContent>
  </div>
</template>

<script>
import InfoHeader from "@/components/infoHeader";
import InfoContent from "@/components/infoContent";
import PieChart from "@/components/pieEcharts";
import VantCalendarPicker from "@/components/VantCalendarPicker/index.vue";
import { getWorkInfoPie } from "@/api/elevator";
import moment from "moment";

export default {
  name: 'Right3',
  components: {
    InfoHeader,
    InfoContent,
    PieChart,
    VantCalendarPicker
  },
  data() {
    return {
      chartSetting: {
        showLegend: true,
        radius: ["30%", "50%"],
        pieColor: ["#FF6600", "#0099FF"],
        height: "3rem"
      },
      chartPieData: [],
      startTime: moment().subtract(3, 'months').format('YYYY-MM-DD'),
      endTime: moment().format('YYYY-MM-DD')
    };
  },
  created() {
    this.getWorkInfoPieApi();
  },
  methods: {
    async getWorkInfoPieApi() {
      try {
        const res = await getWorkInfoPie({
          startTime: this.startTime,
          endTime: this.endTime
        });
        this.chartPieData = res.data.map(item => ({
          name: item.repairPlanType === 11 ? "系统调整优化" : "维修换件",
          value: item.ratio
        }));
      } catch (error) {
        console.error('获取数据失败:', error);
      }
    },
    dateChange(e) {
      this.startTime = e[0];
      this.endTime = e[1];
      this.getWorkInfoPieApi();
    }
  }
};
</script>

<style lang="scss" scoped>
.right3-container {
  width: 100%;
  height: 100%;

  .date-picker {
    padding: 0.1rem 0.2rem;
  }
}
</style>