<template>
    <section class="pb-20">
        <div class="h-[366px]">
            <div class=" top-wrapper h-64">
                <div class="text-white font-bold text-center h-11 flex items-center justify-center"></div>
                <div class="flex flex-row mx-5 items-center">
                    <div v-if="profile.avatar"
                        class="border-4 border-solid border-white rounded-full w-[54px] h-[54px] flex items-center justify-center">
                        <img :src="profile.avatar" alt="" class="w-[50px] h-[50px] rounded-full">
                    </div>
                    <div v-else>
                        <span class="inline-flex h-14 w-14 items-center justify-center rounded-full bg-[#e7631b]">
                            <span class="text-xl font-medium leading-none text-white">L</span>
                        </span>
                    </div>
                    <div class="ml-4">
                        <div class="flex flex-row items-center justify-start">
                            <div class="text-md font-bold text-white">{{ t('profile.ph_no') }}: {{ profile.username }}
                            </div>
                            <div class="ml-4 flex flex-row level-bg text-[#e7631b] rounded-xl items-center justify-center ">
                                <SvgIcon name="vip" class="w-8 h-8 pl-2" />
                                <span class="font-bold text-st ml-2 mx-2 py-1">LV.{{ profile.memberLevel }}</span>
                            </div>
                        </div>
                        <div class="text-white font-normal text-base">{{ t('profile.i_c') }}: {{ profile.invitationCode }}
                        </div>
                    </div>
                </div>
                <div class="flex flex-row mx-5 mt-4 items-center justify-between text-white">
                    <div class="flex flex-col w-20 items-center justify-center">
                        <span class="font-semibold">{{ (profile && profile.creditScore ? profile.creditScore : 0).toFixed(0)
                        }}</span>
                        <span class="text-base">{{ t('profile.creditScore') }}</span>
                    </div>
                    <div class="flex flex-col w-20 items-center justify-center">
                        <span class="font-semibold">{{ profile.dailyTask }}</span>
                        <span class="text-base">{{ t('profile.dailyOrder') }}</span>
                    </div>
                    <div class="flex flex-col w-20 items-center justify-center">
                        <span class="font-semibold">{{ profile.ratio }}%</span>
                        <span class="text-base">{{ t('profile.ratio') }}</span>
                    </div>
                </div>
            </div>
            <div class="bg-[#F9F9F9] shadow-sm ">
                <div class="h-44 bg-white mx-5 relative -top-20 py-2 px-4 rounded-lg">
                    <div class="flex flex-row items-center justify-around mt-3">
                        <div class=" flex items-center justify-center flex-col ">
                            <div class="text-[rgba(29,31,36,0.6)] text-st text-center">{{ t('profile.todays') }} <br /> {{
                                t('profile.t_order') }}</div>
                            <div class="text-[#1D1F24] font-semibold text-[18px] text-center">{{ profile.todayOrder }}</div>
                        </div>
                        <div>
                            <div class="text-[rgba(29,31,36,0.6)] text-st text-center">{{ t('profile.todays') }} <br /> {{
                                t('profile.t_order_a') }}</div>
                            <div class="text-[#1D1F24] font-semibold text-[18px] text-center">{{
                                profile.todayOrderAmount.toFixed(2) }}</div>
                        </div>
                        <div>
                            <div class="text-[rgba(29,31,36,0.6)] text-st text-center">{{ t('profile.todays') }} <br /> {{
                                t('profile.t_commission') }}</div>
                            <div class="text-[#1D1F24] font-semibold text-[18px] text-center">{{
                                profile.todayCommission.toFixed(2) }}</div>
                        </div>
                    </div>
                    <div class="bg-[#fff0ed] mx-4 mt-4 h-12 flex flex-row items-center justify-around rounded-lg"
                        @click="toDailySignIn">
                        <span class="mr-5 text-black font-bold">{{ t('profile.sign_in_reward') }}</span>
                        <a class="text-[#ee4d2e] my-4">
                            <span class="p-2">{{ t('profile.enter_now') }}</span>
                            <van-icon name="arrow" />
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="bg-[#F9F9F9]">
            <div class=" mx-4 bg-white rounded-lg">
                <div class="h-[76px] flex flex-row px-4 py-2 items-center justify-around">
                    <div class="flex flex-col items-center justify-center leading-6">
                        <div class="text-[#EE4D2D] text-md font-semibold">{{ profile.balance.toFixed(2) }}</div>
                        <div class="text-[13px] text-[rgba(29,31,36,0.6)] ">{{ t('profile.c_balance') }}</div>
                    </div>
                    <div class="flex flex-col items-center justify-center leading-6">
                        <div class="text-[#EE4D2D] text-md font-semibold">{{ profile.withdrawalSuccess.toFixed(2) }}</div>
                        <div class="text-[13px] text-[rgba(29,31,36,0.6)]">{{ t('profile.w_success') }}</div>
                    </div>
                </div>
                <div class="h-[1px] bg-gray-200 mx-8 mb-4"></div>
                <!-- <div class="flex flex-row px-4  items-center justify-around" v-if="false">
                    <div class="flex flex-col items-center justify-center leading-6">
                        <div class="text-[#1D1F24] text-md font-semibold">{{ profile.totalOrder }}</div>
                        <div class="text-[13px] text-[rgba(29,31,36,0.6)]">Total<br />Orders</div>
                    </div>
                    <div class="flex flex-col items-center justify-center leading-6">
                        <div class="text-[#1D1F24] text-md font-semibold">{{ profile.totalCommission.toFixed(2) }}</div>
                        <div class="text-[13px] text-[rgba(29,31,36,0.6)]">Total<br />Order Amount</div>
                    </div>
                    <div class="flex flex-col items-center justify-center leading-6">
                        <div class="text-[#1D1F24] text-md font-semibold">{{ profile.totalIncome.toFixed(2) }}</div>
                        <div class="text-[13px] text-[rgba(29,31,36,0.6)]">Total <br />Commission</div>
                    </div>
                </div> -->
                <div class="flex flex-row items-center justify-around mt-3 pb-4 mx-4">
                    <!-- <van-button class="mt-4 mx-4 van-default-btn w-36 ">
                        <span class="text-white font-medium">My Wallet</span>
                    </van-button> -->
                    <van-button block class="mt-4 mx-4 van-default-btn w-36" @click="toNext('/balance-record')">
                        <span class="text-white font-medium">{{ t('profile.records') }}</span>
                    </van-button>
                </div>
            </div>
            <div class="bg-[#F9F9F9] pb-4">
                <div class=" bg-white rounded-lg mx-4 mt-4 px-4">
                    <div class="h-[74px]" v-for="item in menuList" @click="toNext(item.route)">
                        <div class="flex flex-row items-center justify-between py-4">
                            <div class="flex flex-row">
                                <SvgIcon :name="item.icon" class="w-7 h-7" />
                                <span class="font-medium text-base ml-5">{{ item.title }}</span>
                            </div>
                            <SvgIcon name="chevron-right" class="w-6 h-6" />
                        </div>
                        <div class="h-[1px] bg-gray-200 mx-4"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="mt-6 flex items-center justify-end gap-x-6 mx-4">
            <button type="submit"
                class="rounded-md w-full bg-[#F96825] px-3 py-2 
                text-sm font-semibold text-white shadow-sm 
                hover:bg-[#F96825] focus-visible:outline 
                focus-visible:outline-2 focus-visible:outline-offset-2
                 focus-visible:outline-indigo-600" @click="logout">Logout</button>
        </div>
    </section>
    <Dialog ref="dialogRef" />
</template>

<script setup lang="ts">
import SvgIcon from '@/components/SvgIcon.vue'
import { getUserProfile } from '@/api/user'
import { onMounted, ref } from 'vue'
import * as AuthUtils from '@/utils/auth'
import { useRouter } from 'vue-router'
import Dialog from '@/components/Dialog.vue'
import { useI18n } from 'vue-i18n'
const { t } = useI18n()

const router = useRouter()
const dialogRef = ref()
const menuList = [
    {
        title: t('profile.settings'),
        icon: 'profile-settings',
        route: '/settings'
    },
    {
        title: t('profile.i_f'),
        icon: 'profile-user-plus',
        route: '/invitation'
    },
    {
        title: t('profile.notification'),
        icon: 'profile-bell',
        route: '/notification'
    }
]

const profile = ref({
    username: '',
    avatar: '',
    invitationCode: '',
    memberLevel: '',
    balance: 0,
    freezeBalance: '',
    earnCommission: '',
    dailyTask: '',
    completedTask: '',
    ratio: '1',
    withdrawalSuccess: 0,
    todayOrder: 0,
    todayOrderAmount: 0,
    todayCommission: 0,
    todayIncome: 0,
    totalIncome: 0,
    totalOrder: 0,
    totalCommission: 0
})

const toNext = (path: string) => {
    router.push(path)
}

const toDailySignIn = () => {
    router.push('/daily-check-in')
}

const getProfile = async () => {
    const res = await getUserProfile()
    profile.value = res
    localStorage.setItem('profile', JSON.stringify(res))
}

const logout = () => {
   
    AuthUtils.removeToken()
    router.push('/sign-in')
}

// 挂载时调用
onMounted(async () => {
    await getProfile()
})

</script>



<style scoped>
.top-wrapper {
    background: linear-gradient(90deg, #F70 0%, #FF4900 100%);

}

.level-bg {
    background: linear-gradient(#FFE3A2 100%, #FFC05E 100%);
}

.van-btn {
    --van-button-primary-color: #FF4900;
    --van-button-default-radius: 20px;
}
</style>