<script setup>
import { ref, watch } from 'vue'
import { NModal, NForm, NFormItem, NInput, NButton, NFlex } from 'naive-ui'

const props = defineProps({
    show: { type: Boolean, default: false },
    name: { type: String, default: '' },
    description: { type: String, default: '' },
})

const emit = defineEmits(['update:show', 'save'])

const localName = ref(props.name)
const localDescription = ref(props.description)

watch(() => props.show, (value) => {
    if (value) {
        localName.value = props.name
        localDescription.value = props.description
    }
})

const save = () => {
    if (!localName.value.trim()) return
    emit('save', { name: localName.value.trim(), description: localDescription.value.trim() })
    emit('update:show', false)
}
</script>

<template>
    <NModal
        :show="show"
        preset="card"
        title="Редактирование отчёта"
        style="width: 460px; max-width: 94vw;"
        @update:show="emit('update:show', $event)"
    >
        <NForm>
            <NFormItem label="Название">
                <NInput v-model:value="localName" maxlength="50" show-count placeholder="Название отчёта" />
            </NFormItem>
            <NFormItem label="Описание (необязательно)">
                <NInput
                    v-model:value="localDescription"
                    type="textarea"
                    maxlength="200"
                    show-count
                    placeholder="Введите описание отчёта"
                    :autosize="{ minRows: 2, maxRows: 4 }"
                />
            </NFormItem>
        </NForm>
        <template #footer>
            <NFlex justify="end" :size="8">
                <NButton @click="emit('update:show', false)">Отменить</NButton>
                <NButton type="primary" :disabled="!localName.trim()" @click="save">Сохранить</NButton>
            </NFlex>
        </template>
    </NModal>
</template>
