<template>
    <app-view class="mine-generalize">
        <template #header>
            <app-navbar title="我的推广" />
        </template>
        <div class="mine-generalize__header">
            <div class="rank" v-if="userLevelInfo">
                <div class="rank-container">
                    <div class="rank-container__level">
                        <h1>{{ userLevelInfo.levelgroup }}</h1>
                        <span>{{ userLevelInfo.checkday }}到期</span>
                    </div>
                    <div class="rank-container__next" v-if="userLevelInfo.notyet">
                        <div class="upgrade">
                            <div class="upgrade-left">
                                <span>{{ userLevelInfo.appup }}</span>
                            </div>
                            <div class="upgrade-right">
                                <span>距</span>
                                <span>{{ userLevelInfo.nextlevelgroup }}</span>
                                <span>还需</span>
                                <span>{{ userLevelInfo.notyet }}</span>
                            </div>
                        </div>
                        <Progress :percentage="userLevelInfo.progress * 100" :show-pivot="false" color="#fff"
                            track-color="rgba(255,255,255,.35)" />
                    </div>
                </div>
            </div>
            <div class="info">
                <ul>
                    <li>
                        <h4>推广人数</h4>
                        <span>{{ userAccount.refercount }}</span>
                    </li>
                    <li>
                        <h4>当日新增</h4>
                        <span>{{ userAccount.todayrefercount }}</span>
                    </li>
                    <li>
                        <h4>推广编号</h4>
                        <span @click="showQRCode = true">{{ userAccount.refernum }}</span>
                    </li>
                </ul>
            </div>
            <DropdownMenu>
                <DropdownItem v-model="selectedMenu" :options="dropdownMenus" @change="onMenuChange" />
                <DropdownItem v-model="selectedType" :options="dropdownTypes" />
            </DropdownMenu>
        </div>
        <trade-data :marketid="selectedType" v-if="selectedMenu === 0" />
        <promotion :status="selectedType" v-if="selectedMenu === 1" />
        <app-register-code v-model:show="showQRCode" :text="userAccount.refernum" />
    </app-view>
</template>

<script lang="ts" setup>
import { shallowRef, computed } from 'vue'
import { DropdownItem, DropdownMenu, Progress } from 'vant'
import { loginStore } from '@/stores'
import { queryUserLevelInfo } from '@/services/api/common'
import { queryUserAccount } from '@/services/api/account'
import AppRegisterCode from '@mobile/components/modules/register-code/index.vue'
import TradeData from './components/tradedata/index.vue'
import Promotion from './components/promotion/index.vue'
import { Market, getTHJMarketList } from '@/constants/market'

const { userId } = loginStore.$mapGetters()
const showQRCode = shallowRef(false)
const selectedMenu = shallowRef(0)
const selectedType = shallowRef(Market.THJ)
const userLevelInfo = shallowRef<Model.UserLevelInfoRsp>()

const userAccount = shallowRef<Partial<Model.UserAccount>>({
    todayrefercount: 0,
    refercount: 0,
})

const dropdownMenus = [
    { text: '交易数据', value: 0 },
    { text: '推广收益', value: 1 }
]

const dropdownTypes = computed(() => {
    switch (selectedMenu.value) {
        case 0: {
            return getTHJMarketList().map((e) => ({
                text: e.label,
                value: e.value,
            }))
        }
        case 1: {
            return [
                { text: '未支付', value: 1 },
                { text: '支取中', value: 3 },
                { text: '已支付', value: 2 }
            ]
        }
    }
    return []
})

// 切换菜单
const onMenuChange = () => {
    if (selectedMenu.value === 0) {
        selectedType.value = Market.THJ
    } else {
        selectedType.value = 1
    }
}

queryUserAccount({
    userID: userId.value
}).then((res) => {
    userAccount.value = res.data
})

queryUserLevelInfo({
    userid: userId.value
}).then((res) => {
    userLevelInfo.value = res.data
})
</script>

<style lang="less">
@import './index.less';
</style>