<!--
 * @Author: 曹捷
 * @Date: 2020-04-27 18:44:59
 * @LastEditors: 曹捷
 * @LastEditTime: 2022-04-11 13:11:58
 * @Description: 封装select组件  支持同时获取value和name
 -->
<template>
  <a-select :allowClear="clearable" :disabled="disabled" :mode="multiple" :show-search="remote" @search="handleSearch" :placeholder="placeholder" filterable v-model:value="dictValue" @focus="focus">
    <a-select-option :key="item.valueName" :value="item[valueName]" :title="item[labelName]" v-for="item in selectList">
      {{item[labelName]}}
    </a-select-option>
  </a-select>
</template>

<script>
import { onMounted, reactive, toRefs, watch } from 'vue'

export default {
  components: {
  },
  props: {
    disabled: {
      type: Boolean,
      default: false,
    },
    remote: {
      type: Boolean,
      default: false,
    },
    multiple: {
      type: String,
    },
    clearable: {
      type: Boolean,
      default: true,
    },
    readOnly: {
      type: Boolean,
      default: false,
    },
    value: {
      type: [Number, String, Array],
    },
    placeholder: {
      type: String,
      default: '请选择',
    },
    labelName: {
      type: String,
      default: 'label',
    },
    valueName: {
      type: String,
      default: 'id',
    },
    selectList: {
      type: Array,
    },
    selectName: {
      type: String,
    },
    valueType: {
      type: String,
      default: '',
    },
  },
  emits: ['focusd', 'remoteMethod', 'changeInfo', 'change', 'blur', 'update:selectName', 'update:value'],
  setup (props, context) {
    let _data = reactive({
      dictValue: undefined,
      dictValueList: [],
    })
    let _methosd = {
      focus (value) {
        context.emit('focusd', value)
      },
      handleSearch (text) {
        context.emit('remoteMethod', text)
      },
      typeToValue () {
        let value = props.value ? props.value : undefined;
        // let value = props.value === null || props.value === undefined ? undefined : props.value
        if (props.valueType === 'Int') {
          value = parseInt(value)
        }
        _data.dictValue = value
      },
      selectChange (value) {
        // 初始化还么有selectList ，如果赋值selectName，会导致找不到而被置空
        if (props.selectList && props.selectList.length > 0) {
          let obj = props.selectList.find((item) => {
            return item[props.valueName] == value
          })
          if (obj) {
            context.emit('update:selectName', obj ? obj[props.labelName] : '')
            context.emit('changeInfo', obj)
            value = obj[props.valueName]
            _data.dictValue = value
          }

        }
        context.emit('update:value', value)
        context.emit('change', value)
      },
    }
    onMounted(() => {
      if (props.value) {
        _methosd.selectChange(props.value)
        _methosd.typeToValue()
      }
    })
    watch(() => props.value, () => {
      _methosd.typeToValue()
    })
    watch(() => _data.dictValue, (value) => {
      _methosd.selectChange(value)
    })
    return {
      ...toRefs(_data),
      ..._methosd
    }
  },
}
</script>

<style>
</style>