<template>
    <section class="max-w-xl m-auto min-h-[calc(100vh-40px)] box-bg">
        <van-nav-bar :title="t('settings.title')">
            <template #left>
                <SvgIcon name="allow-left" class="w-7 h-7" @click="$router.back" />
            </template>
        </van-nav-bar>
        <div class="active-vip-0 mx-4 rounded-md">
            <div class="flex flex-row items-center justify-around">
                <span class="text-[32px] font-bold text-[#AF771F] italic">LV. {{ userLevelInfo.memberLevel }}</span>
                <SvgIcon name="vip-vip0-icon" class="w-24 h-20" />
            </div>
            <div class="flex flex-row items-center justify-around mx-4 my-4">
                <div class="flex flex-col">
                    <span class="text-md font-bold text-black">{{ userLevelInfo.dailyOrders }}</span>
                    <span class="text-[11px] text-[#AEAEB2]">{{ t('settings.d_o') }}</span>
                </div>
                <div class="flex flex-col">
                    <span class="text-md font-bold text-black">{{ userLevelInfo.dailyWithdraw }}</span>
                    <span class="text-[11px] text-[#AEAEB2]">{{ t('settings.d_w') }}</span>
                </div>
                <div class="flex flex-col">
                    <span class="text-md font-bold text-black">{{ userLevelInfo.commissionRate }}%</span>
                    <span class="text-[11px] text-[#AEAEB2]">{{ t('settings.c') }}</span>
                </div>
                <div class="flex flex-col">
                    <span class="text-md font-bold text-black">{{ userLevelInfo.teamRewardRate }}%</span>
                    <span class="text-[11px] text-[#AEAEB2]">{{ t('settings.t_r') }}</span>
                </div>
            </div>
        </div>
        <div class="text-xl text-black font-bold m-4">{{ t('settings.a') }}</div>
        <div class=" pb-4">
            <div class="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>
    </section>
    <Dialog ref="dialogRef" />
</template>

<script setup lang="ts">
import SvgIcon from '@/components/SvgIcon.vue';
import { useRouter } from 'vue-router';

import { onMounted, ref } from 'vue';
import Dialog from '@/components/Dialog.vue';
import {getUserLevelInfo} from '@/api/user'
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
const router = useRouter()
const dialogRef = ref()
const userLevelInfo = ref({})


const menuList = [
    {
        title: t('settings.t_1'),
        icon: 'settings-personal-icon',
        route: '/settings/personal',
    },
    // {
    //     title: t('settings.t_2'),
    //     icon: 'settings-password-icon',
    //     route: '/settings/password',
    // },
    {
        title: t('settings.t_3'),
        icon: 'settings-currency-dollar-icon',
        route: '/channel-select/2',
    },
    {
        title: t('settings.t_4'),
        icon: 'settings-globe-alt-icon',
        route: '/settings/language',
    },
    {
        title: t('settings.t_5'),
        icon: 'settings-about-icon',
        route: '/settings/about',
    },
]

const vipInfo = async () => {
    const res =  await getUserLevelInfo() as any
    userLevelInfo.value = res
}

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



onMounted(async () => {
    await vipInfo()
})

</script>

<style scoped>
.active-vip-0 {
    border-radius: 16px;
    border: 1px solid #FFEACD;
    background: linear-gradient(105deg, #FFFAF1 0%, #FDF0DE 100%);
}

.active-vip-1 {
    border-radius: 16px;
    border: 1px solid #A6CBEC;
    background: linear-gradient(105deg, #F2F9FE 0%, #CBDDEC 100%);
}

.active-vip-2 {
    border-radius: 16px;
    border: 1px solid #FFC896;
    background: linear-gradient(105deg, #FFECD9 0%, #FFC891 100%);
}

.active-vip-3 {
    border-radius: 16px;
    border: 1px solid #6BBEFF;
    background: linear-gradient(105deg, #E5F3FF 0%, #ACD5FF 100%);
}

.active-vip-4 {
    border-radius: 16px;
    border: 1px solid #E0AEED;
    background: linear-gradient(105deg, #FAF6FF 0%, #E7CDFF 100%);
}
</style>
