<template>
  <el-select 
    v-model="value"
    :placeholder="attrs.placeholder?attrs.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]"
        :label="item[itemLabel]"
        :value="item[itemValue]">
      </el-option>
  </el-select>
</template>

<script lang="ts">
/*
  配置说明
  config:{
    attrs:{
      valueType:'number',
      filterable:true/false  //搜索功能快速查找选项
      itemLabel:''  //选项的标签
      itemValue:''  //选项的值
      disabled：true/false  //是否禁用
      size：medium/small/mini //尺寸
      clearable：true/false  //是否清空
      placeholder：''  //占位符
      requestFormat:''
      retConfig:{'id':'mid'} //字段转换
      broadcastName：''  //广播
      broadcastConfig:{ //接收广播
        name:'' //接收广播名称,
        dataHandle:Function  //回调函数
      }
    },
    request:{}
  }
*/
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import VueViews from '@/benyun/compVue/VueViews'
@Component
export default class BySelect extends VueViews {
  value:any='';
  options:Array<any>=[]

  @Watch('propValue')
  propValueChange(v:any){
    this.setValue(v);
  }

  get itemLabel(){
    let n = 'label';
    if(this.attrs.label){
      n = this.attrs.label
    }
    return n;
  }

  get itemValue(){
    let n = 'value';
    if(this.attrs.value){
      n = this.attrs.value
    }
    return n;
  }

  created(){
    if(this.propConfig){
      this.setConfig(this.propConfig)
    }
    if(this.propValue){
      this.setValue(this.propValue)
    }
  }

  mounted(){
    this.$nextTick(()=>{
      if(this.requestConfig){
        this.request();
      }else if(this.attrs.data){
        this.setOptions(this.attrs.data)
      }
    })
    if(this.attrs.broadcastConfig){
      (this.$root as any).eventHub.$on(this.attrs.broadcastConfig.name,(data:any) => {
        let v = this.attrs.broadcastConfig.dataHandle(data)
        this.setValue(v)
      });
    }
  }

  setValue(data:any){
    if(data || data === 0){
      this.value = (this as any).$lodash.cloneDeep(data);
      if(this.attrs.valueType == 'number'){
        this.value = String(this.value)
      }
    }else{
      this.value = '';
    }
  }

  getValue(){
    if(this.attrs.retConfig){
      let obj:any = {}
      let data:any = {}
      for(const item of this.options){
        if (item[this.itemValue] === this.value) {
          data = item;
          break
        }
      }
      for(const key in this.attrs.retConfig){
        obj[this.attrs.retConfig[key]] = data[key]
      }
      return obj
    }else{
      let v = this.attrs.valueType == 'number' ? Number(this.value) : (this as any).$lodash.cloneDeep(this.value);
      return v;
    }
    
  }

  setOptions(data:Array<any>){
    this.options = data;
    if(!this.value && this.attrs.defaultIndex >= 0 && this.options[this.attrs.defaultIndex]){
      this.value = this.options[this.attrs.defaultIndex][this.itemValue];
      this.onChange();
    }
  }

  onChange(){
    let data = this.getValue()
    this.$emit('onChange', data);
    if(this.attrs.broadcastName){
      (this.$root as any).eventHub.$emit(this.attrs.broadcastName, data)
    }
  }

  // 清空数据
  clearValue(){
    this.value = '';
    if(!this.value && this.attrs.defaultIndex >= 0 && this.options[this.attrs.defaultIndex]){
      this.value = this.options[this.attrs.defaultIndex][this.itemValue];
      this.onChange();
    }
  }

  //请求url
  request(){
    if(!this.requestConfig || !this.requestConfig.url){
      return
    }
    let parame = (this as any).$lodash.cloneDeep(this.requestConfig);
    parame.success = (res:any) => {
      let f = this.attrs.requestFormat?this.attrs.requestFormat:'data'
      if(this.attrs.requestFormat){
        if(res.data && res.data[f]){
          this.setOptions(res.data[f]);
        }
      }else{
        if(res.data){
          this.setOptions(res.data);
        }
      }
      
    }
    parame.fail = (err:any) => {}
    this.requestHandle(parame);
  }
}
</script>

<style lang="scss" scoped>

</style>