<route lang="jsonc" type="page">
    {
        "needLogin": true,
        "layout": "default",
        "style": {
			"navigationStyle": "custom"
        }
    }
</route>

<template>
    <view class="home-bg">
        <view class="home-bg w-[100%] fixed top-0 left-0 z-100">
            <view>
                <navbar custom-class='!bg-[transparent]'></navbar>
            </view>
		</view>

        <view class="" :style="{ paddingTop: navbarHeight + 'px' }">
            <!-- 账号昵称显示 -->
			<view class="ml-60rpx flex items-center">
				<view>
					<wd-img width="120rpx" height="120rpx" :src="`${OSS}icon/icon_avatar.png`" mode="aspectFill" round />
				</view>
				<view class="flex-1 ml-22rpx flex justify-between items-center">
					<view @click="My.handleToProfile">
						<view class="text-[#303133] text-36rpx leading-50rpx ml-8rpx">昵称名称</view>
						<view class="flex justify-center items-center vip-bg mt-10rpx">
							<!-- 会员显示图标 -->
							<view class="flex items-center mr-12rpx">
								<wd-img width="36rpx" height="36rpx" mode="aspectFill" :src="`${OSS}icon/icon_crown.png`" round></wd-img>
							</view>
							<view class="text-24rpx text-[#675649] leading-34rpx flex items-center">茶址合伙人</view>
						</view>
					</view>
				</view>
			</view>

            <!-- 提醒 -->
            <view class="bg-[#FFF8F8] rounded-6rpx px-30rpx py-12rpx mx-30rpx mt-16rpx flex items-center">
                <view class="flex items-center mr-20rpx">
                    <wd-img width="36rpx" height="36rpx" :src="`${OSS}icon/icon_tips.png`" mode="aspectFill" round />
                </view>

                <view class="font-400 text-26rpx leading-36rpx text-#606266">
                    分佣提成每月月初提现，3日内到账
                </view>
            </view>

            <!-- 余额显示 -->
            <view class="mt-20rpx relative">
                <wd-img width="750rpx" height="360rpx" :src="`${OSS}images/parten/parten_image2.png`" mode="aspectFill" />

                <view class="absolute top-12rpx left-30rpx right-0 w-full">
                    <view class="mt-14rpx flex justify-end mr-100rpx mt-18rpx text-#fff font-400 text-32rpx leading-44rpx">
                        <navigator url="/bundle/parten/pages/withdraw/withdraw" hover-class="none" open-type="navigate">
                            提现
                        </navigator>
                    </view>
                    <view class="flex items-center ml-72rpx">
                        <view class="mr-68rpx">我的余额</view>
                        <view>
                            <price-format color="#251F1F" :first-size="40" :second-size="40" :subscript-size="26" :price="100000"></price-format>
                        </view>
                    </view>
                    <view class="flex items-center justify-between ml-40rpx mr-70rpx mt-40rpx text-#FDD6B7">
                        <view class="">
                            <view class="font-400 text-26rpx leading-36rpx">本月预计收益（元）</view>
                            <view class="font-400 text-36rpx leading-50rpx">5000.00</view>
                        </view>
                        <view class="w-2rpx h-100rpx border-r border-solid-r border-r-#FFD8B8 text-#FDD6B7 font-400 text-36rpx leading-50rpx"></view>
                        <view class="">
                            <view class="font-400 text-26rpx leading-36rpx">历史总收益（元）</view>
                            <view class="font-400 text-36rpx leading-50rpx">5000.00</view>
                        </view>
                    </view>
                </view>
            </view>

            <!-- 功能列表 -->
            <view class="mx-30rpx">
                <view class="bg-white rounded-16rpx px-30rpx py-28rpx flex justify-between items-center" @click="My.handleToMyBank">
                    <view class="flex items-center">
                        <view class="flex items-center mr-28rpx">
                            <wd-img width="44rpx" height="44rpx" mode="aspectFill" :src="`${OSS}icon/icon_bank_card.png`"></wd-img>
                        </view>
                        <view class="font-400 text-28rpx leading-40rpx text-#303133">
                            管理我的银行卡
                        </view>
                    </view>
                    <view class="">
                        <wd-icon name='arrow-right' size="22rpx"></wd-icon>
                    </view>
                </view>

                <view class="bg-white rounded-16rpx px-30rpx py-28rpx flex justify-between items-center mt-20rpx" @click="My.handleToFundRecord">
                    <view class="flex items-center">
                        <view class="flex items-center mr-28rpx">
                            <wd-img width="44rpx" height="44rpx" mode="aspectFill" :src="`${OSS}icon/icon_wallet.png`"></wd-img>
                        </view>
                        <view class="font-400 text-28rpx leading-40rpx text-#303133">
                            资金记录
                        </view>
                    </view>
                    <view>
                        <wd-icon name='arrow-right' size="22rpx"></wd-icon>
                    </view>
                </view>
            </view>
        </view>

        <tabbar tab="my"></tabbar>
    </view>
</template>

<script lang="ts" setup>
    import Tabbar from '@/bundle/parten/components/Tabbar.vue'

	const OSS = inject('OSS')
	const navbarHeight = inject('navbarHeight')

    const My = {
        handleToProfile: () => {
            uni.navigateTo({
                url: '/pages/profile/profile'
            })
        },

        handleToMyBank: () => {
            uni.navigateTo({
                url: '/bundle/parten/pages/bank-card/list'
            })
        },

        handleToFundRecord: () => {
            uni.navigateTo({
                url: '/bundle/parten/pages/fund-record/fund-record'
            })
        },
    }
</script>

<style lang="scss">
	page, home-bg{
		background: $cz-page-background url(#{$OSS}images/parten/parten_image1.png) 0 0 no-repeat;
		background-size: 100%;
	}

    .vip-bg {
        width: 200rpx;
        height: 46rpx;
        background: linear-gradient( 315deg, #F2E6BC 0%, #FFF8E2 100%);
        box-shadow: 10rpx 10rpx 20rpx 2rpx rgba(0,0,0,0.04);
        border-radius: 8rpx 8rpx 8rpx 8rpx;
    }

    .balance-bg {
		background: $cz-page-background url(#{$OSS}images/parten/parten_image2.png) 0 0 no-repeat;
        background-size: 100% auto;
    }
</style>
