<template>
	<view class="whole" v-if="!loading">
		<view class="vanBox">
			<view class="topBox">
				<image class="avatar" :src="avatar" mode="aspectFill" @click="toPage('/pages/user/info')"></image>
				<view class="box">
					<view class="tit">{{nickname}}({{shenfen[report.role_level]}})<text v-if="userInfo.extend" @click="copyText(userInfo.extend.user_id)">&nbsp;&nbsp;ID：{{userInfo.extend.user_id}}</text></view>
					<view class="tag" @click="toPage('/pages/user/info')">更新昵称和头像</view>
				</view>
			</view>
			
			<view class="oneBox">
				<view class="one">
					<view class="title">我的钱包</view>
					<view class="right">
						<view class="tit">待结算金额（元）</view>
						<view class="ac">{{acountInfo.wait_settle_amount || '0.00'}}</view>
					</view>
					<!-- <view class="right">
						<view class="tit">可提现金额（元）</view>
						<view class="ac">{{acountInfo.amount || '0.00'}}</view>
					</view> -->
				</view>
				<view class="two flex1">
					<view class="left">
						<view class="tit">账户金额（元）</view>
						<view class="ac">{{acountInfo.amount || '0.00'}}<view class="btn flex" @click="toTixian">提现</view></view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="content">
			<view class="twoBox">
				<view class="title">我的收益</view>
				<view class="cont">
					<view class="one">
						<!-- <up-icon name="info-circle" color="#333" /> -->
						<view class="tit">累计总收益（元）</view>
						<view class="ac">{{acountInfo.total_amount || '0.00'}}</view>
						<view class="txt">今日收益{{acountInfo.today_total_amount || '0.00'}}</view>
					</view>
					<view class="two">
						<!-- <view class="row">
							<view class="tit" @click="toPage('/pages/vip/distribution/profit')">省/赚收益 ></view>
							<view class="num">{{acountInfo.sale_total_amount || '0.00'}}</view>
							<view class="txt">今日{{acountInfo.today_sale_amount || '0.00'}}</view>
						</view> -->
						<view class="row">
							<view class="tit" @click="toPage('/pages/vip/distribution/profit?type=group')">服务费 ></view>
							<view class="num">{{acountInfo.group_service_amount || '0.00'}}</view>
							<view class="txt">今日{{acountInfo.today_group_service_amount || '0.00'}}</view>
						</view>
						<view class="row" v-if="report.role_level != 1">
							<view class="tit" @click="toPage('/pages/vip/distribution/profit?type=company')">津贴 ></view>
							<view class="num">{{acountInfo.allowance_amount || '0.00'}}</view>
							<view class="txt">今日{{acountInfo.today_allowance_amount || '0.00'}}</view>
						</view>
						<!-- <view class="row">
							<view class="tit" @click="toPage('/pages/vip/distribution/activity')">销售活动奖励 ></view>
							<view class="num">{{acountInfo.sale_activity_amount || '0.00'}}</view>
							<view class="txt">今日{{acountInfo.today_sale_activity_amount || '0.00'}}</view>
						</view>
						<view class="row">
							<view class="tit" @click="toPage('/pages/vip/distribution/profit')">社群活动奖励 ></view>
							<view class="num">0.00</view>
							<view class="txt">今日0.00</view>
						</view> -->
					</view>
				</view>
			</view>
			
			<view class="fourBox">
				<view class="top">
					<view class="item" v-for="(item, index) in dayText" :key="index" :class="chooseTime == index ? 'choose' : ''"
						@click="changeTime(index)">{{item}}
					</view>
				</view>
				<view v-if="chooseTime === 3" class="time">
					<view class="input" @click="openTime(1)">{{start_time}}</view>
					<text>至</text>
					<view class="input" @click="openTime(2)">{{end_time}}</view>
					<text class="btn" @click="getprofitWith">搜索</text>
				</view>
				<view class="cont">
					<view class="row">
						<view class="tit"><text>{{profitWith.group_amount || '0.00'}}</text>元</view>
						<view class="txt">团队销售额</view>
					</view>
					<view class="row">
						<view class="tit"><text>{{profitWith.group_refund || '0.00'}}</text>元</view>
						<view class="txt">团队退款额</view>
					</view>
					<view class="row">
						<view class="tit"><text>{{profitWith.profit || '0.00'}}</text>元</view>
						<view class="txt">毛收益</view>
					</view>
					<view class="row">
						<view class="tit"><text>{{profitWith.refund_profit || '0.00'}}</text>元</view>
						<view class="txt">退款收益</view>
					</view>
				</view>
			</view>
			
			<view class="threeBox">
				<view class="title flex4" @click="toPage('/pages/vip/distribution/invite')">
					<text>我的团队</text>
					<up-icon name="arrow-right" color="#999" size="14"></up-icon>
				</view>
				<view class="cont">
					<view class="row">
						<view class="tit"><text>{{report.invite_count || 0}}</text>人</view>
						<view class="txt">邀请人数</view>
					</view>
					<view class="row">
						<view class="tit"><text>{{report.group_count || 0}}</text>人</view>
						<view class="txt">团队人数</view>
					</view>
				</view>
			</view>
		</view>
		
		<up-modal :show="showKnow" :showCancelButton="false" :showConfirmButton="false">
			<view>
				<view class="refTitle">累计总收益</view>
				<view class="mesg">服务费+津贴所有历史累计收益</view>
				<view style="padding: 50rpx 50rpx 0;">
					<view class="iknow" @click="showKnow = false">我知道了</view>
				</view>
			</view>
		</up-modal>
		
		<up-datetime-picker
			:show="showTime"
			v-model="currentDate"
			mode="date"
			@confirm="chooseTimes"
			@cancel="showTime = false"
			@close="showTime = false"
			:closeOnClickOverlay="true">
		</up-datetime-picker>
			
	</view>
	
</template>

<script>
	import { reactive, toRefs } from 'vue'
	import { get } from '@/api/request.js'
	import { showToast, copyText, getOldDay, getWeekStartDate, getMonthStartDate, dateTimeStr } from '@/components/common.js'
	import { Style } from '@/utils/list.js'
	import dayjs from 'dayjs'
	
	export default {
		setup() {
			const data = reactive({
				acountInfo: {},
				Color: uni.getStorageSync('theme_color') || '#07C160',
				loading: true,
				bgColor: '',
				avatar: '',
				nickname: '',
				showKnow: false,
				report: {},
				userInfo: {},
				shenfen: {
					'0': '合伙人',
					'1': '服务商',
					'2': '店主'
				},
				dayText: ['今天', '本周', '本月', '自定义'],
				chooseTime: 0,
				profitWith: {},
				showTime: false,
				currentDate: '',
				start_time: '',
				end_time: '',
				data_type: '',
			})
			
			function toTixian() {
				if(data.acountInfo.account) {
					if(data.acountInfo.account.status == 5) {
						uni.navigateTo({
							url: '/pages/vip/distribution/withdraw'
						})
					} else {
						showToast('您的账户未开通成功')
					}
				} else {
					showToast('您需要先去开户')
				}
			}
			
			function getInfo() {
				get(`/api/v1/sales/distributor/show`).then((res) => {
					data.acountInfo = res.data
				})
			}
			
			const toPage = (url) => {
				uni.navigateTo({ url })
			}
			
			function getInvite() {
				get('/api/v1/sales/distributor/invitationList').then((res) => {
					data.report = res
					data.loading = false
					if(res.role_level == 2) {
						uni.navigateTo({
							url: '/pages/vip/distribution/guide'
						})
						return
					}
				})
			}
			
			function getUserInfo() {
				get('/api/v1/user/detail').then((res) => {
					data.userInfo = res.data
				})
			}
			
			const changeTime = (index) => {
				data.chooseTime = index
				data.start_time = index == 3 ? getWeekStartDate() : ''
				data.end_time = index == 3 ? getOldDay('y-m-d') : ''
				getprofitWith()
			}
			
			const getprofitWith = () => {
				let time = {
					start_date: '',
					end_date: getOldDay('y-m-d')
				}
				if (data.chooseTime === 3) {
					if (!data.start_time || !data.end_time) {
						showToast('请选择开始/结束时间')
						return
					}
					time.start_date = data.start_time
					time.end_date = data.end_time
				} else if (data.chooseTime === 0) {
					time.start_date = time.end_date
				} else if (data.chooseTime === 1) {
					time.start_date = getWeekStartDate()
				} else if (data.chooseTime === 2) {
					time.start_date = getMonthStartDate()
				}
				get('/api/v1/sales/distributor/profitWithDate', time).then((res) => {
					data.profitWith = res.data
				})
			}
			
			const openTime = (type) => {
				data.data_type = type
				if (type == 1) {
					data.currentDate = data.start_time ? Date.parse(new Date(data.start_time)) : Date.parse(new Date())
				} else {
					data.currentDate = data.end_time ? Date.parse(new Date(data.end_time)) : Date.parse(new Date())
				}
				data.showTime = true
			}
			
			const chooseTimes = (e) => {
				let time = dayjs(e.value).format('YYYY-MM-DD')
				if (data.data_type == 1) {
					data.start_time = time
				} else if (data.data_type == 2) {
					data.end_time = time
				}
				data.showTime = false
			}
			
			return {
				dateTimeStr,
				...toRefs(data),
				toTixian,
				getInfo,
				toPage,
				getInvite,
				getUserInfo,
				copyText,
				changeTime,
				getprofitWith,
				openTime,
				chooseTimes
			}
		},
		async onShow() {
			this.bgColor = Style[uni.getStorageSync('theme_index') * 1].bgColor
			this.nickname = uni.getStorageSync('nickname')
			this.avatar = uni.getStorageSync('avatar')
			await this.getInfo()
			await this.getInvite()
			this.getUserInfo()
			this.getprofitWith()
		}
	}
</script>

<style lang="scss" scoped>
	.flex{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.flex1{
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.whole{
		padding: 0 0 24rpx;
		box-sizing: border-box;
		.vanBox{
			background: linear-gradient(to bottom , v-bind('bgColor'), #fff);
			padding: 30rpx 24rpx 24rpx;
		}
		.topBox{
			display: flex;
			align-items: center;
			padding: 30rpx 0 60rpx;
			.avatar {
				border-radius: 50%;
				width: 104rpx;
				height: 104rpx;
				border: 4rpx solid #ffffff;
			}
			.box{
				flex: 1;
				padding-left: 24rpx;
				.tit{
					font-size: 32rpx;
					font-weight: 600;
					text{
						font-size: 26rpx;
						font-weight: 500;
					}
				}
				.tag{
					font-size: 24rpx;
					border-radius: 22px;
					margin-top: 16rpx;
					padding: 2rpx 15rpx;
					display: inline-block;
					color: #666;
					border: 1rpx solid #999;
				}
			}
		}
		.oneBox{
			width: 100%;
			border-radius: 10rpx;
			background-color: v-bind('Color');
			padding: 36rpx;
			box-sizing: border-box;
			color: #fff;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			.title{
				font-size: 40rpx;
				font-weight: 600;
			}
			.one{
				padding: 20rpx 0 40rpx;
				display: flex;
				justify-content: space-between;
				.right{
					.tit{
						font-size: 28rpx;
						color: rgba(255, 255, 255, 0.8);
					}
					.ac{
						font-size: 40rpx;
					}
				}
			}
			.two{
				.left{
					.tit{
						font-size: 28rpx;
						margin-bottom: 20rpx;
					}
					.ac{
						font-size: 50rpx;
						font-weight: 600;
						display: flex;
						align-items: center;
					}
				}
				.btn{
					width: 200rpx;
					height: 66rpx;
					border-radius: 66rpx;
					font-size: 28rpx;
					line-height: 66rpx;
					color: #fff;
					background-color: rgba(255, 255, 255, 0.4);
					margin-left: 30rpx;
				}
			}
		}
		.content{
			padding: 0 24rpx;
		}
		.twoBox{
			background-color: #fff;
			margin-top: 24rpx;
			border-radius: 10rpx;
			.title{
				font-size: 32rpx;
				border-bottom: 1rpx solid #f1f1f1;
				padding: 30rpx 24rpx;
				font-weight: 600;
			}
			.cont{
				padding: 0 24rpx;
				.one{
					padding: 24rpx 0;
					border-bottom: 1rpx solid #f1f1f1;
					.tit{
						font-size: 28rpx;
					}
					.ac{
						font-size: 48rpx;
						color: v-bind('Color');
						font-weight: 600;
					}
					.txt{
						font-size: 28rpx;
						color: #666;
					}
				}
				.two{
					display: flex;
					flex-wrap: wrap;
					.row{
						width: 33.33%;
						padding: 30rpx 0;
						color: #3D3D3D;
						font-size: 24rpx;
						border-bottom: 1rpx solid #f1f1f1;
						.tit{
							font-size: 28rpx;
						}
						.num{
							font-size: 36rpx;
							font-weight: 600;
							margin: 10rpx 0;
						}
						.txt{
							color: #999999;
						}
					}
				}
			}
		}
		.threeBox{
			background-color: #fff;
			margin-top: 24rpx;
			border-radius: 10rpx;
			.title{
				font-size: 32rpx;
				border-bottom: 1rpx solid #f1f1f1;
				padding: 30rpx 24rpx;
				font-weight: 600;
			}
			.cont{
				padding: 24rpx 0;
				display: flex;
				align-items: center;
				justify-content: space-around;
				.row{
					.tit{
						font-size: 28rpx;
						text{
							font-weight: 600;
							font-size: 36rpx;
						}
					}
					.txt{
						font-size: 28rpx;
						color: #888;
					}
				}
			}
		}
		.fourBox{
			background-color: #fff;
			margin-top: 24rpx;
			border-radius: 10rpx;
			.top{
				display: flex;
				align-items: center;
				justify-content: space-around;
				border-bottom: 1rpx solid #f1f1f1;
				padding: 30rpx;
				.item{
					color: #999;
					font-size: 30rpx;
					&.choose{
						color: #2c2c2c;
						font-weight: bold;
					}
				}
			}
			.time{
				padding: 24rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: space-around;
				.input{
					text-align: center;
				}
				.btn{
					background-color: v-bind('Color');
					color: #fff;
					flex-shrink: 0;
					border-radius: 10px;
					padding: 4rpx 20rpx;
					font-size: 25rpx;
				}
			}
			.cont{
				display: flex;
				align-items: center;
				justify-content: space-around;
				flex-wrap: wrap;
				.row{
					text-align: center;
					width: 50%;
					padding: 24rpx 0;
					.tit{
						font-size: 28rpx;
						margin-bottom: 16rpx;
						text{
							font-weight: 600;
							font-size: 36rpx;
						}
					}
					.txt{
						font-size: 28rpx;
						color: #888;
					}
				}
			}
		}
	}
	.refTitle{
		font-size: 30rpx;
		color: #000;
		padding: 0 0 30rpx;
		font-weight: bold;
		position: relative;
		text-align: center;
		margin-bottom: 10rpx;
	}
	.mesg{
		font-size: 28rpx;
		color: #303030;
		line-height: 46rpx;
		height: 200px;
	}
	.iknow{
		width: 100%;
		height: 80rpx;
		background: v-bind('Color');
		font-size: 30rpx;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 80rpx;
	}
</style>
