<template>
  <div v-bind="$attrs">
  <q-select v-model="selectedValue" :use-chips="multiple" :label="displayName" label-color="primary"
  :options="options"
  stack-label
  :rules="rulesExp"
  :multiple="multiple"/>
</div>
</template>

<script lang="ts">
import { defineComponent,ref,watchEffect,computed } from 'vue';

export default defineComponent({
  name: 'SelectBox',
  inheritAttrs:false,
  props: {
    displayName:{
      type: String,
      default: '',
    },
    placeholder: {
      type: String,
      default: '',
    },
    options: {
      type: Array,
      required: true,
    },
    selectType:{
      type:String,
      default:'',
    },
    modelValue: {
      type: [Array,String],
      default: null,
    },
    //例：[val=>!!val ||'入力してください']
    rules: {
      type: String,
      default: undefined
    },
    required:{
      type:Boolean,
      default:false
    },
    requiredMessage: {
      type: String,
      default: ''
    },
  },
  setup(props, { emit }) {
    const selectedValue = ref(props.modelValue);
    const multiple = computed(()=>{
      return props.selectType==='multiple'
    });
    watchEffect(() => {
      emit('update:modelValue', selectedValue.value);
    });
    const customExp = props.rules === undefined ? [] : eval(props.rules);
    const errmsg = props.requiredMessage?props.requiredMessage:`${props.displayName}を選択してください。`;
    const requiredExp = props.required?[((val:any)=>!!val || errmsg )]:[];
    const rulesExp=[...requiredExp,...customExp];
    return {
      selectedValue,
      multiple,
      rulesExp
    };
  },
});
</script>
