<template>
	<view class="container">
		<!-- 时间选择 -->
		<view class="timeSelectContent">
			<picker mode="date" :value="queryDate" :end="maxDate" fields="month" @change="bindDateChange">
				<view class="uni-input">{{queryDate}}</view>
			</picker>
			<i class="iconfont icon-youjiantou"></i>
		</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 class="saleDetailContent">
			<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,salesNumber:item.salesNumber}" :fileLecturerId="item.fileLecturerId"  :orderId="item.orderId"></course-item>
						</view>
						<view class="detailBtn">
							<text class="detailBtn" @click="viewDetail(item)"  style="color: #000;">订单详情></text>
						</view>
					</view>
					<view class="countsContent">
						<text>实际支付：￥{{parseFloat(item.paymentAmount).toFixed(2)}}</text>
					</view>
				</view>
			</template>
			<template v-if="userCourses && tabType===2">
				<view class="orderItemDetailBox" v-for="item in userShareCourseOrders">
					<view><text>订单编号</text><text>{{item.orderNo}}</text></view>
					<view><text>课程名称</text><text>{{item.fileTitle}}</text></view>
					<view><text>购买人</text><text>{{item.userName}}</text></view>
					<view class="orderDetailLine">
						<text></text>
						<text @click="viewDetail(item)">订单详情></text>
					</view>
				</view>
			</template>
		</view>
	</view>
</template>

<script>
	import api from "@/api/api";
	import courseItem from "@/components/courseItem/courseItem.vue";
	export default {
		components:{
			courseItem
		},
		data() {
			return {
				queryDate:`${new Date().getFullYear()}-${new Date().getMonth() + 1}`,
				maxDate:`${new Date().getFullYear()}-${new Date().getMonth() + 1}`,
				userId: uni.getStorageSync('cffp_userId'),
				coursesCountInfos:{},
				userCourses:[],
				userShareCourseOrders:[],
				userCourseCountNum:0,
				userShareCourseCount:0,
				tabType:1
			}
		},
		methods: {
			curriculumDetail(item){
				uni.navigateTo({
					url:`/pages/courseDetail/courseDetail?fileId=${item.fileId}`
				})
			},
			// 查看订单详情
			viewDetail(item){
				let type = this.tabType == 1 ? 'drop': ''
				uni.navigateTo({
					url:`/pages/orderDetail/orderDetail?id=${item.orderId}&type=${type}`
				})
			},
		   bindDateChange: function(e) {
				this.queryDate = e.detail.value;
				this.userCourseList();
				this.userCourseCount();
			},
			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=>{
						console.log(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'];
						}
					})
				}
				
			},
			// // 查看详情
			// goDetail(val){
			// 	uni.navigateTo({
			// 		url:`/pages/commonDetail/commonDetail?fileId=${val}&type=1`
			// 	})
			// },
			// 查看积分
			viewIntegral(){
				uni.navigateTo({
					url:`/pages/myPoints/myPoints`
				})
			},
		},
		onLoad() {
			this.userCourseCount()
			this.userCourseList()
		},
		mounted() {
			
		}
	}
</script>

<style lang="scss">
	.container{
		height: 100%;
		.timeSelectContent{
			background-color: #fff;
			padding: 10rpx 0;
			display: flex;
			justify-content: center;
			align-items: baseline;
			color: #333;
			.iconfont{
				color: #999;
				font-size: 24rpx;
				transform: rotate(90deg);
				margin-left: 8rpx;
			}
		}
		.saleStatisticalContent{
			background-color: #fff;
			margin: 10rpx 20rpx;
			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{
			margin: 10rpx 20rpx;
			.saleOrderInfoItem{
				padding: 18rpx 0rpx 18rpx 10rpx;
				border-radius: 20rpx;
				background-color: #fff;
				.countsContent{
					text-align: right;
					color: #333;
					font-size: 32rpx;
					margin-top: 20rpx;
				
				}
				.detailBtn{
					font-size: 24rpx;
					color: #4A4A4A;
					white-space: nowrap;
				}
			}
			.orderItemDetailBox{
				padding: 10rpx 20rpx 10rpx 40rpx;
				background-color: #fff;
				border-radius: 20rpx;
				color: #4a4a4a;
				margin-bottom: 20rpx;
				font-size: 24rpx;
				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: #FA882F;
					}
					&.orderDetailLine{
						justify-content: flex-end;
						font-size: 28rpx;
					}
				}
			}
			.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>
