<template>
  <div class="right3-container">
    <InfoHeader 
      name="年度维保超期率" 
      eName="Annual overdue work"
    ></InfoHeader>
    <InfoContent height="auto">
      <div class="chart-wrapper" ref="chartWrapper">
        <LineCharts
          v-if="isChartReady"
          :chartId="chartId"
          :chartLineXData="chartLineXData"
          :chartSettingData="chartSettingData"
          :chartLineYData="chartLineYData"
        ></LineCharts>
      </div>
    </InfoContent>
  </div>
</template>

<script>
import InfoHeader from "@/components/infoHeader/index.vue";
import InfoContent from "@/components/infoContent/index.vue";
import LineCharts from "@/components/lineCharts/index.vue";
import { getElevatorMaintenanceTotal } from "@/api/elevator";

export default {
  components: {
    InfoHeader,
    InfoContent,
    LineCharts,
  },
  data() {
    return {
      chartSettingData: {
        lineColor: "#02dff6",
        areaColor: "rgba(2, 223, 246, 0.1)",
        seriesName: "超期率",
        height: '4rem',
        smooth: true,
        symbol: 'circle',
        symbolSize: 8,
        yAxisFormatter: (value) => `${value}%`
      },
      chartLineXData: [],
      chartLineYData: [],
      isChartReady: false,  // 添加图表准备状态
      chartId: `chart_${Date.now()}`,  // 添加唯一 chartId
    };
  },
  inject: ['maintenanceNameProvider'],
  computed: {
    maintenanceName: {
      get() {
        return this.maintenanceNameProvider.get()
      }
    }
  },
  created() {
    this.$nextTick(() => {
      this.getElevatorMaintenanceTotalApi();
      this.$EventBus.$on("maintenanceName", () => {
        this.getElevatorMaintenanceTotalApi();
      });
    });
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    });
  },
  methods: {
    initChart() {
      this.isChartReady = false;
      setTimeout(() => {
        this.isChartReady = true;
      }, 100);
    },
    async getElevatorMaintenanceTotalApi() {
      try {
        const res = await getElevatorMaintenanceTotal({
          maintenanceName: this.maintenanceName,
        });
        
        if (res.data.overdueInfoList && res.data.overdueInfoList.length > 0) {
          // 按月份排序
          const sortedList = res.data.overdueInfoList.sort((a, b) => a.month - b.month);
          
          this.chartLineXData = sortedList.map(item => `${item.month}月`);
          this.chartLineYData = sortedList.map(item => {
            // 将比率转换为百分比，保留2位小数
            return parseFloat((item.overdueRatio * 100).toFixed(2));
          });
        } else {
          this.chartLineXData = [];
          this.chartLineYData = [];
        }
      } catch (error) {
        console.error('获取超期率数据失败:', error);
        this.chartLineXData = [];
        this.chartLineYData = [];
      }
    },
  },
  beforeDestroy() {
    // 清理数据
    this.chartLineXData = [];
    this.chartLineYData = [];
  }
};
</script>

<style lang="scss" scoped>
.right3-container {
  .chart-wrapper {
    width: 100%;
    height: 5rem;
    padding: 0.3rem;
    background: rgba(3, 54, 132, 0.3);
    border-radius: 0.2rem;
  }
}
</style>