<template>
    <view class="main">
        <view class="mainTopBox">
            <view class="mainTop">
                <view class="mainTopLeft">
                    <view class="mainTopHeaderImg">
                        <image class="headerImg" :src="user.MEMBERSHIP_HEADIMAGEURL || ''" />
                    </view>
                    <view class="mainTopLeftMessage">
                        <view class="mainTopMessageUserBox">
                            <view class="mainTopMessageUserName">{{ user.MEMBERSHIP_NAME || '' }}</view>
                            <view class="mainTopMessageUserLevelBox">
                                <image class="mainTopMessageUserLevelIcon"
                                    src="https://eshangtech.com/caiyunyiImg/levelIcon.png" />
                                <view class="mainTopMessageUserLevelText">{{ user.MEMBERSHIP_LEVEL_TEXT || '' }}</view>
                            </view>
                        </view>
                    </view>
                </view>

                <view class="mianTopRight">
                    <image class="userCodeImg" src="https://eshangtech.com/caiyunyiImg/userCodeImg.png" />
                    <view class="userCodeText">会员码</view>
                </view>
            </view>

            <view class="mainBottom">
                <view class="mainBottomLabel">我的余额</view>
                <view class="mainBottomValueBox">
                    <view class="mainBottomValueUnit">¥</view>
                    <view class="mainBottomValue">{{ user.ACCOUNT_BALANCE || "0" }}</view>
                </view>
            </view>
        </view>


        <view class="mainBalanceList">
            <view class="mainBalanceTabBox">
                <view :class="selectTab === 1 ? 'mainBalanceTabItem selectMainBalanceTabItem' : 'mainBalanceTabItem '"
                    @click="handleChangeTab(1)">
                    充值记录
                </view>
                <view :class="selectTab === 2 ? 'mainBalanceTabItem selectMainBalanceTabItem' : 'mainBalanceTabItem '"
                    @click="handleChangeTab(2)">
                    提现记录
                </view>

            </view>
        </view>
    </view>
</template>

<script>
import { mapGetters } from "vuex";
export default {
    data() {
        return {
            selectTab: 1,
        }
    },
    computed: {
        ...mapGetters({
            user: "user",
        })
    },
    onLoad() {
        console.log('user', JSON.parse(JSON.stringify(this.user)));
    },
    methods: {
        handleChangeTab(value) {
            this.selectTab = value
        }
    }
}
</script>
<style lang="less" scoped>
.main {
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
    padding: 32rpx 30rpx;
    background-color: #F1F5F6;

    .mainTopBox {
        width: 100%;
        height: 320rpx;
        background-image: url('https://eshangtech.com/caiyunyiImg/balanceBg.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        box-sizing: border-box;
        padding: 48rpx 32rpx 32rpx;

        .mainTop {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .mainTopLeft {
                display: flex;
                width: calc(100% - 120rpx);

                .mainTopHeaderImg {
                    width: 96rpx;
                    height: 96rpx;

                    .headerImg {
                        width: 96rpx;
                        height: 96rpx;
                        border-radius: 50%;
                        border: 1px solid #fff;
                    }
                }

                .mainTopLeftMessage {
                    width: calc(100% - 118rpx);
                    margin-left: 22rpx;

                    .mainTopMessageUserBox {
                        width: 100%;
                        display: flex;
                        align-items: center;

                        .mainTopMessageUserName {
                            font-family: PingFangSC, PingFang SC;
                            font-weight: 600;
                            font-size: 40rpx;
                            color: #F3E6B3;
                            line-height: 56rpx;
                            text-align: left;
                            font-style: normal;
                            display: inline-block;
                            max-width: calc(100% - 170rpx);
                            text-overflow: ellipsis;
                            overflow: hidden;
                            white-space: nowrap;
                        }

                        .mainTopMessageUserLevelBox {
                            max-width: 170rpx;
                            display: flex;
                            align-items: center;
                            background-color: #515050;
                            padding: 4rpx 18rpx;
                            border-radius: 32rpx;
                            margin-left: 16rpx;

                            .mainTopMessageUserLevelIcon {
                                width: 24rpx;
                                height: 24rpx;
                                margin-right: 10rpx;
                            }

                            .mainTopMessageUserLevelText {
                                font-family: PingFangSC, PingFang SC;
                                font-weight: 500;
                                font-size: 24rpx;
                                color: #F4DA7F;
                                line-height: 34rpx;
                                text-align: left;
                                font-style: normal;
                                text-transform: none;
                                display: inline-block;
                                width: calc(100% - 34rpx);
                                text-overflow: ellipsis;
                                overflow: hidden;
                                white-space: nowrap;
                            }
                        }
                    }
                }
            }

            .mianTopRight {
                width: 96rpx;
                display: flex;
                flex-direction: column;
                align-items: center;

                .userCodeImg {
                    width: 46rpx;
                    height: 46rpx;
                    margin-bottom: 10rpx;
                }

                .userCodeText {
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 400;
                    font-size: 24rpx;
                    color: #F3E6B3;
                    line-height: 34rpx;
                    text-align: left;
                    font-style: normal;
                }
            }
        }

        .mainBottom {
            width: 100%;
            margin-top: 36rpx;

            .mainBottomLabel {
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 32rpx;
                color: #F3E6B3;
                line-height: 44rpx;
                text-align: left;
                font-style: normal;
            }

            .mainBottomValueBox {
                display: flex;
                align-items: flex-end;
                margin-top: 12rpx;

                .mainBottomValueUnit {
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 600;
                    font-size: 28rpx;
                    color: #F3E6B3;
                    line-height: 40rpx;
                    text-align: left;
                    font-style: normal;
                }

                .mainBottomValue {
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 600;
                    font-size: 40rpx;
                    color: #F3E6B3;
                    line-height: 48rpx;
                    text-align: left;
                    font-style: normal;
                    margin-left: 4rpx;
                }
            }
        }
    }

    .mainBalanceList {
        width: 100%;
        height: calc(100vh - 400rpx);
        margin-top: 20rpx;
        background: #FFFFFF;
        border-radius: 16rpx;

        .mainBalanceTabBox {
            width: 100%;
            height: 94rpx;
            border-bottom: 2rpx solid #CCCCCC;
            display: flex;
            align-items: center;
            justify-content: space-around;

            .mainBalanceTabItem {
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 32rpx;
                color: rgba(0, 0, 0, 0.85);
                line-height: 44rpx;
                text-align: left;
                font-style: normal;
            }

            .selectMainBalanceTabItem {
                font-family: PingFangSC, PingFang SC;
                font-weight: 600;
                font-size: 32rpx;
                color: #333333;
                line-height: 44rpx;
                text-align: left;
                font-style: normal;
                position: relative;
            }

            .selectMainBalanceTabItem ::after {
                content: "";
                width: 100%;
                height: 6rpx;
                background: #51A0FF;
                border-radius: 6rpx;
                position: absolute;
                left: 0;
                bottom: 0;
            }
        }
    }
}
</style>