<template>
  <el-select 
    v-model="value"
    :placeholder="placeholder"
    :disabled="attrs.disabled"
    :size="attrs.size"
    :clearable="attrs.clearable"
    @clear="onChange"
    @change="onChange"
    :filterable="attrs.filterable"
  >
      <el-option
        v-for="item in options"
        :key="item[itemValue]"
        :disabled="eventDisable(item)"
        :label="item[itemLabel]"
        :value="item[itemValue]">
      </el-option>
  </el-select>
</template>

<script setup>
  import { computed, ref, getCurrentInstance } from "vue";
  const { proxy } = getCurrentInstance();
  const value = ref('')
  const options = ref([])
  const config = ref({})
  const emit = defineEmits();
  const props = defineProps({
    propConfig:{},
    propValue:{},
    parentValue:{}
  })
  const attrs = computed({
    get() {
      return config.value.attr ? config.value.attr : {};
    }
  })
  const placeholder = computed({
    get() {
      if(attrs.value.disabled){
        return ''
      }
      if(attrs.value.placeholder){
        return attrs.value.placeholder
      }
      return '请选择'
    }
  })
  // watch(props.propValue, (value) => {
  //   setValue(value);
  // })
  const itemLabel = computed({
    get() {
      let n = 'label';
      if(attrs.value.label){
        n = attrs.value.label
      }
      return n;
      }
  })
  const itemValue = computed({
    get() {
      let n = 'value';
      if(attrs.value.value){
        n = attrs.value.value
      }
      return n;
    }
  })
  const requestConfig = computed({
    get() {
      return config.value.request ? config.value.request : null;
    }
  })
  const eventDisable = item => {
    if(attrs.value.disabledHandle){
      return attrs.value.disabledHandle(item)
    }
    return false
    
  }
  //设置配置
  const setConfig = c => {
    if(c){
      config.value = c;
    }
  }
  //获取配置
  const getConfig = () => {
    return proxy.lodash.cloneDeep(config.value)
  }
  const setValue = data => {
    if(data || data === 0){
      value.value = proxy.lodash.cloneDeep(data);
      if(attrs.value.valueType == 'number'){
        value.value = String(value.value)
      }
    }else{
      value.value = '';
    }
  }

  const getValue = () => {
    if(attrs.value.retConfig){
      let obj = {}
      let data = {}
      for(const item of options.value){
        if (item[itemValue.value] === value.value) {
          data = item;
          break
        }
      }
      for(const key in attrs.value.retConfig){
        obj[attrs.value.retConfig[key]] = data[key]
      }
      return obj
    }else{
      let v = attrs.value.valueType == 'number' ? Number(value.value) : proxy.lodash.cloneDeep(value.value);
      return v;
    }
  }
  const setOptions = data => {
    options.value = data
    // if(data && data.length > 0) {
    //   for(const item of data) {
    //     options.value.push(item)
    //   }
    // }
    if(!value.value && attrs.value.defaultIndex >= 0 && options.value[attrs.value.defaultIndex]){
      value.value = options.value[attrs.value.defaultIndex][itemValue];
      onChange();
    }
  }

  const onChange = () => {
    let data = getValue()
    emit('onChange', data);
  }

  // 清空数据
  const clearValue = () => {
    value.value = ''
  }

  const requestHandle = () => {
    if(!requestConfig.value || !requestConfig.value.url){
      return
    }
    let parame = proxy.lodash.cloneDeep(requestConfig.value);
    proxy.request(parame).then(res => {
      setOptions(res.data);
    }).catch(err => {})
  }

  if(props.propConfig){
    setConfig(props.propConfig)
  }
  if(props.propValue){
    setValue(props.propValue)
  }
  nextTick(()=>{
    if(requestConfig && requestConfig.value){
      requestHandle();
    }else if(attrs.value.data){
      setOptions(attrs.value.data)
    }
  })

  defineExpose({
    getValue,setValue,getConfig,setConfig,clearValue
  })
</script>

<style lang="scss" scoped>

</style>