<template>
  <div class="right1-container">
    <InfoHeader name="维修内容比例" eName="Annual overdue work"></InfoHeader>
    <InfoContent height="5rem">
      <div class="d-flex">
        <div class="c-white d-flex a-c" style="padding-left: 0.1rem">
          选择时间或周期:
        </div>
        <RangeDatePicker @dateChange="dateChange"></RangeDatePicker>
      </div>

      <div class="d-flex">
        <PieChart
          :chartData="chartPieData"
          :chartSetting="chartSetting"
          chartId="dasdsadsad"
        ></PieChart>
      </div>
    </InfoContent>
  </div>
</template>
  
  <script>
import RangeDatePicker from "@/components/rangeDatePicker/index.vue";
import InfoHeader from "@/components/infoHeader";
import InfoContent from "@/components/infoContent";
import PieChart from "@/components/pieEcharts";
import { getElevatorBrand } from "@/api/elevator";
import { getElevatorMaintenanceTotal, getWorkInfoPie } from "@/api/elevator";
import moment from "moment";  
export default {
  components: {
    InfoHeader,
    InfoContent,
    PieChart,
    RangeDatePicker,
  },
  data() {
    return {
      chartSetting: {
        showLegend: true,
        radius: ["30%", "50%"],
        pieColor: ["#FF6600", "#0099FF", "#66CC33", "#FFCC33", "#9933FF"],
        height: "4.1rem",
      },
      chartPieData: [],
      maintenanceName: "",

      startTime:moment().subtract(3, 'months').format('YYYY-MM-DD'),
      endTime: moment().format('YYYY-MM-DD'),
      chartData: [
        {
          value: 9,
          name: "停电故障",
          itemStyle: { color: "#AC2B61" },
        },
        { value: 60, name: "非平层开门", itemStyle: { color: "#FFDB4A" } },
        { value: 32, name: "非平层停梯", itemStyle: { color: "#D36D50" } },
      ],
    };
  },
  created() {
    this.$nextTick(() => {
      this.getWorkInfoPieApi();
    });
  },
  methods: {
    getWorkInfoPieApi() {
      getWorkInfoPie({ startTime: this.startTime, endTime: this.endTime }).then(
        (res) => {
          this.chartPieData = res.data
            .map((item) => {
              return {
                name: item.repairPlanType === 11 ? "系统调整优化" : "维修换件",
                value: item.ratio,
              };
            })
            .slice(0, 10);
        }
      );
    },
    getElevatorMaintenanceTotalApi() {
      getElevatorMaintenanceTotal({
        maintenanceName: this.maintenanceName,
      }).then((res) => {
        this.chartLineXData = res.data.overdueInfoList.map((item) => {
          return `${item.month}月`;
        });
        this.chartLineYData = res.data.overdueInfoList.map((item) => {
          return item.overdueRatio;
        });
      });
    },

    dateChange(e) {
      console.log(e);

      this.startTime = e[0];
      this.endTime = e[1];
      this.getWorkInfoBarApi();
    },
  },
};
</script>
  <style lang="scss" scoped>
.right1-container {
  position: fixed;
  top: 1.222rem;
  right: 0.22rem;
  width: 31%;
  pointer-events: all;
  .title1 {
    background-image: url("../../../assets/images/biaoti-bck.png");
    width: 1.875rem;
    height: 0.375rem;
    line-height: 0.375rem;
    margin: 0 auto;

    font-size: 0.2rem;
    color: white;
  }
  .order {
    background: url("../../../assets/images/guzhang_bck.png");
    background-repeat: no-repeat;
    background-size: 100% 35%;
    background-position: bottom;
    height: 3.25rem;
    .rate {
      font-size: 0.55rem;
      color: white;
      font-weight: bolder;
    }
    .item {
      margin: 0.375rem 0;
      .num-title {
        font-size: 0.3rem;
        color: white;
      }
      .num-value {
        font-size: 0.36rem;
        color: white;
        margin-left: 0.15rem;
      }
    }
  }
}
</style>
  