<!--
 * @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">
      共找到 {{ totalData.length }} 条个查询结果
    </div>
    <!--查询列表-->
    <el-collapse-transition>
      <div v-show="dataShow&&data.length>0" class="table">
        <search-item v-for="(item,index) of data" :key="item.编码" :data="item" :index="index"/>
        <el-pagination
          v-show="totalData.length>pageSize"
          :current-page="offset"
          :page-size="pageSize"
          :total="totalData.length.length"
          align="center"
          layout="prev, pager, next"
          @current-change="handleCurrentChange"/>
      </div>
    </el-collapse-transition>
  </div>
</template>

<script>
import SearchItem from './SearchItem'
export default {
  name: 'SearchList',
  components: { SearchItem },
  props: {

  },
  data() {
    return {
      keyword: '', // 关键字，查询条件
      totalData: [
        { '编码': '1111111', '小类名称': '垃圾桶大范围冯绍峰威锋网发范德萨范德萨发二维费' },
        { '编码': '1111111', '小类名称': '垃圾桶' },
        { '编码': '1111111', '小类名称': '垃圾桶' },
        { '编码': '1111111', '小类名称': '垃圾桶' },
        { '编码': '1111111', '小类名称': '垃圾桶' },
        { '编码': '1111111', '小类名称': '垃圾桶' }
      ], // 全部数据
      data: [], // 要展示的查询结果
      searchCountShow: false, // 是否显示统计数
      dataShow: false, // 是否显示列表详情
      offset: 1, // 查询结果列表当前页码
      pageSize: 5 // 查询结果列表页容量
    }
  },
  watch: {
    keyword(newval, oldval) {
      if (newval.length === 0) {
        this.searchCountShow = false
        this.dataShow = false
      }
    }
  },
  methods: {
    search() {
      this.offset = 1
      const startIndex = (this.offset - 1) * this.pageSize
      this.data = this.totalData.slice(startIndex, startIndex + this.pageSize)
      this.searchCountShow = true
      this.dataShow = true
    },
    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)
    }
  }
}
</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>