<template>
  <div class="ele-data">
    <InfoHeader name="历史故障统计" eName="Elevator cumulative data"></InfoHeader>
    <InfoContent height="auto">
      <div class="chart-container">
        <BarCharts
          chartId="historyFaultChart"
          :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 { getWorkHistoryBad } from "@/api/elevator";
import moment from "moment";

export default {
  name: 'EleData',
  components: {
    InfoHeader,
    InfoContent,
    BarCharts,
  },
  data() {
    return {
      elevatorNum: '',
      chartXData: [],
      chartYData: [],
      startTime: moment().subtract(3, "months").format("YYYY-MM-DD"),
      endTime: moment().format("YYYY-MM-DD"),
      chartSettings: {
        legendTextArr: ["故障数量"],
        height: "5rem",
        barColor: '#01B2C3',
        interval: 0,
        rotate: '30'
      }
    };
  },
  created() {
    if (this.$route.query) {
      this.elevatorNum = this.$route.query.elevatorNum;
      this.getWorkHistoryBadApi();
    }
  },
  methods: {
    getWorkHistoryBadApi() {
      getWorkHistoryBad(this.elevatorNum).then((res) => {
        this.chartXData = res.data.map(item => item.faultName);
        this.chartYData = res.data.map(item => item.num);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.ele-data {
  margin-bottom: 0.3rem;

  .chart-container {
    padding: 0.3rem;
    background: rgba(16, 41, 95, 0.8);
    border-radius: 0.1rem;
  }
}
</style>