<template>
    <section id="startPage" class="bg-theme min-h-[100vh] overflow-y-scroll relative">
        <van-navBar :title="t('start.title')">
        </van-navBar>
        <div class="mx-4 my-3">
            <div class="vip-card-wrapper h-[152px] sm:h-44 rounded-2xl flex flex-row justify-around">
                <div class="flex flex-col">
                    <div class="flex flex-row mt-5 ml-5 items-center justify-start">
                        <SvgIcon name="vip" class="w-8 h-8 mr-2" />
                        <span class="font-bold text-base text-white">LV.{{ userInfo.memberLevel }}</span>
                    </div>
                    <div class="flex flex-row font-bold text-st text-white mt-4 ml-5">
                        <span>{{ t('start.daily_order') }}: </span>
                        <span>{{ userInfo.dailyTask }}</span>
                    </div>
                    <div class="flex flex-row font-bold text-st text-white mt-4 ml-5">
                        <span>{{ t('start.commission_ration') }}:</span>
                        <span class="ml-1">{{ userInfo.ratio }}%</span>
                    </div>
                </div>
                <div>
                    <div class="relative text-white text-st font-medium w-32 h-full ml-6">
                        <div class="absolute top-2 right-6">
                            <div class="flex flex-row items-center justify-center">
                                <div>
                                    <div>LV.3</div>
                                    <div>1500</div>
                                </div>
                                <div class="ml-1 w-2 h-2 rounded-full bg-white border-solid border-2"
                                    :class="[userInfo.memberLevel == 3 ? 'level-active-border' : 'level-inactive-border']">
                                </div>
                            </div>
                        </div>
                        <div class="absolute top-10 left-6">
                            <div class="flex flex-row items-center justify-center">
                                <div>
                                    <div>LV.2</div>
                                    <div>1000</div>
                                </div>
                                <div class="ml-1 w-2 h-2 rounded-full bg-white  border-solid border-2"
                                    :class="[userInfo.memberLevel == 2 ? 'level-active-border' : 'level-inactive-border']">
                                </div>
                            </div>
                        </div>
                        <div class="absolute  bottom-10 left-20">
                            <div class="flex flex-row items-center justify-center">
                                <div>
                                    <div>LV.1</div>
                                    <div>500</div>
                                </div>
                                <div class="ml-1 w-2 h-2 rounded-full bg-white  border-solid border-2"
                                    :class="[userInfo.memberLevel == 1 ? 'level-active-border' : 'level-inactive-border']">
                                </div>
                            </div>
                        </div>
                        <div class="absolute bottom-2 left-8">
                            <div class="flex flex-row items-center justify-center">
                                <div>
                                    <div>LV.0</div>
                                    <div>{{ t('start.free') }}</div>
                                </div>
                                <div class="ml-1 w-2 h-2 rounded-full bg-white border-solid border-2"
                                    :class="[userInfo.memberLevel == 0 ? 'level-active-border' : 'level-inactive-border']">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="bg-white mx-4 p-5 rounded-xl ">
            <!-- my account -->
            <div class="flex flex-row items-start justify-between ">
                <div class="flex flex-col text-left">
                    <div class="text-st font-medium">USDT {{ userInfo.earnCommission }}</div>
                    <div class="text-ss text-gray-500 mt-2">{{ t('start.earned') }}</div>
                </div>
                <div class="flex flex-col text-right">
                    <div class="text-st font-medium ">USDT {{ userInfo.freezeBalance }}</div>
                    <div class="text-ss text-gray-500 mt-2">{{ t('start.frozen') }}</div>
                </div>
            </div>
            <van-divider :style="{ borderColor: '#dadee6' }" />
            <div class="flex flex-row items-start justify-between ">
                <div class="flex flex-col text-left">
                    <div class="text-st font-medium">{{ userInfo.completedTask }}/{{ userInfo.dailyTask }}</div>
                    <div class="text-ss text-gray-500 mt-2">{{ t('start.completed_order') }}</div>
                </div>
                <div class="flex flex-col text-right">
                    <div class="text-st font-medium ">USDT {{ userInfo.balance }}</div>
                    <div class="text-ss text-gray-500 mt-2">{{ t('start.available') }}</div>
                </div>
            </div>
            <van-divider :style="{ borderColor: '#dadee6' }" />
            <!-- <div class="flex flex-row items-start justify-between ">
                <div class="flex flex-col text-left">
                    <div class="text-st font-medium ">USDT {{ userInfo.freezeCommission }}</div>
                    <div class="text-ss text-gray-500 mt-2">{{ t('start.freeze_commission') }}</div>
                </div>
                <div class="flex flex-col text-left w-1/2">
                    <div class="text-ss text-gray-500 mt-2">{{ t('start.freeze_c_desc') }}</div>
                </div>
            </div>
            <van-divider :style="{ borderColor: '#dadee6' }" /> -->
            <div class="mt-8">
                <van-button block color="linear-gradient(90deg, #F70 0%, #FF4900 100%)" class="font-semibold btn"
                    @click="handleGrabOrder" :disabled="disabled">{{ t('start.g_order') }}</van-button>
            </div>
        </div>
        <div class="h-4 mx-4 mt-4">
            <div class="p-4 bg-white rounded-md">
                <h2 class="text-base font-bold text-[#1D1F24]">{{ t('start.order_desc') }}</h2>
                <p class="text-st text-gray-700 mb-2">{{ t('start.order_desc_1') }}</p>
                <p class="text-st text-gray-700 mb-2">{{ t('start.order_desc_2') }}</p>
                <p class="text-st text-gray-700 mb-2">{{ t('start.order_desc_3') }}</p>
                <p class="text-st text-gray-700 mb-2">{{ t('start.order_desc_5') }}</p>
                <p class="text-st text-gray-700 mb-2">{{ t('start.order_desc_6') }}</p>
                <h2 class="text-base font-bold text-[#1D1F24]">{{ t('start.order_n') }}</h2>
                <p class="text-st text-gray-500 mb-2">{{ t('start.order_n_1') }}</p>
            </div>
            <div class="h-20"></div>
        </div>
        
        <GrabOrder ref="grabOrderRef" @success="successGrabOrder"  @retrieveTaskSuccess="handleRetrieveTaskSuccess"/>
        <OrderDetails ref="orderDetailsRef" @success="successSubmit" />
        <Success ref="successRef" />
    </section>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import SvgIcon from '@/components/SvgIcon.vue';
import { getUserDetails } from '@/api/user'
import { onMounted } from 'vue';
import GrabOrder from './components/GrabOrder.vue';
import OrderDetails from './components/OrderDetails.vue';
import Success from '@/components/Success.vue';
import type { OrderItem } from './types';
import { useI18n } from 'vue-i18n'
const { t } = useI18n()

const grabOrderRef = ref()
const orderDetailsRef = ref()
const successRef = ref()
const isContinue = ref(false)
const userInfo = ref({})
const disabled = ref(false)

// 获取账户信息
const getUserInfo = async () => {
    const res = await getUserDetails()
    userInfo.value = res;
}

const handleGrabOrder = async () => {
    disabled.value = true
    grabOrderRef.value.open()
}

const successGrabOrder = async (item: OrderItem) => {
    if (item.combo == 1) {
        isContinue.value = true
    } else {
        isContinue.value = false
    }
    orderDetailsRef.value.open(item)
    await getUserInfo()

}

const successSubmit = async (data: any) => {
    if (isContinue.value) {
        grabOrderRef.value.open()
    } else {
        successRef.value.open()
        await getUserInfo()
    }
}

const handleRetrieveTaskSuccess = () => {
    disabled.value = false
}

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

</script>

<style scoped >
.vip-card-wrapper {
    background-image: url('@/assets/imgs/start/card-vip-bg.png'), linear-gradient(131deg, #FD5401 0%, #FE9005 100%);
    background-size: cover;
    background-repeat: no-repeat;
}

.btn {
    --van-button-radius: 10px;
    box-shadow: 0px 4px 12px 0px rgba(255, 119, 0, 0.25);
}

.level-active-border {
    @apply border-[#FD5401FF]
}

.level-inactive-border {
    @apply border-[#CBC7C5]
}</style>