<template>
   <el-select v-model="searchTag" filterable clearable placeholder="请选择标签" :remote="true" :remote-method="remoteSearch" @keyup.enter.native="search" class="layout-select layout-select-remote" @change="search" @blur="search">
    <el-option
      v-for="item in searchDatas"
      :key="item"
      :label="item"
      :value="item">
    </el-option>
  </el-select>
</template>
<script>
export default {
  data() {
    return {
      searchTag: '',
      searchWord: '',
      localTarget: 'resource-search-tag',
      searchDatas: []
    }
  },
  methods: {
    async remoteSearch(query) {
      let resp = await axios.get('/ui/tagwords/search/resource', {params: { searchWord: encodeURI(query) }})
      if (resp.data.status === 1) {
        this.searchDatas = resp.data.data
      }
    },
    search(el) {
      if (this.searchWord === this.searchTag) {
        if (this.searchTag === '' && el.target._value === '') {
          return
        }
        this.searchTag = el.target._value
      }
      try {
        this.searchWord = this.searchTag
      } catch (e) {

      }
      this.$emit('update:tags', this.searchTag)
      this.$emit('callback')
    }
  }
}
</script>
