<template>
	<view class="container">
		<view class="">
			<!-- 时间选择 -->
			<view class="timeSelectContent">
				<!-- #ifdef APP -->
				<text class="iconfont icon-youjiantou zuojiantou" @click="goBack()"></text>
				<!-- #endif -->
				<CommonTimePicker
					:timeData="startDate"
					:visible="showTime1" 
					@confirmDate="changeStartTime" 
					@closeTime="showTime1=false"
					@click="showTime1=true"
				/>
				
			</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>
		
		<!-- 分享明细 -->
		<view class="shareDetailContent">
			<view class="shareBox">
				<h3 class="shareTitle">分享明细</h3>
				<template v-if="userShareCourses && userShareCourses.length > 0">
					<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 iconStyle"></i>
								<text>分享</text>
								<text>{{item.shareCount}}</text>
							</view>
							<view @click="goDetail(item.fileId,2)">
								<i class="iconfont icon-yidu iconStyle"></i>
								<text>阅读</text>
								<text>{{item.readCount}}</text>
							</view>
							<view @click="goDetail(item.fileId,3)">
								<i class="iconfont icon-yifukuan iconStyle"></i>
								<text>购买</text>
								<text>{{item.buyCount}}</text>
							</view>
						</view>
					</view>
				</template>
				<h4 class="noListTip" v-else>暂无分享记录！</h4>
			</view>
			
		</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 dataHandling from "@/util/dataHandling";
	import CommonTimePicker from '@/components/commonTimePicker/commonTimePicker.vue';
	import JoinPopup from '@/components/commonPopup/JoinPopup.vue';
	import {
		fmdata
	} from '@/util/currentDate.js'
	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: {
					shareFrequencyMonth: 0,
					integralMonth: 0,
					shareSectionMonth: 0,
					shareFrequencyCount: 0,
					integralCount: 0,
					shareSectionCount: 0
				},
				userShareCourses: [],
				partnerType:''
			}
		},
		methods: {
			// 去加盟
			gotoApply(){
				dataHandling.pocessTracking(
				  '加盟',
				  `点击加盟按钮去加盟`,
				  '点击',
				  2,
				  '分享数据',
				  'pages/myShare/myShare'
				)
				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.userShareCount();
				this.userShareQuery();
				this.showTime1 = false
			},
			goBack() {
				uni.navigateBack({
					delta: 1
				});
			},
			
			userShareCount() {
				const params = {
					userId: this.userId,
					queryDate: this.queryDate
				}
				api.userShareCount(params).then(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
						};
					}
				})
			},
			userShareQuery() {
				const params = {
					userId: this.userId,
					queryDate: this.queryDate
				}
				api.userShareQuery(params).then(res => {
					if (res['success']) {
						this.userShareCourses = res['data']['userShareCourses'];
					} else {
						this.userShareCourses = [];
					}
				})
			},
			// 查看详情
			goDetail(val, type) {
				let typeName = type==1?'分享':type==2?"阅读":type==3?"购买":''
				dataHandling.pocessTracking(
				  `${typeName}`,
				  `点击${typeName}按钮,查看${typeName}数据`,
				  '点击',
				  2,
				  '分享数据',
				  'pages/myShare/myShare'
				)
				uni.navigateTo({
					url: `/pages/commonDetail/commonDetail?fileId=${val}&type=${type}&queryDate=${this.queryDate}`
				})
			},
			// 查看佣金
			viewIntegral(){
				if(this.partnerType == 'null'){
					this.$refs.joinPopup.open()
					return
				}
				dataHandling.pocessTracking(
				  '积分',
				  `点击积分查看佣金`,
				  '点击',
				  2,
				  '分享数据',
				  'pages/myShare/myShare'
				)
				uni.navigateTo({
					url:`/pages/pointsExchange/pointsExchange`
				})
			},
		},
		onLoad(options) {
			if(options.partnerType){
				this.partnerType = options.partnerType
			}
			this.userShareCount();
			this.userShareQuery();
		},
		mounted() {

		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .uni-popup .uni-popup__wrapper{
		 margin: 0 !important;
		 border-radius: 30rpx;
	 }
	.container {
		padding-bottom: 20rpx;
		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;
			}
		}
		.timeSelectContent {
			background-color: #fff;
			padding: 20rpx 0;
			display: flex;
			justify-content: center;
			align-items: baseline;
			color: #333;
			.xiajiantou {
				color: #999;
				font-size: 24rpx;
				transform: rotate(90deg);
				margin-left: 8rpx;
			}
		}

		.shareStatisticalContent {
			background-color: #fff;
			margin: 20rpx 20rpx;
			padding: 20rpx 14rpx;
			display: flex;
			flex-wrap: wrap;
			border-radius: 10rpx;

			.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 {
			flex: 1;
			box-sizing: border-box;
			background-color: #fff;
			margin: 0rpx 20rpx;
			padding: 20rpx;
			border-radius: 10rpx;
			.shareTitle {
				// margin: 20rpx 20rpx 0 20rpx;
				// padding: 20rpx;
				border-bottom: 1rpx solid #F2F2F2;
				color: #333;
				font-size: 36rpx;
				position: relative;
				background-color: #fff;
				border-radius: 10rpx 10rpx 0rpx 0rpx;
				
			}

			.shareOrderInfoItem {
				// margin: 0 20rpx;
				background-color: #fff;
				box-sizing: border-box;
				padding: 20rpx 10rpx;
				.timeBox {
					font-size: 28rpx;
					color: #999;
					margin-bottom: 10rpx;
					
				}

				.countsContent {
					background-color: #fff;
					display: flex;
					padding: 20rpx 0;
					view {
						flex: 1;
						font-size: 24rpx;
						display: flex;
						align-items: center;
						text {
							color: #666;

							&:last-child {
								margin-left: 10rpx;
								color: #0A2F99;
								font-weight: bold;
							}
						}
					}
				}
				
			}
			.shareOrderInfoItem:last-child{
				border-radius: 0 0 10rpx 10rpx;
			}
			
		}
	}
</style>
