<template>
  <div class="right2-container">
    <InfoHeader
      name="维修内容统计表"
      eName="Maintenance Statistics"
    ></InfoHeader>
    <InfoContent height="4.6rem">
      <div class="date-picker">
        <VantCalendarPicker
          @dateChange="dateChange"
          width="100%"
        ></VantCalendarPicker>
      </div>

      <div style="width: 100%; padding: 0.25rem">
        <BarCharts
          chartId="maintenance-bar"
          :chartXData="chartXData"
          :chartYData="chartYData"
          :chartSettings="chartSettings"
        ></BarCharts>
      </div>
    </InfoContent>
  </div>
</template>

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

export default {
  name: "Right2",
  components: {
    InfoHeader,
    InfoContent,
    BarCharts,
    VantCalendarPicker,
  },
  data() {
    return {
      chartXData: [],
      chartYData: [],
      startTime: moment().subtract(3, "months").format("YYYY-MM-DD"),
      endTime: moment().format("YYYY-MM-DD"),
      chartSettings: {
        legendTextArr: ["电梯数"],
        height: "3.2rem",
        barColor: "#ff0000",
      },
    };
  },
  created() {
    this.getWorkInfoBarApi();
  },
  methods: {
    async getWorkInfoBarApi() {
      try {
        const res = await getWorkInfoBar({
          startTime: this.startTime,
          endTime: this.endTime,
        });
        this.chartXData = res.data.map((item) =>
          item.repairPlanType === 11 ? "系统调整优化" : "维修换件"
        );
        this.chartYData = res.data.map((item) => item.elevatorTotal);
      } catch (error) {
        console.error("获取数据失败:", error);
      }
    },
    dateChange(e) {
      this.startTime = e[0];
      this.endTime = e[1];
      this.getWorkInfoBarApi();
    },
  },
};
</script>

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

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