<template>
	<view class="pad">
		<!--搜索组件-->
		<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)">
				<!-- :tagList="{v1:item.fileLecturerRanks,v2:item.fileLecturerName}" -->
				<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>
	.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>