<template>
  <div>
    <el-input 
      :value="text"
      @focus="onOpen"
      placeholder="点击选择套餐"
      :disabled="disabled"
    />

    <suit-dialog 
      :show.sync="showDialog" 
      @confirm="handleConfirm" 
      :selected-ids="value"
      :multiple="multiple"
      :query="query"
    />
  </div>
</template>

<script>
import SuitDialog from '@/components/Business/Suit/SuitDialog.vue';

export default {
  name: 'SuitInput',
  components: { SuitDialog },
  props: {
    // 选中数据
    value: {
      type: [String, Array],
      default: null
    },
    // 文本
    text: {
      type: String,
      default: null,
    },
    // 是否多选
    multiple: {
      type: Boolean,
      default: false
    },
    // 是否禁用
    disabled: {
      type: Boolean,
      default: false,
    },
    // 查询参数
    query: {
      type: Object,
      default: () => ({})
    },
    // 打开弹窗前回调
    beforeOpen: {
      type: Function,
      default: () => {
        return true;
      }
    }
  },
  data() {
    return {
      showDialog: false,
    }
  },
  methods: {
    onOpen() {
      if (!this.beforeOpen()) {
        return;
      }
      this.showDialog = true;
    },
    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>