import { getLookUpData, listLookUp } from '@/api/data'
const LogisticsPoint = {
  template: `
      <a-select
          allowClear
          :size="size"
          :mode="isInput?'combobox':''"
          :value="defaultVal"
          show-search
          :placeholder="placeholder"
          option-filter-prop="children"
          style="width: 100%"
          :filter-option="filterOption"
          :dropdownMatchSelectWidth="false"
          @change="onChange"
          @blur="onBlur"
          @focus="open=true"
          @select="open=false"
          :open="open"
        >
          <a-select-option v-for="item in list" :key="isTree?item.dispName:item" :value="isTree?item.dispName:item">
            {{ isTree?item.dispName:item }}
          </a-select-option>
        </a-select>
    `,
  props: {
    value: {
      type: String,
      defatut: ''
    },
    id: {
      type: String,
      default: ''
    },
    placeholder: {
      type: String,
      default: '请选择或输入(最多30字符)'
    },
    defLoad:{
      type: Boolean,
      default: true
    },
    size: {
      type: String,
      default: 'default'
    },
    code:{
      type: String,
      default: '',
      required: true
    },
    isTree:{
      type: Boolean,
      default: false
    },
    isInput:{
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      defaultVal: this.value,
      list: [],
      open: false,
    };
  },
  mounted() {
    if(this.defLoad){
      this.getList()
    }
  },
  watch: {
    value(newValue, oldValue) {
      this.defaultVal = newValue
    },
  },
  methods: {
    filterOption (input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      )
    },
    onChange(value) {
      const ret = value?value.substr(0,30):''
      const child = this.list.find(item => item.dispName==value)
      this.defaultVal = ret;
      this.$emit('change', ret, this.isTree?child:null);
      this.$emit('input', ret);
    },
    onBlur(value){
      this.open = false;
      this.$emit('blur', value);
    },
    getList () {
      const _this = this
      getLookUpData({
        pageNo: 1,
        pageSize: 1000,
        lookupCode: _this.code,
        isEnable:  1
      }).then(res => {
        if (res.status == 200) {
          if(!this.isTree){
            _this.list = res.data.list.map(item=>item.dispName)
          }else{
            const list = []
            res.data.list.forEach(item=>{
              list.push({
                dispName: item.code,
                code: item.dispName
              })
            })
            _this.list = list
          }
          _this.$emit('loaded',_this.list)
        }
      })
    },
    clearData(){
      this.list = []
    }
  },
};

export default LogisticsPoint