<!--
 * @Description: 搜索组件
 * @Author: 王晓颖
 * @Date: 2022-05-18
 -->
<template>
  <div>
  <div class="map-search-div">
    <!--搜索条件-->
    <div>
      <el-input v-model.trim="keywords" :placeholder="placeholder" clearable @change="inputChange">
        <el-button slot="append" class="filter-item" type="primary" icon="el-icon-search" @click="search(false)">
          搜索
        </el-button>
      </el-input>
    </div>
    <!--搜索结果弹出框-->
  </div>
  <div
    class="result-pop"
    v-show="list.length>0"
    v-model="resultShow"
    placement="bottom-end"
    width="311"
    trigger="manual"
  >
    <div slot="reference" class="select-answer" @click="resultShow = !resultShow">
      共找到 {{ list.length }} 个符合条件的{{ name }}
    </div>
    <div class="list-div">
      <map-search-item v-for="(data,index) in currentPageList" :key="'search-item-'+index" :data="data" :index="index" @click="clickItem" />
    </div>
    <el-pagination
      style="width: 100%;text-align: center;background-color: white"
      :total="list.length"
      :current-page="pageNum"
      :page-size="pageSize"
      :hide-on-single-page="true"
      small
      layout="prev, pager, next"
      @current-change="changePage"
    />
  </div>
  </div>
</template>

<script>
import MapSearchItem from './mapSearchItem'
export default {
  name: 'SearchComp',
  components: { MapSearchItem },
  props: {
    name: {
      type: String,
      default: '井'
    }, // 结果展示类型
    placeholder: {
      type: String,
      default: '关键字'
    },
    list: {
      type: Array,
      default: () => []
    } // 结果列表
  },
  data() {
    return {
      resultShow: false, // 是否显示查询结果
      keywords: '', // 查询条件
      currentPageList: [], // 当前页数据
      pageSize: 5, // 页面容量
      pageNum: 1 // 页码
    }
  },
  watch: {
    keywords(val) {
      if (val === '') {
        this.currentPageList = []
        this.pageNum = 1
        this.resultShow = false
        this.$emit('clear')
      }
    },
    list(val) { // 监控list的数量，为0时不显示
      if (val && val.length > 0) {
        this.resultShow = true
        this.changePage(1)
      } else {
        this.resultShow = false
        this.currentPageList = []
      }
    }
  },
  methods: {
    inputChange() {
      if (this.keywords) {
        this.search(false)
      } else {
        this.search(true)
      }
    },
    // 点击搜索按钮
    search(clear = false) {
      this.$emit('search', this.keywords, clear)
    },
    // 切换页码
    changePage(val) {
      const offset = val
      const start = (offset - 1) * this.pageSize
      const end = start + this.pageSize
      this.currentPageList = this.list.slice(start, end)
      this.$emit('change-page', this.currentPageList)
    },
    closeResult() {
      this.resultShow = false
    },
    // 点击结果项
    clickItem(item) {
      this.$emit('click-item', item)
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.result-pop {
  position: absolute;
  top: 50px;
  left: 20px;
  transform-origin: center top;
  color: #606266;
  line-height: 1.4;
  text-align: justify;
  font-size: 14px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  word-break: break-all;
  z-index: 999999999999;
  width: 320px;
}
.select-answer{
  margin: 5px 0;
  font-size:14px;
  padding: 10px 20px;
  width: 100%;
  height: 40px;
  color: #606266;
  background-color: #FFFFFF;
  border: 1px solid #EBEEF5;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1)
}
.map-search-div{
  position: absolute;
  z-index: 100;
  left: 30px;
  top: 5px;
  .list-div{
    background-color: #FFFFFF;
    margin-top: 5px;
    border-radius: 10px;
    z-index: 999999999999;
  }
}

</style>