<template>
    <div class="page-wrapper" ref="pageWrapperDom">
        <div class="content">
            <div class="balance">
                <div class="wallet">
                    <font>Balance Valuation</font>
                </div>
            </div>
            <div class="amount-wrapper">
                <div class="amount">
                    <a-tooltip :title="'$' + canWithdrawBalance">
                        ${{ getBit(canWithdrawBalance) }}
                    </a-tooltip>
                </div>

                <div class="right">
                    <div class="bill" @click="showTransactions">
                        <red-dot class="red-dot" v-if="unReadCountWallet > 0"></red-dot>
                        <img :src="require('@/assets/svg/icon-home-list.svg')" />
                    </div>

                    <img
                        class="icon"
                        :src="require('@/assets/svg/icon-home-refresh.svg')"
                        :class="{ transform_rotate: iconRotate }"
                        @click="refreshList" />
                </div>
            </div>
        </div>

        <currency-list
            ref="currencyListDom"
            v-if="userInfo.accessToken"
            style="height: calc(100% - 103px);"
            :showRefresh="false"
            @selectCurrency="selectCurrency">
        </currency-list>
    </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import redDot from "@/components/red-dot.vue";
import CurrencyList from "@/components/currency-list.vue";
import { getChromeStorageFromExtension } from "@/uilts/chromeExtension";
import { getBalance } from "@/http/account";
import { getAllMessageInfo } from "@/http/messageApi"
import messageCenter from "@/uilts/messageCenter";
import MESSAGE_ENUM from "@/uilts/messageCenter/messageEnum";
import Report from "@/log-center/log";
import { getBit } from "@/uilts/help";

let userInfo = ref({});
let canWithdrawBalance = ref(0);
let isRequestWithdrawBalance = ref(false);
let router = useRouter()
let currencyListDom = ref('');
let iconRotate = ref(false)
let iframeId = 'de-nav-wallet-index-page';

// 钱包未读数
let unReadCountWallet = ref(0);

function selectCurrency(_params) {
    messageCenter.send({
        info: {
            actionType: MESSAGE_ENUM.IFRAME_SHOW_FOOTER_MENU,
            iframeId: iframeId
        },
        data: {
            showMenu: false,
        }
    })
    router.push({
        name: 'pageCurrencyDetail',
        query: {
            params: JSON.stringify(_params)
        }
    });
}

const init = () => {
    checkLoginState((res) => {
        if (res) {
            getAccountBalance();
            setMessageCount();
            if (window.location.pathname.indexOf('popup-page.html') > -1) {
                return
            }
            Report.reportLog({
                pageSource: Report.pageSource.denetHomePage,
                businessType: Report.businessType.pageView,
            }, {
                type: window.location.href.indexOf('home.html') > -1 ? 'web' : 'extensions'
            });
        } else {
            Report.reportLog({
                pageSource: Report.pageSource.denetLogin,
                businessType: Report.businessType.pageView,
            });
        }
    });
}

const setMessageCount = () => {
    getAllMessageInfo({
        params: {}
    }).then(res => {
        if (res.code == 0) {
            let { unReadCountTotal = 0, unReadCountWalletDetail = 0 } = res.data;
            unReadCountWallet.value = unReadCountWalletDetail;
            if (unReadCountTotal > 0) {
                let text = unReadCountTotal > 99 ? '99+' : unReadCountTotal + '';
                messageCenter.send({
                    info: {
                        actionType: MESSAGE_ENUM.IFRAME_MESSAGE_PAGE_SETBADGEINFO,
                        iframeId: iframeId
                    },
                    data: { text }
                })
            } else {
                messageCenter.send({
                    info: {
                        actionType: MESSAGE_ENUM.IFRAME_MESSAGE_PAGE_HIDEBADGE,
                        iframeId: iframeId
                    },
                    data: {}
                })
            }
        }
    });
}


/**
 * 获取账户余额
 */
const getAccountBalance = () => {
    isRequestWithdrawBalance.value = false;
    getBalance({}).then((res) => {
        isRequestWithdrawBalance.value = true;
        if (res.code == 0) {
            if (res.data) {
                canWithdrawBalance.value = res.data.allAssetValuationUSD;
            }
        }
    });
};

const getUserInfo = async (cb) => {
    const res = await getChromeStorageFromExtension("userInfo");
    cb && cb(res);
};

/**
 * 检查登录状态
 */
const checkLoginState = (cb) => {
    getUserInfo((res) => {
        if (res && res.accessToken) {
            userInfo.value = res;
        } else {
            userInfo.value = {};
        }
        cb && cb(res);
    });
};

const showTransactions = () => {
    messageCenter.send({
        info: {
            actionType: MESSAGE_ENUM.IFRAME_SHOW_FOOTER_MENU,
            iframeId: iframeId
        },
        data: {
            showMenu: false,
        }
    })
    router.push({ name: 'navWalletTransactions' })
};

const refreshList = () => {
    if (iconRotate.value) {
        return
    }
    iconRotate.value = true
    setTimeout(() => {
        iconRotate.value = false
    }, 1000)

    getAccountBalance();
    if (currencyListDom.value) {
        currencyListDom.value.refresh && currencyListDom.value.refresh();
    }
}

const onMessage = () => {
    messageCenter.listen(MESSAGE_ENUM.CONTENT_POPUP_PAGE_SHOW, () => {
        init();
        if (currencyListDom.value) {
            currencyListDom.value.getCurrencyInfoList && currencyListDom.value.getCurrencyInfoList();
        }
    })
}

onMounted(() => {
    onMessage();
    init();
});

</script>

<style lang="scss" scoped>
html,
body {
    padding: 0 !important;
    margin: 0 !important;
}

.page-wrapper {
    width: 375px;
    height: 100%;
    box-sizing: border-box;
    overflow-y: auto;

    .nav-bar {
        padding: 14px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .item {
            display: flex;
            align-items: center;
            font-size: 13px;
            cursor: pointer;

            img {
                width: 16px;
                height: 16px;
                margin-right: 4px;
            }
        }

        .left {
            font-weight: 500;
        }

        .right {
            color: #b6b6b6;
        }
    }

    .content {
        padding: 12px 16px 10px 16px;
        background: #1D9BF0;
        box-sizing: border-box;

        .icon-money {
            width: 70px;
            height: 70px;
        }

        .balance {
            display: flex;
            justify-content: space-between;

            .wallet {
                font {
                    font-size: 13px;
                    color: #fff;
                    opacity: 0.7;
                }
            }
        }

        .amount-wrapper {
            margin-top: 2px;
            font-weight: 700;
            font-size: 36px;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .amount {
                display: inline-block;
            }

            .right {
                display: flex;
                align-items: center;

                .bill {
                    height: 24px;
                    width: 24px;
                    position: relative;

                    img {
                        width: 24px;
                        height: 24px;
                        cursor: pointer;
                        position: absolute;
                        left: 0;
                        top: 0;
                    }

                    .red-dot {
                        position: absolute;
                        right: 0px;
                        top: -1px;
                        z-index: 100;
                    }
                }

                .icon {
                    margin-left: 22px;
                    cursor: pointer;
                }

                .transform_rotate {
                    transform: rotate(360deg);
                    transition-duration: 1s;
                }
            }
        }

        .msg {
            margin-top: 10px;
            font-size: 13px;
            color: #b6b6b6;
        }
    }



}

.page-wrapper::-webkit-scrollbar {
    display: none;
}
</style>
