<!-- @desc:可输入的select  @auth:周兴  @time:2022/5/24 19:54 -->
<template>
  <Poptip trigger="focus" placement="top-start" v-model="popVisible" transfer
          :disabled="!popVisible">
    <Select size="small" ref="select" :value="model" multiple style="width: 100%"
            @on-open-change="openChange"
            :max-tag-count="this.$config.maxTagCount"
            @contextmenu.native.prevent
            @focus.native.capture="handleSelectFocus"
            @blur.native.capture="handleSelectBlur"
            @on-query-change="handleQueryChange"
            @mouseenter.native="handleMouseEnter"
            @keydown.native="handleKeydown" :disabled="disabled"
            :clearable="clearable" :placeholder="placeholder">
      <Input ref="searchInput" class="searchInput" v-model="searchText" clearable
             @on-blur="handleInputBlur"
             @keydown.native="handleInputKeydown($event)"/>
      <!--单选-->
      <Option v-for="item in model" :value="item" :key="item" v-show="false">{{ item }}</Option>
    </Select>
    <div class="close-class" v-if="showClear && model && model.length > 0">
      <Icon slot="prefix" type="ios-close-circle" @click.stop="clearAll"/>
    </div>
    <div slot="content" class="pop-content" >
      <Tag class="filter-button" v-for="(it,index) in model"
           :key="index" :name="it" closable @on-close="closeTagFilterContent">{{ it }}
      </Tag>
      <div class="close-class-pop" v-if="model && model.length > 0">
        <Icon slot="prefix" type="ios-close-circle" @click.stop="closePop"/>
      </div>
    </div>
  </Poptip>
</template>

<script>
export default {
  name: 'select-input-pop',
  props: {
    // 组件的值
    value: {
      type: [String, Number, Array],
      default: null
    },
    //清空按钮
    clearable: {
      type: Boolean,
      default: true
    },
    //只读
    disabled: {
      type: Boolean,
      default: false
    },
    placeholder: {
      type: String,
      default: null
    },
  },
  data() {
    const vm = window.vm;
    return {
      vm: vm,
      model: [],
      label: '',
      query: null,
      popVisible :false,
      searchText: '',
      showClear:false,
    }
  },
  watch: {
    value(n, o) {
      this.model = n?n:[]
    },
    model(n,o){
      this.$emit('input',n)
    },
    disabled(n, o) {
      // 给提示信息赋值
      this.setReadOnly(n)
    }
  },
  methods: {
    /**
     * @desc   : 聚焦事件
     * @author : 周兴
     * @date   : 2022/4/16 8:24
     */
    handleSelectFocus() {
      this.$refs['select'].isFocused = true
      this.setPopVisble() //设置弹框是否显示
    },
    /**
     * @desc   : 光标离开select
     * @author : 周兴
     * @date   : 2022/5/25 10:22
     */
    handleSelectBlur(){
      this.popVisible = false;
      // this.$refs['select'].hideMenu();
      this.$refs['select'].isFocused = false;
      this.$emit('on-blur',this.model)
    },
    /**
     * @desc   : 光标移入控件
     * @author : 周兴
     * @date   : 2022/5/24 16:23
     */
    handleMouseEnter() {
      this.showClear = true;
    },
    /**
     * @desc   : 光标离开清空文本框
     * @author : 周兴
     * @date   : 2022/5/25 10:06
     */
    handleInputBlur(){
      this.$refs.searchInput.value2 = '';
      this.$refs['select'].hideMenu();
    },
    /**
     * @desc   : input回车加入到select
     * @author : 周兴
     * @date   : 2022/5/25 9:11
     */
    handleInputKeydown(e){
      if (e.key === 'Enter') {
        let searchText = this.searchText.trim();
        if (this.model) {
          //如果不存在才插入
          if (searchText && !this.model.includes(searchText)) {
            this.model.push(searchText)
            this.searchText = '';
          }
        } else {
          this.model = []
          this.model.push(searchText)
          this.searchText = '';
        }
      }else if(e.key === 'ArrowUp'){
        // this.inputVisible = false;
        this.popVisible = true;
      }
    },
    /**
     * @desc   : 清空选择
     * @author : 周兴
     * @date   : 2022/3/25 10:22
     */
    clearAll() {
      this.showClear = false;
      this.popVisible = false;
      this.model = []
      this.$refs.searchInput.value2 = ''
      this.$emit('on-select', null)
    },
    /**
     * @desc   : 打开select
     * @author : 周兴
     * @date   : 2022/5/25 9:43
     */
    handleKeydown(e) {
      // 向下箭头，隐藏提示信息，出现输入框
      if(e.code== 'ArrowDown'){
        this.popVisible = false;
      }
    },
    /**
     * @desc   : 打开查询
     * @author : 周兴
     * @date   : 2022/3/24 19:29
     */
    openChange() {
      if (this.$refs.select.visible) { // 下拉是否打开
        this.$nextTick(() => {
          // this.inputVisible = true;
          this.$refs.searchInput.$refs['input'].focus() ;// 光标停留在搜索框
        })
      }
      this.$emit('@on-open-change')
    },
    /**
     * @desc   : 记录变化值
     * @author : 周兴
     * @date   : 2022/5/24 20:06
     */
    handleQueryChange(query) {
      this.query = query.trim();
    },
    /**
     * @desc   : 关掉pop中的内容
     * @author : 周兴
     * @date   : 2022/4/15 19:16
     */
    closeTagFilterContent(e, name) {
      let index = this.model.indexOf(name)
      //删除pop中的内容
      if (this.model.includes(name)) {
        this.model.splice(index, 1)
      }
      //如果没有内容，需要把弹窗关闭
      this.setPopVisble();
      this.$refs['select'].isFocused = true
      this.$emit('on-select', this.model)
    },
    /**
     * @desc   : 设置pop是否可见
     * @author : 周兴
     * @date   : 2022/4/14 10:54
     */
    setPopVisble() {
      this.$nextTick(() => {
        if (this.model && this.model.length > 0) {
          this.popVisible = true
        } else {
          this.popVisible = false
        }
      })
    },
    /**
     * @desc   : 关闭Pop窗体
     * @author : 周兴
     * @date   : 2022/5/25 10:12
     */
    closePop(){
      this.popVisible = false;
    },
    /**
     * @desc   : 值改变
     * @author : 周兴
     * @date   : 2022/4/24 18:45
     */
    handleChange(e) {
      this.$emit('on-change', e);
    },
    /**
     * @desc   : 选择数据
     * @author : 周兴
     * @date   : 2022/4/24 18:45
     */
    handleSelect(e) {
      // console.log('select-on-select',e)
      if (!this.labelInValue) {
        this.$emit('on-select', e.value);
      } else {
        this.$emit('on-select-label', e);
      }
    },
    /**
     * @desc   : 控件只读时的处理
     * @author : 周兴
     * @date   : 2022/3/4 11:12
     */
    setReadOnly(value) {
      // 给提示信息赋值
      if (value) {
        this.placeholderData = null
        // 给输入框赋值灰色背景
      } else {
        // 只有没有传递才会用prop进行赋值
        if (this.placeholderData == null) {
          this.placeholderData = vm.$t('inputWords', {'search-name': vm.$t(this.prop)})
        }
      }
    },
    /**
     * @desc   : 焦点进入事件
     * @author : 周兴
     * @date   : 2022/3/22 12:54
     */
    focus() {
      this.$refs['select'].isFocused = true
    }
  },
  created() {
    //获取名称
    let name = null
    if (this.name) {
      // 给label赋值
      name = this.name
    } else {
      name = this.prop
    }
    // 获取国际化名称
    this.label = vm.$t(name)
    this.setReadOnly()    // 设置只读
    if (this.value instanceof Array) {
      this.model = [...this.value]
    } else {
      this.model = this.value
    }
  }
}
</script>

<style scoped>

/*只读颜色*/
/*.readonly-input > /deep/ .ivu-input{*/
/*  background-color: #f3f3f3;*/
/*}*/

/deep/ .ivu-select-dropdown {
  overflow-y: hidden;
  overflow-x: hidden;
}

.searchInput {
  padding: 2px 10px 5px 10px;
}

.ivu-poptip {
  width: 100%;
}

/deep/ .ivu-input {
  height: 28px !important;
  line-height: 28px !important;
}

/deep/ .ivu-poptip-rel {
  width: 100%;
}

.close-class {
  cursor: pointer;
  width: 24px;
  position: absolute;
  top: 5px;
  right: 15px;
  align-items: center;
  justify-content: center;
  height: 24px;
  color: #a0a5ac;
}

.close-class-pop{
  cursor: pointer;
  width: 24px;
  position: absolute;
  top: 12px;
  right: -2px;
  align-items: center;
  justify-content: center;
  height: 24px;
  color: #a0a5ac;
}
</style>
