<template>
  <div>
    <div v-if="mode === 'DESIGN'">
      <a-select
        v-if="!expanding"
        v-model="internalValue"
        mode="multiple"
        class="max-fill"
        :placeholder="placeholder"
        disabled
        style="width: 200px"
      />
      <a-checkbox-group v-else v-model="internalValue" disabled>
        <a-checkbox v-for="(op, index) in options" :key="index" :value="op">
          {{ op }}
        </a-checkbox>
      </a-checkbox-group>
    </div>
    <div v-else>
      <template v-if="!readerMode">
        <a-select
          v-if="!expanding"
          v-model="internalValue"
          mode="multiple"
          :options="computedOptions"
          class="input1"
          style="width: 200px"
        />
        <a-checkbox-group v-else v-model="internalValue">
          <a-checkbox v-for="(op, index) in options" :key="index" :value="op">
            {{ op }}
          </a-checkbox>
        </a-checkbox-group>
      </template>
      <template v-else>
        <div>{{ internalValue.join(', ') }}</div>
      </template>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MultipleSelect',
  model: {
    prop: 'value',
    event: 'update:value'
  },
  props: {
    mode: {
      type: String,
      default: 'DESIGN'
    },
    value: {
      type: Array,
      default() {
        return [];
      }
    },
    placeholder: {
      type: String,
      default: '请选择选项'
    },
    expanding: {
      type: Boolean,
      default: false
    },
    options: {
      type: Array,
      default() {
        return [];
      }
    },
    readerMode: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    internalValue: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit('update:value', val);
      }
    },
    computedOptions() {
      return this.options.map(op => ({
        label: op,
        value: op
      }));
    }
  }
};
</script>

<style scoped>
.input1 {
  width: 200px;
}
.max-fill {
  width: 100%;
}
</style>
