<script setup lang="ts">
    import type { Setting } from './types'
    import { BasicForm, useForm } from '/@/components/Form'
    import { useClientStore } from '@/store/modules/client'
    import { useMessage } from '@/hooks/web/useMessage'

    const props = defineProps({
        setting: {
            type: Object as PropType<Setting>,
        },
    })
    const clientStore = useClientStore()
    const { createMessage } = useMessage()

    const [registerForm] = useForm({
        schemas: props.setting.formSchema,
        layout: 'horizontal',
        labelWidth: 100,
        wrapperCol: {
            span: 14,
        },
        colon: true,
        labelAlign: 'right',
        actionColOptions: {
            style: {
                marginTop: '5px',
                marginLeft: '100px',
            },
            span: 12,
        },
        showResetButton: props.setting.actions?.includes('reset') || false,
        showSubmitButton: props.setting.actions?.includes('submit') || false,
        submitButtonOptions: {
            text: '保存',
        },
    })

    async function handleFormSubmit(values: Recordable) {
        clientStore.setSystem(values)
        createMessage.success('保存成功')
    }

    function handleFormReset() {
        clientStore.reset(props.setting.key)
        createMessage.success('重置成功')
    }
</script>

<template>
    <div class="pt-2 pb-20">
        <BasicForm @register="registerForm" @submit="handleFormSubmit" @reset="handleFormReset" />
    </div>
</template>

<style lang="less" scoped>
    :deep(.ant-input-disabled) {
        color: rgb(0 0 0 / 70%);
    }

    :deep(.ant-typography) {
        margin-bottom: 0 !important;
    }
</style>
