<template>
  <ElSelect
    v-loading="loading"
    :value="value"
    :multiple="multiple"
    :placeholder="placeholder"
    :clearable="clearable"
    filterable
    reserve-keyword
    @input="$emit('input', arguments[0])"
  >
    <ElOption
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </ElSelect>
</template>

<script>
export default {
  name: 'UserSelect',
  props: {
    value: {
      type: [String, Number, Array],
      default: () => null
    },
    type: {
      type: String,
      required: true
    },
    multiple: {
      type: Boolean
    },
    placeholder: {
      type: String,
      default: null
    },
    clearable: {
      type: Boolean
    }
  },
  data() {
    return {
      options: [],
      loading: true
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    async fetchData() {
      this.loading = true
      await this.$dict().ready()
      this.options = Object.entries(this.$dict(this.type).all()).map(([key, value]) => {
        return {
          label: value,
          value: key
        }
      })
      this.loading = false
    }
  }
}
</script>
