<template>
	<view class="container">
		<view class="top">
			<view class="exchange_wrapper">
				<navigator url="../pointsExchange/pointsStatus">可兑换积分 <text style="color: #FF7704;">{{yesExchangeFortune}}积分 > </text></navigator>
				<navigator url="../pointsExchange/pointsExchange" style="color:#C85E04;text-decoration: underline;">可兑换提现{{yesExchangeFortune}} > </navigator>
			</view>
			<view class="bg">
				<image src="/static/mypoint_pic.png" mode="widthFix"></image>
			</view>
			<view class="nav">
				<view class="nav_item" v-for="navItem in navList" @click="selectNav(navItem)"
				:class="{'selected':navItem.timeFlag==timeFlag}">
						<text>{{navItem.name}}</text> 
				</view>
			</view>
			<view class="opt_wrapper">
				<view style="width: 33%;">销售以来</view>
				<!-- 年月时间选择 -->
				<view class="timeSelectContent" v-if="timeFlag=='M'" style="width: 33%;">
					<picker mode="date" :value="fortuneDate" :end="maxDate" fields="month" @change="bindDateChange">
					   <view class="uni-input">{{fortuneDate}}
					   	<text class="iconfont icon-youjiantou"></text>
					   </view>
					</picker>
					
				</view>
			</view>
		</view>
		<view class="statistics_wrapper">
			<view class="">
				<text style="color: #0A2F99;">{{sumCommissionAmount}}</text>
				<text>累计积分</text>
			</view>
			<view class="">
				<text style="color: #F15A1F;">{{nowSumCommissionAmount}}</text>
				<text>{{getName(timeFlag)}}获得积分</text>
			</view>
			<view class="">
				<text style="color: #0A2F99;">{{prePercent}}%</text>
				<text>比{{getInfo(timeFlag)}}得分</text>
			</view>
		</view>
		<view class="point_content">
			<view class="title">
				<h4>积分明细</h4>
			</view>
			<ul class="point_content_list">
				<li>课程大类</li>
				<li>积分来源</li>
				<li>获得积分</li>
				<li>操作</li>
			</ul>
			<ul class="point_content_list" v-for="pointItem in cffpFortuneDeductionList" @click="toPointDetail(pointItem)">
				<li>{{pointItem.productTypeName}}</li>
				<li>{{pointItem.commissionTypeName}}</li>
				<li class="get_point">{{pointItem.commissionAmount}}</li>
				<li class="point_detail">查看明细</li>
			</ul>
		</view>
	</view>
</template>

<script>
	import api from '../../api/api';
	export default{
		data(){
			return {
				fortuneDate:`${new Date().getFullYear()}-${new Date().getMonth() + 1}-${new Date().getDate()}`,
				maxDate:`${new Date().getFullYear()}-${new Date().getMonth() + 1}`,
				navList:[{name:'日积分',timeFlag:'D'},{name:'月积分',timeFlag:'M'},{name:'年积分',timeFlag:'Y'}],
				timeFlag:'D',
				pointList:[{name:'课程大类',id:1,source:'销售收入',classify:'家组信托',score:100}],
				sumCommissionAmount:'',//总积分
				nowSumCommissionAmount:'',	//当前（日月年）积分
				prePercent:'',//比前日、上月，上年多或少的百分比数据
				yesExchangeFortune:'',//可兑换金额
				cffpFortuneDeductionList:[]//对象类型见下方CffpFortuneExchangeVO

			}
		},
		components:{},
		onLoad(){
			this.findByUserIdForFortuneStatistic();
		},
		methods:{
			selectNav(navItem){
				this.timeFlag = navItem.timeFlag;
			},
			bindDateChange: function(e) {
				this.fortuneDate = e.detail.value;
			},
			findByUserIdForFortuneStatistic(){
				// const param = {
				// 	isDtl:2,
				// 	userId:uni.getStorageSync('cffp_userId'),
				// 	fortuneDate:this.fortuneDate,
				// 	timeFlag:this.timeFlag
				// }
				const param = {
					"isDtl": 2,
					"userId": 1,
					"fortuneDate": "2022-11-01",
					"timeFlag": "D"
					
					}
				api.findByUserIdForFortuneStatistic(param).then((res)=>{
					console.log(res)
					if(res['success']){
						this.sumCommissionAmount = res['data']['sumCommissionAmount'];		//总积分
						this.nowSumCommissionAmount	= res['data']['nowSumCommissionAmount']		//当前（日月年）积分
						this.prePercent	= res['data']['prePercent']		//比前日、上月，上年多或少的百分比数据
						this.yesExchangeFortune	= res['data']['yesExchangeFortune']		//可兑换金额
						this.cffpFortuneDeductionList = res['data']['cffpFortuneDeductionList']
					}
				})
			},
			getInfo(str){
				if(str == 'D'){
					return '上次';
				}
				if(str == 'M'){
					return '上月';
				}
				if(str == 'Y'){
					return '去年';
				}
			},
			getName(str){
				if(str == 'D'){
					return '当日';
				}
				if(str == 'M'){
					return '当月';
				}
				if(str == 'Y'){
					return '当年';
				}
			},
			toPointDetail(item){
				uni.navigateTo({
					url:`../myPoints/pointsDetail?timeFlag=${this.timeFlag}&fortuneDate=${this.fortuneDate}&commissionType=${item.commissionType}&productType=${item.productType}`,
				})
			}
		}
	}
</script>

<style lang="scss">
	.container{
			.top{
				background: linear-gradient(179deg, #F8B588 0%, rgba(255,239,216,0.2) 100%);
				display: flex;
				padding: 30rpx;
				flex-wrap: wrap;
				align-items: center;
				.exchange_wrapper{
					width: 60%;
					margin-right: 10%;
					view{
						margin-bottom: 20rpx;
					}
				}
				.bg{
					width: 30%;
				}
				.nav{
					display: flex;
					justify-content: space-between;
					align-items: center;
					height: 80rpx;
					width: 100%;
					.nav_item{
						width: 33%;
						text-align: center;
					}
					.nav_item.selected text{
						color: #CDA464;
						padding-bottom: 10rpx;
						border-bottom: 2rpx solid #CDA464;
					}
				}
				.opt_wrapper{
					display: flex;
					text-align: center;
					align-items: center;
					width: 100%;
				}
			}
			.statistics_wrapper{
				margin: 30rpx;
				display: flex;
				view{
					display: flex;
					flex-wrap: wrap;
					justify-content: space-around;
					font-size: 36rpx;
					text{
						margin-bottom: 10rpx;
					}
				}
			}
			.point_content{
					background: #fff;
					position: relative;
					.title{
						padding: 20rpx;
						display: flex;
						justify-content: space-between;
						h4{
							margin-left: 20rpx;
						}
					}
					.title:before{
						position: absolute;
						left: 20rpx;
						top: 20rpx;
						display: inline-block;
						content: '';
						width: 2px;
						height: 44rpx;
						background-color: #FA882F;
						border-radius: 2px;
					}
					.point_content_list{
						display: flex;
						justify-content: space-between;
						text-align: center;
						align-items: center;
						height: 70rpx;
						li{
							width: 20%;
							text-align: center;
							overflow:hidden;
						}
						li:nth-child(2){
							width: 40%;
						}
						.get_point{
							color: #FF0000;
						}
						.point_detail{
							color: #0A2F99;
						}
					}
			}
	}
	
</style>