<template>
    <view class="wallet-info">
        <view class="wi-bar" @click="$emit('click:admin')">
            <view class="wb-txt">钱包查账可登录后台查阅</view>
            <image class="wb-icon" mode="aspect" src="@/subpackage/wallet/static/images/arrow_b2.png"></image>
        </view>
        <view class="wi-account">
            <veiw class="wa-top">
                <view class="wt-name">欧轩内部钱包账户余额</view>
                <view class="wt-record" @click="$emit('click:record')">
                    <text>充值记录</text>
                    <image class="wr-icon" mode="aspect" src="/subpackage/wallet/static/images/arrow_b2.png"></image>
                </view>
            </veiw>
            <view class="wa-tip">(用于购买服务使用)</view>
            <view class="wa-balance">
                <view class="wb-money">
                    <text class="wm-unit">¥</text>
                    {{ balance }}
                </view>
                <view class="wb-btn" @click="$emit('click:recharge')">充值</view>
            </view>
        </view>
        <view class="wi-btns">
            <view class="wb-item" @click="$emit('click:baofu')">
                <text class="wi-txt">宝付提现</text>
            </view>
            <view class="wb-item" @click="$emit('click:douyin')">
                <!-- 【241024】 “抖音提现”文案改为“平台提现”，原有的抖音logo去掉 -->
                <!-- <image class="wi-icon" mode="aspect" src="@/subpackage/wallet/static/images/dy_logo.png"></image> -->
                <text class="wi-txt">平台提现</text>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    props: {
        balance: {
            type: Number,
            default: 0
        }
    },
    methods: {
        
    }
}
</script>

<style lang="scss">
    .wallet-info{
        border-radius: 30upx;
        overflow: hidden;
        background: #fff;
        .wi-bar{
            padding-left: 40upx;
            padding-right: 40upx;
            height: 76upx;
            background: #585F69;
            @include ctf(space-between);
            .wb-txt{
                @include flcw(24upx, 34upx, #FFFFFF);
            }
            .wb-icon{
                width: 20upx;
                height: 20upx;
            }
        }
        .wi-account{
            padding: 36upx 40upx 50upx;
            .wa-top{
                @include ctf(space-between);
                .wt-name{
                    @include flcw(32upx, 44upx, #1A1A1A, 500);
                    @include tHide;
                }
                .wt-record{
                    @include ctf(flex-end);
                    @include flcw(24upx, 34upx, #9C9C9F);
                    .wr-icon{
                        margin-left: 4upx;
                        width: 20upx;
                        height: 20upx;
                    }
                }
            }
            .wa-tip{
                margin-top: 8upx;
                @include flcw(24upx, 34upx, #9C9C9F);
            }
            .wa-balance{
                margin-top: 68upx;
                @include ctf(space-between);
                .wb-money{
                    @include flcw(84upx, 96upx, #000000, 700);
                    @include tHide;
                    .wm-unit{
                        font-size: 44upx;
                    }
                }
                .wb-btn{
                    flex-shrink: 0;
                    margin-left: 10upx;
                    width: 120upx;
                    text-align: center;
                    border-radius: 10upx;
                    background: #FF873D;
                    @include flcw(24upx, 56upx, #FFFFFF, 500);
                }
            }
        }
        .wi-btns{
            border-top: 1px solid rgba($color: #000000, $alpha: .1);
            padding: 32upx 40upx 40upx;
            @include ctf(space-between);
            .wb-item{
                flex-grow: 0;
                flex-shrink: 0;
                height: 112upx;
                width: 284upx;
                border-radius: 26upx;
                background-image: linear-gradient(180deg, #7ACFEE 0%, #44A1D7 100%);
                @include ctf(center);
                .wi-icon{
                    flex-shrink: 0;
                    margin-right: 4upx;
                    width: 44upx;
                    height: 44upx;
                }
                .wi-txt{
                    @include flcw(32upx, 44upx, #FFFFFF, 500);
                }
                &+.wb-item{
                    background-image: linear-gradient(180deg, #4A4A4A 0%, #000000 100%);
                }
            }
        }
    }
</style>