<template>
	<view class="container" :style="cffpFortuneDateList.length>6?'height:auto':'height:100vh'">
		<!-- #ifdef APP -->
		<view class="backArrow">
			<text class="iconfont icon-youjiantou zuojiantou" style="left: 5rpx;" @click="goBack()"></text>
			<text style="font-size: 30rpx;">佣金</text>
		</view>
		<!-- #endif -->

		<view class="listBox">
			<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()" v-if="showWithdrawal">
						提现
					</view>
				</view>
				<view class="bottom">
					<view class="bottomItem" v-for="score in scoreList " :key="score.id">
						<!-- @click="gotoRecord(score.id)" -->
						<view class="one">
							<view @click="gotoRecord(score.id)" 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>

	</view>
</template>

<script>
	import api from '../../api/api';
	import CustomDatePop from './customDatePop.vue';
	import dataHandling from "@/util/dataHandling";
	import { initJssdkShare, setWechatShare } from '@/util/fiveshare';
	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: '订单成交后需等待7天结算期' },
					{ 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: [],
				userInfo: {},
				showWithdrawal:true
			}
		},
		components: { CustomDatePop },
		onLoad() {
			this.userInfo = JSON.parse(uni.getStorageSync('cffp_userInfo'))
			// 经销商职级p3之上的都不给提现
			if(this.userInfo.levelCode&&this.userInfo.levelCode.split('')[1]>3){
				this.showWithdrawal = false
			}
			console.log('levelCode',this.userInfo.levelCode);
		},
		onShow() {
			this.queryByUserIdFortuneStatistic();
			this.getCommissionType()
			this.getDetail()
			// #ifdef H5
			initJssdkShare(() => {
				setWechatShare();
			}, window.location.href);
			// #endif
		},
		methods: {
			// 查看订单详情
			viewDetail(item) {
				dataHandling.pocessTracking(
					'查看订单详情',
					`点击查看订单详情`,
					'点击',
					2,
					'佣金',
					'pages/pointsExchange/pointsExchange'
				)
				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';

						//总积分
						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}`
					// })
					dataHandling.pocessTracking(
						'提现',
						`点击提现按钮`,
						'点击',
						2,
						'佣金',
						'pages/pointsExchange/pointsExchange'
					)
					uni.navigateTo({
						url: `/myPackageA/integralExchange/exchange`
					})
				}
			},
			// toRecord(){
			// 	uni.navigateTo({
			// 		url:'/pages/exchangeRecord/exchangeRecord'
			// 	})
			// },
			viewDropLists() {
				uni.navigateTo({
					url: '/pages/dropLists/dropLists'
				})
			},
			gotoRecord(id) {
				if (id == '2') {
					uni.navigateTo({
						url: '/myPackageA/commission/withdrawalRecord'
					})
				}
			}
		}
	}
</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;
		/* #ifdef H5 */
		padding-top: 15rpx;
		/* #endif */

		padding-bottom: 20rpx;

		.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;
			}
		}

		.listBox {
			padding: 10rpx 20rpx 0rpx 20rpx;

		}

		.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>