<template>
	<view class="container">
		<view class="top">
			<picker @change="changeProductType" :value="dropOptionName" :range="productTypeList"
			range-key="dropOptionName">
				<view class="uni-input">{{productTypeList[productTypeIdx]['dropOptionName']}}
					<text class="iconfont icon-youjiantou"></text>
				</view>
			</picker>
			<picker mode="date" :value="fortuneDate" :end="maxDate" fields="month" @change="bindDateChange">
			   <view class="uni-input">{{fortuneDate}}
			   	<text class="iconfont icon-youjiantou"></text>
			   </view>
			</picker>
			<picker @change="changeCommissionType" :value="dropOptionName" :range="commissionTypeList"
			range-key="dropOptionName">
				<view class="uni-input">{{commissionTypeList[commissionTypeIdx]['dropOptionName']}}
					<text class="iconfont icon-youjiantou"></text>
				</view>
			</picker>
		</view>
		<view class="total_wrapper">
			<h4 class="total">
				{{fortuneDate}}总得分
			</h4>
			<h4 class="total_score_add" :class="{'total_score_reduce':sumCommissionAmount<=0}">
				<text>{{sumCommissionAmount>0?'+':'-'}}</text>
				{{sumCommissionAmount}}
			</h4>
		</view>
		<view class="list_wrapper">
			<view class="fortune_list" v-for="(fortuneItem,idx) in cffpFortuneDateList" :key="idx">
				<view class="date_score_info">
					<view>{{fortuneItem.orderDate}}</view>
					<view class="total_score_add" :class="{'total_score_reduce':fortuneItem.nowSumCommissionAmount<=0}">
						<text>{{fortuneItem.nowSumCommissionAmount>0?'+':'-'}}</text>
						{{fortuneItem.nowSumCommissionAmount}}
					</view>
				</view>
				<view class="fortuneExchangeList" v-for="(item,index) in fortuneItem.cffpFortuneExchangeList"
				@click="viewDetail(item.orderId)">
					<text>{{item.productTypeName}}</text>
					<text class="iconfont icon-youjiantou"></text>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	import api from '../../api/api';
	import common from '../../common/common';
	export default{
		data(){
			return {
				fortuneDate: null,
				timeFlag: null,
				commissionType:null,
				commissionTypeIdx:0,
				productType: null,
				productTypeIdx:0,
				cffpFortuneDateList:[],
				maxDate:`${new Date().getFullYear()}-${new Date().getMonth() + 1}`,
				commissionTypeList:[{dropOptionName:null,dropOptionCode:null}],
				productTypeList:[{dropOptionName:null,dropOptionCode:null}],
				sumCommissionAmount:null
			}
		},
		components:{},
		onLoad(options){
			this.fortuneDate = options.fortuneDate;
			this.productType = options.productType;
			this.timeFlag = options.timeFlag;
			this.commissionType = options.commissionType;
			if(this.timeFlag == 'D' || this.timeFlag == 'Y'){
				this.fortuneDate = `${new Date().getFullYear()}-${new Date().getMonth() + 1}-${new Date().getDate()}`
			}
			this.getCommissionType();
			this.getProductType();
			this.getDetail();
		},
		methods:{
			bindDateChange: function(e) {
				this.fortuneDate = e.detail.value;
				this.getDetail();
			},
			changeCommissionType: function(e) {
				this.commissionTypeIdx = e.detail.value;
				this.commissionType = this.commissionTypeList[this.commissionTypeIdx]['dropOptionCode'];
				console.log(this.commissionType)
				this.getDetail();
			},
			changeProductType: function(e) {
				this.productTypeIdx = e.detail.value;
				this.productType = this.productTypeList[this.productTypeIdx]['dropOptionCode'];
				this.getDetail();
			},
			getDetail(){
				const param = {
					isDtl: 1,
					userId: uni.getStorageSync('cffp_userId'),
					fortuneDate: this.fortuneDate,
					timeFlag: this.timeFlag,
					commissionType:this.commissionType,
					productType: this.productType
				}
				// const param = {
				//   isDtl: 1,
				//   userId: uni.getStorageSync('cffp_userId'),
				//   fortuneDate: "2022-12",
				//   timeFlag: "M",
				//   commissionType:"A01",
				//   productType: 1
				// }
			api.findForExchangeStatisticDtl(param).then((res)=>{
				if(res['success']){
					this.cffpFortuneDateList = res['data']['cffpFortuneDateList'];
					console.log(this.cffpFortuneDateList)
					this.sumCommissionAmount = res['data']['sumCommissionAmount'];
				}
			});
		},
		//commissionType
			getProductType(){
				api.dropOptionsQuery({code:'cffp_course_classify'}).then((res)=>{
					this.productTypeList = [{dropOptionName:'全部',dropOptionCode:null}].concat(res['data']['dropMasterInfoList'][0]['dropOptionsInfoList']);
					for(let i=0;i<this.productTypeList.length;i++){
						if(this.productType == this.productTypeList[i]['dropOptionCode']){
							this.productTypeIdx = i;
							break;
						}
					}
				})
			},
			getCommissionType(){
				api.dropOptionsQuery({code:'CFFP_Commission_Item'}).then((res)=>{
					this.commissionTypeList = [{dropOptionName:'全部',dropOptionCode:null}].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;
						}
					}
					console.log(this.commissionTypeIdx)
				})
			},
			// 查看订单详情
			viewDetail(id){
				uni.navigateTo({
					url:`/pages/orderDetail/orderDetail?id=${id}&commissionType=${this.commissionType}`
				})
			}
	}
}
</script>

<style lang="scss">
	.container{
		.top{
			padding: 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 0 auto  20rpx auto;
			background: #fff;
			.icon-youjiantou{
				transform: rotate(90deg);
				width: 16px;
				height: 16px;
				display: inline-block;
			}
		}
		.total_wrapper{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx;
			background: #fff;
			margin-bottom: 20rpx;
			.total_score_add{
				color:#F15A1F;
			}
			.total_score_reduce{
				color:#5C9D50;
			}
		}
		.list_wrapper{
			padding: 30rpx;
			background: #fff;
			.fortune_list{
				.date_score_info,.fortuneExchangeList{
					display: flex;
					justify-content: space-between;
					margin-bottom: 20rpx;
					.total_score_add{
						color:#F15A1F;
					}
					.total_score_reduce{
						color:#5C9D50;
					}
					.iconfont{
						color: #999999;
						font-size: 24rpx;
					}
				}
				.date_score_info{
					font-size: 28rpx;
				}
				.fortuneExchangeList{
					border-bottom: 2rpx #F2F2F2 solid;
					padding-bottom: 20rpx;
				}
			}
			
		}
	}
</style>