<script lang="ts">
    import type { ExportModalResult } from './typing'
    import { defineComponent } from 'vue'
    import { BasicModal, useModalInner } from '/@/components/Modal'
    import type { FormSchema } from '/@/components/Form/index'
    import { BasicForm, useForm } from '/@/components/Form/index'

    import { useI18n } from '/@/hooks/web/useI18n'

    const { t } = useI18n()

    const schemas: FormSchema[] = [
        {
            field: 'filename',
            component: 'Input',
            label: t('component.excel.fileName'),
            rules: [{ required: true }],
        },
        {
            field: 'bookType',
            component: 'Select',
            label: t('component.excel.fileType'),
            defaultValue: 'xlsx',
            rules: [{ required: true }],
            componentProps: {
                options: [
                    {
                        label: 'xlsx',
                        value: 'xlsx',
                        key: 'xlsx',
                    },
                    {
                        label: 'html',
                        value: 'html',
                        key: 'html',
                    },
                    {
                        label: 'csv',
                        value: 'csv',
                        key: 'csv',
                    },
                    {
                        label: 'txt',
                        value: 'txt',
                        key: 'txt',
                    },
                ],
            },
        },
    ]
    export default defineComponent({
        components: { BasicModal, BasicForm },
        emits: ['success', 'register'],
        setup(_, { emit }) {
            const [registerForm, { validateFields }] = useForm()
            const [registerModal, { closeModal }] = useModalInner()

            async function handleOk() {
                const res = (await validateFields()) as ExportModalResult
                const { filename, bookType } = res
                emit('success', {
                    filename: `${filename.split('.').shift()}.${bookType}`,
                    bookType,
                })
                closeModal()
            }

            return {
                schemas,
                handleOk,
                registerForm,
                registerModal,
                t,
            }
        },
    })
</script>

<template>
    <BasicModal v-bind="$attrs" :title="t('component.excel.exportModalTitle')" @ok="handleOk" @register="registerModal">
        <BasicForm :labelWidth="100" :schemas="schemas" :showActionButtonGroup="false" @register="registerForm" />
    </BasicModal>
</template>
