<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">
				<view class="productItem" v-for="item in cffpCourseInfos" :key="item.fileId" @click="goDetail(item)">
					<view class="top">
						<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);">￥{{item.coursePrice}}</text>
							</view>
						</view>
					</view>
					<view class="bottom">
						<view class="bottomCon">
							<view class="left">
								最高可赚￥1.98
							</view>
							<view class="right">
								去分享
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!--搜索组件-->
		<!-- <search   
			:isSearch="1" 
			:userId = "userId" 
			@send="getCourseList" 
			:initialQuery="queryName"
		></search> -->
		<!--轮播组件-->
		<!-- <view class="banner">
			<view class="uni-margin-wrap">
				<carousel :carouselList="fileUploadItemCFFPList"></carousel>
			</view>
		</view> -->
		<!-- <h4 v-if="cffpCourseInfos.length<=0" class="noListTip">暂无产品列表</h4>
		<view class="ulBox" v-if="cffpCourseInfos.length>0">
			<view class="liBox" v-for="item in cffpCourseInfos" :key="item.fileId" @click="goDetail(item)">
				<course-item 
					:thumbnailPath="item.displayImage" 
					:title="item.fileTitle" 
					:summaryBox="item.fileSynopsis" 
					:dataList="{coursePrice:item.coursePrice,salesNumber:item.salesNumber}" 
					
				></course-item>
			</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 {companyInfo} from "@/environments/environment";
	export default{
		props:['tagIds'],
		data(){
			return{
				cffpCourseInfos:[],
				currentPage:'courselist',
				fileUploadItemCFFPList:[],
				queryName:null,
				userId: uni.getStorageSync('cffp_userId'),
			}
		},
		name:'courselist',
		components:{
			courseItem,
			tabBar,
			carousel,
			search
		},
		
		onLoad() {
		    this.queryName = uni.getStorageSync('queryName') || '';
		  },
		  onShow() {
		    this.queryName = uni.getStorageSync('queryName') || '';
		    this.courseList();
		  },
		methods:{
			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>
	.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: 3%;
					font-size: 28rpx;
					color: #fff;
					.icon-shuangyoujiantou{
						font-size: 26rpx;
						position: absolute;
						right:0;
						
					}
				}
				.lastTxt{
					display: flex;
					align-items: center;
					flex-direction: column;
					bottom: -15%;
					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: -5%;
				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;
								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;
				}
			}
		}
	}
	.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>