<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="shareStatisticalContent">
			<view class="statisticItem">
				<text>{{coursesCountInfos.shareFrequencyMonth}}</text>
				<text>本月分享（频次）</text>
			</view>
			<view class="statisticItem" @click="viewIntegral()">
				<text class="colorText">{{coursesCountInfos.integralMonth}}</text>
				<text>本月获得积分</text>
			</view>
			<view class="statisticItem">
				<text>{{coursesCountInfos.shareSectionMonth}}</text>
				<text>本月统计(节)</text>
			</view>
			<view class="statisticItem">
				<text>{{coursesCountInfos.shareFrequencyCount}}</text>
				<text>累计分享(频次)</text>
			</view>
			<view class="statisticItem" @click="viewIntegral()">
				<text class="colorText">{{coursesCountInfos.integralCount}}</text>
				<text>累计获得积分</text>
			</view>
			<view class="statisticItem">
				<text>{{coursesCountInfos.shareSectionCount}}</text>
				<text>累计分享(节)</text>
			</view>
		</view>
		<!-- 分享明细 -->
		<view class="shareDetailContent">
			<h3>分享明细</h3>
			<h4 class="noListTip" v-if="!userShareCourses">暂无分享记录！</h4>
			<template v-if="userShareCourses">
				<view class="shareOrderInfoItem" v-for="item in userShareCourses" :key="item.fileId">
					<view class="timeBox">{{item.shareDate}}</view>
					<view class="courseInfoContent">
						<course-item :thumbnailPath="item.displayImage" :title="item.fileTitle" :summaryBox="item.fileSynopsis" :dataList="{coursePrice:item.coursePrice,salesNumber:item.salesNumber}" :fileLecturerId="item.fileLecturerId"></course-item>
					</view>
					<view class="countsContent">
						<view @click="goDetail(item.fileId,1)">
							<i class="iconfont icon-zhuanfa"></i>
							<text>分享</text>
							<text>{{item.shareCount}}</text>
						</view>
						<view @click="goDetail(item.fileId,2)">
							<i class="iconfont icon-yidu"></i>
							<text>阅读</text>
							<text>{{item.readCount}}</text>
						</view>
						<view @click="goDetail(item.fileId,3)">
							<i class="iconfont icon-yifukuan"></i>
							<text>购买</text>
							<text>{{item.buyCount}}</text>
						</view>
					</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: {
							shareFrequencyMonth:0,
							integralMonth:0,
							shareSectionMonth:0,
							shareFrequencyCount:0,
							integralCount:0,
							shareSectionCount:0
						},
				userShareCourses:[]
			}
		},
		methods: {
		   bindDateChange: function(e) {
				this.queryDate = e.detail.value;
				this.userShareCount();
				this.userShareQuery();
			},
			userShareCount(){
				const params = {
					userId:this.userId,
					queryDate:this.queryDate
				}
				api.userShareCount(params).then(res=>{
					console.log(res)
					if(res['success']){
						this.coursesCountInfos = res['data'] ? res['data'] : this.coursesCountInfos;
						Object.keys(this.coursesCountInfos).forEach((item)=>{
							if(!this.coursesCountInfos[item]){
								this.coursesCountInfos[item] = 0;
							}
						})
					}else{
						this.coursesCountInfos = {
							shareFrequencyMonth:0,
							integralMonth:0,
							shareSectionMonth:0,
							shareFrequencyCount:0,
							integralCount:0,
							shareSectionCount:0
						};
						console.log(this.coursesCountInfos)
					}
				})
			},
			userShareQuery(){
				const params = {
					userId:this.userId,
					queryDate:this.queryDate
				}
				console.log(this.userShareCourses)
				api.userShareQuery(params).then(res=>{
					console.log(res)
					if(res['success']){
						this.userShareCourses = res['data']['userShareCourses'];
					}else{
						this.userShareCourses = [];
					}
				})
			},
			// 查看详情
			goDetail(val,type){
				uni.navigateTo({
					url:`/pages/commonDetail/commonDetail?fileId=${val}&type=${type}`
				})
			},
			// 查看积分
			viewIntegral(){
				uni.navigateTo({
					url:`/pages/myPoints/myPoints`
				})
			}
		},
		onLoad() {
			this.userShareCount();
			this.userShareQuery();
		},
		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;
			}
		}
		.shareStatisticalContent{
			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;
					}
				}
			}
		}
		.shareDetailContent{
			h3{
				color: #333;
				font-size: 36rpx;
				position: relative;
				margin: 10rpx 0 10rpx 58rpx;
				&::before{
					content: '';
					display: block;
					position: absolute;
					left: -5px;
					top: 4px;
					width: 2px;
					height: 70%;
					border-radius: 4rpx;
					background-color: #FA882F;
				}
			}
			.shareOrderInfoItem{
				margin: 0 20rpx;
				.timeBox{
					font-size: 28rpx;
					color: #999;
					margin: 10rpx 0 10rpx 50rpx;
				}
				.countsContent{
					background-color: #fff;
					display: flex;
					border-bottom-left-radius: 20rpx;
					border-bottom-right-radius: 20rpx;
					padding: 10rpx 10rpx 20rpx 10rpx;
					view{
						flex: 1;
						font-size: 24rpx;
						display: flex;
						align-items: center;
						text{
							color: #666;
							&:last-child{
								margin-left: 10rpx;
								color: #0A2F99;
								font-weight: bold;
							}
						}
					}
				}
			}
		}
	}
</style>
