<template>
  <div v-bind="$attrs">
    <q-input :label="displayName" label-color="primary" v-model="inputValue"
    :placeholder="placeholder"
    :rules="rulesExp"
    autogrow
    stack-label />
  </div>
</template>

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

export default defineComponent({
  name: 'MuiltInputText',
  inheritAttrs: false,
  props: {
    displayName: {
      type: String,
      default: '',
    },
    name: {
      type: String,
      default: '',
    },
    placeholder: {
      type: String,
      default: '',
    },
    hint: {
      type: String,
      default: '',
    },
    modelValue: {
      type: String,
      default: '',
    },
    //例：[val=>!!val ||'入力してください']
    rules: {
      type: String,
      default: undefined
    },
    required:{
      type:Boolean,
      default:false
    },
    requiredMessage: {
      type: String,
      default: ''
    },
  },

  setup(props, { emit }) {
    const inputValue = 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', inputValue.value);
    });

    return {
      inputValue,
      rulesExp
    };
  },
});
</script>
