<template>
	<view class="pad-x150" v-if="isLoading">
		<status-nav :ifReturn="true" navBarTitle="分销中心" :marginBottom="0"></status-nav>
		<!-- 分销概况 -->
		<view class="distribution border-box">
			<view class="distribution-msg radius30 pad-all40 border-box">
				<view class="distribution-txt border-box flex">
					<view class="txt">
						<view class="title font30 mar-x20">我的佣金</view>
						<view class="price font60"><text class="font48">￥</text>{{commission}}</view>
					</view>
					<view class="code-btn mar-s10" @tap="openCode">
						<image src="/static/icon/icon-code.png" mode="widthFix" style="width: 87rpx;height: 87rpx;"></image>
						<view class="font24 mar-s10">查看分销码</view>
					</view>
				</view>
				<view class="distribution-profit mar-s40 flex">
					<view class="item">
						<text class="font24">累计收益</text>
						<view class="profit-price font36 mar-s10">￥{{cumulative_income>0?cumulative_income:'0'}}</view>
					</view>
					<view class="line"></view>
					<view class="item">
						<text class="font24">累计提现</text>
						<view class="profit-price font36 mar-s10">￥{{cumulative_withdrawal>0?cumulative_withdrawal:'0'}}</view>
					</view>
					<view class="line"></view>
					<view class="item">
						<text class="font24">我的团队</text>
						<view class="profit-price font36 mar-s10">{{my_team}}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 记录导航 -->
		<view class="record-nav border-box pad-zy20 flex">
			<view class="item color-8c radius20 border-box" :class="index==navIndex?'cur':''" v-for="(item,index) in navList" :key="index" @tap="changeNav(index)">{{item}}</view>
		</view>
		
		<!-- 记录列表 -->
		<view class="record-list border-box">
			<!-- 团队导航 -->
			<view class="team-nav mar-s30 flex" v-if="navIndex==1">
				<view class="item" v-for="(item,index) in teamNav" :key="index" @tap="changeTeam(index)">
					<view class="txt font30">
						{{item.title}}
						<text class="font28" style="margin-left: 5rpx;">({{item.num}})</text>
					</view>
					<view class="line mar-s15" :class="index==teamIndex?'background-orange':''"></view>
				</view>
			</view>
			
			<view class="record-item border-box pad-sx40 flex" v-for="(item,index) in recordList" :key="index">
				<view class="left flex">
					<view class="img radius30" v-if="navIndex!==2">
						<image :src="item.cover==''?logoSrc:item.cover" mode="widthFix"></image>
					</view>
					<view class="txt">
						<view class="font36 mar-x10"><text class="font26" v-if="navIndex==2">￥</text>{{item.name==''?'系统':item.name}}</view>
						<view class="font24 color-99">{{item.created_at}}</view>
					</view>
				</view>
				<view class="right">
					<view class="font24" v-if="navIndex==2">
						<text v-if="item.title=='待审批'">{{item.title}}</text>
						<text class="color-red" v-if="item.title=='已驳回'">{{item.title}}</text>
						<text style="color: #7b7b7b;" v-if="item.title=='已完成'">{{item.title}}</text>
					</view>
					<view class="font24" v-else>{{item.title}}</view>
					<view class="font30 color-red mar-s10" v-if="item.price">{{item.price>0&&navIndex==0?'+'+item.price:item.price}}</view>
				</view>
			</view>
			<!-- 到底啦 -->
			<view class="no-more font24" v-if="noMore"><text>—— 到底啦 ——</text></view>
		</view>
		
		<!-- 尾部 -->
		<view class="pull-btn border-box" style="background-color: #f5f5f5; padding-top: 28rpx;">
			<view class="btn background-orange font36 radius30 flex" @tap="openWithdrawal">立即提现</view>
		</view>
		<!-- 分销码 -->
		<view class="pull-bg" style="background-color: rgba(0,0,0,.3);" v-show="isShow || withdrawal"></view>
		<view class="vip-box-bg border-box" v-if="isShow">
			<view class="vip-box radius20 background-white  font30">
				<view class="title">分销二维码</view>
				<view class="vip-code flex">
					<image :src="codeImg" mode="widthFix"></image>
				</view>
				<view class="submit-btn font36 radius30 color-ff mar-s60 flex" @tap="shareImgEv" style="background-color: #00b809;position: relative;">
					<image src="/static/icon/icon-wechat.png" mode="widthFix"></image>
					<text>分享给朋友</text>
				</view>
				<view class="close-btn" @tap="closeEv">
					<image src="/static/icon/close-btn.png" mode="widthFix"></image>
				</view>
			</view>
		</view>
		<!-- 提现 -->
		<view class="vip-box-bg border-box" v-if="withdrawal">
			<view class="vip-box radius20 background-white font30">
				<view class="title">提现申请</view>
				<view class="vip-list">
					<view class="vip-item mar-s20">
						<view class="tips color-99">提现金额</view>
						<input class="input" type="number" v-model="myPrice" placeholder="请输入提现金额" placeholder-style="color:#000000">
					</view>
					<view class="vip-item mar-s40">
						<view class="tips color-99">姓名</view>
						<input class="input color-99" type="text" v-model="real_name" disabled="true">
					</view>
					<view class="vip-item mar-s40">
						<view class="tips color-99">开户行</view>
						<input class="input color-99" type="number" v-model="deposit_bank" disabled="true">
					</view>
					<view class="vip-item mar-s40">
						<view class="tips color-99">银行卡号</view>
						<input class="input color-99" type="number" v-model="bank_account" disabled="true">
					</view>
				</view>
				<view class="submit-btn font36 background-orange radius30 mar-s60 flex" @tap="submitEv">立即提现</view>
				<view class="close-btn" @tap="closeEv">
					<image src="/static/icon/close-btn.png" mode="widthFix"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { base64ToPath } from '@/jsFile/base64-src.js';
	export default {
		data() {
			return {
				logoSrc:'/static/img/logo.png', //商城logo
				isShow:false, //分销码弹窗
				withdrawal:false, //提现弹窗
				navList:['返利记录','我的团队','提现记录'], //导航数据
				navIndex:0, //导航当前
				teamNav:[
					{title:'经销商团队',num:0},
					{title:'我的消费团',num:0}
				], //团队导航
				teamIndex:0, //团队当前
				recordList:[], //记录列表
				commission:0, //佣金金额
				cumulative_income:0, //累计收益
				cumulative_withdrawal:0, //累计提现
				my_team:0, //我的团队
				codeImg:'', //分销码
				real_name:'', //姓名
				bank_account:'',//卡号
				deposit_bank:'', //银行
				myPrice:'', //提现金额
				page:1,
				size:10,
				noMore:false,
				flag:true,
				isLoading:false,
				shareFlag:true,
			}
		},
		onLoad(op) {
			// 获取分销码
			this.getCodeEv();
			
			// 获取列表信息
			this.getRecordList();
		},
		onReachBottom() {
			if(!this.noMor){
				this.page++;
				// 获取列表信息
				this.getRecordList();
			}
		},
		onShow() {
			this.getUserInfo();
		},
		methods: {
			// 获取个人信息
			getUserInfo(){
				this.$requst.post('/api/user/info').then(res=>{
					if(res.code == 0){
						console.log(res,'用户信息');
						this.commission = res.data.commission;
						this.cumulative_income = this.$toolAll.tools.addXiaoShu(res.data.cumulative_income);
						this.cumulative_withdrawal = this.$toolAll.tools.addXiaoShu(res.data.cumulative_withdrawal);
						this.my_team = res.data.team.distributor_total+res.data.team.team_total;
						this.teamNav[0].num = res.data.team.distributor_total;
						this.teamNav[1].num = res.data.team.team_total;
					}
				})
			},
			// 获取分销码
			getCodeEv(){
				this.$requst.post('/api/user/my-distribution-code').then(res=>{
					if(res.code == 0){
						console.log(res,'分销码');
						this.codeImg = this.$hostHttp + res.data.qr;
					}
				})
			},
			
			// 分享到微信
			shareImgEv(id){
				let that = this;
				if(this.shareFlag){
					this.shareFlag = false;
					wx.downloadFile({
					    url: this.codeImg,
					    success: (res) => {
							this.$toolAll.tools.showToast('正在调起分享...');
					        wx.showShareImageMenu({
					            path: res.tempFilePath
					        })
					    },
					    fail: (res)=> {
					        console.log(res)
					        if( res.errMsg.indexOf('deny')!=-1||res.errMsg.indexOf('denied')!=-1 ){
					            wx.showToast({
					                title: '保存相册失败，请设置权限！',
					                icon: 'none',
					                duration: 2000,
					            })
								this.shareFlag = true;
					        }else{
					            wx.showToast({
					                title: '保存相册失败，请重试！',
					                icon: 'none',
					                duration: 2000,
					            });
								this.shareFlag = true;
					        }
					    }
					})
				} else {this.$toolAll.tools.showToast('请勿重复点击');}
			},
			
			// 获取列表信息
			getRecordList(){
				uni.showLoading({
					title:'加载中'
				})
				if(this.navIndex == 0){
					let params = {
						page:this.page,
						size:this.size,
						type:'commission'
					}
					this.$requst.post('/api/user/data-log-list',params).then(res=>{
						if(res.code==0){
							console.log(res,'返利记录');
							let recordArr = [];
							res.data.forEach(item=>{
								let obj = {
									id:item.id,
									name:item.subAccount==null?'':item.subAccount.nickname,
									cover:item.subAccount==null?'':item.subAccount.headimgurl,
									created_at:item.created_at,
									title:item.name,
									price:this.$toolAll.tools.addXiaoShu(item.num)
								}
								recordArr.push(obj);
							})
							if(recordArr.length==0){
								this.noMor = true;
							}
							this.recordList = this.recordList.concat(recordArr);
						}
					})
				}
				if(this.navIndex == 1){
					if(this.teamIndex == 0){
						let params = {
							page:this.page,
							size:this.size,
							is_distributor:1
						}
						this.$requst.post('/api/user/team-list',params).then(res=>{
							if(res.code==0){
								console.log(res,'经销商团队');
								let recordArr = [];
								res.data.forEach(item=>{
									let obj = {
										id:item.id,
										name:item.nickname,
										cover:item.headimgurl,
										created_at:item.created_at,
										title:'累计返利',
										price:this.$toolAll.tools.addXiaoShu(item.contribution)
									}
									recordArr.push(obj);
								})
								if(recordArr.length==0){
									this.noMor = true;
								}
								this.recordList = this.recordList.concat(recordArr);
							}
						})
					}else{
						let params = {
							page:this.page,
							size:this.size,
							is_distributor:0
						}
						this.$requst.post('/api/user/team-list',params).then(res=>{
							if(res.code==0){
								console.log(res,'我的消费团队');
								let recordArr = [];
								res.data.forEach(item=>{
									let obj = {
										id:item.id,
										name:item.nickname,
										cover:item.headimgurl,
										created_at:item.created_at,
										title:'累计返利',
										price:this.$toolAll.tools.addXiaoShu(item.contribution)
									}
									recordArr.push(obj);
								})
								if(recordArr.length==0){
									this.noMor = true;
								}
								this.recordList = this.recordList.concat(recordArr);
							}
						})
					}
					
				}
				if(this.navIndex == 2){
					let params = {
						page:this.page,
						size:this.size
					}
					this.$requst.post('/api/user/withdrawal-commission-log-list',params).then(res=>{
						if(res.code==0){
							console.log(res,'提现列表');
							let recordArr = [];
							res.data.forEach(item=>{
								let obj = {
									id:item.id,
									name:this.$toolAll.tools.addXiaoShu(item.number),
									cover:'',
									created_at:item.created_at,
									title:item.status,
									price:''
								}
								recordArr.push(obj);
							})
							if(recordArr.length==0){
								this.noMor = true;
							}
							this.recordList = this.recordList.concat(recordArr);
						}
					})
				}
				uni.hideLoading();
				this.isLoading = true;
			},
			
			
			// 打开分销码
			openCode(){
				this.isShow = true;
			},
			// 打开提现
			openWithdrawal(){
				this.$requst.post('/api/user/get-deposit-bank-info').then(res=>{
					if(res.code==0){
						console.log(res,'提现账户信息');
						this.real_name = res.data.real_name;
						this.bank_account =res.data.bank_account;
						this.deposit_bank = res.data.deposit_bank;
						this.withdrawal = true;
					}
				})
			},
			// 发起提现
			submitEv(){
				if(this.checkEmpty() && this.flag){
					let params = {
						commission:this.myPrice,
						username:this.real_name,
						deposit_bank:this.deposit_bank,
						bank_account:this.bank_account
					}
					this.$requst.post('/api/user/commission-withdrawal',params).then(res=>{
						if(res.code==0){
							console.log(res,'提现成功');
							this.withdrawal = false;
							this.getUserInfo();
						}else{
							this.$toolAll.tools.showToast(res.msg);
						}
						setTimeout(()=>{
							this.flag = true;
						},2000)
					})
				}
			},
			// 验证表单
			checkEmpty(){
				let result = false;
				if(!this.myPrice) {
					this.$toolAll.tools.showToast('请填写提现金额');
				} else {
					result = true;
				}
				return result;
			},
			
			// 切换导航
			changeNav(index){
				if(index!==this.navIndex){
					this.navIndex = index;
					this.page = 0;
					this.recordList = [];
					// 获取列表信息
					this.getRecordList();
				}
			},
			// 切换团队
			changeTeam(index){
				if(index!==this.teamIndex){
					this.teamIndex = index;
					this.page = 0;
					this.recordList = [];
					// 获取列表信息
					this.getRecordList();
				}
			},
			// 关闭弹窗
			closeEv(){
				this.isShow = false;
				this.withdrawal =false;
			},
		}
	}
</script>

<style>
	
</style>
