<template>
  <div class="left1-container">
    <InfoHeader
      name="维保单位统计"
      eName="Statistics of maintenance units"
    ></InfoHeader>
    <InfoContent height="auto">
      <div class="search-area">
        <div class="search-label">序号</div>
        <div class="search-input">
          <el-input
            placeholder="搜索维保单位"
            v-model="name"
            clearable
          >
            <el-button
              @click="handleSearch"
              slot="append"
              icon="el-icon-search"
            ></el-button>
          </el-input>
        </div>
      </div>
      <div class="maintenance-list">
        <div
          v-for="(item, index) in maintenanceList"
          :key="index"
          class="maintenance-item"
          @click="handleClickMaintenance(item)"
        >
          <div class="item-index">{{ index + 1 }}</div>
          <div class="item-name">{{ item.name }}</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: "",
      maintenanceList: [],
    };
  },
  mounted() {
    this.getElevatorMaintenanceApi();
  },
  methods: {
    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;
    },
    handleClickMaintenance(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);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-input-group__append{
  text-align: center !important;
}
.left1-container {
  .search-area {
    display: flex;
    align-items: center;
    padding: 0.3rem;
    
    .search-label {
      color: white;
      font-weight: bold;
      font-size: 0.28rem;
      margin-right: 0.2rem;
    }
    
    .search-input {
      flex: 1;
    }
  }

  .maintenance-list {
    height: calc(100vh - 4rem);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;

    .maintenance-item {
      display: flex;
      align-items: center;
      padding: 0.3rem;
      color: white;
      border-bottom: 1px solid rgba(255,255,255,0.1);

      .item-index {
        width: 0.8rem;
        text-align: center;
        font-weight: bold;
      }

      .item-name {
        flex: 1;
        font-weight: bold;
      }

      &:active {
        background-color: rgba(3, 54, 132, 0.6);
      }
    }
  }
}

// Element UI 样式覆盖
:deep(.el-input__inner) {
  background: rgba(12, 31, 79, 1);
  border: 1px solid rgb(20, 45, 134);
  height: 0.8rem;
  color: white;
}

:deep(.el-input-group__append) {
  background: #03ffeb;
  border: 1px solid rgb(20, 45, 134);
  padding: 0 0.3rem;
}

:deep(.el-button) {
  padding: 0;
  border: none;
}
</style>