<template>
  <div class="left1-container" style="pointer-events: all">
    <InfoHeader
      name="电梯列表"
      eName="Ranking of rescue time of maintenance units"
    ></InfoHeader>
    <InfoContent height="9.5rem">
      <!-- <div class="tab-list d-flex full-width jc-space-around">
        <div
          class="tab-item"
          v-for="(item, index) in tabList"
          :key="index"
          @click="handleClickTab(index)"
          :style="{ color: currentIndex === index ? 'white' : '' }"
        >
          {{ item.name }}
          <dv-decoration-2
            :dur="2"
            v-if="currentIndex === index"
            style="width: 130px; height: 5px"
          />
        </div>
      </div> -->
      <!-- <RangeDatePicker></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>
          <el-input
            placeholder="搜索维保单位/物业单位/小区/区域分布"
            v-model="input3"
          >
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </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>
      <el-collapse
        v-model="activeName"
        accordion
        @change="handleCollapseChange"
      >
        <el-collapse-item
          :name="item.maintenanceName"
          v-for="(item, index) in allElevatorList"
          :key="index"
        >
          <template slot="title">
            <div
              style="padding: 0 0.2rem"
              class="d-flex jc-space-between full-width"
            >
              <div class="text-a-c font-weight-br">{{ index + 1 }}</div>
              <div class="text-a-c font-weight-br" style="width: 4rem">
                {{ item.maintenanceName }}
              </div>
              <div class="text-a-c font-weight-br">
                {{ item.elevatorList.length }}
              </div>
              <div class="text-a-c font-weight-br">
                <!-- {{ item.employTotal || 0 }} -->
              </div>
            </div>
          </template>
          <div class="c-white e-list">
            <div
              style="margin-top: 0.1rem"
              class="ele-item text-a-c font-weight-br"
              v-for="(subItem, subIndex) in item.elevatorList"
              @click="navigateToDetail(subItem)"
              :key="subIndex"
            >
              {{ subItem.elevatorName }}
            </div>
          </div>
        </el-collapse-item>
      </el-collapse>
    </InfoContent>
  </div>
</template>

<script>
import InfoHeader from "@/components/infoHeader";
import InfoContent from "@/components/infoContent";
import RangeDatePicker from "@/components/rangeDatePicker";
import { getElevatorListE } from "@/api/elevator";
export default {
  components: {
    InfoHeader,
    InfoContent,
    RangeDatePicker,
  },
  data() {
    return {
      input3: "",
      currentIndex: 0,
      tabList: [
        { name: "维保单位", key: "maintenance" },
        { name: "物业单位", key: "tenement" },
        { name: "小区单位", key: "build" },
        { name: "区域分布", key: "area" },
      ],
      activeName: "",
      allElevatorList: [],
    };
  },
  mounted() {
    this.getElevatorListApi();
  },
  computed: {
    elevatorList() {
      return this.$store.state.elevatorList;
    },
  },
  methods: {
    handleClickTab(index) {
      this.currentIndex = index;
    },
    navigateToDetail(data) {
      window.open(`/elevatorDetail?elevatorNum=${data.elevatorNum}`);
    },
    handleCollapseChange(e) {
      console.log(e);
      if (e) {
        const elevatorList = this.allElevatorList.find(
          (item) => item.maintenanceName === e
        ).elevatorList;

        const elevatorNumList = elevatorList.map((item) => {
          return item.elevatorNum;
        });

        this.$EventBus.$emit(
          "elevatorNumList",
          JSON.stringify(elevatorNumList)
        );
      }
    },
    async getElevatorListApi() {
      const list = await getElevatorListE();
      this.allElevatorList = list.data.maintenanceInfoList;
      this.activeName = list.data.maintenanceInfoList[0].maintenanceName;
      const elevatorNumList = list.data.maintenanceInfoList[0].elevatorList.map(
        (item) => {
          return item.elevatorNum;
        }
      );
      this.$EventBus.$emit("elevatorNumList", JSON.stringify(elevatorNumList));
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-collapse {
  border-top: none;
  max-height: 9rem;
  overflow-y: scroll;
}
::v-deep .el-collapse::-webkit-scrollbar {
  display: 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;
  border-bottom: 1px solid rgb(3, 54, 132);
}
::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;
  // left: 0.22rem;
  // width: 7.5rem;
}
.ele-item {
  padding: 0.1rem 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;
}
.e-list {
  overflow-y: scroll;
  max-height: 7.5rem;
  &::-webkit-scrollbar {
    display: none; /* Chrome Safari */
  }
}
.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>
