<!--
 * @Description: 搜索组件
 * @Author: 王晓颖
 * @Date: 2022-05-18
 -->
<template>
  <div>
    <!--搜索条件-->
    <div class="map-search-div">
      <el-input v-model.trim="keywords" :placeholder="placeholder" clearable>
        <el-button slot="append" class="filter-item" type="primary" icon="el-icon-search" @click="search">
          搜索
        </el-button>
      </el-input>
    </div>
    <!--搜索结果弹出框-->
    <el-popover
      v-show="list.length>0"
      v-model="resultShow"
      placement="bottom-end"
      width="290"
      trigger="click"
    >
      <el-card slot="reference" shadow="always" class="selectAnswer">
        共找到 {{ list.length }} 个符合条件的{{ name }}
      </el-card>
      <div v-show="list.length>0">
        <search-item v-for="(data,index) in currentPageList" :key="'search-item-'+index" :data="data" :index="index" @click="clickItem" />
      </div>
      <div class="clear" />
      <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>
export default {
  name: 'SearchComp',
  props: {
    name: {
      type: String,
      default: '井'
    }, // 结果展示类型
    placeholder: {
      type: String,
      default: '关键字'
    },
    list: {
      type: Array,
      default: () => []
    } // 结果列表
  },
  data() {
    return {
      resultShow: false, // 是否显示查询结果
      keywords: '', // 查询条件
      currentPageList: [], // 当前页数据
      pageSize: 5, // 页面容量
      pageNum: 1 // 页码
    }
  },
  watch: {
    list(val) { // 监控list的数量，为0时不显示
      if (val && val.length > 0) {
        this.resultShow = true
        this.changePage(1)
      } else {
        this.resultShow = false
        this.currentPageList = []
      }
    }
  },
  methods: {
    // 点击搜索按钮
    search() {
      this.$emit('search', this.keywords)
    },
    // 切换页码
    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)
    },
    // 点击结果项
    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;
}
</style>