<template>
  <div class="left2-container">
    <InfoHeader
      name="维修电梯数统计"
      eName="Statistics of Maintenance"
    ></InfoHeader>
    <InfoContent height="4.5rem">
      <LineCharts
        chartId="maintenance-line"
        :chartLineXData="chartLineXData"
        :chartSettingData="chartSettingData"
        :chartLineYData="chartLineYData"
      ></LineCharts>
    </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 { getWorkInfoTrend } from "@/api/elevator";

export default {
  name: 'Left2',
  components: {
    InfoHeader,
    InfoContent,
    LineCharts
  },
  data() {
    return {
      chartSettingData: {
        lineColor: "#06FCEB",
        areaColor: "#06FCEB",
        seriesName: "电梯数",
        height: "4rem",
        showYaxis: true
      },
      chartLineXData: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
      chartLineYData: []
    };
  },
  created() {
    this.getWorkInfoTrendApi();
  },
  methods: {
    async getWorkInfoTrendApi() {
      try {
        const res = await getWorkInfoTrend();
        this.chartLineYData = res.data.map(item => item.elevatorTotal);
      } catch (error) {
        console.error('获取趋势数据失败:', error);
      }
    }
  }
};
</script>

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