<!--
 * @Description: 搜索组件
 * @Author: 王晓颖
 * @Date: 2022-05-18
 -->
<template>
  <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>
    <!--搜索结果弹出框-->
    <el-popover
      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
        :total="list.length"
        :current-page="pageNum"
        :page-size="pageSize"
        :hide-on-single-page="true"
        small
        layout="prev, pager, next"
        @current-change="changePage"
      />
    </el-popover>
  </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>
.map-search-div{
  position: absolute;
  z-index: 100;
  left: 30px;
  top: 5px;
  .select-answer{
    position: relative;
    margin-top: 5px;
    font-size:14px;
    padding: 10px 20px;
    width: 311px;
    color: #606266;
    background-color: #FFFFFF;
    border: 1px solid #EBEEF5;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1)
  }
  .list-div{
    background-color: #FFFFFF;
  }
}

</style>