<template>
  <div class="left1-container">
    <InfoHeader
      name="维修电梯统计"
      eName="Statistics of maintenance units"
    ></InfoHeader>
    <InfoContent height="calc(100% - 0.6rem)">
      <div class="search-area">
        <el-input
          v-model="name"
          placeholder="请输入维修单位"
          @keyup.enter.native="handleSearch"
        >
          <el-button
            @click="handleSearch"
            slot="append"
            icon="el-icon-search"
          ></el-button>
        </el-input>
      </div>
      <div class="list-header">
        <div class="col">序号</div>
        <div class="col">维修单位</div>
        <div class="col">维修次数</div>
      </div>
      <div class="maintenance-list">
        <div
          v-for="(item, index) in maintenanceList"
          :key="index"
          class="maintenance-item"
          @click="handleClickMaintenance(item)"
        >
          <div class="col">{{ index + 1 }}</div>
          <div class="col">{{ item.name }}</div>
          <div class="col">{{ item.count || 0 }}</div>
        </div>
      </div>
    </InfoContent>
  </div>
</template>

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

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>
.left1-container {
  height: 100%;
  
  .search-area {
    padding: 0.2rem;
    background: rgba(6, 48, 112, 0.5);
    border-radius: 0.1rem;
  }

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

    .col {
      &:nth-child(1) { width: 15%; }
      &:nth-child(2) { width: 60%; }
      &:nth-child(3) { width: 25%; }
      text-align: center;
    }
  }

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

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

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

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