<template>
  <div class="right1-container" v-if="maintenanceList.length">
    <InfoHeader
      name="维修内容"
      eName="Maintenance work statistics"
    ></InfoHeader>
    <InfoContent height="calc(100% - 1.5rem)">
      <div class="list-header">
        <div class="col">序号</div>
        <div class="col">维修电梯</div>
        <div class="col">维修内容</div>
        <div class="col">维修人员</div>
      </div>
      <div class="list-container">
        <div
          v-for="(item, index) in maintenanceList"
          :key="index"
          class="list-item"
        >
          <div class="col">{{ index + 1 }}</div>
          <div class="col">{{ item.elevatorName }}</div>
          <div class="col">{{ item.planType === 11 ? '系统调整优化' : '维修换件' }}</div>
          <div class="col">{{ item.receiveStaff || '无' }}</div>
        </div>
      </div>
    </InfoContent>
  </div>
</template>

<script>
import InfoHeader from "@/components/infoHeader/index.vue";
import InfoContent from "@/components/infoContent/index.vue";
import { getElevatorMaintenanceTotal,getWorkInfoList } from "@/api/elevator";
export default {
  components: {
    InfoHeader,
    InfoContent,
  },
  data() {
    return {
      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 {
  height: 100%;

  .list-header, .list-item {
    display: flex;
    padding: 0.15rem 0.2rem;
    color: #fff;
    font-size: 0.14rem;

    .col {
      &:nth-child(1) { width: 10%; }
      &:nth-child(2) { width: 35%; }
      &:nth-child(3) { width: 35%; }
      &:nth-child(4) { width: 20%; }
      text-align: center;
    }
  }

  .list-header {
    background: rgba(6, 48, 112, 0.5);
    font-weight: bold;
  }

  .list-container {
    height: calc(100% - 0.8rem);
    overflow-y: auto;
    margin-top: 0.1rem;

    &::-webkit-scrollbar {
      display: none;
    }

    .list-item {
      cursor: pointer;
      transition: all 0.3s;
      
      &:hover {
        background: rgba(6, 48, 112, 0.3);
      }
    }
  }
}
</style>