const ReturnReason = {
  template: `
        <a-select
            allowClear
            :size="size"
            mode="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="item.code" :value="item.dispName">
              {{item.dispName}}
            </a-select-option>
          </a-select>
    `,
  props: {
    value: {
      type: String,
      defatut: ''
    },
    id: {
      type: String,
      default: ''
    },
    placeholder: {
      type: String,
      default: '请输入退货原因(最多50字符)'
    },
    size: {
      type: String,
      default: 'small'
    }
  },
  data() {
    return {
      defaultVal: this.value,
      open: false,
      list: []
    };
  },
  mounted() {
    this.list = this.$store.state.app.returnReason
  },
  watch: {
    value(newValue, oldValue) {
      this.defaultVal = newValue
    },
  },
  methods: {
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      );
    },
    onChange(value) {
      console.log(value,'----')
      this.open = true;
      const ret = value?value.substr(0,50):''
      this.defaultVal = ret;
      this.$emit('change', ret);
      this.$emit('input', ret);
    },
    onBlur(value){
      this.open = false;
      this.$emit('blur', value);
    }
  },
};

export default ReturnReason