<template>
    <view class="main">
        <view class="contentBody">
            <!-- 用户头像和id -->
            <view class="userInfo">
                <u-image class="headImg" src="../../static/me/Ellipse 85.png" width="160rpx" height="160rpx"
                    radius="160rpx"></u-image>
                <view class="idAndAccount">
                    <view class="id">ID:984934</view>
                    <view class="account">{{ i18n.account }}:348798457498579</view>
                </view>
            </view>
            <!-- 三个按钮 -->
            <view class="btnDiv" >
                <!-- 充值 -->
                <view class="item" id='recharge' @click="goto">
                    <view class="img" id='recharge'></view>
                    <view class="title" id='recharge'>{{ i18n.Recharge }}</view>
                </view>
                <!-- 取现 -->
                <view class="item" id='withdrawal'  @click="goto">
                    <view class="img" id='withdrawal'></view>
                    <view class="title" id='withdrawal'>{{ i18n.Withdrawal }}</view>
                </view>
                <!-- 兑换 -->
                <view class="item" id='transfer'  @click="goto">
                    <view class="img" id='transfer'></view>
                    <view class="title" id='transfer'>{{ i18n.Transfer }}</view>
                </view>
            </view>
            <!-- 余额相关 -->
            <view class="balanceRow">
                <!-- 可用余额 -->
                <view class="item">
                    <view class="number">0</view>
                    <view class="title">{{ i18n.Balance }}</view>
                </view>
                <!-- 质押余额 -->
                <view class="item">
                    <view class="number">0</view>
                    <view class="title">{{ i18n.Pledge }}</view>
                </view>
                <!-- 合约余额 -->
                <view class="item">
                    <view class="number">0</view>
                    <view class="title">{{ i18n.Contarct }}</view>
                </view>
            </view>
            <!-- General -->
            <view class="GeneralPart">
                <view class="General">{{ i18n.General }}</view>
                <view class="list" @click="goto">
                    <!-- 邀请朋友 -->
                    <view class="item" id="InviteFriends">{{ i18n.InviteFriends }}</view>
                    <!-- 账户信息 -->
                    <view class="item" id="AccountInfo">{{ i18n.AccountInfo }}</view>
                    <!-- 我的团队 -->
                    <view class="item" id="MyTeam">{{ i18n.MyTeam }}</view>
                    <!-- 钱包历史 -->
                    <view class="item" id="WalletHistory">{{ i18n.WalletHistory }}</view>
                    <!-- 通知 -->
                    <view class="item" id="Notification">{{ i18n.Notification }}</view>
                    <!-- 捐赠记录 -->
                    <view class="item" id="DonateRecord">{{ i18n.DonateRecord }}</view>
                    <!-- 语言 -->
                    <view class="item" id="Language">{{ i18n.Language }}</view>
                    <!-- 关于我们 -->
                    <view class="item" id="AboutUs">{{ i18n.AboutUs }}</view>
                </view>
            </view>

            <!-- 退出登录 -->
            <u-button class="logOutButton" color="#323045" throttleTime="500">
                <view class="title">{{ i18n.LogOut }}</view>
            </u-button>

        </view>


        <!-- tabBar -->
        <tab-bar :selectActive="5"></tab-bar>
    </view>
</template>

<script>
export default {
    name: 'me',
    data() {
        return {

        }
    },
    onLoad() {

    },
    onShow() {

    },
    onHide() {
    },
    computed: {
        i18n() {
            return this.$t('me')
        }
    },
    methods: {
        goto(e) {
            // console.log(e.target);
            // console.log(e.target.id);
            const id = e.target.id;
            let url = '';
            switch (id) {
                case 'recharge':
                    url = '/pages/recharge/recharge'
                    break;
                case 'withdrawal':
                    url = '/pages/withdrawal/withdrawal'
                    break;
                case 'transfer':
                    url = '/pages/me/transfer'
                    break;
                case 'InviteFriends':
                    url = '/pages/me/inviteFriends'
                    break;
                case 'AccountInfo':
                    url = '/pages/me/accountInfo'
                    break;
                case 'MyTeam':
                    url = '/pages/me/myTeam'
                    break;
                case 'WalletHistory':
                    url = '/pages/me/walletHistory'
                    break;
                case 'Notification':
                    url = '/pages/me/notification'
                    break;
                case 'DonateRecord':
                    url = '/pages/me/donateRecord'
                    break;
                case 'Language':
                    url = '/pages/me/language'
                    break;
                case 'AboutUs':
                    break;
                default:
                    break;
            }
            if (url) {
                // console.log(url);
                uni.navigateTo({
                    url,
                });
            }

        }
    }
}

</script>

<style lang="scss" scoped>
.main {
    padding-top: 88rpx;
    padding-bottom: 198rpx; // 避免底部TabBar盖住内容

    .contentBody {

        box-sizing: border-box;
        width: 100%;
        background: #211F32;
        border-radius: 64rpx 64rpx 0 0;
        padding: 44rpx 48rpx;
        overflow: hidden;


        .userInfo {
            height: 168rpx;
            display: flex;
            flex-wrap: wrap;

            .headImg {
                height: 160rpx;
                width: 160rpx;
                border-radius: 160rpx;
                border: 4rpx solid #F6A609;
            }

            .idAndAccount {
                margin-left: 40rpx;

                .id {
                    height: 56rpx;
                    width: 378rpx;
                    font-weight: 600;
                    font-size: 40rpx;
                    margin: 16rpx 0;
                }

                .account {
                    position: relative;
                    height: 56rpx;
                    line-height: 56rpx;
                    width: 378rpx;
                    background: rgba(255, 188, 31, 0.1);
                    border-radius: 16rpx;
                    font-size: 24rpx;
                    color: #FFBC1F;
                    text-align: center;
                    padding-left: 20rpx;

                    &::before {
                        display: block;
                        position: absolute;
                        content: '';
                        background-image: url(../../static/me/ranking.png);
                        background-repeat: no-repeat;
                        background-size: 32rpx;
                        width: 32rpx;
                        height: 32rpx;
                        top: 12rpx;
                        left: 20rpx;
                    }
                }
            }


        }

        .btnDiv {
            margin: 32rpx 0;

            .item {
                display: inline-block;
                width: 200rpx;
                height: 190rpx;
                text-align: center;
                background: #323045;
                border-radius: 52rpx;
                box-sizing: border-box;

                .img {
                    height: 64rpx;
                    width: 64rpx;
                    margin: 32rpx auto;
                    background-image: url(../../static/me/ic_u_recharge.png);
                    background-repeat: no-repeat;
                    background-size: 64rpx;

                }

                &:nth-child(2) {
                    margin: 0 26rpx;

                    .img {
                        background-image: url(../../static/me/ic_u_withdrawal.png);
                    }
                }

                &:nth-child(3) .img {
                    background-image: url(../../static/me/ic_u_transfer.png);
                }

                .title {
                    font-size: 26rpx;
                }


            }


        }

        .balanceRow {
            margin: 32rpx 0;
            background: #323045;
            border-radius: 52rpx;
            box-sizing: border-box;

            .item {
                display: inline-block;
                width: 218rpx;
                height: 200rpx;
                text-align: center;


                .number {
                    margin: 32rpx auto;
                    font-size: 48rpx;


                }



                .title {
                    font-size: 28rpx;
                }


            }


        }

        .GeneralPart {
            .General {
                font-size: 28rpx;
                color: #A1A0A8;
            }

            .list {
                font-size: #fff;

                .item {
                    position: relative;
                    height: 116rpx;
                    font-size: 32rpx;
                    line-height: 116rpx;
                    border-bottom: 2rpx solid #323045;

                    &::after {
                        display: block;
                        position: absolute;
                        content: '';
                        background-image: url(../../static/me/arrow-right.png);
                        background-repeat: no-repeat;
                        background-size: 48rpx;
                        width: 48rpx;
                        height: 48rpx;
                        top: 32rpx;
                        right: 0rpx;
                    }

                    &:last-child {
                        border-bottom: none;
                    }
                }
            }
        }

        .logOutButton {
            position: relative;
            margin-top: 14rpx;
            height: 112rpx;
            line-height: 112rpx;
            border-radius: 32rpx;
            font-size: 36rpx;
            color: #A1A0A8 !important;


            .title {
                padding-left: 80rpx;

                &::before {
                    display: block;
                    position: absolute;
                    content: '';
                    background-image: url(../../static/me/ic_logout.png);
                    background-repeat: no-repeat;
                    background-size: 48rpx;
                    width: 48rpx;
                    height: 48rpx;
                    top: 30rpx;
                    left: 220rpx;
                }
            }


        }

    }





}
</style>
