<template>
  <div class="custom-select">
    <el-select
      ref="selectRef"
      v-model="selectValue"
      style="width: 100%"
      filterable
      clearable
      :placeholder="placeholder"
      :disabled="disabled"
      @blur="selectBlur"
      @clear="selectClear"
      @change="selectChange"
    >
      <slot />
    </el-select>
    <el-button v-if="!disabled" icon="el-icon-search" style="min-width: 80px;" @click="search" />
  </div>
</template>

<script>
export default {
  props: {
    disabled: {
      type: Boolean,
      default: false
    },
    value: {
      type: [String, Number],
      default: ''
    },
    placeholder: {
      type: String,
      default: '请选择企业名称'
    }
  },
  data() {
    return {
      selectValue: ''
    }
  },
  watch: {
    value: {
      handler(count) {
        if (count) {
          this.selectValue = count
        }
      },
      immediate: true
    }
  },
  methods: {
    selectBlur(e) {
      if (e.target.value !== '' || this.selectValue) {
        this.selectValue = e.target.value || this.selectValue
        this.$emit('update:value', e.target.value || this.selectValue)
        this.$emit('search-change', e.target.value || this.selectValue)
      }
    },
    selectClear() {
      this.selectValu = ''
      this.$emit('update:value', '')
    },
    selectChange(val) {
      this.selectValue = val
      this.$emit('update:value', val)
      this.$emit('search-change', val)
    },
    search() {
      if (!this.selectValue) {
        this.$message.warning('请输入关键字')
        return
      }
      this.$emit('search-click', this.selectValue)
      this.$nextTick(() => {
        this.$refs.selectRef && this.$refs.selectRef.focus()
      })
    }
  }
}

</script>

<style lang="scss">
.custom-select {
  width: 100%;
  display: flex;
  .el-select {
    .el-input__inner {
      border-top-right-radius: 0px;
      border-bottom-right-radius: 0px;
    }
  }
  button {
    height: 32px;
    font-size: 14px;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    // border-top: 0px;
    // border-right: 0px;
    // border-bottom: 0px;
    border: 1px solid #dcdfe6;
    border-left: 0px;
    flex: 1;
    background-color: #fff;

  }
  .el-button:focus,
  .el-button:hover {
    background-color: #fff;
    border-color: #dcdfe6;
    border: 1px solid #dcdfe6;
    border-left: 0px;
  }
}
</style>
