<template>
  <div class="right1-container">
    <InfoHeader
      name="维修内容"
      eName="Maintenance work statistics"
    ></InfoHeader>
    <InfoContent height="6.5rem">
      <div
        class="search-area d-flex jc-space-between"
        style="padding: 0.15rem 0.15rem"
      >
        <div class="d-flex a-c font-weight-br c-white fs-14">序号</div>
        <div class="d-flex a-c jc-center font-weight-br c-white fs-14" style="width: 3rem;text-align: center;">维修电梯</div>

        <div class="d-flex a-c font-weight-br c-white fs-14" style="text-align: center;">维修内容</div>
        <div class="d-flex a-c font-weight-br c-white fs-14">维修人员</div>
      </div>
      <div
        class="maintenance-list"
        style="max-height: 6rem; overflow-y: scroll"
      >
        <div
          v-for="(item, index) in maintenanceList"
          :key="index"
          class="maintenance-item d-flex jc-space-between full-width"
          @click="handleClickMaintenance(item)"
        >
          <div class="text-a-c font-weight-br">{{ index + 1 }}</div>
          <div class="text-a-c font-weight-br" style="width: 3rem;text-align: center;">{{ item.elevatorName }}</div>

          <div class="text-a-c font-weight-br" style="text-align: center;">{{ item.planType===11?'系统调整优化':'维修换件' }}</div>
          <div class="text-a-c font-weight-br">{{ item.receiveStaff||'无' }}</div>
        </div>
      </div>
    </InfoContent>
  </div>
</template>

<script>
import InfoHeader from "@/components/infoHeader";
import InfoContent from "@/components/infoContent";
import { getElevatorMaintenanceTotal,getWorkInfoList } from "@/api/elevator";
export default {
  components: {
    InfoHeader,
    InfoContent,
  },
  data() {
    return {
      currentIndex: 0,
      currentIndex: 0,
      classicList: [
        { name: "救援", key: "resuce" },
        { name: "维保", key: "maintenance" },
        { name: "维修", key: "repair" },
      ],
      maintenanceList: [

      ],

      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.getWorkInfoListApi()
    this.$EventBus.$on("maintenanceName", (maintenanceName) => {
      console.log(maintenanceName, "maintenanceName");
      this.maintenanceName = maintenanceName;
      this.getElevatorMaintenanceTotalApi();
      
    });
  },
  methods: {
    handleClickItem(index) {
      this.currentIndex = index;
    },
    getWorkInfoListApi(){
      getWorkInfoList({workType:2,repairAudt:1}).then(res=>{
        this.maintenanceList = res.rows
      })
    },
    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;
  left: 0.22rem;
  width: 31%;
  pointer-events: all;
  .search-area {
    background-color: #063070;
    padding: 0.1rem 00.1rem;
  }
  .tab-list {
    padding: 0.2rem 0.15rem;
    .tab-item {
      background-image: url("../../../assets/images/biaoti-bck.png");
      width: 1.675rem;
      height: 0.375rem;
      line-height: 0.375rem;

      text-align: center;
      font-size: 0.18rem;
      font-weight: bolder;
      color: #828797;
      cursor: pointer;
      &:hover {
        color: white;
      }
    }
  }
  .maintenance-list {
    .maintenance-item {
      padding: 0.25rem;
      color: white;
      cursor: pointer;
      &:hover {
        background-color: rgb(3, 54, 132);
      }
    }
  }
  .maintenance-list::-webkit-scrollbar {
    display: none;
  }
  .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>
