<template>
  <div style="width: 5rem">
    <div class="search-menu">
      <common-btn id="keywordBtn"
                  :bg="keyword" :bg-hover="keywordHover"
                  :select="currentSelect"
                  width="5" height="5" text-hover="点位搜索"
                  @click="btnClick" v-on="$listeners"/>
    </div>
    <el-input v-model="keywords" v-show="currentSelect" class="keyword-input">
      <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
    </el-input>
    <div v-if="currentSelect&&isResult" class="result">
      <div v-for="item in resultList" :key="item.id" class="list-item" :title="item.name" @click="localPoint(item)">{{item.name}}</div>
    </div>
  </div>
</template>

<script>
import CommonBtn from "../CommonBtn";
export default {
  name: 'KeywordManager',
  components: { CommonBtn },
  props: {
    select: {
      type: Boolean,
      default: false
    },
    resultList: {
      type: Array,
      default: () => ([])
    }
  },
  data() {
    return {
      currentSelect: this.select,
      keywords: '',
      isResult: false,
      keyword: require('@/assets/images/function/一卡通/场所搜索未选中.png'),
      keywordHover: require('@/assets/images/function/一卡通/场所搜索选中.png')
    }
  },
  watch: {
    select(val) {
      this.currentSelect = val
      this.isResult = false
    }
  },
  created() {
    this.isResult = false
  },
  methods: {
    btnClick() {
      this.currentSelect=!this.currentSelect
      if(this.currentSelect){
        this.$emit('changeState','keywordBtn')
      }
    },
    search() {
      this.$emit('handleKeyword',this.keywords)
      this.isResult = true
    },
    localPoint(item) {
      this.$emit('localPoint',item)
    }
  }
}
</script>

<style scoped>
.search-menu {
  display: flex;
  z-index: 111111111;
  position: relative;
  left: 0px;
  top: 0px;
}
.keyword-input {
  position: relative;
  width: 15rem;
  z-index: 999999999;
  margin-top: -0.25rem;
  -webkit-animation: vibrate-1 0.3s linear both;
  animation: vibrate-1 0.3s linear both;
}
.result {
  color: white;
  font-size: 1.5rem;
  width: 30rem;
  height: 30rem;
  padding: 10px;
  overflow-y: scroll;
  background: linear-gradient(to top, rgba(5, 30, 61, 0.8), rgba(13, 63, 126, 0.8));
  cursor: pointer;
  border-radius: 10px;
  margin-top: 5px;
  -webkit-animation: swing-in-top-fwd 0.8s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;
  animation: swing-in-top-fwd 0.8s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;
}
.list-item {
  width: calc(100% - 20px);
  height: 3rem;
  line-height: 1.5rem;
  padding: 0.5rem 10px;
  margin: 5px 0;
  letter-spacing: 2px;
  background: linear-gradient(to bottom, rgba(11, 64, 131, 0.5), rgba(15, 114, 136, 0.5));
  border-top: 2px solid #005a72;
  border-radius: 10px;
  word-break: break-all;
  text-align: left;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 设置最大行数 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>