<template>
  <div class="left1-container" style="pointer-events: all">
    <InfoHeader
      name="维保单位救援时间排名"
      eName="Ranking of rescue time of maintenance units"
    ></InfoHeader>
    <InfoContent height="5rem">
      <RangeDatePicker
        :width="'5.22rem'"
        :isHms="true"
        @dateChange="dateChange"
      ></RangeDatePicker>

      <div class="search-area d-flex jc-space-between">
        <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">维保电梯数</div>
        <div class="d-flex a-c font-weight-br c-white fs-14">救援次数</div>
        <div class="d-flex a-c font-weight-br c-white fs-14">平均数据时长</div>
      </div>

      <div
        style="padding: 0.2rem 0.2rem"
        class="d-flex jc-space-between full-width c-white"
        v-for="(item, index) in maintenanceList"
        :key="index"
      >
        <div class="text-a-c font-weight-br">{{ index + 1 }}</div>
        <div
          class="text-a-c d-flex jc-center font-weight-br"
          style="width: 2.5rem"
        >
          {{ item.maintenanceName }}
        </div>
        <div class="text-a-c d-flex jc-center font-weight-br">
          {{ item.rescueElevatorTotal }}
        </div>
        <div class="text-a-c font-weight-br">{{ item.rescueTotal }}</div>
        <div class="text-a-c font-weight-br">
          {{ item.avgRescueTime.toFixed(2) }}
        </div>
      </div>
    </InfoContent>
  </div>
</template>

<script>
import InfoHeader from "@/components/infoHeader";
import InfoContent from "@/components/infoContent";
import RangeDatePicker from "@/components/rangeDatePicker";
import { getRankRescueAna } from "@/api/elevator";
import moment from "moment";
export default {
  components: {
    InfoHeader,
    InfoContent,
    RangeDatePicker,
  },
  data() {
    return {
      input3: "",
      currentIndex: 0,
      startTime: moment().subtract(3, "months").format("YYYY-MM-DD HH:mm:ss"),
      endTime: moment().format("YYYY-MM-DD HH:mm:ss"),
      tabList: [
        { name: "维保单位", key: "maintenance" },
        { name: "物业单位", key: "tenement" },
        { name: "小区单位", key: "build" },
        { name: "区域分布", key: "area" },
      ],
      maintenanceList: [],
    };
  },
  created() {
    this.getRankRescueAnaApi();
  },
  methods: {
    handleClickTab(index) {
      this.currentIndex = index;
    },
    navigateToDetail() {
      const newUrl = "/elevatorDetail";
      window.open(this.$router.resolve(newUrl).href, "_blank");
    },
    getRankRescueAnaApi() {
      getRankRescueAna({
        startTime: this.startTime,
        endTime: this.endTime,
      }).then((res) => {
        this.maintenanceList = res.data;
      });
    },
    dateChange(e) {
      console.log(e);
      this.startTime = e[0];
      this.endTime = e[1];
      this.getRankRescueAnaApi()
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-collapse {
  border-top: none;
}
::v-deep .el-collapse-item__wrap {
  background: rgba(12, 31, 79, 1);
  color: white !important;
  border-bottom: none;
}
::v-deep .el-collapse-item__header {
  background: rgba(12, 31, 79, 1);
  color: white;
}
::v-deep .el-input__inner {
  background: rgba(12, 31, 79, 1);
  border: solid rgb(20, 45, 134) 1px;
  height: 0.4rem;
}
::v-deep .el-input-group__append {
  background: #03ffeb;
  border: solid rgb(20, 45, 134) 1px;
  color: black !important;
}
.left1-container {
  position: fixed;
  top: 1.25rem;
  right: 0.22rem;
  width: 7.5rem;
}
.ele-item {
  padding: 0.2rem 00;

  cursor: pointer;
  &:hover {
    background: rgba(6, 15, 48, 1);
  }
}
/* 针对特定元素的滚动条 */
.info-list::-webkit-scrollbar {
  width: 0px;
  height: 0px;
}
.search-area {
  background-color: #063070;
  padding: 00.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;
    }
  }
}
</style>
