<script setup lang="tsx">
    import { Tabs } from 'ant-design-vue'
    import type { Setting } from './types'
    import { Icon } from '/@/components/Icon'
    import { BasicModal } from '/@/components/Modal'
    import { ScrollContainer } from '/@/components/Container/index'
    import SettingForm from './SettingForm.vue'
    import { useClientStore } from '@/store/modules/client'

    const clientStore = useClientStore()
    const settings = computed((): Setting[] => [
        {
            key: 'system',
            name: '系统设置',
            icon: 'ant-design:setting-outlined',
            value: clientStore.system,
            formSchema: [
                {
                    field: 'machineId',
                    component: 'Typography.Paragraph',
                    label: '设备标识',
                    colProps: {
                        span: 24,
                    },
                    componentProps: {
                        ellipsis: true,
                        copyable: true,
                        content: clientStore.system.machineId,
                    },
                    defaultValue: clientStore.system.machineId,
                },
                {
                    field: 'debug',
                    component: 'Switch',
                    label: '调试模式',
                    colProps: {
                        span: 20,
                    },
                    componentProps: {
                        checkedChildren: '开',
                        unCheckedChildren: '关',
                    },
                    defaultValue: clientStore.system.debug,
                },
                {
                    field: 'feedURL',
                    component: 'Input',
                    label: '更新源',
                    colProps: {
                        span: 24,
                    },
                    componentProps: {
                        placeholder: '请输入更新源地址',
                    },
                    defaultValue: clientStore.system.feedURL,
                },
            ],
            actions: ['reset', 'submit'],
        },
    ])
</script>

<template>
    <BasicModal
        v-bind="$attrs"
        default-fullscreen
        destroy-on-close
        :canFullscreen="false"
        :footer="null"
        :draggable="false"
        fullscreen
    >
        <!-- 应用设置 -->
        <template #title>
            <a-space>
                <Icon icon="ant-design:setting-outlined" :size="22" />
                <div class="title-text">应用设置</div>
            </a-space>
        </template>

        <!-- 应用设置基本信息 -->
        <ScrollContainer>
            <div>
                <Tabs tab-position="left">
                    <template v-for="item in settings" :key="item.key">
                        <Tabs.TabPane>
                            <template #tab>
                                <div class="tab-item">
                                    <Icon :icon="item.icon" :size="20" />
                                    <div class="name">{{ item.name }}</div>
                                </div>
                            </template>

                            <!-- Tabs -->
                            <!-- 表单 -->
                            <SettingForm :setting="item" />
                        </Tabs.TabPane>
                    </template>
                </Tabs>
            </div>
        </ScrollContainer>
    </BasicModal>
</template>

<style lang="less" scoped>
    //
    .tab-item {
        display: flex;
        align-items: center;
    }
</style>
