<template>
  <div class="right1-container">
    <InfoHeader
      name="维保工作统计"
      eName="Maintenance work statistics"
    ></InfoHeader>
    <InfoContent height="2.5rem">
      <div class="d-flex">
        <div class="left-box">
          <div class="maintenance-total d-flex a-c jc-center">
            <div>
              <div class="c-white font-weight-br fs-14">维保工作总数</div>
              <div
                style="margin-top: 0.15rem; color: #02dff6"
                class="d-flex jc-center c-white font-weight-br fs-20"
              >
                {{ workTotal }}
              </div>
            </div>
          </div>
          <div
            style="margin: 0.15rem 0 0 0.3rem"
            class="maintenance-total d-flex a-c jc-center"
          >
            <div>
              <div class="c-white font-weight-br fs-14">超期维保工作数</div>
              <div
                style="margin-top: 0.15rem; color: #02dff6"
                class="d-flex jc-center c-white font-weight-br fs-20"
              >
                {{ overdueTaskTotal }}
              </div>
            </div>
          </div>
        </div>
        <div>
          <img
            style="transform: scale(0.8)"
            src="../../../assets/images/maintain_work_title.png"
            alt=""
          />
        </div>
        <div class="right--box" style="margin-left: 0.15rem">
          <div
            class="maintenance-total d-flex a-c jc-center"
            style="float: right; margin-bottom: 0.15rem"
          >
            <div>
              <div class="c-white font-weight-br fs-14">维保工作完成数</div>
              <div
                style="margin-top: 0.15rem; color: #02dff6"
                class="d-flex jc-center c-white font-weight-br fs-20"
              >
                {{ completeWorkTotal }}
              </div>
            </div>
          </div>
          <div class="maintenance-total d-flex a-c jc-center">
            <div>
              <div class="c-white font-weight-br fs-14">超期维保电梯数</div>
              <div
                style="margin-top: 0.15rem; color: #02dff6"
                class="d-flex jc-center c-white font-weight-br fs-20"
              >
                {{ overdueElevatorTotal }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </InfoContent>
  </div>
</template>

<script>
import InfoHeader from "@/components/infoHeader";
import InfoContent from "@/components/infoContent";
import { getElevatorMaintenanceTotal } from "@/api/elevator";
export default {
  components: {
    InfoHeader,
    InfoContent,
  },
  data() {
    return {
      currentIndex: 0,
      classicList: [
        { name: "救援", key: "resuce" },
        { name: "维保", key: "maintenance" },
        { name: "维修", key: "repair" },
      ],
      config: {
        unit: "件",
        data: [
          {
            name: "年度数量",
            value: 167,
          },
          {
            name: "今日数量",
            value: 67,
          },
          {
            name: "月度数量",
            value: 123,
          },
          {
            name: "本周数量",
            value: 55,
          },
        ],
        colors: ["#e062ae", "#fb7293", "#e690d1", "#32c5e9", "#96bfff"],

        showValue: true,
      },
      maintenanceName:'',
      overdueTaskTotal:0,
      completeWorkTotal:0 ,
      overdueElevatorTotal:0,
      workTotal:0
    };
  },
  created() {
    this.getElevatorMaintenanceTotalApi();
    this.$EventBus.$on("maintenanceName", (maintenanceName) => {
      console.log(maintenanceName,'maintenanceName')
      this.maintenanceName = maintenanceName
      this.getElevatorMaintenanceTotalApi();
    })
    
  },
  methods: {
    handleClickItem(index) {
      this.currentIndex = index;
    },
    async getElevatorMaintenanceTotalApi() {
      const res = await getElevatorMaintenanceTotal({maintenanceName:this.maintenanceName});
      this.overdueTaskTotal= res.data.overdueTaskTotal
      this.completeWorkTotal= res.data.completeWorkTotal
      this.overdueElevatorTotal= res.data.overdueElevatorTotal
      this.workTotal= res.data.workTotal
    },
  },
};
</script>
<style lang="scss" scoped>
.right1-container {
  position: fixed;
  top: 1.25rem;
  right: 0.22rem;
  width: 31%;
  pointer-events: all;
  .right--box {
    padding: 0.15rem;
    .maintenance-total {
      background: url("../../../assets/images/maintain_work_date.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      width: 2.14rem;
      height: 1rem;
    }
  }
  .left-box {
    padding: 0.15rem;
    .maintenance-total {
      background: url("../../../assets/images/maintain_work_date.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      width: 2.14rem;
      height: 1rem;
    }
  }
}
</style>
