<template>
	<view class="container">
		<!-- 时间选择 -->
		<view class="timeSelectContent">
			<text class="iconfont icon-youjiantou zuojiantou" @click="goBack()"></text>
			<picker mode="date" :value="queryDate" :end="maxDate" fields="month" @change="bindDateChange">
				<view class="uni-input">{{queryDate}}</view>
			</picker>
			<i class="iconfont icon-youjiantou xiajiantou"></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>
			<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"></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>
			<h4 class="noListTip" v-else>暂无分享记录！</h4>
		</view>
	</view>
</template>

<script>
	import api from "@/api/api";
	import courseItem from "@/components/courseItem/courseItem.vue";
	import {
		fmdata
	} from '@/util/currentDate.js'
	export default {
		components: {
			courseItem
		},
		data() {
			return {
				queryDate: fmdata(new Date(), 'M'),
				// 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: {
			goBack() {
				uni.navigateBack({
					delta: 1
				});
			},
			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 => {
					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) {
				uni.navigateTo({
					url: `/pages/commonDetail/commonDetail?fileId=${val}&type=${type}&queryDate=${this.queryDate}`
				})
			},
			// 查看积分
			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: 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: 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>
