<template>
  <div>
    <el-input 
      :value="text"
      @focus="showDialog = true"
      placeholder="点击选择客户"
    />

    <customer-dialog 
      :show.sync="showDialog" 
      @confirm="handleConfirm" 
      :selectedIds="value"
      :multiple="multiple"
    />
  </div>
</template>

<script>
import CustomerDialog from '@/components/Business/Customer/CustomerDialog.vue';
export default {
  components: { CustomerDialog },
  props: {
    // 选中数据
    value: {
      type: [String, Array],
      default: null
    },
    // 文本
    text: {
      type: String,
      default: null,
    },
    // 是否多选
    multiple: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      showDialog: false,
    }
  },
  methods: {
    handleConfirm(selection) {
      if (this.multiple) {
        this.$emit('input', selection.map(item => item.id));
        this.$emit('update:text', selection.map(item => item.name).join(','));
      } else {
        this.$emit('input', selection?.id);
        this.$emit('update:text', selection?.name);
      }
      this.$emit('confirm', selection);
    }
  }
}
</script>