<template>
  <div class="right2-container">
    <InfoHeader
      name="年度维保超期统计"
      eName="Annual maintenance overdue statistics"
    ></InfoHeader>
    <InfoContent height="auto">
      <div class="chart-wrapper" ref="chartWrapper">
        <BarCharts
          v-if="isChartReady"
          :chartId="chartId"
          :chartXData="chartXData"
          :chartYData="chartYData"
          :chartSettings="chartSettings"
        ></BarCharts>
      </div>
    </InfoContent>
  </div>
</template>

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

export default {
  components: {
    InfoHeader,
    InfoContent,
    BarCharts,
  },
  data() {
    return {
      chartXData: [],
      chartYData: [],
      chartSettings: { 
        legendTextArr: ["电梯数"],
        height: '4rem',
        barColor: '#02dff6'
      },
      isChartReady: false,
      chartId: `chart_${Date.now()}`,
    };
  },
  inject: ['maintenanceNameProvider'],
  computed: {
    maintenanceName: {
      get() {
        return this.maintenanceNameProvider.get()
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    });
  },
  created() {
    this.getElevatorMaintenanceTotalApi();
    this.$EventBus.$on("maintenanceName", () => {
      this.getElevatorMaintenanceTotalApi();
    });
  },
  methods: {
    initChart() {
      this.isChartReady = false;
      setTimeout(() => {
        this.isChartReady = true;
      }, 100);
    },
    async getElevatorMaintenanceTotalApi() {
      try {
        const res = await getElevatorMaintenanceTotal({
          maintenanceName: this.maintenanceName,
        });
        this.chartXData = res.data.overdueInfoList.map(item => `${item.month}月`);
        this.chartYData = res.data.overdueInfoList.map(item => item.overdueElevatorTotal);
      } catch (error) {
        console.error('获取数据失败:', error);
      }
    },
  },
};
</script>

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