<template>
	<view class="mine-distribution-index" v-if="detail.id">
		<uni-nav-bar :fixed="true" :shadow="false" :statusBar="true" :color="color"
			:backgroundColor="color == '#ffffff' ?``:primaryColor" title="分销中心" leftIcon="icon-left">
		</uni-nav-bar>
		<view mode="aspectFill" lazy-load class="mine-index-bg abs"></view>
		<view class="user-info abs pt-md pl-lg pr-lg pb-lg flex-center">
			<image mode="aspectFill" lazy-load class="user-img radius" :src="detail.avatarUrl">
			</image>
			<view class="flex-1 ml-md c-base">
				<view class="f-lg-title text-bold max-550 ellipsis">
					Hi，{{ detail.nickName }}
				</view>
				<view @tap.top="$util.goUrl({url:detail.fx_code,openType:'copy'})" class="flex-y-center f-caption">邀请码:
					{{detail.fx_code}}
					<view class="copy-code-btn flex-center f-icontext ml-sm">复制</view>
				</view>
			</view>
		</view>
		<view class="space-user-info rel"></view>
		<!-- fx_cash 可提现；wallet_price 已提现 -->
		<view @tap.stop="$util.goUrl({url:`/mine/pages/cash-out?type=distribution`})"
			class="stored-item pd-lg ml-md mr-md fill-base box-shadow radius-20">
			<view class="flex-center">
				<view class="flex-center flex-column c-title">
					<view class="f-lg-title text-bold">{{detail.fx_cash}}</view>
					<view class="f-caption c-caption">总佣金</view>
				</view>
				<view class="line"></view>
				<view class="flex-center flex-column c-title">
					<view class="f-lg-title text-bold">{{detail.notreceived_cash}}</view>
					<view class="f-caption c-caption">待结算</view>
				</view>
			</view>
			<view class="flex-center pt-lg pb-sm">
				<view class="common-btn flex-center f-paragraph c-base radius" style="min-width: 176rpx;height: 60rpx;"
					:style="{background:primaryColor}">立即提现
				</view>
			</view>
		</view>


		<view class="mine-list mt-md ml-md mr-md fill-base box-shadow radius-20">
			<view class="common-nav-title flex-y-center f-title c-title text-bold">我的收益</view>
			<view class="flex-warp pb-md">
				<auth :needAuth="userInfo && !userInfo.nickName" :must="true" @go="toJump('toolList', index)"
					v-for="(item, index) in toolList" :key="index" class="item-child">
					<view class="flex-center flex-column f-caption c-title">
						<image mode="aspectFill" lazy-load class="item-img" :src="item.img"></image>
						<view>{{ item.text }}</view>
					</view>
				</auth>
			</view>
		</view>

		<view class="mine-list mt-md ml-md mr-md fill-base box-shadow radius-20">
			<view class="common-nav-title flex-y-center f-title c-title text-bold">其他功能</view>
			<view class="flex-warp pb-md">
				<auth :needAuth="userInfo && !userInfo.nickName" :must="true" @go="toJump('otherList', index)"
					v-for="(item, index) in otherList" :key="index" class="item-child">
					<view class="flex-center flex-column f-caption c-title">
						<image mode="aspectFill" lazy-load class="item-img" :src="item.img"></image>
						<view>{{ item.text }}</view>
					</view>
				</auth>
			</view>
		</view>
		<view class="space-footer"></view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
	} from "vuex"
	export default {
		components: {},
		data() {
			return {
				options: {},
				color: '#ffffff',
				// 我的收益
				toolList: [{
					img: '/static/image/mine/land-order.png',
					text: '土地租赁',
					url: '/mine/pages/distribution/profit?type=2'
				}, {
					img: '/static/image/mine/claim-order.png',
					text: '认养订单',
					url: '/mine/pages/distribution/profit?type=3'
				}, {
					img: '/static/image/mine/shop.png',
					text: '商城订单',
					url: '/mine/pages/distribution/profit?type=1'
				}, {
					img: '/static/image/mine/code.png',
					text: '推广码',
					url: '/mine/pages/distribution/poster'
				}],
				// 其他功能
				otherList: [{
					img: '/static/image/mine/team.png',
					text: '我的团队',
					url: '/mine/pages/distribution/team'
				}, {
					img: '/static/image/mine/collage.png',
					text: '提现记录',
					url: '/mine/pages/distribution/record'
				}],
				detail: {},
			}
		},
		computed: mapState({
			primaryColor: state => state.config.configInfo.primaryColor,
			subColor: state => state.config.configInfo.subColor,
			configInfo: state => state.config.configInfo,
			userInfo: state => state.user.userInfo,
			mineInfo: state => state.user.mineInfo,
		}),
		onLoad() {
			this.$util.showLoading()
			this.initIndex()
		},
		onPullDownRefresh() {
			// #ifndef APP-PLUS
			uni.showNavigationBarLoading()
			// #endif
			this.initRefresh()
			uni.stopPullDownRefresh()
		},
		onPageScroll(e) {
			let color = e.scrollTop < 20 ? '#ffffff' : '#000000'
			if (this.color == color) return
			this.color = color
			this.$util.setNavigationBarColor({
				color,
				bg: 'none'
			});
		},
		methods: {
			...mapActions(['getConfigInfo', 'getUserInfo', 'getMineInfo', 'getAuthUserProfile']),
			async initIndex() {
				this.detail = await this.$api.mine.resellerInfo()
				this.$util.hideAll()
			},
			initRefresh() {
				this.initIndex()
			},
			async toJump(key, index) {
				let {
					url,
					text
				} = this[key][index]
				this.$util.log(url)
				this.$util.goUrl({
					url
				})
			}
		}
	}
</script>

<style lang="scss">
	.mine-distribution-index {

		.user-info {
			top: 0;
			left: 0;
			width: 100%;
			height: 416rpx;
			padding-top: 198rpx;

			.user-img {
				width: 120rpx;
				height: 120rpx;
				line-height: 1rpx;
				overflow: hidden;
				border: 4rpx solid #EFF3FD;
				transform: rotateZ(360deg);
			}

			.copy-code-btn {
				width: 65rpx;
				height: 34rpx;
				border-radius: 2rpx;
				border: 1rpx solid #FFFFFF;
				transform: rotateZ(360deg);
			}
		}

		.space-user-info {
			top: 0;
			left: 0;
			width: 100%;
			height: 379rpx;
			z-index: -1;
		}

		.mine-index-bg {
			background: rgb(57, 181, 74);
			height: 14.625rem;
			width: 140%;
			left: -20%;
			top: 0;
			z-index: -1;
		}
		
		.stored-item {

			.flex-column {
				width: 50%;
			}

			.line {
				width: 1rpx;
				height: 42rpx;
				background: #99D3B9;
			}
		}

		.mine-list {
			.common-nav-title {
				padding-top: 20rpx;
				padding-left: 54rpx;
			}

			.item-child {
				width: 25%;
				margin: 10rpx 0;

				.item-img {
					width: 88rpx;
					height: 88rpx;
					margin-bottom: 15rpx;
				}
			}
		}

	}
</style>
