<template>
  <div class="stock-input">
    <bd-select ref="bd-select" v-model="selectConf.value" :disabled="disabled" multiple :loading="selectConf.loading" filterable remote :remote-method="remoteMethod" :placeholder="placeholder" @change="selectChange">
      <el-option v-for="option in selectConf.options" :key="option.value" :value="option.value" :label="option.label">
        <div class="suggest-item">
          <!-- <span class="suggest-item__rt">{{option.value}}</span> -->
          <span class="suggest-item__lt">{{ option.label }} </span>
        </div>
      </el-option>
    </bd-select>
  </div>
</template>

<script>
import emitter from 'element-ui/lib/mixins/emitter';
import dmSelect from '../dm-select';
import { loadGoodsData } from '../../service/api/cardApi.js';
export default {
  props: {
    value: Array,
    disabled: Boolean,
    userId: String,
    multiple: {
      type: Boolean,
      default: true
    },
    placeholder: {
      type: String,
      default: '输入货号或商品名称'
    },
    withparent: {
      type: Boolean,
      default: true
    },
    beforeSelect: Function
  },
  data() {
    return {
      selectConf: {
        value: !!this.value.find(p => !!p.id) ? this.value.map(item => item.id) : [],
        options: this.value.map(item => {
          return { value: item.id, label: item.name };
        }),
        loading: false
      },
      // pickerConf: {
      //     show: false,
      //     selected: []
      // },
      timer: null,
      cacheIndus: this.value.map(item => item)
    };
  },
  mixins: [emitter],
  watch: {
    value: {
      handler: function(val) {
        this.cacheIndus = val.map(item => item);
        this.selectConf.value = val.map(item => item.id);
        this.selectConf.options = val.map(item => {
          return { value: item.id, label: item.name };
        });
      },
      deep: true
    }
  },
  components: {
    'bd-select': dmSelect
  },
  methods: {
    remoteMethod(val) {
      // if (!val) {
      //   this.$tips({type:'warning',message:'搜索字段不能为空'});
      //   return;
      // }
      if (!val && this.selectConf.options.length > 0) return;
      this.selectConf.loading = true;
      clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        loadGoodsData({ currentPage: 1, pageSize: 20, searchParam: val }).then(res => {
          this.selectConf.options = [];
          res = res.result.result || [];
          this.$nextTick(() => {
            if (!!res && res instanceof Array) {
              res.forEach(item => {
                this.selectConf.options.push({
                  label: item.proName,
                  value: item.proNo
                });
                if (this.cacheIndus.findIndex(stk => stk.id === item.label) === -1) {
                  this.cacheIndus.push({
                    id: item.proNo,
                    name: item.proName
                  });
                }
              });
            }
            this.selectConf.loading = false;
          });
        });
      }, 300);
    },

    selectChange(val) {
      if (!this.multiple && val.length > 0) {
        this.selectConf.value.splice(0, this.selectConf.value.length - 1);
        val.splice(0, val.length - 1);
        this.$nextTick(_ => {
          this.$refs['bd-select'].$refs.select.visible = false;
        });
      }
      let arr = this.cacheIndus.filter(item => val.findIndex(v => v === item.id) !== -1);
      let arrCopy = JSON.parse(JSON.stringify(arr));
      if (!!this.beforeSelect && this.beforeSelect instanceof Function && !this.beforeSelect(arrCopy)) return;
      this.$emit('input', arr);
      this.$emit('change', arr);
    },

    iconClick() {
      this.remoteMethod();
    },

    induSelected(items) {
      this.selectConf.value = [];
      if (items.length === 0) return;
      items.forEach(item => {
        if (this.selectConf.value.findIndex(v => v === item.id) === -1) {
          this.selectConf.value.push(item.id);
        }
        if (this.selectConf.options.findIndex(option => option.value === item.id) === -1) {
          this.selectConf.options.push({
            label: item.label,
            value: item.id,
            code: item.code
          });
        }
        if (this.cacheIndus.findIndex(cache => cache.id === item.id) === -1) {
          this.cacheIndus.push({
            id: item.id,
            name: item.label,
            code: item.code
          });
        }
      });
      this.selectChange(this.selectConf.value);
      this.dispatch('ElFormItem', 'el.form.change', this.selectConf.value);
    }
  }
};
</script>

<style lang="scss" scoped>
.suggest-item {
  font-size: 12px;
  height: 24px;
  line-height: 24px;
  &__lt {
    float: left;
    width: calc(100% - 34px);

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  &__rt {
    float: right;
    color: #bbb;
    width: 30px;
    // padding-right: 10px;
    text-align: right;
  }
}
</style>
