<template>
  <r-multi-select
    :label="label"
    :placeholder="placeholder"
    :options="statusOptions"
    :status="value"
    @input="$emit('input', $event)"
  />
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import RMultiSelect from '@/recruits/components/common/r-multi-select.vue';
import { sex } from '@/recruits/models';
interface Option {
  label: string;
  value: string;
}

@Component({
  components: {
    RMultiSelect,
  },
})
export default class RGenderSelect extends Vue {
  @Prop({ default: () => [] }) genders: string[];
  @Prop({ default: '' }) label: string;
  @Prop() placeholder?: string;
  @Prop({ default: '' }) value: unknown[];

  public get statusOptions(): Option[] {
    return this.genders.map((key) => ({
      label: this.statusDictionary[key],
      value: key,
    }));
  }

  get statusDictionary(): Record<string, string> {
    return sex;
  }
}
</script>
