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

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']);

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