<template>
	<view class="container">
		<view class="top">
			<view class="compony">
				<image src="@/static/logo1.png" mode="widthFix" style="width: 120rpx !important;"></image>
				<text class="name">{{cffpUserInfo.name}}</text>
				<text class="iconfont icon-31tishi" @click="getIntroduce('center')"></text>
			</view>
			<!--搜索组件-->
			<!-- <search 
				:isSearch="0" 
				:userId="userId"
			></search> -->
			<search
			   ref="searchRef"
				:isSearch="0" 
				:userId="userId"
				:initialQuery.sync="searchQuery"
				v-if="showSearch"
				
			></search>
			<!--轮播组件-->
			<view class="banner" style="overflow: none;">
				<view class="uni-margin-wrap">
					<carousel :carouselList="cffpUserInfo.fileUploadItemList" ></carousel>
				</view>
			</view>
		</view>
		<view class="message" @click="jumpToAnnouncement()">
			<view style="display: flex;align-items: center;">
				<text class="iconfont icon-gonggao"></text>
				<text style="font-size: 27rpx;">{{announcementInfo}}</text>
			</view>
			<text class="iconfont icon-youjiantou iconStyle"></text>
		</view>
		<view class="content">
			<view class="featureContent">
				<!-- 模块导航 -->
				<view class="nav_wrapper">
					<view class="nav_content" v-for="featureItem in featureLists" :key="featureItem.key"
						@click="featureSelect(featureItem)">
						<!-- <view style="width: 120rpx;text-align: center;">
							<image :src="'/static/moduleIcon/'+featureItem.icon + '.png'" alt="" srcset=""
								mode="widthFix"></image>
						</view> -->
						<view class="imgbox">
							<view class="iconfont iconSize" :class="`${featureItem.icon}`"></view>
						</view>
						<view style="font-size: 26rpx;">{{featureItem.name}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="course_content">
			<view class="tag">
				<h4>推荐产品</h4>
				<view @click="goToCourselist()" style="font-size: 30rpx;">更多<text class="iconfont icon-youjiantou iconStyle"></text></view>
			</view>
			<!-- <courselist  :onlyShowList="0"></courselist> -->
			<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>
		<view class="" style="text-align: center;color: #666666;font-size: 24rpx;margin-top: 20rpx;">
			由{{companyFullName}}提供
		</view>
		<!-- <tabBar :currentPage="currentPage"></tabBar> -->
	</view>
	<uni-popup ref="popup" type="top" background-color="#fff">
		<view class="description">
			{{cffpUserInfo.description}}
		</view>
	</uni-popup>
</template>

<script>
	import courselist from '@/pages/courselist/courselist.vue';
	import api from "../../api/api";
	import tabBar from '../../components/tabBar/tabBar.vue';
	import carousel from '@/components/carousel/carousel.vue';
	import search from '@/components/search/search.vue';
	import courseItem from "@/components/courseItem/courseItem.vue";
	import {companyInfo} from "@/environments/environment";
	export default {
		data() {
			return {
				 showSearch: true,
				searchQuery: '',
				companyFullName : companyInfo.companyFullName,
				cffpCourseInfos: [],
				x: 0,
				y: 0,
				old: {
					x: 0,
					y: 0
				},
				featureLists: [{
						key: '00',
						name: '成交订单',
						icon:'icon-dingdan',
						link: '/pages/saleCourseLists/saleCourseLists',
						isOpen: true
					},
					{
						key: '01',
						name: '佣金',
						icon: 'icon-yongjin',
						link: '/pages/pointsExchange/pointsExchange',
						isOpen: true
					},
					{
						key: '02',
						name: '申请加盟',
						icon: 'icon-hezuo',
						link: '/pages/application-process/basic-info',
						isOpen: true
					},
					// {
					// 	key: '03',
					// 	name: '学习认证',
					// 	icon: 'learningCertify',
					// 	link: '/pages/learnCertify/learnCertify',
					// 	isOpen: true
					// },
					{
						key: '04',
						name: '邀请加盟',
						icon: 'icon-yaoqing',
						link: '/pages/inviteJoin/inviteJoin',
						isOpen: true,
						isJoin: true
					},
					// {
					// 	key: '05',
					// 	name: '我的分享',
					// 	icon: 'share',
					// 	link: '/pages/myShare/myShare',
					// 	isOpen: true
					// },
					// {
					// 	key: '06',
					// 	name: '我的团队',
					// 	icon: 'team',
					// 	link: '/pages/personalCenter/myTeam',
					// 	isOpen: true
					// },
					// {
					// 	key: '07',
					// 	name: '更多功能',
					// 	icon: 'more',
					// 	link: '/pages/personalCenter/personalCenter',
					// 	isOpen: true
					// }
				],
				cffpUserInfo: {
					address: '',
					description: '',
					fileUploadItemList: [],
					logo: '',
					name: '',
					type: '' //类型1,区域中心，2工作室
				},
				announcementInfo: null,
				tagIds: 123,
				currentPage: 'index',
				carouselList: [],
				userId: uni.getStorageSync('cffp_userId'),
				shareId: null,
				kefu: '../../static/kefu.png',
				loginornot: true,
				queryName: '',
			}
		},
		components: {
			courselist,
			tabBar,
			carousel,
			search,
			courseItem
		},
		
		onShow() {
			this.init();
			this.showSearch = false;
			  this.$nextTick(() => {
			    this.showSearch = true;
			    this.searchQuery = '';
			  });
			 
		},
		onLoad(options) {
			if(options.clearFlag){
				uni.setStorageSync('loginType', 'visitor');
			}
			
			//如果用户在其他的地方快捷登录,没有返回到首页,执行此监听方法
			uni.$on('loginUpdate',()=>{
				this.queryAreaCenterInfo();
			})
			
			if (uni.getStorageSync('isLogin')) {
				this.announcementQuery();
				this.courseList();
			}
		},
		
		beforeDestroy() {
		  // 清除事件监听
		  uni.$off('loginUpdate', this.queryAreaCenterInfo);
		},
		methods: {
			 
			init() {
				if (uni.getStorageSync('isLogin')) {
					let loginType = uni.getStorageSync('loginType')
					if (loginType == "visitor") {
						this.loginornot = false
					}else{
						this.loginornot = true;
						 this.querySystemMessage()
					}
					this.queryAreaCenterInfo();
				} else {
					api.loginVerification({
						"loginType": 1
					}).then((res) => {
						if (res['success']) {
							this.userId = String(res['data']['userId']);
							uni.setStorageSync('isLogin', '1');
							uni.setStorageSync('cffp_userId', this.userId);
							uni.setStorageSync('loginType', 'visitor');
							uni.setStorageSync('uni-token', res.data['token']);
							this.loginornot = false;
							this.queryAreaCenterInfo();
							this.announcementQuery();
							this.courseList();
						} else {
							uni.showToast({
								title: res['message'],
								duration: 2000,
								icon: 'none'
							})
						}
					})
				}
			},
			querySystemMessage() {
			   api.querySystemMessage({systemType:1,userId:uni.getStorageSync('cffp_userId')}).then(res => {
			     if (res['success']&& res['data']['dataList'].length>0) {
			       
				 let total =  res['data']['dataList'].filter(item=>{
					 
					  return item.isRead == 0
				   })
				   if(total.length>0){
					   console.log('index',total.length);
					  uni.setTabBarBadge({
					         index: 3,
					         text: total.length.toString()
					       }); 
				   }else {
					uni.removeTabBarBadge({ index: 3 });
				  }
				   
			     }else {
					 uni.removeTabBarBadge({ index: 3 });
				 }
			   });
			},
			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'];
					}
				})
			},
			tokefu() {
				let url = 'http://q.url.cn/abkzV9?_type=wpa&qidian=true' // URL是要跳转的外部地址 作为参数
				// #ifdef APP-PLUS
				uni.navigateTo({
					url: '/components/webview?url=' + url
					// page.json定义的路径 传url 到webview界面去接收 实现跳转
				})
				// #endif
				// #ifdef H5
				window.location.href = url;
				// #endif
			},
			featureSelect(featureItem) {
				if (this.loginornot == false && featureItem.name != "学习认证" && featureItem.name != "更多功能") {
					uni.showToast({
						title: "请登陆个人账户使用该功能",
						duration: 2000,
						icon: 'none'
					});
					uni.clearStorageSync();
					// uni.redirectTo({
					// 	url: '/components/login/login'
					// })
					uni.navigateTo({
						url: '/components/login/login?from=index'
					})
					return false
				}
				if (featureItem.key == '02') {
					if (this.cffpUserInfo.levelCode == 'C1' || this.cffpUserInfo.levelCode == 'C2' || this.cffpUserInfo
						.levelCode == 'C3') {
						uni.showToast({
							title: "您已是区域服务中心，无需申请加盟",
							duration: 2000,
							icon: 'none'
						});
						return false
					}
				}
				if (this.cffpUserInfo.partnerType == null && featureItem.name == '邀请加盟') {
					uni.showToast({
						title: "您本人尚未加盟，您加盟后可邀请加盟",
						duration: 2000,
						icon: 'none'
					});
					return false
				} else if (featureItem.isOpen && featureItem.link) {
					if (featureItem.key == '07') {
						uni.switchTab({
							url: featureItem.link
						})
					} else {
						uni.navigateTo({
							url: featureItem.link
						})
					}
				} else {
					uni.showToast({
						title: '此功能暂未开放，敬请期待。',
						duration: 2000,
						icon: 'none'
					})
				}
			},
			queryAreaCenterInfo() {
				api.queryAreaCenterInfo({
					userId: uni.getStorageSync('cffp_userId'),
					companyType: `${companyInfo.companyType}`
				}).then((res) => {
					if (res['success']) {
						this.cffpUserInfo = res['data'];
						// this.cffpUserInfo.logo = res['logo'];
						uni.setStorageSync('fileUploadItemCFFPList', this.cffpUserInfo['fileUploadItemCFFPList'])
						const cffp_userInfo = {
							name: this.cffpUserInfo['userReName'],
							mobile: this.cffpUserInfo['mobile']
						}
						uni.setStorageSync('cffp_userInfo', JSON.stringify(cffp_userInfo))
					}
				})
			},
			announcementQuery() {
				api.announcementQuery({
					announcementTypeId: 686
				}).then((res) => {
					this.announcementInfo = res['data']['announcementInfoList'] ? res['data'][
						'announcementInfoList'
					][0]['title'] : `${companyInfo.companyFullName}`+'公告'
				})
			},
			getIntroduce(type) {
				this.type = type;
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup.open(type)
			},
			jumpToAnnouncement() {
				uni.navigateTo({
					url: `../announcement/announcement`
				})
			},
			goToCourselist() {
				uni.switchTab({
					url: '../../pages/courselist/courselist'
				})
			},
			onChange: function(e) {
				this.old.x = e.detail.x
				this.old.y = e.detail.y
			}
		},
		mounted() {}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 30rpx 30rpx 20rpx;
		height: auto;
		 overflow-y: auto; /* 关键属性 */
		  -webkit-overflow-scrolling: touch; /* 优化移动端滚动 */
		.top {
			.compony {
				display: flex;
				align-items: center;
				// max-height: 150rpx;
				// overflow: hidden;

				.name {
					font-size: 36rpx;
				}

				image {
					margin-right: 40rpx;
					
				}

				.icon-31tishi {
					font-size: 40rpx;
				}
			}

			.banner {
				border-radius: 20rpx;
				overflow: hidden;
				margin-bottom: 30rpx;
				.swiper{
					height:250rpx;
				}
			}
		}

		.message {
			display: flex;
			align-items: center;
			margin: 20rpx 0;
			background-color: #fff;
			padding: 20rpx;
			justify-content: space-between;
			box-sizing: border-box;
			border-radius: 10rpx;
			.icon-gonggao {
				font-size: 60rpx;
				color: #20279b;
				margin-right: 20rpx;
			}

			.msg {
				color: red;
			}
		}

		.content {
			margin-bottom: 20rpx;
			overflow: hidden;
			background: #fff;
			position: relative;

			.featureContent {
				box-sizing: border-box;
				padding: 30rpx 0;
				.nav_wrapper {
					display: flex;
					align-items: center;
					justify-content: space-around;
					flex-wrap: wrap;
					width: 100%;
					box-sizing: border-box;
					// padding: 10rpx;
					.nav_content {
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						flex: 0 0 20%;
						font-size: 14px;
						color: rgba(51, 51, 51, 1);
						// margin: 10px 2%;

						image {
							max-width: 80%;
						}
						.imgbox{
							margin-bottom: 10rpx;
							.iconSize{
								font-size: 40rpx;
							}
						}
					}
				}
			}
		}

		.course_content {
			position: relative;
			padding-bottom: 30rpx;
			// background-color: pink;
			.tag {
				box-sizing: border-box;
				padding: 20rpx;
				display: flex;
				justify-content: space-between;
				position: relative;
				background: #fff;
				margin-bottom: 20rpx;
				border-radius: 10rpx;
				h4 {
					margin-left: 20rpx;
					font-size: 32rpx;
				}
			}

			.tag:before {
				position: absolute;
				left: 20rpx;
				top: 50%;
				transform: translateY(-50%);
				display: inline-block;
				content: '';
				width: 2px;
				height: 32rpx;
				background-color:  #20279b;
				border-radius: 2px;
			}
		}
	}

	.ulBox {
		flex-direction: column;
		width: 100%;
		box-sizing: border-box;
		// background-color: #20279b;
	}

	.liBox {
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		padding: 10rpx;
		width: 100%;
	}

	.description {
		padding: 40rpx;
	}
</style>