<template>
  <div class="search-box">
    <van-search v-model="keyWord" show-action shape="round" placeholder="请输入搜索内容" @search="onSearch" @cancel="onCancel"
      @input="onInput" />
    <div class="quick-entry">
      <p class="title-style">快捷入口</p>
      <div class="quick-entry-list">
        <p @click="handleClickEngineRoomPicture" class="quick-entry-item">机房平面布置图</p>
        <p @click="handleClickLowVoltageCabinet" class="quick-entry-item">配电室低压出线柜及出线明细</p>
        <p @click="handleClickElectricWell" class="quick-entry-item">电井(间)控制商铺范围</p>
        <p class="quick-entry-item">更多设备</p>
      </div>
    </div>
    <div v-if="equipList.length" class="equip-box">
      <p class="equip-box-interval"></p>
      <p class="title-style equip-box-title">设备</p>
      <div class="equip-box-list">
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
          <van-cell v-for="(item, index) in equipList" :key="index" @click="handleClickDetail(item)" :title="item.sbjc" />
        </van-list>
      </div>
    </div>
    <div v-else-if="!equipList.length && !flag" class="equip-null">
      <div class="equip-null-img">
        <img src="../assets/images/search_null.png" alt>
      </div>
      <p class="equip-null-text">搜索结果为空</p>
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import { mapGetters } from 'vuex'
import { Search, List, Cell } from 'vant'
import { queryEquipmentList } from '@/api/equipmentList.js'
Vue.use(Search).use(List).use(Cell);
export default {
  name: 'GlobalSearch',
  props: {},
  components: {},
  computed: {
    ...mapGetters(['plazaId']),
  },
  data() {
    return {
      keyWord: "", //搜索关键字
      flag: true, //是否触发搜索标记
      loading: false,
      finished: false,
      refreshing: false,
      equipList: [], //设备列表
      page: 1, //当前页码
      size: 10, //每页条数
    }
  },
  props: {},
  beforeMount() { },
  mounted() {

  },
  methods: {
    // 跳转机房平面布置图
    handleClickEngineRoomPicture() {
      this.$router.push({ name: 'EngineRoomPicture', params: {type: "all"} })
    },
    // 配电室低压出线柜及出线明细
    handleClickLowVoltageCabinet() {
      this.$router.push({ name: 'LowVoltageCabinet', params: {type: "all"} })
    },
    // 跳转电井间控制商铺范围
    handleClickElectricWell() {
      this.$router.push({ name: 'ElectricWell', params: { type: "all"} })
    },
    // 跳转设备详情
    handleClickDetail(item) {
      if (item.assetid) {
        this.$router.push({ path: '/assetDetail', query: { assetid: item.assetid} })
      } else {
        console.error("缺少assetid!")
      }
    },
    // 全局搜索事件
    onSearch() {
      this.page = 1;
      this.equipList = [];
      this.finished = false;
      let data = {
        plazaId: this.plazaId,
        page: this.page,
        size: this.size,
      },
        postParams = {}
      if (this.keyWord) {
        data.keyword = `${this.keyWord}:sbjc,assetnum;`;
        queryEquipmentList({ data, postParams }).then(res => {
          console.log(res)
          this.flag = false;
          if (res.data.result == "success" && res.data.data) {
            this.equipList = res.data.data;
          }
          // 数据全部加载完成
          if (this.equipList.length >= res.data.count) {
            this.finished = true;
          }
        })
      }
    },
    // 修改输入内容
    onInput() {
      this.equipList = [];
      this.flag = true;
    },
    // 取消搜索
    onCancel() {
      this.$router.go(-1)
    },
    onLoad() {
      // 异步更新数据
      this.page++;
      let data = {
        plazaId: this.plazaId,
        page: this.page,
        size: this.size,
      },
        postParams = {}
      if (this.keyWord) {
        data.keyword = `${this.keyWord}:sbjc,assetnum;`;
        queryEquipmentList({ data, postParams }).then(res => {
          if (res.data.result == "success" && res.data.data) {
            this.equipList = this.equipList.concat(res.data.data);
          }

          // 加载状态结束
          this.loading = false;

          // 数据全部加载完成
          if (this.equipList.length >= res.data.count) {
            this.finished = true;
          }
        })
      }
    },
  },
  watch: {

  },
}
</script>
<style lang='less' scoped>
.search-box {
  display: flex;
  height: 100%;
  flex-direction: column;
  overflow: hidden;
  .title-style {
    color: #979797;
    font-size: 12px;
  }
  .quick-entry {
    padding: 15px 16px;
    .quick-entry-list {
      display: flex;
      flex-wrap: wrap;
      .quick-entry-item {
        font-size: 14px;
        height: 24px;
        line-height: 24px;
        padding: 0 8px;
        margin-right: 12px;
        margin-top: 12px;
        color: #666666;
        background: #eff0f1;
        border-radius: 2px;
      }
    }
  }
  .equip-box {
    display: flex;
    flex-direction: column;
    flex: 1;
    height: calc(100% - 172px);
    .equip-box-interval {
      height: 10px;
      background: #f5f6f7;
    }
    .equip-box-title {
      margin: 15px 16px;
    }
    .equip-box-list {
      flex: 1;
      height: calc(100% - 56px);
      overflow-y: auto;
    }
  }
  .equip-null {
    flex: 1;
    padding: 20px 16px;
    .equip-null-img {
      width: 78px;
      margin: 63px auto 10px;
    }
    .equip-null-text {
      font-size: 14px;
      color: #262626;
      text-align: center;
    }
  }
}
/deep/ .van-search__action {
  color: #025baa;
}
</style>