<template>
  <div>
    <div v-if="mode === 'DESIGN'">
      <a-select
        v-if="!expanding"
        v-model="internalValue"
        :placeholder="placeholder"
        :disabled="true"
        style="width: 200px"
      />
      <a-radio-group v-else v-model="internalValue">
        <a-radio
          v-for="(op, index) in options"
          :key="index"
          :value="op"
          :disabled="true"
        >
          {{ op }}
        </a-radio>
      </a-radio-group>
    </div>
    <div v-else>
      <template v-if="!readerMode">
        <a-select
          v-if="!expanding"
          v-model="internalValue"
          :options="formattedOptions"
          :placeholder="placeholder"
          allow-clear
          style="width: 200px"
        />
        <a-radio-group v-else v-model="internalValue">
          <a-radio
            v-for="(op, index) in options"
            :key="index"
            :value="op"
          >
            {{ op }}
          </a-radio>
        </a-radio-group>
      </template>
      <template v-else>
        <div>{{ internalValue }}</div>
      </template>
    </div>
  </div>
</template>

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

<style scoped>
.input1 {
  width: 200px;
}
</style>
