<script setup lang="tsx">
    import dayjs from 'dayjs'
    import { BasicModal } from '/@/components/Modal'
    import { Icon } from '/@/components/Icon'
    import { useElectron } from '@/hooks/electron/useElectron'
    import { useMessage } from '@/hooks/web/useMessage'
    import { getEnvText } from '/@/utils/env'

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

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

    const startYear = 2021
    const currentYear = dayjs().year()
    const yearText = ref<string>(currentYear === startYear ? `${currentYear}` : `${startYear} - ${currentYear}`)
    const loading = ref<boolean>(false)

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

        const { type, text } = body
        if (type === 'checking-for-update' || type === 'download-progress') {
            loading.value = true
            hide = createMessage.loading({
                key: 'updating',
                content: text,
                duration: 0,
            })
        } else if (type === 'update-available' || type === 'update-not-available' || type === 'update-downloaded') {
            createMessage.success(text)
        } else if (type === 'error') {
            createMessage.error(text)
        }

        if (type === 'error' || type === 'update-downloaded' || type === 'update-not-available') {
            loading.value = false
            hide?.()
        }
    })
</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">
            <!-- 公司 + 版权信息 -->
            <div class="about-app-info-wrap">
                <div class="app-icon">
                    <img src="/logo.png" />
                </div>
                <!-- <div class="app-name">{{ $app.name }}</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="ipc.send('checkForUpdate')">
                        <Icon icon="ant-design:bulb-outlined" v-show="!loading" />
                        检查更新
                    </a-button>
                </div>
            </div>
            <!-- 版本信息 -->
            <div class="about-footer">
                <div class="company">长沙壹润信息科技发展有限公司</div>
                <div class="copyright">
                    <span>Copyright © {{ yearText }}</span>
                    <span class="link">
                        <a target="_blank" href="https://yiring.com">YiRing.com</a>
                    </span>
                </div>
            </div>
        </div>
    </BasicModal>
</template>

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

    .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;

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

            a {
                color: #898989;
                margin-left: 3px;
            }
        }
    }
</style>
