<template>
    <!-- 公共组件 -->
    <div class="info">
        <v-head :title="'Withdraw'" :show_more="true" :show_help="true" :back_url="'/'"></v-head>
        <template v-if="showCurrencySelect">
            <div class="selectDiv">
                <currency-select 
                    ref="currencySelectDom"
                    :list="tempCurrentCurrencyList"
                    @selectCurrency="selectCurrencyAfter">
                </currency-select>
            </div>
            <div class="selectBg" @click="showCurrencySelect = false"></div>
        </template>
        <currency-list style="height: calc(100% - 48px);" :filterEmptyBalance="true" @selectCurrency="selectCurrency" ></currency-list>
    </div>

</template>

<script setup>
import VHead from '@/view/popup/components/head.vue'
import CurrencyList from "@/view/components/currency-list.vue";
import currencySelect from "@/view/components/currency-select.vue";
import router from "@/router/popup.js";
import Report from "@/log-center/log";
import { inject, onMounted, ref } from 'vue'

let withdraw_info = inject('withdraw_info')
let showCurrencySelect = ref(false)
let tempCurrentCurrencyList = ref([])

function selectCurrency(params) {
    let { currencies } = params;
    tempCurrentCurrencyList.value = currencies;
    if (currencies.length > 1) {
        showCurrencySelect.value = true;
    } else {
        selectCurrencyAfter(currencies[0])
    }
}

function selectCurrencyAfter(_params) {
    if (_params.currencyCode == 'USD') {
        withdraw_info.currency_code = _params.currencyCode
        withdraw_info.chainInfo = _params.chainInfo
        showCurrencySelect.value = false
        router.push('/withdraw/paypal')
    } else {
        withdraw_info.source = 'home'
        withdraw_info.chainInfo = _params.chainInfo
        withdraw_info.balance = _params.balance
        withdraw_info.token_symbol = _params.tokenSymbol || ''
        withdraw_info.currency_name = _params.currencyName || ''
        withdraw_info.token_chain = _params.tokenChain || 'BNB Chain'
        // withdraw_info.token_chain = 'BNB Smart Chain (BEP20)'
        withdraw_info.currency_code = _params.currencyCode
        withdraw_info.icon_token = _params.iconPath || ''
        withdraw_info.icon_net = require('@/assets/svg/icon-BNB.svg')
        showCurrencySelect.value = false
        router.push('/withdraw/info')
    }
}

onMounted(() => {
    Report.reportLog({
        pageSource: Report.pageSource.denetWithdrawSelector,
        businessType: Report.businessType.pageView,
    });
})
</script>


<style lang='scss' scoped>
.info {
    height: 100%;
    overflow: hidden;
}
.selectDiv {
    position: absolute;
    z-index: 1000;
    width: 100%;
    max-height: 480px;
    padding-bottom: 30px;
    left: 0;
    bottom: 0;
    background-color: #fff;
    border-radius: 20px 20px 0 0;
    overflow-y: auto;
}
.selectBg {
    position: absolute;
    z-index: 999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba($color: #000000, $alpha: 0.6);
}
</style>
