<template>
	<view class="container">
		<view class="homeHeader">
			<view class="one">
				<text style="font-size: 80rpx;">01</text>
				<view class="titleTxt">
					<text >分享商品</text>
					<text class="iconfont icon-shuangyoujiantou iconOne" ></text>
				</view>
			</view>
			<view class="two">
				<text>02</text>
				<view class="titleTxt">
					<text >好友购买</text>
					<text class="iconfont icon-shuangyoujiantou iconOne" ></text>
				</view>
			</view>
			<view class="three">
				<text>03</text>
				<view class="titleTxt lastTxt">
					<text>首页佣金</text>
					<text>查看收益</text>
				</view>
			</view>
		</view>
		<view class="productBox">
			<view class="productList" :style="{marginTop}">
				<view class="productItem" v-for="item in cffpCourseInfos" :key="item.fileId" >
					<view class="top" @click="goDetail(item)">
						<view class="left">
							<image class="productImg" :src="item.displayImage" alt="" mode="widthFix"></image>
						</view>
						<view class="right">
							<view class="one">
								{{item.fileTitle}}
							</view>
							<view class="two">
								{{item.fileSynopsis}}
							</view>
							<view class="three">
								<text style="font-size: 28rpx;color: rgba(32, 39, 155, 1);">￥{{Number(item.coursePrice).toFixed(2)}}</text>
							</view>
						</view>
					</view>
					<view class="bottom">
						<view class="bottomCon">
							<view class="left" >
								最高可赚￥{{item.income || '0.00'}}
							</view>
							<view class="right" @click="gotoShare(item)">
								去分享
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<uni-popup ref="popup" type="center" background-color="#fff">
			<view class="descriptionBox">
				<view class="imageBox">
					<text>关注公众号</text>
					<text class="subTit">通知实时提醒，及时接收下单和提现通知</text>
				</view>
				<view class="codeBox">
					<image v-if="sourceType == '1'" src="@/static/cffpCode.jpg" mode="widthFix" style="width:250rpx !important;"></image>
					<image v-if="sourceType == '4'" src="@/static/ydCode.jpg" mode="widthFix" style="width:250rpx !important;"></image>
					<image v-if="sourceType == '3'" src="@/static/ydHomeOfficeCode.jpg" mode="widthFix" style="width:250rpx !important;"></image>
				</view>
				<view class="description">
					扫一扫，关注公众号
				</view>
			</view>
			
		</uni-popup>
		<uni-share-wx ref="sharewx"></uni-share-wx>
		<view class="markBox" @click="shareTipsFlag=false" v-if="shareTipsFlag">
			<view class="guideImgBox">
				<image src="../../static/Group132.png" mode="widthFix"></image>
				<view class="tips">
					<view style="margin-bottom:30rpx">请点击右上角菜单</view>
					<view>分享给朋友</view>
				</view>
			</view>
		</view>
		
	</view>
	<!-- <tabBar :currentPage="currentPage" v-if="onlyShowList!=0"></tabBar> -->
</template>

<script>
	import api from "../../api/api";
	import courseItem from "@/components/courseItem/courseItem.vue";
	import tabBar from '../../components/tabBar/tabBar.vue';
	import carousel from '@/components/carousel/carousel.vue';
	import search from '@/components/search/search.vue';
	import {baseURL,apiURL,cffpURL,companyInfo,shareURL} from "@/environments/environment";
	import dataHandling from "@/util/dataHandling";
	import {hshare} from '@/util/fiveshare';
	import UniShareWx from "@/uni_modules/uni-share-wx/index.vue";
	import {nanoid} from 'nanoid';
	export default{
		props:['tagIds'],
		components: {
			UniShareWx,
		},
		data(){
			return{
				cffpCourseInfos:[],
				currentPage:'courselist',
				fileUploadItemCFFPList:[],
				queryName:null,
				userId: uni.getStorageSync('cffp_userId'),
				runEnv:dataHandling.getRuntimeEnv(), //运行的环境  browser、app、h5
				shareTipsFlag:false,
				sourceType:'1',//根据来源展示二维码 默认是cffp,
				env:dataHandling.getRuntimeEnv2()
			}
		},
		name:'courselist',
		components:{
			courseItem,
			tabBar,
			carousel,
			search
		},
		
		onLoad() {
		    this.queryName = uni.getStorageSync('queryName') || '';
			 this.sourceType = uni.getStorageSync('addSystemType') || '1';
		  },
		  onShow() {
		    this.queryName = uni.getStorageSync('queryName') || '';
		    this.courseList();
			this.sourceType = uni.getStorageSync('addSystemType') || '1';
		  },
		  computed:{
			  marginTop(){
				  if(this.env.device.isMobile){
					  return '-5%'
				  }else {
					  return '-1.5%'
				  }
			  }
		  },
		methods:{
			gotoShare(item){
				if(this.runEnv == 'browser'){
					this.$refs.popup.open()
					return
				}else if(this.runEnv == 'app' || this.runEnv == 'wechat-h5'){
					const shareCode = nanoid() + this.userId
					const jumptime = Date.parse(new Date()) / 1000
					//app分享 
					// #ifdef APP-PLUS
					let dataWXform = {
						href: shareURL + "/pages/courseDetail/courseDetail?fileId=" + item.fileId +
							'&coursesharing=1' + '&serialsNo=' + nanoid() + '&shareCode=' + shareCode + '&shareUserId=' +
							this.userId + '&jumpUrl=' + jumptime + "&",
						title: item.fileTitle,
						// summary: `加入我们开启学习之旅`,
						summary: item.fileSynopsis,
						imageUrl: item.displayImage,
						fileId: item.fileId,
						shareCode: shareCode
					}
					this.$refs.sharewx.open(dataWXform)
					// #endif
					
					//#ifdef H5
					this.shareTipsFlag = true;
					this.getshareData2(shareCode,jumptime,item)
					
					// #endif
				}
			},
			getshareData2(shareCode,jumptime,item) {
				let data = {
					title: item.fileTitle,
					// desc: '加入我们开启学习之旅',
					desc:item.fileSynopsis,
					link: shareURL + "/pages/courseDetail/courseDetail?fileId=" + item.fileId +
						'&coursesharing=1' + '&serialsNo=' + nanoid() + '&shareCode=' + shareCode + '&shareUserId=' +
						this.userId + '&jumpUrl=' + jumptime+ "&", //分享链接
					imgUrl: item.displayImage, //图片
				}
				//安卓机型获取当前页面路径
				let url = window.location.href.split('#')[0];
				
				//ios机型获取当前页面路径
				let ua = navigator.userAgent.toLowerCase();
				let isWeixin = ua.indexOf('micromessenger') !== -1;
				if (isWeixin) {
					let isiOS = /(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent); //ios终端
				    if (isiOS && window.sessionStorage.getItem('firstEntryUrl')) {
				        url = window.sessionStorage.getItem('firstEntryUrl').split('#')[0];
				    }
				}
				// let url = window.location.href.split('#')[0]
				
				hshare(data, url)
				this.submitsuessc(shareCode,jumptime,item)
				
				
			},
			submitsuessc(shareCode,jumptime,item){
				let platform = uni.getSystemInfoSync().platform
				let UserShareRequestVO = {
					systemType: platform == 'ios'? '1': '0',
					userId: uni.getStorageSync('cffp_userId'),
					businessType: '1', // 分享类型
					businessId:item.fileId, // 课程Id
					shareUrl: shareURL + "/pages/courseDetail/courseDetail?fileId=" + item.fileId +
						'&coursesharing=1' + '&serialsNo=' + nanoid() + '&shareCode=' + shareCode + '&shareUserId=' +
						this.userId + '&jumpUrl=' + jumptime + "&", // 分享链接
					shareType: '2', // 分享类型(1:图片分享; 2:链接分享)
					shareToWhere: 3, //分享到哪儿（1好友 2朋友圈）
					shareCode: shareCode
				}
				api.userShare(UserShareRequestVO).then(res => {
					if (res['success']) {
						// uni.showToast({
						// 	title: '分享成功',
						// 	duration: 2000
						// });
					}
				})
			},
			goDetail(item){
				uni.navigateTo({
					url: `/pages/courseDetail/courseDetail?fileId=${item.fileId}`
				});
			},
			courseList(){
				
				const param = {
					queryName:this.queryName
				}
				api.courseList(param).then(res=>{
					if(res['success']){
						this.cffpCourseInfos = res['data']['data'];
					}
				})
			},
			tagConcat(val,v2){
				if(val.indexOf(',') > 0){
					return [].concat(v2,val.split(','))
				}else{
					return [].concat(v2,val)
				}
			},
			getCourseList(res){
				console.log('res',res);
				 this.queryName = res;
				 this.courseList()
            },
			queryAreaCenterInfo() {
				api.queryAreaCenterInfo({
					userId: uni.getStorageSync('cffp_userId'),
					companyType: `${companyInfo.companyType}`
				}).then((res) => {
					if (res['success']) {
						uni.setStorageSync('fileUploadItemCFFPList', res['data']['fileUploadItemCFFPList'])
						const cffp_userInfo = {
							name: res['data']['userReName'],
							mobile: res['data']['mobile']
						}
						uni.setStorageSync('cffp_userInfo', JSON.stringify(cffp_userInfo));
						this.fileUploadItemCFFPList = uni.getStorageSync('fileUploadItemCFFPList');
					}
				})
			},
		},
		mounted() {
			this.fileUploadItemCFFPList = uni.getStorageSync('fileUploadItemCFFPList');
			if(!this.fileUploadItemCFFPList){
				this.queryAreaCenterInfo();
			}
			this.courseList();
		},
		onTabItemTap() {
		    // 通过tabbar切换时清空storage
		    uni.removeStorageSync('queryName');
		  },
		onHide() {
			this.queryName = ''
			uni.removeStorageSync('queryName')
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .uni-popup .uni-popup__wrapper{
		 margin: 0 !important;
		 border-radius: 30rpx;
	 }
	.container{
		background-color: rgba(235, 239, 247, 1);
		display: flex;
		flex-direction: column;
		.homeHeader{
			box-sizing: border-box;
			width: 100%;
			background: linear-gradient(225deg, rgba(65, 69, 188, 1) 0%, rgba(29, 30, 125, 1) 100%);
			padding: 30rpx 0 100rpx 0;
			color: rgba(255,255,255,.3);
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 80rpx;
			height: 300rpx;
			view{
				width: 33%;
				display: flex;
				align-items: center;
				justify-content: center;
				position: relative;
				.titleTxt{
					box-sizing: border-box;
					position: absolute;
					width: 100%;
					left: 50%;
					transform: translate(-50%);
					bottom: -20%;
					font-size: 28rpx;
					color: #fff;
					.icon-shuangyoujiantou{
						font-size: 26rpx;
						position: absolute;
						right:0;
						
					}
				}
				.lastTxt{
					display: flex;
					align-items: center;
					flex-direction: column;
					bottom: -40%;
					line-height: 1.3;
				}
			}
			
		}
		.productBox{
			flex: 1;
			width: 100%;
			padding: 0rpx 15rpx;
			box-sizing: border-box;
			.productList{
				width: 100%;
				box-sizing: border-box;
				// margin-top: -2%;
				background-color: #fff;
				padding: 20rpx;
				border-radius: 10rpx;
				margin-bottom: 150rpx;
				.productItem{
					padding-bottom: 15rpx;
					border-bottom: 1rpx solid rgba(238, 238, 240, 1);
					margin-bottom: 20rpx;
					.top{
						display: flex;
						justify-content: flex-start;
						.left {
						    width: 220rpx;
						    flex-shrink: 0; /* 防止左侧被压缩 */
						    margin-right: 20rpx;
						    .productImg {
						      border-radius: 20rpx;
						      width: 100%;
						      height: 180rpx; /* 固定图片高度 */
							  display: block;
						    }
						  }
						.right{
							flex: 1; /* 右侧占据剩余空间 */
							min-width: 0; /* 允许文本截断 */
							display: flex;
							flex-direction: column;
							.one{
								font-size: 30rpx;
								font-weight: 500;
								display: -webkit-box;
								 -webkit-line-clamp: 1;
								 -webkit-box-orient: vertical;
								 overflow: hidden;
								 text-overflow: ellipsis;
								 white-space: nowrap; /* 确保不会换行 */
							}
							.two{
								font-size: 24rpx;
								margin: 10rpx 0;
							}
							.three{
								font-size: 28rpx;
								color: rgba(32, 39, 155, 1);
								margin-top: auto; /* 关键代码：自动顶部边距，推到底部 */
							}
						}
					}
					.bottom{
						box-sizing: border-box;
						margin: 10rpx 0;
						width: 100%;
						padding-left: 240rpx;
						.bottomCon{
							box-sizing: border-box;
							width: 100%;
							background: rgba(54, 57, 169, 0.05);
							border-radius: 10rpx;
							display: flex;
							align-items: center;
							justify-content: space-between;
							.left{
								padding: 15rpx  0rpx 15rpx 20rpx;
								font-size: 26rpx;
								color: rgba(34, 35, 133, 1);
							}
							.right{
								
								display: flex;
								align-items: center;
								justify-content: center;
								padding: 15rpx  10rpx 15rpx 15rpx;
								background: rgba(36, 37, 137, 1);
								width: 20%;
								font-size: 27rpx;
								color: #fff;
								border-radius: 0 10rpx 10rpx 0rpx; /* 左上 右上 右下 左下 */
							}
						}
					}
				}
				.productItem:last-child{
					border: none;
				}
			}
		}
		.descriptionBox {
			width: 510rpx;
			padding: 40rpx;
			.popupClose{
				display: flex;
				align-items: center;
				justify-content: flex-end;
				.icon-guanbi{
					font-size: 28rpx;
					
				}
			}
			.imageBox{
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				font-size: 32rpx;
				font-weight: 600;
				.subTit{
					font-size: 28rpx;
					color: #919094;
					margin: 15rpx 0;
					font-weight: 400;
				}
			}
			.codeBox{
				display: flex;
				align-items: center;
				justify-content: center;
				height: 250rpx;
			}
			.description{
				color: rgba(56, 56, 56, 1);
				font-size: 28rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
		.markBox {
			position: fixed;
			left: 0;
			top: 0;
			bottom: 0;
			right: 0;
			width: 100%;
			height: 100%;
			color: #fff;
			display: flex;
			justify-content: flex-end;
			z-index: 100000;
			background: rgba(0, 0, 0, 0.8);
			.guideImgBox {
				margin: 20px auto;
				uni-image {
					width: 25% !important;
					position: absolute;
					right: 0;
					top: 0;
				}
			}
			
			.tips {
				margin-top: 30%;
				padding: 0 30px;
			}
		}
	}
	.ulBox,.liBox{
		padding-bottom: 30rpx;
		display: flex;
		
	}
	.ulBox{
		flex-direction: column;
	}
	.liBox{
		background-color: #fff;
		border-radius: 20rpx;
		margin-bottom: 10rpx;
		padding: 10rpx;
	}
	.pad{
		padding:0 30rpx 20rpx 30rpx;
		
		.banner {
			border-radius: 20rpx;
			overflow: hidden;
			margin-bottom: 30rpx;
			.swiper{
				height: 250rpx;
			}
		}
	}
</style>