<template>
  <div class="left1-container" style="pointer-events: all">
    <InfoHeader
      name="维修电梯统计"
      eName="Statistics of maintenance units"
    ></InfoHeader>
    <InfoContent height="9.6rem">
      <!-- <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> -->
      <div class="search-area d-flex jc-space-between">
        <div class="d-flex">
          <div class="d-flex a-c font-weight-br c-white fs-14">序号</div>
          <div style="margin-left: 0.25rem">
            <el-input
              style="width: 3rem"
              placeholder="搜索电梯"
              v-model="name"
              clearable
            >
              <el-button
                @click="handleSearch"
                slot="append"
                icon="el-icon-search"
              ></el-button>
            </el-input>
          </div>
        </div>

        <div class="d-flex a-c font-weight-br c-white fs-14">维修次数</div>
      </div>
      <div
        class="maintenance-list"
        style="max-height: 9rem; 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">{{ item.name }}</div>


          <div class="text-a-c font-weight-br">22</div>

        </div>
      </div>
    </InfoContent>
  </div>
</template>

<script>
import InfoHeader from "@/components/infoHeader";
import InfoContent from "@/components/infoContent";

import { getElevatorMaintenance } from "@/api/elevator";
export default {
  components: {
    InfoHeader,
    InfoContent,
  },
  data() {
    return {
      name: "",
      currentIndex: 0,
      tabList: [
        { name: "维保单位", key: "maintenance" },
        { name: "物业单位", key: "tenement" },
        { name: "小区单位", key: "build" },
        { name: "区域分布", key: "area" },
      ],
      maintenanceList: [],
    };
  },
  mounted() {
    this.getElevatorMaintenanceApi();
  },
  methods: {
    handleClickTab(index) {
      this.currentIndex = index;
    },
    navigateToDetail() {
      const newUrl = "/elevatorDetail";
      window.open(this.$router.resolve(newUrl).href, "_blank");
    },
    handleClickMaintenance(data) {
      console.log(data);
      if (data) {
        const loading = this.$loading({
          lock: true,
          text: "正在加载电梯数据...",
          spinner: "el-icon-loading",
          background: "rgba(0, 0, 0, 0.7)",
        });
        this.$EventBus.$emit("maintenanceName", data.name);
        setTimeout(() => {
          loading.close();
        }, 300);
      }
    },
    handleSearch() {
      const loading = this.$loading({
        lock: true,
        text: "正在加载电梯数据...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      setTimeout(() => {
        this.getElevatorMaintenanceApi();
        loading.close();
      }, 200);
    },
    async getElevatorMaintenanceApi() {
      const res = await getElevatorMaintenance({
        name: this.name,
      });
      this.maintenanceList = res.rows;
    },
  },
};
</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;
  // left: 0.1rem;
  // width: 7rem;
}
.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;
    }
  }
}
.maintenance-list {
  .maintenance-item {
    padding: 0.25rem;
    color: white;
    cursor: pointer;
    &:hover {
      background-color: rgb(3, 54, 132);
    }
  }
}
.maintenance-list::-webkit-scrollbar {
  display: none;
}
</style>
