<script setup lang="tsx">
    import { BasicModal } from '/@/components/Modal'
    import { Icon } from '/@/components/Icon'
    import { app } from '../config'
    import { useElectron } from '@/hooks/electron/useElectron'
    import { useMessage } from '@/hooks/web/useMessage'
    import { getEnvText } from '/@/utils/env'
    import { useClientStoreWithOut } from '@/store/modules/client'

    type MessageType =
        | 'checking-for-update'
        | 'error'
        | 'update-available'
        | 'update-not-available'
        | 'download-progress'
        | 'update-downloaded'

    const clientStore = useClientStoreWithOut()
    const { ipcRenderer: ipc } = useElectron()
    const { createMessage } = useMessage()

    const loading = ref<boolean>(false)
    const isDebug = computed(() => clientStore.system?.debug)
    const versions = reactive({ ...window.electron.process.versions })

    // 监听检查更新事件
    let hide = null
    onMounted(() => {
        ipc.on('updater:message', (_e, body: { type: MessageType; message: string }) => {
            console.log('updater:message', body)

            const { type, message } = body
            if (type === 'checking-for-update' || type === 'download-progress') {
                loading.value = true
                hide = createMessage.loading({
                    key: 'updating',
                    content: message,
                    duration: 0,
                })
            } else if (type === 'update-available' || type === 'update-not-available' || type === 'update-downloaded') {
                createMessage.success(message)
            } else if (type === 'error') {
                console.error(`检查更新失败: ${message}`)

                if (message?.startsWith('net::') || message?.includes('HttpError')) {
                    createMessage.warn('检查更新失败，请确认网络或者更新源配置是否正常')
                } else {
                    createMessage.error(message)
                }
            }

            if (type === 'error' || type === 'update-downloaded' || type === 'update-not-available') {
                loading.value = false
                hide?.()
            }
        })
    })

    // 发送检查更新
    function checkUpdate() {
        ipc.send('updater:check')
    }
</script>

<template>
    <BasicModal v-bind="$attrs" centered :footer="null" :canFullscreen="false">
        <!-- 关于信息 -->
        <template #title>
            <a-space>
                <Icon icon="ant-design:info-circle-outlined" :size="22" />
                <div class="title-text">关于</div>
            </a-space>
        </template>

        <div class="about-wrap" :class="{ debug: isDebug }">
            <!-- 公司 + 版权信息 -->
            <div class="about-app-info-wrap">
                <div class="app-icon relative">
                    <img src="/logo.png" />
                </div>
                <div class="app-description">{{ $app.description }}</div>
                <div class="app-version">
                    <a-tooltip>
                        <template #title>
                            <div class="flex flex-col items-center justify-center">
                                <div class="version-mode">{{ getEnvText() }}</div>
                                <div class="update-time">发布时间: {{ $app.lastBuildTime }}</div>
                            </div>
                        </template>
                        <a-button type="text">
                            <span class="version-text">{{ $app.version }}</span>
                        </a-button>
                    </a-tooltip>
                </div>
                <!-- 检查版本更新按钮 -->
                <div class="app-check-update-action">
                    <a-button type="dashed" :loading="loading" @click="checkUpdate">
                        <Icon icon="ant-design:bulb-outlined" v-show="!loading" />
                        检查更新
                    </a-button>
                </div>
            </div>
            <!-- 版本信息 -->
            <div class="about-footer">
                <div class="company">{{ app.copyright.company }}</div>
                <div class="copyright">
                    <span>Copyright © {{ app.copyright.year }}</span>
                    <span class="link">
                        <a target="_blank" :href="app.copyright.link">{{ app.copyright.text }}</a>
                    </span>
                </div>
            </div>
        </div>

        <!-- 应用内核相关信息 -->
        <ul class="versions" v-if="isDebug">
            <li class="electron-version">Electron v{{ versions.electron }}</li>
            <li class="node-version">Node v{{ versions.node }}</li>
            <li class="chrome-version">Chromium v{{ versions.chrome }}</li>
            <!-- <li class="v8-version">V8 v{{ versions.v8.split('-').shift() }}</li> -->
        </ul>
    </BasicModal>
</template>

<style lang="less" scoped>
    .about-wrap {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;

        &.debug {
            margin-bottom: 20px;
        }
    }

    .about-app-info-wrap {
        display: flex;
        flex-direction: column;
        align-items: center;

        > div {
            margin-top: 10px;
        }

        .app-icon {
            width: 50px;
        }

        .app-description {
            font-weight: bold;
        }

        .app-version {
            display: flex;
            flex-direction: column;
            align-items: center;

            .version-text::before {
                content: 'V';
                margin-right: 2px;
            }
        }
    }

    .about-footer {
        height: 60px;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: center;
        color: #898989;
        font-size: 13px;
        user-select: none;
        letter-spacing: 1px;

        .company {
            letter-spacing: 2px;
        }

        .link {
            margin-left: 5px;
            text-decoration: dashed;

            &:hover {
                text-decoration: underline;
                cursor: pointer;
            }

            a {
                color: #898989;
                margin-left: 3px;
            }
        }
    }

    .versions {
        margin: 0 auto;
        float: none;
        clear: both;
        overflow: hidden;
        font-family: Menlo, 'Lucida Console', monospace;
        color: #bfbfbf;
        line-height: 1;
        transition: all 0.3s;
        position: absolute;
        bottom: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        left: 0;

        li {
            display: block;
            float: left;
            border-right: 1px solid rgb(194 245 255 / 40%);
            font-size: 13px;
            opacity: 0.8;

            + li {
                margin-left: 20px;
            }
        }
    }
</style>
