<template>
  <div class="goods-select">
    <RemoteSelect
      ref="remoteSelect"
      v-model="currentValue"
      select-type="goods"
      option-func-name="options"
      :request-params="requestParams"
      :remote="true"
      :filterable="true"
      :placeholder="placeholder"
      :config="config"
      :can-input="canInput"
      remote-search-key="name"
      @input="handleInput"
      @select="handelSelect"
    />
    <ElButton
      v-if="canAdd"
      type="primary"
      class="add-button"
      @click="add"
    >
      添加商品
    </ElButton>
  </div>
</template>

<script>
import RemoteSelect from '@/views/components/RemoteSelect'
import AddDialog from '@/views/goods/components/AddDialog'

export default {
  components: {
    RemoteSelect
  },
  props: {
    value: {
      type: [String, Number],
      default: () => null
    },
    orderId: {
      type: [String, Number],
      default: undefined
    },
    placeholder: {
      type: String,
      default: '请选择'
    },
    canAdd: {
      type: Boolean,
      // eslint-disable-next-line vue/no-boolean-default
      default: false
    },
    config: {
      type: Object,
      default: () => {
        return {
          key: 'id',
          label: 'name',
          value: 'id'
        }
      }
    },
    type: { // 'all': 查询所有，不传则查询是排除所有使用过的
      type: String,
      default: null
    },
    canInput: {
      type: Boolean,
      // eslint-disable-next-line vue/no-boolean-default
      default: false
    },
    commodityIds: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      currentValue: null
    }
  },
  computed: {
    requestParams() {
      return {
        p: {
          type: this.type,
          order_id: this.orderId,
          commodityIds: this.commodityIds
        }
      }
    }
  },
  watch: {
    value: {
      immediate: true,
      handler(val) {
        this.currentValue = val
        this.handleInput()
      }
    }
  },
  methods: {
    add() {
      AddDialog.show(this.addGoodsSuccess)
    },
    addGoodsSuccess({ id }) {
      console.log('添加成功, id', id)
      if (id) {
        this.currentValue = id
      }
      this.handleInput()
      this.$refs.remoteSelect.fetchData()
    },
    handleInput() {
      this.$emit('input', this.currentValue)
    },
    handelSelect(option) {
      this.$emit('select-goods', option)
    }
  }
}
</script>

<style scoped lang="scss">
.goods-select {
  display: flex;

  .add-button {
    margin-left: 10px;
  }
}
</style>
