<template>
    <n-el
        class="page h-full flex flex-col bg-cover bg-center overflow-auto"
        :style="{ backgroundImage: `url(${isMobile ? h5Bg : pcBg})` }"
    >
        <NConfigProvider
            :theme-overrides="{
                Button: {
                    heightSmall: '24px'
                }
            }"
        >
            <n-page-header>
                <template #title>
                    <div
                        class="flex items-center py-3 lg:py-8 pl-4 md:pl-10 lg:pl-15 2xl:pl-52"
                        @click="showConsoleEve"
                    >
                        <!-- <n-avatar :size="isMobile ? 'small' : 'medium'" :src="logo"></n-avatar> -->
                        <!-- <span class="ml-[6px] lg:ml-3 text-white text-base lg:text-lg alimamaShuHeiTi">走马AI助手 </span> -->
                        <img src="@/assets/logo-text.png" class="h-[28px] md:h-[40px]" alt="" />
                    </div>
                </template>
                <template #extra>
                    <div class="flex items-center py-3 lg:py-[30px] pr-4 lg:pr-15 2xl:pr-52">
                        <!-- <n-button text class="!p-[8px] !mr-[8px] lg:!p-[12px] lg:!mr-[12px]" @click="showDesc = true">
                            <img
                                class="w-[20px] h-[20px] lg:w-[24px] lg:h-[24px]"
                                src="@/assets/icon_jieshao.png"
                                alt=""
                            />
                            <span class="text-white ml-[4px] lg:ml-[6px] text-xs lg:text-sm">介绍</span>
                        </n-button> -->
                        <template v-if="isLogin">
                            <n-button text v-if="isMobile" @click="goMine">
                                <user-avatar avatarType="small" onlyAvatar />
                            </n-button>
                            <n-popover placement="bottom" trigger="click" v-else>
                                <template #trigger>
                                    <n-button text>
                                        <user-avatar :avatarType="isMobile ? 'small' : 'medium'" onlyAvatar />
                                    </n-button>
                                </template>
                                <n-button size="small" @click="logout" text>退出登录</n-button>
                            </n-popover>
                        </template>

                        <template v-else>
                            <n-button v-if="!isMobile" type="primary" round @click="showLogin = true"> 登录 </n-button>
                            <n-button v-else round @click="$router.push('/login')" type="primary" size="small"
                                >登录</n-button
                            >
                        </template>
                    </div>
                </template>
            </n-page-header>
        </NConfigProvider>

        <div
            class="flex flex-col items-center content-center pl-4 md:pl-10 lg:pl-15 2xl:pl-52 md:items-start flex-1 pt-4 pb-24 page-content md:pb-4 md:justify-center"
        >
            <img src="@/assets/brand.png" class="w-3/4 max-w-[510px] md:translate-x-[-10px]" alt="" />

            <div class="text-xs leading-6 md:text-base text-white opacity-80 text-center md:text-left mt-4 w-[90%] max-w-[705px]">
                走马AI助手是人工智能技术驱动的自然语言处理工具，它能够通过理解和学习人类的语言来进行对话，还能根据聊天的上下文进行互动，真正像人类一样来聊天交流，并能完成撰写邮件、视频脚本、文案、翻译、代码，写论文等任务。后续更新：向量数据库应用，AI助手角色赋予，AI助手私有化，FileChat等。
            </div>

            <NConfigProvider
                class="w-[90%] max-w-[426px] mt-8"
                :theme-overrides="{
                    common: { cardColor: 'transparent' },
                    Card: {
                        paddingMedium: '0',
                        borderRadius: '12px',
                        borderColor: 'rgba(255, 255, 255, 0.2)'
                    }
                }"
            >
                <n-card
                    class="vip rounded-xl overflow-hidden backdrop-blur-sm"
                    :content-style="{
                        padding: 0
                    }"
                    :bordered="isMobile"
                >
                    <n-grid cols="4" responsive="screen">
                        <n-grid-item v-for="(item, index) in items" :key="item.name">
                            <div class="flex flex-col items-center h-[120px] md:h-[108px] justify-center md:items-start">
                                <div class="flex flex-col items-center relative" :class="{ 'pb-[44px]': index === 1 }">
                                    <img class="w-[60px] h-[60px]" :src="item.img" alt="" />
                                    <div
                                        class="text text-xs text-gray-50 mt-2 text-center"
                                        :class="{ 'absolute bottom-0': index === 1 }"
                                    >
                                        <div class="whitespace-nowrap">{{ item.name }}</div>
                                        <div class="mt-1 text-[10px] text-neutral-400 whitespace-nowrap">
                                            {{ item.desc }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </n-grid-item>
                    </n-grid>
                </n-card>
            </NConfigProvider>

            <div class="flex-1" v-if="isMobile"></div>

            <NConfigProvider
                :theme-overrides="{
                    Button: {
                        heightMedium: '44px',
                        heightLarge: isMobile ? '44px' : '60px',
                        fontSizeLarge: isMobile ? '16px' : '24px'
                    }
                }"
                class="mt-16 w-[300px] sm:w-80"
            >
                <n-button
                    type="primary"
                    class="alimamaShuHeiTi max-w-[300px] !border-white"
                    block
                    round
                    size="large"
                    @click="goChat"
                    :loading="loading"
                >
                    立即体验
                </n-button>
            </NConfigProvider>
        </div>

        <NConfigProvider
            :theme="darkTheme"
            :theme-overrides="{
                Card: {
                    colorModal: '#20223c'
                },
                Input: {
                    border: '1px solid #2B3038'
                }
            }"
        >
            <n-modal v-model:show="showLogin" transform-origin="center">
                <n-card class="!max-w-xl !rounded-xl">
                    <div class="text-white text-2xl text-center font-bold py-8">登录</div>
                    <div class="max-w-sm my-5 mx-auto pb-16">
                        <login-form @success="onLogin" theme="dark"></login-form>
                    </div>
                </n-card>
            </n-modal>
        </NConfigProvider>

        <NConfigProvider
            :theme="lightTheme"
            :theme-overrides="{
                Card: {
                    colorModal: 'linear-gradient(180deg, rgba(196, 218, 255, 1), #fbf1ff)'
                },
                Input: {
                    border: '1px solid #2B3038'
                }
            }"
        >
            <n-modal v-model:show="showDesc" class="!max-w-xl !w-[85%] !rounded-[12px]">
                <n-card content-style="padding:2px">
                    <div
                        class="pt-[20px] rounded-[12px]"
                        style="background: linear-gradient(180deg, #e8f2ff 0%, #fbf1ff 100%)"
                    >
                        <img class="w-[180px] block mx-[auto]" src="@/assets/png-wenzi.png" alt="" />
                        <div class="text-center text-[10px] text-[#2900D499] uppercase">走马AI助手 introduce</div>
                        <div class="text-black text-sm px-4 pb-[22px] pt-[10px]">
                            <p>
                                为维持高速稳定的客户体验，走马AI助手采用微软Microsoft
                                Azure云服务器，微软Azure是业界第一名的智能AI、物联网、混合云，集机器学习、数据分析与信息系统服务集大成，是唯一在中国正式商用的国际公有云。OpenAi公司的ChatGPT即部署于微软Azure，确保了两者的同源与互通。
                            </p>
                            <p class="mt-[10px]">
                                针对国内用户的使用习惯，走马AI助手专门对微信生态进行了全面优化，用户不用跳转到外部浏览器，将走马AI助手保存到“收藏”内，即可完成一键登录、使用，复制、分享等功能，在微信上的响应速度、使用体验远超同类产品。
                            </p>
                        </div>
                    </div>
                </n-card>
            </n-modal>
        </NConfigProvider>
    </n-el>
</template>

<script setup lang="ts">
import {
    NAvatar,
    NButton,
    NPageHeader,
    NCard,
    NGrid,
    NGridItem,
    NModal,
    NConfigProvider,
    darkTheme,
    lightTheme,
    NEl,
    NPopover,
    useMessage,
    useDialog
} from 'naive-ui'
import h5Bg from '@/assets/bg_mobile.jpg'
import pcBg from '@/assets/bg_desktop1.jpg'
import logo from '@/assets/logo.png'
import { useUserStore } from '@/store'
import { useRouter, useRoute } from 'vue-router'
import { ref, computed } from 'vue'
import { UserAvatar, LoginForm } from '@/components/common'
import { useBasicLayout } from '@/hooks/useBasicLayout'
import imgItem01 from '@/assets/png-01.png'
import imgQiye from '@/assets/qiye.png'
import imgHuihua from '@/assets/huihua.png'
import imgItem02 from '@/assets/png-02.png'
import imgItem03 from '@/assets/png-03.png'
import imgItem05 from '@/assets/png-05.png'
import imgItem06 from '@/assets/png-06.png'
import imgItem07 from '@/assets/png-07.png'
import { init as initEruda } from '@/utils/console'
import { useStorage } from '@vueuse/core'
import borderImg from '@/assets/png-biankuang.png'

const { isMobile } = useBasicLayout()

const router = useRouter()
const route = useRoute()
const userStore = useUserStore()
const showLogin = ref(false)
const items = [
    {
        name: '基础问答',
        desc: '快速检索',
        img: imgItem01
    },
    {
        name: '独立会话',
        desc: '上下文精准约束',
        img: imgQiye
    },
    {
        name: '企业链路',
        desc: '高效稳定',
        img: imgHuihua
    },
    {
        name: '后续权益',
        desc: '免费开放',
        img: imgItem06
    }
]

const isLogin = computed(() => {
    return !!userStore.userInfo.id
})

const onLogin = () => {
    showLogin.value = false
    loading.value = true
    router.replace({ name: 'moments' })
}

const loading = ref(false)
function goChat() {
    if (!userStore.userInfo.id) {
        if (!isMobile.value) {
            showLogin.value = true
        } else {
            router.push({ name: 'login' })
        }
    } else {
        loading.value = true
        router.push({ name: 'moments' })
    }
}

function goMine() {
    router.push({
        name: 'mine'
    })
}

const dialog = useDialog()
const message = useMessage()
function logout() {
    dialog.create({
        title: '提示',
        content: '确认要退出登录吗？',
        positiveText: '退出登录',
        negativeText: '取消',
        maskClosable: false,
        onPositiveClick: () => {
            userStore.logout()
            message.success('退出登录成功')
        }
    })
}
let clickNum = 0
let to: any = null
function showConsoleEve() {
    clickNum++
    if (clickNum >= 10) {
        initEruda()
        useStorage('showConsole', 0).value = new Date().getTime() + 60 * 60 * 1000
        clickNum = 0
        return
    } else {
        if (to) {
            clearTimeout(to)
        }
        to = setTimeout(() => {
            clickNum = 0
        }, 1000)
    }
}

setTimeout(() => {
    if (route.query.login && !isMobile.value) {
        showLogin.value = true
        router.replace({ query: {} }).catch(() => {})
    }
}, 300)

//介绍
const showDesc = ref(false)
</script>

<style lang="less" scoped>
:deep(.n-page-header-wrapper) {
    position: sticky;
    top: 0;
    z-index: 20;
}

:deep(.n-avatar) {
    --n-merged-color: transparent;
}
</style>
