<script lang="ts" setup>

import { editServer } from '#/api/core/server';
import { useVbenModal } from '@vben/common-ui';
import { useVbenForm } from '#/adapter/form';
import dayjs from 'dayjs';



const date = dayjs();
const [Form, FormApi] = useVbenForm({
    // 所有表单项共用，可单独在表单内覆盖
    commonConfig: {
        // 所有表单项
        componentProps: {
            class: 'w-full',
        },
    },

    // 使用 tailwindcss grid布局
    // 提交函数
    // 垂直布局，label和input在不同行，值为vertical
    layout: 'horizontal',
    // 水平布局，label和input在同一行
    schema: [
        {
            component: 'Input',
            disabled: false,
            defaultValue: 0,
            componentProps: {
                placeholder: '1',
            },
            formItemClass: 'col-span-2',
            fieldName: 'AppId',
            label: 'AppId：',
        },
        {
            component: 'Input',
            disabled: false,
            componentProps: {
                placeholder: '2',
                typeof: 'number',
            },
            rules: "required",
            fieldName: 'ServerId',
            label: 'ServerId：',
            formItemClass: 'col-span-2',
        },
        {
            component: 'Input',
            defaultValue: '',
            componentProps: {
                placeholder: 'node1',
            },
            rules: "required",
            fieldName: 'ServerName',
            label: 'ServerName：',
            formItemClass: 'col-span-2',
        },
        {
            component: 'Input',
            defaultValue: '',
            componentProps: {
                placeholder: 'node1',
            },
            rules: "required",
            fieldName: 'Tags',
            label: 'Tags',
            formItemClass: 'col-span-2',
        },
        {
            component: 'Input',
            defaultValue: '',
            componentProps: {
                placeholder: 'node1',
            },
            rules: "required",
            fieldName: 'version',
            label: 'version',
            formItemClass: 'col-span-2',
        },
    ],
    showDefaultActions: false,
    // 大屏一行显示3个，中屏一行显示2个，小屏一行显示1个
    wrapperClass: 'grid-cols-2',
});
const [Modal, modalApi] = useVbenModal({
    confirmText: '提交',
    onOpenChange: () => {
        const modalData = modalApi.getData();
        const tag = modalData.Tags ? modalData.Tags.join(',') : '';
        FormApi.updateSchema([
            {
                component: 'Input',
                disabled: true,
                defaultValue: modalData.AppId ?? 0,
                componentProps: {
                    placeholder: '1',
                },
                formItemClass: 'col-span-2',
                fieldName: 'AppId',
                label: 'AppId：',
            },
            {
                component: 'Input',
                disabled: true,
                defaultValue: modalData.ServerId ?? 0,
                componentProps: {
                    placeholder: '2',
                    typeof: 'number',
                },
                fieldName: 'ServerId',
                label: 'ServerId：',
                formItemClass: 'col-span-2',
            },
            {
                component: 'Input',
                defaultValue: modalData.ServerName ?? '',
                componentProps: {
                    placeholder: 'node1',
                },
                rules: "required",
                fieldName: 'ServerName',
                label: 'ServerName：',
                formItemClass: 'col-span-2',
            },
            {
                component: 'Input',
                defaultValue: tag ?? '',
                componentProps: {
                    placeholder: 'node1',
                },
                rules: "required",
                fieldName: 'Tags',
                label: 'Tags',
                formItemClass: 'col-span-2',
            },
            {
            component: 'Input',
            defaultValue: modalData.ClientVersion ?? '',
            componentProps: {
                placeholder: 'node1',
            },
            rules: "required",
            fieldName: 'version',
            label: 'client-version',
            formItemClass: 'col-span-2',
        },
        ])
    },
    onConfirm: async () => {
        // 提交表单
        const values = await FormApi.getValues();
        const modalData = modalApi.getData();
        const ServerId = parseInt(values.ServerId, 10);
        const editParam = {
            AppId: modalData.AppId,
            ServerId: ServerId,
            ServerName: values.ServerName,
            Tags: values.Tags,
            ClientVersion: values.version,
        }
        await editServer(editParam);
        modalApi.close();
    },
});
defineOptions({
    name: 'AddServerModal',
})
defineExpose({
    FormApi
})
</script>

<template>
    <Modal title="修改服务器信息" :width="800">
        <Form />

    </Modal>
</template>