<template>
  <div class="" v-bind="$attrs">
    <q-input v-model.number="numValue" type="number" :label="displayName" label-color="primary" stack-label bottom-slots
     :min="min"
     :max="max"
     :rules="rulesExp"
     >
      <template v-slot:hint>
        {{ placeholder }}
      </template>
    </q-input>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, ref, watchEffect } from 'vue';
export default defineComponent({
  name: 'NumInput',
  inheritAttrs:false,
  components: {
  },
  props: {
    displayName: {
      type: String,
      default: '',
    },
    name: {
      type: String,
      default: '',
    },
    placeholder: {
      type: String,
      default: '',
    },
    hint: {
      type: String,
      default: '',
    },
    min:{
      type:Number,
      default:undefined
    },
    max:{
      type:Number,
      default:undefined
    },
    //[val=>!!val ||'数値を入力してください',val=>val<=100 && val>=1 || '1-100の範囲内の数値を入力してください']
    rules:{
      type:String,
      default:undefined
    },
    required:{
      type:Boolean,
      default:false
    },
    requiredMessage: {
      type: String,
      default: ''
    },
    modelValue: {
      type: [Number , String],
      default: undefined
    },
  },

  setup(props, { emit }) {
    const numValue = ref(props.modelValue);
    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];

    watchEffect(()=>{
      emit('update:modelValue',numValue.value);
    });
    return {
      numValue,
      rulesExp
    };
  }
});
</script>
