<template>
  <div v-bind="$attrs">
    <q-input :label="displayName" v-model="inputValue" label-color="primary" :placeholder="placeholder" stack-label
      :rules="rulesExp" :maxlength="maxLength">
      <template v-slot:append v-if="hint !== ''">
        <q-icon name="help" size="22px" color="blue-8">
          <q-tooltip class="bg-yellow-2 text-black shadow-4" anchor="bottom right">
            <div class="hint-text" v-html="hint" />
          </q-tooltip>
        </q-icon>
      </template>
    </q-input>
  </div>
</template>

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

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

  setup(props, { emit }) {
    const inputValue = computed({
      get: () => {
        if (props.modelValue !== null && typeof props.modelValue === 'object' && 'name' in props.modelValue) {
          return props.modelValue.name;
        } else {
          return props.modelValue;
        }
      },
      set: (val) => {
        if (props.name === 'verName') {
          // return props.modelValue.name;
          emit('update:modelValue', { name: val });
        } else {
          emit('update:modelValue', val);
        }
      },
    });
    // 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];
    // const finalValue = computed(() => {
    // return props.name !== 'verName' ? inputValue.value : {
    // name: inputValue.value,
    // };
    // });
    // watchEffect(() => {
    //   emit('update:modelValue', finalValue);
    // });

    return {
      inputValue,
      showhint: ref(false),
      rulesExp
    };
  },
});
</script>
<style lang="scss">
.hint-text {
  white-space: always;
  max-width: 450px;
  font-size: 1.2em;
}
</style>
