<template>
	<view class="container">
		<view>
			<!-- 时间选择 -->
			<view class="top">
				<!-- #ifdef APP -->
				<text class="iconfont icon-youjiantou zuojiantou" @click="goBack()" style="left: 20rpx;"></text>
				<!-- #endif -->
				<view class="timeSelectContent" @click="showTime1=true">
					<CommonTimePicker
						:timeData="startDate"
						:visible="showTime1" 
						@confirmDate="changeStartTime" 
						@closeTime="showTime1=false"
					/>
					
				</view>
			</view>
			<!-- 销售统计 -->
			<view class="saleStatisticalContent">
				<view class="statisticItem">
					<text>{{coursesCountInfos.integralCount}}</text>
					<text>累计积分</text>
				</view>
				<view class="statisticItem" @click="viewIntegral()">
					<text class="colorText">{{coursesCountInfos.integralDay}}</text>
					<text>今日获得积分</text>
				</view>
				<view class="statisticItem">
					<text>{{coursesCountInfos.integralMonth}}</text>
					<text>本月得分</text>
				</view>
				<view class="statisticItem">
					<text>{{coursesCountInfos.orderCount}}</text>
					<text>累计订单</text>
				</view>
				<view class="statisticItem" @click="viewIntegral()">
					<text class="colorText">{{coursesCountInfos.orderDay}}</text>
					<text>今日成交单数</text>
				</view>
				<view class="statisticItem">
					<text>{{coursesCountInfos.orderMonth}}</text>
					<text>本月单数</text>
				</view>
			</view>
		</view>
		
		<!-- 分享明细 -->
		<view class="saleDetailContent" :style="{flex:userCourses.length<=0 || userShareCourseOrders.length <=0 ?'1':''}">
			<view class="courseTab">
				<text :class="{'actived':tabType===1}" @click="switchTab(1)">我的订单</text>
				<text :class="{'actived':tabType===2}" @click="switchTab(2)">分享订单</text>
			</view>
			<view class="totalCountBox">合计（单）：<text>{{userCourseCountNum}}</text></view>
			<h4 class="noListTip" v-if="!userCourses || userCourses.length<=0 && tabType===1">暂无购买记录！</h4>
			<h4 class="noListTip" v-if="!userShareCourseOrders || userShareCourseOrders.length <=0  && tabType===2">暂无分享记录！</h4>
			<template v-if="userCourses && tabType===1">
				<view class="saleOrderInfoItem" v-for="item in userCourses" :key="item.fileId"  >
					<view class="courseInfoContent"  style="display: flex;justify-content: space-between;">
						<view class="" @click="curriculumDetail(item)">
								<course-item 
									:thumbnailPath="item.displayImage" 
									:fileId="item.fileId" 
									:title="item.fileTitle" 
									:summaryBox="item.fileSynopsis" 
									:dataList="{coursePrice:item.coursePrice}" 
									:fileLecturerId="item.fileLecturerId"  
									:orderId="item.orderId"
									:showDetail="true"
								></course-item>
						</view>
						
					</view>
					<view class="countsContent">
						<text>实际支付：￥{{parseFloat(item.paymentAmount).toFixed(2)}}</text>
						<view class="arrowBox"  @click="viewDetail(item)">
							<text class="detailBtn" >订单详情</text>
						</view>
					</view>
				</view>
			</template>
			<template v-if="userCourses && tabType===2">
				<view class="orderItemDetailBox" v-for="(item,index) in userShareCourseOrders"  :key="index">
					<view >
						<text>订单编号</text>
						<text class="orderNum">{{item.orderNo}}</text>
					</view>
					<view>
						<text>产品名称</text>
						<text>{{item.fileTitle}}</text>
					</view>
					<view>
						<text>购买人</text>
						<text>{{item.userName}}</text>
					</view>
					<view class="orderDetailLine">
						<text class="infoBtn" @click="viewDetail(item)">订单详情</text>
					</view>
				</view>
			</template>
		</view>
		<!-- 使用封装后的弹窗组件 -->
		<join-popup 
		  ref="joinPopup"
		  @confirm="gotoApply"
		></join-popup>
		
	</view>
</template>

<script>
	import api from "@/api/api";
	import courseItem from "@/components/courseItem/courseItem.vue";
	import {fmdata} from '@/util/currentDate.js'
	import CommonTimePicker from '@/components/commonTimePicker/commonTimePicker.vue';
	import dataHandling from "@/util/dataHandling";
	import JoinPopup from '@/components/commonPopup/JoinPopup.vue';
	import { initJssdkShare, setWechatShare } from '@/util/fiveshare';
	export default {
		components:{
			courseItem,
			CommonTimePicker,
			JoinPopup
		},
		data() {
			return {
				showTime1:false,
				startDate:{year:dataHandling.getDateParts().year,month:dataHandling.getDateParts().month},
				queryDate: fmdata(new Date(),'M'),
				maxDate:`${new Date().getFullYear()}-${new Date().getMonth() + 1}`,
				userId: uni.getStorageSync('cffp_userId'),
				coursesCountInfos:{},
				userCourses:[],
				userShareCourseOrders:[],
				userCourseCountNum:0,
				userShareCourseCount:0,
				tabType:1,
				partnerType:''
			}
		},
		methods: {
			// 去加盟
			gotoApply(){
				dataHandling.pocessTracking(
				  '加盟',
				  `点击加盟按钮去加盟`,
				  '点击',
				  2,
				  '成交单数',
				  'pages/saleCourseLists/saleCourseLists'
				)
				uni.navigateTo({
						url: '/myPackageA/applyFranchise/applyFranchise'
					})
				this.$refs.joinPopup.close()
				
			},
			changeStartTime(obj){
				this.startDate = obj
				this.queryDate=`${obj.year}-${obj.month<10?`0${obj.month}`:obj.month}`
				this.userCourseList();
				this.userCourseCount();
				this.showTime1 = false
			},
			goBack(){
				uni.navigateBack({
					delta: 1  
				});
			},
			curriculumDetail(item){
				dataHandling.pocessTracking(
				  '查看产品详情',
				  `点击产品，查看${item.fileTitle}详情`,
				  '点击',
				  2,
				  '成交单数',
				  'pages/saleCourseLists/saleCourseLists'
				)
				uni.navigateTo({
					url:`/pages/courseDetail/courseDetail?fileId=${item.fileId}`
				})
			},
			// 查看订单详情
			viewDetail(item){
				let type = this.tabType == 1 ? 'drop': ''
				dataHandling.pocessTracking(
				  '查看订单详情',
				  `点击订单详情，查看订单`,
				  '点击',
				  2,
				  '成交单数',
				  'pages/saleCourseLists/saleCourseLists'
				)
				uni.navigateTo({
					url:`/pages/orderDetail/orderDetail?id=${item.orderId}&type=${type}&Withdrawal=1`
				})
			},
		  
			switchTab(type){
				this.tabType = type
				this.userCourseList()
			},
			userCourseCount(){
				const params = {
					userId:this.userId,
					queryDate:this.queryDate
				}
				api.userCourseCount(params).then(res=>{
					if(res['success']){
						this.coursesCountInfos = res['data']
					}
				})
			},
			userCourseList(){
				const params = {
					userId:this.userId,
					queryDate:this.queryDate
				}
				if(this.tabType===1){
					api.userCourseList(params).then(res=>{
						if(res['success']){
							this.userCourses = res['data']['userCourses'];
							this.userCourseCountNum = res['data']['userCourseCount'];
						}
					})
				}else{
					api.userShareCourseList(params).then(res=>{
						if(res['success']){
							this.userShareCourseOrders = res['data']['userShareCourseOrders'];
							this.userCourseCountNum = res['data']['userShareCourseCount'];
						}
					})
				}
				
			},
			
			// 查看佣金
			viewIntegral(){
				if(this.partnerType == 'null'){
					this.$refs.joinPopup.open()
					return
				}
				dataHandling.pocessTracking(
				  '积分/单数',
				  `点击积分/单数查看佣金`,
				  '点击',
				  2,
				  '成交单数',
				  'pages/saleCourseLists/saleCourseLists'
				)
				uni.navigateTo({
					url:`/pages/pointsExchange/pointsExchange`
				})
			},
		},
		onLoad(options) {
			if(options.partnerType){
				this.partnerType = options.partnerType
			}
			this.userCourseCount()
			this.userCourseList()
			
		},
		onShow() {
			let app22 = getCurrentPages().length
			this.userCourseCount()
			this.userCourseList()
			// #ifdef H5
						initJssdkShare(() => {
						  setWechatShare();
						}, window.location.href);
						// #endif
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .uni-popup .uni-popup__wrapper{
		 margin: 0 !important;
		 border-radius: 30rpx;
	 }
	.container{
		// padding-bottom: 50rpx;
		display: flex;
		flex-direction: column;
		.joinContent{
			width: 500rpx;
			// height: 300rpx;
			border-radius: 30rpx;
			background-color: #ffff;
			padding: 30rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			flex-direction: column;
			.joinHeader{
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;
				background: rgba(54, 57, 169, 1);
				display: flex;
				align-items: center;
				justify-content: center;
				margin-bottom: 20rpx;
			}
			.joinCon{
				// padding: 20rpx 0;
				.one{
					font-size: 30rpx;
					color: rgba(38, 41, 44, 1);
					font-weight: 600;
					text-align: center;
				}
				.two{
					color: rgba(145, 144, 148, 1);
					font-size: 26rpx;
					text-align: center;
					margin-top: 10rpx;
					margin-bottom: 20rpx;
				}
			}
			.joinFotter{
				width: 100%;
				color: #fff;
				display: flex;
				align-items: center;
				justify-content: center;
				box-sizing: border-box;
				padding: 10rpx 0;
				background: rgba(54, 57, 169, 1);
				border-radius: 60rpx;
				font-size: 28rpx;
			}
		}
		.top{
			display: flex;
			align-items: center;
			background: #fff;
			.zuojiantou{
				display: inline-block;
				transform: rotate(180deg);
				font-size: 30rpx;
				z-index: 1;
			}
			.timeSelectContent{
				width: 100%;
				background-color: #fff;
				padding: 20rpx 0;
				display: flex;
				justify-content: center;
				align-items: baseline;
				color: #333;
				.iconfont{
					color: #999;
					font-size: 24rpx;
					transform: rotate(90deg);
					margin-left: 8rpx;
				}
			}
		}
		.saleStatisticalContent{
			margin: 20rpx;
			border-radius: 10rpx;
			background-color: #fff;
			padding: 20rpx 14rpx;
			display: flex;
			flex-wrap: wrap;
			
			.statisticItem{
				flex: 1;
				min-width: 33%;
				display: flex;
				flex-direction: column;
				align-items: center;
				border-right: 1px solid #F4F4F4;
				margin-bottom: 10rpx;
				&:nth-of-type(3n){
					border-right: none;
				}
				text{
					color: #333;
					font-size: 36rpx;
					&:last-child{
						color: #666;
						font-size: 28rpx;
					}
					&.colorText{
						color: #F15A1F;
					}
				}
			}
		}
		.saleDetailContent{
			box-sizing: border-box;
			padding: 20rpx 40rpx 0rpx  20rpx;
			background-color: #fff;
			margin: 0rpx 20rpx 20rpx 20rpx;
			border-radius: 10rpx;
			.noListTip{
				font-size: 30rpx;
				width: 100%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.saleOrderInfoItem{
				padding: 18rpx 0rpx 18rpx 10rpx;
				border-radius: 20rpx;
				background-color: #fff;
				border-bottom: 1rpx solid #F2F2F2;
				margin-bottom: 10rpx;
				.countsContent{
					display: flex;
					align-items: center;
					justify-content: space-between;
					text-align: right;
					color: #333;
					font-size: 32rpx;
					margin-top: 20rpx;
				
				}
				.arrowBox{
					display: flex;
					align-items: center;
					justify-content: center;
					.detailBtn{
						font-size: 24rpx;
						color:#fff;
						white-space: nowrap;
						background-color: #20269B;
						padding: 10rpx 20rpx;
						border-radius: 40rpx;
					}
				}
				
			}
			.saleOrderInfoItem:last-child{
				border: none;
			}
			.orderItemDetailBox{
				padding: 10rpx 20rpx 10rpx 40rpx;
				background-color: #fff;
				border-radius: 20rpx;
				color: #4a4a4a;
				margin-bottom: 20rpx;
				font-size: 28rpx;
				border-bottom: 1rpx solid #F2F2F2;
				view{
					position: relative;
					margin-bottom: 20rpx;
					display: flex;
					text{
						&:first-child{
							color: #333;
							width: 0;
							flex: 0 0 20%;
						}
					}
					&:first-child::before{
						display:block;
						content: '';
						position: absolute;
						left: -20rpx;
						top: 10rpx;
						width: 8rpx;
						height: 60%;
						border-radius:8rpx;
						background-color: #20269B;
					}
					&.orderDetailLine{
						justify-content: flex-end;
						font-size: 28rpx;
						.infoBtn{
							padding: 10rpx 20rpx;
							color: #fff;
							border-radius: 40rpx;
							background-color: #20269B;
							display: flex;
							align-items: center;
							justify-content: center;
						}
					}
					.orderNum{
						/* 新增以下样式 */
						white-space: nowrap; /* 不换行 */
						overflow: hidden; /* 超出部分隐藏 */
						text-overflow: ellipsis; /* 显示省略号 */
						flex: 1; /* 占据剩余空间 */
					}
				}
			}
			.orderItemDetailBox:last-child{
				border: none;
			}
			.courseTab{
				margin-top: 20rpx;
				text{
					padding: 6rpx 16rpx;
					color: #20269B;
					border: 1px solid #20269B;
					border-radius: 10rpx;
					margin-right: 20rpx;
					font-size: 24rpx;
					&.actived{
						background-color: #20269B;
						color: #fff;
					}
				}
			}
			.totalCountBox{
				margin: 16rpx 0;
				font-size: 28rpx;
				color: #666;
				text{
					color: #20269B;
				}
			}
		}
	}
</style>
