<template>
    <mobile-sub-layout :title="$t('deposit.title')">
        <template #header-right>
            <view class="history flex-center flex-column" @click.stop="handleHistoryClick">
                <theme-image src="@/static/deposit_log.png" mode="aspectFit" style="width: 42rpx; height: 42rpx;" />
                <text style="font-size: 13px; white-space: no-wrap;" :style="{ color: themeStore.theme.wallet.normal }">{{
                    $t('deposit.history')
                }}</text>
            </view>
        </template>
        <view class="deposit-container" :style="{ 'background': themeStore.theme.deposit.bgLinear }">
            <!-- <view v-if="depositStore.tabList && depositStore.tabList.length > 1" class="deposit-tabs-view"
                :style="{ 'background': themeStore.theme.bgColor, 'top': appStore.headerStyle.height + 'px' }">
                <NormalTabs v-model="pageData.active" :normalColor="themeStore.theme.tabs.normal"
                    :activeColor="themeStore.theme.tabs.active" :tabList="depositStore.tabList"
                    @change="handleTabChange" />
                <view style="height: 8rpx;" :style="{ 'background': themeStore.theme.darkSeplineColor }"></view>
            </view>  -->
            <view v-if="walletType.length > 1" class="deposit-tab w-full flex items-center"
                :style="{ background: themeStore.theme.wallet.tabBg, top: (screen.statusBarHeight + 50) + 'px' }">
                <view v-for="(item, index) in walletType" :key="index" class="tab-item flex-center flex-1 relative" :style="{
                    background: item.type == depositStore.activeType ? themeStore.theme.wallet.tabActiveBg : '',
                    color: item.type == depositStore.activeType ? themeStore.theme.wallet.tabActiveText : themeStore.theme.wallet.tabText,
                }" @click="handleTabChange(item)">
                    <text>{{ item.label }}</text>
                    <theme-image v-if="item.iconUrl" class="tab-icon" :src="item.iconUrl" mode="aspectFit" />
                </view>
            </view>
            <empty-hold v-if="walletType.length > 1" height="50px"></empty-hold>
            <view v-show="depositStore.activeType === 1 || depositStore.activeType === 2">
                <OnlineDeposit v-if="appStore.phoneNumberPrefix === '+91'" />
                <OnlineDepositOldV1 v-else />
            </view>
            <view v-show="selectIndex === 2">
                <TransferDeposit v-if="appStore.phoneNumberPrefix === '+91'" />
                <TransferDepositOld v-else />
            </view>
            <view v-show="selectIndex === 3">
                <AgencyDeposit />
            </view>
            <view v-show="depositStore.activeType === 4">
                <CryptoDeposit />
            </view>
        </view>
    </mobile-sub-layout>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app'
import { reactive, ref } from 'vue'
import { useThemeStore } from '@/store/useThemeStore'
import OnlineDeposit from './components/OnlineDeposit.vue'
import OnlineDepositOldV1 from './components/OnlineDepositOldV1.vue'
import TransferDeposit from './components/TransferDeposit.vue'
import TransferDepositOld from './components/TransferDepositOld.vue'
import AgencyDeposit from './components/AgencyDeposit.vue'
import CryptoDeposit from './components/CryptoDeposit.vue'
import DepositTabsItem from './components/DepositTabsItem.vue'
import { useDepositStore } from '@/store/useDepositStore.js'
import Toast from '@/module/toast/toast.js'
import NormalTabs from '@/components/tabs/NormalTabs.vue'
import { useAppStore } from '@/store/useAppStore.js'
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'

const screen = uni.getWindowInfo()
const { t } = useI18n()
const themeStore = useThemeStore()
const depositStore = useDepositStore()
const appStore = useAppStore()
const walletType = computed(() => {
    return depositStore.walletTab
})
const pageData = reactive({
    active: 0
})

const selectIndex = computed(() => {
    if (depositStore.tabList && depositStore.tabList.length) {
        return depositStore.tabList[pageData.active].key
    } else {
        return 1
    }
})

const handleTabChange = (val) => {
    console.log(val);
    depositStore.changeTab(val.type)
}

onLoad(async () => {
    Toast.showLoading('Loading')
    await depositStore.getChargeInfo()
    Toast.hideLoading()
})

const handleHistoryClick = () => {
    uni.navigateTo({
        url: '/pages/wallet/DepositHistory'
    })
}

</script>

<style lang="scss" scoped>
.deposit-container {
    position: relative;

    .deposit-tab {
        height: 83rpx;
        position: fixed;
        left: 0rpx;
        z-index: 50;

        .tab-item {
            height: 100%;
            font-family: Roboto;
            font-weight: 400;
            font-size: 25rpx;

            .tab-icon{
                position: absolute;
                top: 0;
                right: 0;
                width: 92rpx;
                height: 31rpx;
            }
        }
    }

    .deposit-tabs-view {
        position: fixed;
        left: 0rpx;
        right: 0rpx;
        height: 100rpx;
        z-index: 50;
    }
}
</style>