<script lang="ts" setup>
    import { h } from 'vue'
    import { Tag } from 'ant-design-vue'
    import { PageWrapper } from '/@/components/Page'
    import type { DescItem } from '/@/components/Description/index'
    import { Description, useDescription } from '/@/components/Description/index'
    import { DOC_URL, GIT_URL, SITE_URL } from '/@/settings/siteSetting'

    const { pkg, lastBuildTime } = __APP_INFO__

    const { dependencies, devDependencies, name, version } = pkg

    const schema: DescItem[] = []
    const devSchema: DescItem[] = []

    function commonTagRender(color: string) {
        return (curVal) => h(Tag, { color }, () => curVal)
    }
    function commonLinkRender(text: string) {
        return (href) => h('a', { href, target: '_blank' }, text)
    }

    const infoSchema: DescItem[] = [
        {
            label: '版本',
            field: 'version',
            render: commonTagRender('blue'),
        },
        {
            label: '最后编译时间',
            field: 'lastBuildTime',
            render: commonTagRender('blue'),
        },
        {
            label: '文档地址',
            field: 'doc',
            render: commonLinkRender('文档地址'),
        },
        {
            label: '预览地址',
            field: 'preview',
            render: commonLinkRender('预览地址'),
        },
        {
            label: 'Git',
            field: 'git',
            render: commonLinkRender(GIT_URL),
        },
    ]

    const infoData = {
        version,
        lastBuildTime,
        doc: DOC_URL,
        preview: SITE_URL,
        git: GIT_URL,
    }

    Object.keys(dependencies).forEach((key) => {
        schema.push({ field: key, label: key })
    })

    Object.keys(devDependencies).forEach((key) => {
        devSchema.push({ field: key, label: key })
    })

    const [register] = useDescription({
        title: '生产环境依赖',
        data: dependencies,
        schema,
        column: 3,
    })

    const [registerDev] = useDescription({
        title: '开发环境依赖',
        data: devDependencies,
        schema: devSchema,
        column: 3,
    })

    const [infoRegister] = useDescription({
        title: '项目信息',
        data: infoData,
        schema: infoSchema,
        column: 2,
    })
</script>

<template>
    <PageWrapper title="关于">
        <template #headerContent>
            <div class="flex justify-between items-center">
                <span class="flex-1">
                    <a :href="GIT_URL" target="_blank">{{ name }}</a>
                    是一个基于Vue3.0、Vite、 Ant-Design-Vue 、TypeScript 的后台解决方案, 目标是为项目开发,
                    提供现成的开箱解决方案。
                </span>
            </div>
        </template>
        <Description @register="infoRegister" class="enter-y" />
        <Description @register="register" class="my-4 enter-y" />
        <Description @register="registerDev" class="enter-y" />
    </PageWrapper>
</template>
