<template>
  <q-input
    ref="nameRef"
    v-model="versionInfo.name"
    filled
    autofocus
    label="バージョン名"
    :rules="[
      val => !!val || 'バージョン名を入力してください。',
      (val) => !val || val.length <= 80 || '80字以内で入力ください'
    ]"
  />
  <q-input
    ref="commentRef"
    v-model="versionInfo.comment"
    filled
    type="textarea"
    :rules="[(val) => !val || val.length <= 300 || '300字以内で入力ください']"
    label="説明"
  />
</template>
<script setup lang="ts">
import { ref, watch, defineProps, defineEmits } from 'vue';
import { QInput } from 'quasar';
import { IVersionSubmit } from 'src/types/AppTypes';

const nameRef = ref();
const commentRef = ref();

const isValid = () => {
  const nameHasError = nameRef.value?.hasError ?? false;
  const commentHasError = commentRef.value?.hasError ?? false;
  return !nameHasError && !commentHasError;
};

const props = defineProps<{
  modelValue: IVersionSubmit;
}>();

const defaultTitle = `${new Date().toLocaleString()}`;

const versionInfo = ref({
  ...props.modelValue,
  name: props.modelValue.name || defaultTitle,
  comment: props.modelValue.comment || '',
 });

const emit = defineEmits(['update:modelValue']);

defineExpose({
  isValid
})

watch(
  versionInfo,
  () => {
    emit('update:modelValue', { ...versionInfo.value });
  },
  { immediate: true, deep: true }
);
</script>
