<template>
    <div class="flex-1" :class="{ dark: isDark }">
        <n-card :bordered="false" class="vipcard">
            <vip-card pageType="vip"></vip-card>
            <img :src="isDark ? vipBlock : vipBlockLight" class="block" alt="" />
        </n-card>

        <div class="px-5 vip-list pt-6">
            <NConfigProvider
                :theme-overrides="{
                    Card: {
                        colorModal: isDark ? '#18191E' : '#fff'
                    }
                }"
            >
                <n-card
                    class="rounded-lg overflow-hidden exclusive !dark:bg-[#1B1D24]"
                    title=""
                    content-style="padding:0 0 20px"
                    :bordered="false"
                    :header-style="{
                        padding: '8px 15px 12px',
                        background: isDark ? '#15161A' : '#E8F6F6'
                    }"
                >
                    <template #header>
                        <n-gradient-text
                            :gradient="{
                                deg: 289,
                                from: isDark ? '#D3FFDB' : '#006F66',
                                to: isDark ? '#00D8DA' : '#006F66'
                            }"
                            class="alimamaShuHeiTi"
                        >
                            走马AI优势
                        </n-gradient-text>
                    </template>

                    <n-grid cols="4" responsive="screen" class="backdrop-blur-lg">
                        <n-grid-item v-for="item in items" :key="item.name">
                            <div class="flex flex-col items-center pt-5">
                                <img class="w-[44px] h-[44px]" v-if="isDark" :src="item.img" alt="" />
                                <img class="w-[44px] h-[44px]" v-else :src="item.imgLight" alt="" />

                                <div class="text text-xs mt-2 text-center">
                                    <div class="whitespace-nowrap">{{ item.name }}</div>
                                    <div class="mt-0.5 text-xs[10px] text-[#797A8A]" style="font-size: 10px">
                                        {{ item.desc }}
                                    </div>
                                </div>
                            </div>
                        </n-grid-item>
                    </n-grid>
                </n-card>
            </NConfigProvider>
        </div>

        <n-carousel
            class="px-5 pt-7"
            :space-between="23"
            :show-dots="false"
            slides-per-view="auto"
            :draggable="memberships.length >= 3"
        >
            <n-carousel-item
                :style="{ width: memberships.length >= 3 ? '40%' : 'calc(50% - 12px)' }"
                v-for="item in memberships"
                :key="String(item.id)"
            >
                <div
                    class="choose-btn flex flex-shrink-0 flex-col justify-center items-center text-center h-[86px] border border-[#9EA4B0] dark:border-white rounded-[16px]"
                    :class="{ prim: chooseMemberId === item.id, recommend: item.id === 111 }"
                    @click="chooseMemberId = item.id"
                >
                    <div
                        class="text-black dark:text-white text-base"
                        :class="{ 'text-[15px]': !!originals[item.id as keyof typeof originals] }"
                    >
                        {{ item.name }}
                    </div>
                    <div
                        class="text-3xl font-medium mt-[-1px]"
                        :class="{ 'text-[25px] leading-[28px] mt-[-3px]': !!originals[item.id as keyof typeof originals]}"
                    >
                        <span class="text-base">¥</span>{{ item.price }}
                    </div>
                    <div class="text-[#A2A49D] text-xs" v-if="!!originals[item.id as keyof typeof originals]">
                        原价 <span class="line-through">{{ originals[item.id as keyof typeof originals] }}</span>
                    </div>
                    <!-- <template v-if="chooseMemberId == item.id">
                        <img :src="chooseRe" v-if="item.id === 4" alt="" class="choose-img" />
                        <img :src="choose" v-else alt="" class="choose-img"
                    /></template> -->

                    <div class="hot" v-if="item.id === 4">
                        <img :src="hot" alt="" />
                        <span>限时优惠</span>
                    </div>
                </div>
            </n-carousel-item>
        </n-carousel>

        <div class="btn-list flex items-align"></div>

        <div
            class="my-5 mx-5 px-4 py-2 rounded-lg bg-[#E8F6F7] dark:bg-[#15A8AA1A]"
            v-if="tips[chooseMemberId as keyof typeof tips] && tips[chooseMemberId as keyof typeof tips].length > 0"
        >
            <div
                class="text-xs text-[#15A8AA] font-medium tips-info leading-6"
                v-for="(item,index) in tips[chooseMemberId as keyof typeof tips]"
                :key="index"
            >
                {{ item }}
            </div>
        </div>

        <div class="px-6 py-3 mt-4 btn bg-white dark:bg-[#0F1014]">
            <n-button class="alimamaShuHeiTi" type="primary" size="large" round block @click="submit" :loading="loading"
                ><span class="text-lg mr-1">¥{{ chooseMemberInfo?.price || 0 }} </span>
                {{ isVip ? '立即续费' : '立即开通' }}</n-button
            >
        </div>

        <n-modal v-model:show="showSuccess" transform-origin="center" :on-after-leave="onLeave">
            <img src="@/assets/png-kaitong.png" @click="showSuccess = false" class="w-[90%] max-w-[500px]" alt="" />
        </n-modal>

        <VipModal v-model:show="showPayModal" :planId="chooseMemberId" @goChat="goChat" />
    </div>
</template>
<script setup lang="ts">
import { VipCard, VipModal } from '@/components/common'
import {
    NCard,
    NEl,
    NPageHeader,
    NRow,
    NCol,
    NGrid,
    NGridItem,
    NButton,
    NModal,
    NCarousel,
    NCarouselItem,
    NGradientText,
    useMessage,
    NConfigProvider
} from 'naive-ui'
import { useRouter } from 'vue-router'
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 imgItem01Light from '@/assets/png-01-light.png'
import imgQiyeLight from '@/assets/qiye-light.png'
import imgHuihuaLight from '@/assets/huihua-light.png'
import imgItem02Light from '@/assets/png-02-light.png'
import imgItem03Light from '@/assets/png-03-light.png'
import imgItem05Light from '@/assets/png-05-light.png'
import imgItem06Light from '@/assets/png-06-light.png'
import imgItem07Light from '@/assets/png-07-light.png'
import vipBlock from '@/assets/vip-block.png'
import vipBlockLight from '@/assets/vip-block-light.png'
import choose from '@/assets/choose.png'
import chooseRe from '@/assets/choose-re.png'
import hot from '@/assets/hot.png'
import { fetchGetMemberships } from '@/api'
import { onMounted, ref, computed } from 'vue'
import { useUserMemberStore, useChatStore } from '@/store'
import { useTheme } from '@/hooks/useTheme'
import type { MemberShip } from '@/store/modules/memberShip/helper'
import { emitter } from '@/plugins'
import { useStorage } from '@vueuse/core'
import { useBasicLayout } from '@/hooks/useBasicLayout'

const router = useRouter()
function handleBack() {
    router.back()
}

const { isDark } = useTheme()

const items = [
    {
        name: '基础问答',
        desc: '快速检索',
        img: imgItem01,
        imgLight: imgItem01Light
    },
    {
        name: '独立会话',
        desc: '上下文精准约束',
        img: imgQiye,
        imgLight: imgQiyeLight
    },
    {
        name: '企业链路',
        desc: '高效稳定',
        img: imgHuihua,
        imgLight: imgHuihuaLight
    },
    {
        name: '后续权益',
        desc: '免费开放',
        img: imgItem06,
        imgLight: imgItem06Light
    }
]

const chooseMemberId = ref(0)
const chooseMemberInfo = computed(() => {
    if (chooseMemberId.value) {
        return memberships.value.find(item => {
            return item.id === chooseMemberId.value
        })
    }
    return null
})

const userMemberStore = useUserMemberStore()
const memberships = ref<Array<any>>([])
const originals = ref({
    1: 59,
    2: 177,
    3: 708
})
const tips = ref({
    1: ['30天内无限量对话'],
    2: [],
    3: ['365天内无限量对话', '图片接口无限量', '专业客服指导使用', '更多接口服务优先体验权']
})
onMounted(() => {
    userMemberStore.fetchMembers().then(res => {
        memberships.value = res.filter(item => {
            return item.enabled
        })
        let info = res.find(item => {
            return item.id === 4
        })
        if (res.length > 0) {
            chooseMemberId.value = info ? 4 : res[0].id
        }
    })
})

const isVip = computed(() => {
    return userMemberStore.isVip()
})

const loading = ref(false)
const message = useMessage()
const openid = useStorage('openid', '', sessionStorage)
const chatStore = useChatStore()
function submit() {
    if (openid.value) {
        loading.value = true
        userMemberStore
            .renew(Number(chooseMemberId.value))
            .then(params => {
                loading.value = false
                wx.chooseWXPay({
                    ...params,
                    success: function (res: any) {
                        // message.success('购买成功')
                        chatStore.setUsingContext(false)
                        showSuccess.value = true
                        userMemberStore.fetchMember()
                        // router.replace({
                        //     name: 'Chat'
                        // })
                    }
                })
            })
            .catch(e => {
                loading.value = false
                message.error(e.message)
            })
    } else {
        showPayModal.value = true
    }
}

const showSuccess = ref(false)
function onLeave() {
    router.replace({
        name: 'Chat'
    })
}

const { isMobile } = useBasicLayout()
const showPayModal = ref(false)
function goChat() {
    userMemberStore.fetchMember()
    if (isMobile.value) {
        router.replace({
            name: 'Chat'
        })
    } else {
        showPayModal.value = false
        emitter.emit('changeMineShow', false)
        emitter.emit('changeVipShow', false)
    }
}
</script>

<style lang="less" scoped>
:deep(.n-page-header) {
    height: 50px;
    padding: 0 22px;
    .n-page-header__main {
        flex-grow: 1;
        .n-page-header__title {
            flex-grow: 1;
            text-align: center;
        }
    }
}
.vipcard {
    --n-padding-left: 20px !important;
    --n-padding-bottom: 10px !important;
    --n-color-modal: transparent;
    --n-color: transparent;
    position: relative;
    .block {
        position: absolute;
        width: 100%;
        height: 60px;
        left: 0;
        bottom: -25px;
        z-index: 0;
    }
}

// .n-card {
//     --n-padding-left: 20px !important;
//     --n-padding-bottom: 10px !important;
//     --n-color-modal: transparent;
// }
::-webkit-scrollbar {
    // display: none;
}

.choose-btn {
    position: relative;
    box-sizing: border-box;
    overflow: hidden;
    &.prim {
        border-color: #15a8aa;
        background: #15a8aa1a;
        box-shadow: inset 0 0 1px 1px #15a8aa;
    }

    &.recommend {
        &.prim {
            background: linear-gradient(318deg, rgba(255, 87, 186, 0.1) 0%, rgba(255, 87, 186, 0.2) 100%);
            border-color: #ff3b20;
            box-shadow: inset 0 0 1px 1px #ff3b20;
        }
    }

    .choose-img {
        position: absolute;
        width: 24px;
        height: 24px;
        right: 0;
        bottom: 0;
    }

    .hot {
        position: absolute;
        top: 0px;
        left: 0px;
        img {
            height: 22px;
            display: block;
        }
        span {
            font-size: 11px;
            font-weight: bold;
            color: #fdffee;
            line-height: 18px;
            top: 0;
            left: 0;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            white-space: nowrap;
        }
    }
}

.dark {
    .choose-btn {
        background-color: #1b1d24;
        &.prim {
            background: #15a8aa1a;
        }

        &.recommend {
            &.prim {
                background: linear-gradient(318deg, rgba(255, 87, 186, 0.1) 0%, rgba(255, 87, 186, 0.2) 100%);
                border-color: #ff3b20;
            }
        }
    }
}

.vip-list {
    .n-card {
        --n-border-radius: 12px;
        // --n-color: #1b1d24;
    }
}

.exclusive {
    box-shadow: 0px 2px 4px 0px rgba(158, 164, 176, 0.1);
}

.btn {
    position: sticky;
    bottom: 0;
    z-index: 20;
    .n-button {
        --n-font-size: 16px;
    }
}

.tips-info {
    position: relative;
    padding-left: 16px;
    &::before {
        content: '';
        width: 8px;
        height: 8px;
        background: #15a8aa;
        border-radius: 8px;
        position: absolute;
        left: 0;
        top: 8px;
    }
}
</style>
