<template>
	<view class="container" :style="cffpFortuneDateList.length>6?'height:auto':'height:100vh'">
		<view class="backArrow">
			<text class="iconfont icon-youjiantou zuojiantou" style="left: 5rpx;" @click="goBack()"></text>
			<text style="font-size: 30rpx;">佣金</text>
		</view>
		<view class="" style="padding: 10rpx 20rpx 0 20rpx;">
			<view class="first">
				<view class="top">
					<view class="left">
						<view class="">
							可兑换积分(1积分=1元)
						</view>
						<view style="font-size: 42rpx;font-family: 600;">
							{{yesExchangeFortune?yesExchangeFortune:'0.00'}}
						</view>
					</view>
					<view class="right" @click="toWithdrawal()">
						提现
					</view>
				</view>
				<view class="bottom">
					<view class="bottomItem" v-for="score in scoreList " :key="score.id">
						<view class="one">
							<view style="font-size:28rpx;color: rgba(199, 199, 199, 1);">
								{{score.name}}
							</view>
							<uni-tooltip class="item" :content="score.content" :placement="score.position">
								<text class="iconfont icon-wenhao1" style="margin-left: 3rpx;color: rgba(199, 199, 199, 1);font-size: 28rpx;" ></text>
							</uni-tooltip>
						</view>
						<view class="fotter">
							{{score.value}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="" style="padding: 0 20rpx;">
			<view class="two" >
				<view class="twoHeader">
					订单收益明细 
				</view>
				<view class="timeBox" @click="$refs.timePopup.open()">
					<view style="margin-right: 5rpx;">
						{{showTime}}
					</view>
					<text class="iconfont icon-xiajiantou iconStyle"></text>
				</view>
				<view class="filterBox">
					<scroll-view class="scroll-view_H" scroll-x="true"  scroll-left="120">
						<view
							class="scroll-view-item_H uni-bg-blue" 
							v-for="item in commissionTypeList" 
							:key="item.id"
							:class="{active:item.id == currentFilter.id }"
							@click="changeFilter(item)"
						>
							{{item.dropOptionName}}
						</view>
					</scroll-view>
				</view>
				<view class="totalBox">
					<view class="totalItem">
						<text style="margin-right: 10rpx;">合计</text> {{sumCommissionAmount}}
					</view>
					<view class="totalSelect">
						<uni-data-select
						        v-model="selectItem"
						        :localdata="selectList"
						        @change="getDetail()"
						></uni-data-select>
					</view>
				</view>
				<view class="detailBox" v-if="cffpFortuneDateList.length>0">
					<view 
						class="detailItem" 
						v-for="(item,index) in cffpFortuneDateList" 
						:key="index"
						@click="viewDetail(item)"
					>
						<view class="detailLeft">
							<view class="txt">
								{{item.productTypeName}}
							</view>
							<view class="date">
								{{item.orderDate}}
							</view>
						</view>
						<view class="detailRight">
							<view class="">
								<view class="money">
									<text v-if="item.commissionAmount&&item.commissionAmount>0">+{{item.commissionAmount}}</text>
									<text v-if="item.commissionAmount&&item.commissionAmount<0" style="color: rgba(212, 48, 48, 1);">{{item.commissionAmount}}</text>
								</view>
								<view style="font-weight: normal;font-size: 26rpx;color: rgba(56, 56, 56, 1);">
									{{item.exchangeStatus&&item.exchangeStatus=='1'?'待结算'
									:item.exchangeStatus=='2'?'可兑换'
									:item.exchangeStatus=='3'?'已兑换'
									:item.exchangeStatus=='4'?'兑换中'
									:item.exchangeStatus=='5'?'已失效'
									:item.exchangeStatus
									}}
								</view>
							</view>
							<view class="arrow">
								<text class="iconfont icon-youjiantou iconStyle"></text>
							</view>
						</view>
					</view>
				</view>
				<view class="detailBox" v-else style="background:#fff">
					<view class="emptyBox">
						暂无数据！
					</view>
				</view>
			</view>
		</view>
		
		<uni-popup ref="timePopup" type="bottom" >
			<customDatePop @closePop="closePop" @comfirm="comfirm" :dateParts="dateParts" :currentItem="currentItem" :childData="childData"></customDatePop>
		</uni-popup>
		<!-- <CustomDatePop ref="customDatePop"></CustomDatePop> -->
		
		<!-- <view class="top">
			<text class="iconfont icon-youjiantou zuojiantou" @click="goBack()" style="top: 20rpx;"></text>
			<view>
				{{yesExchangeFortune?yesExchangeFortune:0}}
			</view>
			<view>
				可兑换积分
			</view>
		</view>
		<view class="content_wrapper">
			<view class="item">
				<text>A.可兑换</text>
				<text>{{yesExchangeFortune?yesExchangeFortune:0}}积分</text>
			</view>
			<view class="item">
				<text>B.待兑换</text>
				<text>{{notExchangeFortune?notExchangeFortune:0}}积分</text>
			</view>
			<view class="item">
				<text>C.兑换中</text>
				<text>{{inExchangeFortune?inExchangeFortune:0}}积分</text>
			</view>
			<view class="item">
				<text>D.已兑换</text>
				<text>{{alreadyExchangeFortune?alreadyExchangeFortune:0}}积分</text>
			</view>
			<view class="item">
				<text>E.已退款</text>
				<text style="color: #0A2F99;" @click="viewDropLists()">{{returnFortune?returnFortune:0}}积分<i class="iconfont icon-youjiantou" style="margin-right: 10rpx;"></i></text>
			</view>
		</view>
		<view class="total">
			<view class="description">
				<text>总积分：</text>
				<text>(A+B+C+D+E)</text>
			</view>
			<view class="">
				{{totalFortune?totalFortune:0}}积分
			</view>
		</view>
		<view class="record" @click="toRecord()">
			兑换记录
		</view>
		<view class="btn" @click="toWithdrawal()" style="bottom: 30rpx;">
			去提现
		</view> -->
	</view>
</template>

<script>
	import api from '../../api/api';
	import CustomDatePop from './customDatePop.vue';
	import dataHandling from "@/util/dataHandling";
	let nowTime = dataHandling.getMonthRange(dataHandling.getDateParts().year, dataHandling.getDateParts().month)
	export default{
		data(){
			return {
				yesExchangeFortune:'0.00',
				notExchangeFortune:'',
				inExchangeFortune:'',
				alreadyExchangeFortune:'',
				returnFortune:'',
				totalFortune:'',
				scoreList:[
					{name:'总积分',value:'0.00',id:'1',position:'bottom',content:'包含已兑换＋待结算＋兑换中的积分'},
					{name:'已兑换',value:'0.00',id:'2',position:'bottom',content:'已经提取入账的积分'},
					{name:'待结算',value:'0.00',id:'3',position:'left',content:'用户商品未使用或还在七天可退换时间内'},
					{name:'兑换中',value:'0.00',id:'4',position:'left',content:'正在审核中的积分'},
				],
				commissionTypeList:[],
				currentFilter:{id:'0',dropOptionCode:null},
				selectItem:'0',
				selectList:[
					{ value: '0', text: "全部" },
				    { value: 1, text: "待结算" },
				    { value: 2, text: "可兑换" },
					{ value: 3, text: "已兑换" },
					{ value: 4, text: "兑换中" },
					{ value: 5, text: "已失效" },
				],
				dateParts:dataHandling.getDateParts(),
				currentItem:'1',//便于弹框弹出回显是月份选择还是自定义时间
				timeType:'1',//有三种，1：年月，2：上月，近三月，近半年，3：具体日期的选择
				showTime:`${dataHandling.getDateParts().year}年${dataHandling.getDateParts().month}月`,
				childData:{
					current:'1',
					year:dataHandling.getDateParts().year,
					month:dataHandling.getDateParts().month,
					timeType:'8',
					queryDateStart:nowTime.start,
					queryDateEnd:nowTime.end,
				},
				sumCommissionAmount:'0.00',
				cffpFortuneDateList:[],
			}
		},
		components:{CustomDatePop},
		onLoad(){
			this.queryByUserIdFortuneStatistic();
			this.getCommissionType()
			this.getDetail()
		},
		methods:{
			// 查看订单详情
			viewDetail(item){
				uni.navigateTo({
					url:`/pages/orderDetail/orderDetail?id=${item.orderId}&commissionType=${item.commissionType}&type=drop`
				})
			},
			getDetail(){
					const param = {
						isDtl: 1,
						userId: uni.getStorageSync('cffp_userId'),
						queryDateStart:this.childData.queryDateStart,
						queryDateEnd:this.childData.queryDateEnd,
						commissionType:this.currentFilter.dropOptionCode,
						queryPage:2,
						exchangeStatus:this.selectItem=='0'?'':this.selectItem,
						productType: 1
					}
					
				api.findForExchangeStatisticDtl(param).then((res)=>{
					if(res['success']){
						this.cffpFortuneDateList = []
						if(res['data']['cffpFortuneDeductionList']&&res['data']['cffpFortuneDeductionList'].length>0){
							this.cffpFortuneDateList = res['data']['cffpFortuneDeductionList'].map(item=>{
								item.commissionAmount = Number(item.commissionAmount).toFixed(2)
								return item
							})
						}
						
						if(res['data']['sumCommissionAmount']){
							this.sumCommissionAmount = Number(res['data']['sumCommissionAmount']).toFixed(2);
						}else {
							this.sumCommissionAmount= '0.00'
						}
						
					}
				});
			},
			getCommissionType(){
				api.dropOptionsQuery({code:'CFFP_Commission_Item'}).then((res)=>{
					this.commissionTypeList = [{dropOptionName:'全部',dropOptionCode:null,id:'0'}].concat(res['data']['dropMasterInfoList'][0]['dropOptionsInfoList']);
					// for(let i=0;i<this.commissionTypeList.length;i++){
					// 	if(this.commissionType == this.commissionTypeList[i]['dropOptionCode']){
					// 		this.commissionTypeIdx = i;
					// 		break;
					// 	}
					// }
				})
			},
			closePop(){
				this.$refs.timePopup.close()
			},
			//时间选择框确定事件
			comfirm(obj){
				console.log('obj',obj);
				
				this.currentItem = obj.current
				// timeType   8:月份   9:三种方式的选择   10:自定义日期选择
				switch (obj.timeType){
					case '8':
						this.showTime = `${obj.year}年${obj.month}月`
						const { year, month } = obj;
						let newTime = dataHandling.getMonthRange(year, month)
						obj.queryDateStart = newTime.start
						obj.queryDateEnd = newTime.end
						break;
					case '9':
						obj.queryDateStart = obj.currentDate[0]
						obj.queryDateEnd = obj.currentDate[1]
						this.showTime = obj.name
						break;
					case '10':
						obj.queryDateStart = obj.currentDate[0]
						obj.queryDateEnd = obj.currentDate[1]
						this.showTime = obj.currentDate.join(' / ')
						break;
					default:
						break;
				}
				
				this.childData = obj
				this.$refs.timePopup.close()
				this.getDetail()
			},
			// 切换过滤条件
			changeFilter(item){
				this.currentFilter = item
				this.getDetail()
			},
			maskClick(e){
				console.log('maskClick事件:', e);
			},
			goBack(){
				uni.navigateBack({
					delta: 1  
				});
			},
			queryByUserIdFortuneStatistic(){
				api.queryByUserIdFortuneStatistic({userId:uni.getStorageSync('cffp_userId')}).then((res)=>{
					if(res['success']){
						// //可兑换
						this.yesExchangeFortune = res['data']['yesExchangeFortune'] || '0.00';
						console.log('this.yesExchangeFortune',this.yesExchangeFortune);
						// //待结算
						// this.notExchangeFortune = res['data']['notExchangeFortune'];
						// //兑换中
						// this.inExchangeFortune = res['data']['inExchangeFortune'];
						// //已兑换
						// this.alreadyExchangeFortune = res['data']['alreadyExchangeFortune'];
						// //已退款
						// this.returnFortune = res['data']['returnFortune'];
						// //总积分
						// this.totalFortune = res['data']['totalFortune'];
						//总积分
						this.scoreList[0].value = res['data']['totalFortune'] || '0.00';
						//兑换中
						this.scoreList[1].value = res['data']['alreadyExchangeFortune'] || '0.00';
						//待结算
						this.scoreList[2].value = res['data']['notExchangeFortune'] || '0.00';
						//兑换中
						this.scoreList[3].value = res['data']['inExchangeFortune'] || '0.00';
						
					}
				})
			},
			toWithdrawal(){
				if(!this.yesExchangeFortune || this.yesExchangeFortune==0){
					uni.showModal({
					    content: `目前可兑换积分为${this.yesExchangeFortune},积分低于1分时无法兑换`,
						success: function (res) {
					   		if (res.confirm) {
					   			console.log('用户点击确定');
					   		} else if (res.cancel) {
								console.log('用户点击取消');
					   		}
						}
					});
				}else{
					uni.navigateTo({
						url:`/pages/withdrawal/withdrawal?exchangeAmount=${this.yesExchangeFortune}`
					})
				}
			},
			toRecord(){
				uni.navigateTo({
					url:'/pages/exchangeRecord/exchangeRecord'
				})
			},
			viewDropLists(){
				uni.navigateTo({
					url:'/pages/dropLists/dropLists'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .uni-tooltip-popup {
	    white-space: normal !important;
	    word-break: break-word !important;
	    // max-width: 200rpx !important; /* 设置一个合适的最大宽度 */
		width: 420rpx !important;
		font-size: 26rpx;
		transform: none !important;
		// left: -200% !important;
	  }
	 ::v-deep .uni-popup .uni-popup__wrapper{
		 margin: 0 !important;
	 }
	 ::v-deep .uni-select__input-text{
		 font-size: 24rpx !important;
	 }
	 ::v-deep .uni-select__selector-item{
		 font-size: 22rpx !important;
	 }
	 ::v-deep .uni-select__input-box{
	 		 height: 50rpx;
			 box-sizing: border-box;
			 padding:10rpx 15rpx !important;
			 display: flex;
			 align-items: center;
	 }
	.container{
		box-sizing: border-box;
		padding-bottom: 50rpx;
		.backArrow{
			background-color: #fff;
			box-sizing: border-box;
			display: flex;
			height: 100rpx;
			justify-content: space-between;
			align-items: center;
			position: relative;
			width: 100%;
			margin-bottom: 10rpx;
			text:nth-child(2){
				width: 100%;
				text-align: center;
				position: absolute;
			}
		}
		.first{
			
			color: rgba(244, 239, 212, 1);
			box-sizing: border-box;
			background: #2a2927;
			width: 100%;
			padding: 30rpx;
			border-radius: 10rpx;
			.top{
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 30rpx;
				.left{
					font-size: 28rpx;
					width: 60%;
				}
				.right{
					padding: 15rpx 50rpx;
					background: rgba(249, 219, 165, 1);
					border-radius: 50rpx;
					color: rgba(46, 38, 29, 1);
					font-size: 32rpx;
					font-weight: 500;
				}
			}
			.bottom{
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 100%;
				.bottomItem{
					.one{
						display: flex;
						margin-bottom: 5rpx;
						align-items: center;
						justify-content: center;
					}
					.fotter{
						font-size: 26rpx;
					}
					
				}
			}
		}
		.two{
			margin-top: 20rpx;
			box-sizing: border-box;
			background: #fff;
			width: 100%;
			padding: 20rpx 30rpx;
			border-radius: 10rpx;
			box-sizing: border-box;
			.twoHeader{
				color: rgba(46, 38, 29, 1);
				font-size: 32rpx;
				font-weight: 500;
			}
			.timeBox{
				display: flex;
				align-items: center;
				width: fit-content;
				padding-right: 50rpx;
				margin: 40rpx 0;
				font-size: 27rpx;
			}
			.filterBox{
				display: flex;
				align-items: center;
				justify-content: space-between;
				.scroll-view_H {
						white-space: nowrap;
						width: 100%;
						box-sizing: border-box;
					}
					.scroll-view-item {
						height: 100rpx;
						// line-height: 300rpx;
						text-align: center;
						font-size: 36rpx;
					}
					.scroll-view-item_H {
						display: inline-block;
						margin-right: 20rpx;
						text-align: center;
						background: #f7f7f7;
						font-size: 27rpx;
						padding: 10rpx 20rpx;
						color: rgba(46, 38, 29, 1);
						border-radius: 8rpx;
						margin-bottom: 20rpx;
						&.active{
							background: rgba(32, 39, 155, 1);
							color: #fff;
						}
					}
					.scroll-view-item_H:last-child{
						margin-right: 0rpx;
					}
				.filterItem{
					background: #f7f7f7;
					font-size: 27rpx;
					padding: 10rpx;
					color: rgba(46, 38, 29, 1);
					border-radius: 8rpx;
					&.active{
						background: rgba(32, 39, 155, 1);
						color: #fff;
					}
				}
			}
			.totalBox{
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin: 30rpx 0;
				.totalItem{
					font-size: 31rpx;
					font-weight: 500;
				}
				.totalSelect{
					width: 300rpx;
				}
			}
			.detailBox{
				background-color: #fcfcfc;
				padding: 0rpx 30rpx;
				border-radius: 10rpx;
				.emptyBox{
					display: flex;
					align-items: center;
					justify-content: center;
					margin: 20rpx;
					color: rgba(153, 153, 153, 1);
				}
				.detailItem{
					display: flex;
					justify-content: space-between;
					align-items: center;
					border-bottom: 1px solid rgba(232, 232, 232, 1);
					padding: 30rpx 0;
					.detailLeft{
						.txt{
							font-size: 29rpx;
							font-weight: 500;
							color: rgba(34, 34, 34, 1);
							
						}
						.date{
							color: rgba(56, 56, 56, 1);
							font-size: 26rpx;
							margin-top: 10rpx;
						}
					}
					.detailRight{
						width: 25%;
						display: flex;
						justify-content: space-between;
						align-items: center;
						.money{
							font-size: 29rpx;
							font-weight: 500;
							color: rgba(34, 34, 34, 1);
							margin-bottom: 10rpx;
						}
					}
				}
				.detailItem:last-child{
					border: none;
				}
			}
		}
		
	}
</style>