<!--
 * @Description: 查询结果列表显示
 * @Author: 王晓颖
 * @Date: 2021-03-08 09:46:39
 -->
<template>
  <div class="map-search-div">
    <!--查询条件-->
    <el-input v-model.trim="keyword" placeholder="请输入查询关键字" class="input-with-select" style="width: 300px;" clearable>
      <el-button slot="append" icon="el-icon-search" type="primary" class="search-btn" @click="search"/>
    </el-input>
    <!--查询结果数显示-->

    <div v-show="searchCountShow" class="search-total" @click="dataShow=!dataShow">
      <template v-if="!loading">共找到 {{ totalData.length }} 条个查询结果</template>
      <template v-else><i class="el-icon-loading"/> 搜索中...</template>
    </div>
    <!--查询列表-->
    <el-collapse-transition>
      <div v-show="!loading&&dataShow&&data.length>0" class="table">
        <search-item v-for="(item,index) of data" :key="'search'+index" :data="item" :index="index" @click="itemClick(item,index)"/>
        <el-pagination
          v-show="totalData.length>pageSize"
          :pager-count="5"
          :current-page="offset"
          :page-size="pageSize"
          :total="totalData.length"
          align="center"
          layout="prev, pager, next"
          small
          @current-change="handleCurrentChange"/>
      </div>
    </el-collapse-transition>
  </div>
</template>

<script>
import SearchItem from './SearchItem'
export default {
  name: 'SearchList',
  components: { SearchItem },
  props: {
    loading: {
      type: Boolean,
      default: false
    },
    totalData: {
      type: Array,
      default: () => {
        return []
      }
    } // 查询结果
  },
  data() {
    return {
      keyword: '', // 关键字，查询条件
      // totalData: [
      //   { '编码': '1111111', '小类名称': '垃圾桶大范围冯绍峰威锋网发范德萨范德萨发二维费' },
      //   { '编码': '1111111', '小类名称': '垃圾桶' },
      //   { '编码': '1111111', '小类名称': '垃圾桶' },
      //   { '编码': '1111111', '小类名称': '垃圾桶' },
      //   { '编码': '1111111', '小类名称': '垃圾桶' },
      //   { '编码': '1111111', '小类名称': '垃圾桶' }
      // ], // 全部数据
      data: [], // 要展示的查询结果
      searchCountShow: false, // 是否显示统计数
      dataShow: false, // 是否显示列表详情
      offset: 1, // 查询结果列表当前页码
      pageSize: 5 // 查询结果列表页容量
    }
  },
  computed: {
    // data() { // 全部数据的页码数
    //   const startIndex = (this.offset - 1) * this.pageSize
    //   const data = this.totalData.slice(startIndex, startIndex + this.pageSize)
    //   return data
    // }
  },
  watch: {
    // 查询结果有变时，触发
    totalData(newval, oldval) {
      const startIndex = (this.offset - 1) * this.pageSize
      this.data = this.totalData.slice(startIndex, startIndex + this.pageSize)
      this.$emit('change', this.data)
    },
    keyword(newval, oldval) {
      if (newval.length === 0) {
        this.searchCountShow = false
        this.dataShow = false
        this.clear()
      }
    }
  },
  methods: {
    search() {
      if (this.keyword === '') { // 如果是空字符串，表示未输入任何查询条件，根据内容提示用户
        this.$message.warning('请输入查询关键字')
        return
      }
      this.offset = 1
      this.searchCountShow = true
      this.dataShow = true
      this.$emit('search', this.keyword)
    },
    // 清除查询
    clear() {
      this.$emit('clear')
    },
    hideSearch() {
      // this.searchCountShow = false
      this.dataShow = false
    },
    // 页码发生变化时触发
    handleCurrentChange(val) {
      this.offset = val
      const startIndex = (this.offset - 1) * this.pageSize
      this.data = this.totalData.slice(startIndex, startIndex + this.pageSize)
      this.$emit('change', this.data)
    },
    itemClick(item, index) {
      this.$emit('item-click', item, index)
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  @import '../../../styles/variables.scss';
  $width:300px;
.map-search-div{
  width:$width;
  position: absolute;
  top: 20px;
  left:30px;
  z-index: 10000;
  .input-with-select{
    -moz-box-shadow: 0px 1px 3px #d9d9d9; /* 老的 Firefox */
    box-shadow: 0px 1px 3px #d9d9d9;
  }
  .search-btn{
    border-radius: 0px 4px 4px 0px;
    background-color: $themeColor;
    border-color:$themeColor;
    color: #fff;
  }
}
.search-total{
  width: 100%;
  height: 35px;
  background-color: white;
  margin-top: 10px;
  border: 1px solid #DCDFE6;
  padding-left: 15px;color: #409eff;
  padding-top: 8px;
  font-size: 13px;
  border-radius:3px;
  cursor: pointer;
  -moz-box-shadow: 0px 1px 3px #d9d9d9; /* 老的 Firefox */
  box-shadow: 0px 1px 3px #d9d9d9;
}
.table{
  background-color: #fff;
  width:100%;
  overflow: auto;
  margin:10px 0px;
  border: 1px solid #DCDFE6;
  border-radius:3px;
  padding:5px;
  padding-right: 8px;
  -moz-box-shadow: 0px 1px 3px #d9d9d9; /* 老的 Firefox */
  box-shadow: 0px 1px 3px #d9d9d9;
}
</style>