<template>
  <div v-bind="$attrs">
    <q-input v-model="selectedDate" :label="displayName" :placeholder="placeholder" label-color="primary" mask="date" :rules="rulesExp" stack-label>
      <template v-slot:append>
        <q-icon name="event" class="cursor-pointer">
          <q-popup-proxy cover transition-show="scale" transition-hide="scale">
            <q-date v-model="selectedDate">
              <div class="row items-center justify-end">
                <q-btn v-close-popup label="Close" color="primary" flat />
              </div>
            </q-date>
          </q-popup-proxy>
        </q-icon>
      </template>
    </q-input>
  </div>
</template>

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

export default defineComponent({
  name: 'DatePicker',
  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 selectedDate = ref(props.modelValue);
    const customExp = props.rules === undefined ? [] : eval(props.rules);
    const requiredExp = props.required?[((val:any)=>!!val||`${props.displayName}が必須です。`),'date']:['date'];
    const rulesExp=[...requiredExp,...customExp];
    watchEffect(() => {
      emit('update:modelValue', selectedDate.value);
    });

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