<template>
	<view class="container">
		<view class="top">
			<view class="compony">
				<img :src="cffpUserInfo.logo" alt="" />
				<text class="name">{{cffpUserInfo.name}}</text>
				<text class="iconfont icon-31tishi" @click="getIntroduce('center')"></text>
			</view>
			<view class="search">
				<input class="searchInput" type="text" name="" id="" />
				<text class="iconfont icon-sousuo"></text>
				<text class="iconfont icon-xiaoxi"></text>
				<text class="system_msg" @click="jumpToSystemMsg()">{{messageUnreadCount}}</text>
			</view>
			<view class="banner">
				<view class="uni-margin-wrap">
					<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
						:duration="duration">
							<swiper-item v-for="bannerItem in cffpUserInfo.fileUploadItemList">
								<navigator url="bannerItem.destinationAddress"><img :src="bannerItem.filePath" alt=""></navigator>
							</swiper-item>
					</swiper>
				</view>
		</view>
		</view>
		<view class="message" @click="jumpToAnnouncement()">
			<view style="display: flex;align-items: center;">
				<text class="iconfont icon-gonggao"></text>
				<text>{{announcementInfo}}</text>
			</view>
			<text class="iconfont icon-youjiantou"></text>
		</view>
		<view class="content">
			<view class="featureContent">
			  <!-- 模块导航 -->
			  <view class="nav_wrapper">
			    <view class="nav_content" v-for="featureItem in featureLists" @click="featureSelect(featureItem)">
			      <view>
			        <img :src="'/static/moduleIcon/'+featureItem.icon + '.png'" alt="" srcset="">
			      </view>
			      <view>{{featureItem.name}}</view>
			    </view>
			  </view>
			</view>
		</view>
		<view class="course_content">
			<view class="tag">
				<h4>精品课程</h4>
				<view @click="goToCourselist()">更多<text class="iconfont icon-youjiantou"></text></view>
			</view>
			<courselist :tagIds="[1111]"></courselist>
		</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 '../../components/courselist/courselist.vue';
	import api from "../../api/api";
	import tabBar from '../../components/tabBar/tabBar.vue';
	export default {
		data() {
			return {
				featureLists:[
					{ key: '00', name: '销售课程', icon: 'salesCourse', link: '', isOpen: false },
					{ key: '01', name: '我的积分', icon: 'integral', link: '', isOpen: false },
					{ key: '02', name: '申请加盟', icon: 'applyJoin', link: '../application-process/basic-info', isOpen: true },
					{ key: '03', name: '学习认证', icon: 'learningCertify', link: '', isOpen: false },
					{ key: '04', name: '邀请加盟', icon: 'shareJoin', link: '../inviteJoin/inviteJoin', isOpen: false },
					{ key: '05', name: '我的分享', icon: 'share', link: '', isOpen: false },
					{ key: '06', name: '我的团队', icon: 'team', link: '', isOpen: false },
					{ key: '07', name: '更多功能', icon: 'more', link: '../personalCenter/personalCenter', isOpen: true }
				],
				cffpUserInfo:{
					address:'',
					description:'',
					fileUploadItemList:[],
					logo:'',
					name:'',
					type:''//类型1,区域中心，2工作室
				},
				background: ['color1', 'color2', 'color3'],
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				announcementInfo:null,
				messageUnreadCount:null,
				tagIds:123,
				currentPage:'index'
			}
		},
		components:{
			courselist,
			tabBar
		},
		onLoad() {
			this.queryAreaCenterInfo();
			this.announcementQuery();
			this.querySystemMessage();
		},
		methods: {
			featureSelect(featureItem){
				console.log(featureItem)
				if(featureItem.isOpen){
					uni.navigateTo({
						url:featureItem.link
					})
				}else{
					uni.showToast({
						title:'此功能暂未开放，敬请期待。' ,
						duration: 2000,
						icon: 'none'
					})
				}
				
			},
			queryAreaCenterInfo(){
				api.queryAreaCenterInfo({userId:1}).then((res)=>{
					if(res['commonResult']['success']){
						this.cffpUserInfo = res;
						// this.cffpUserInfo.logo = res['logo'];
					}else{
						uni.showToast({
							title: res['commonResult']['message'],
							duration: 2000,
							icon: 'none'
						})
					}
				})
			},
			announcementQuery(){
				api.announcementQuery({announcementTypeId:37}).then((res)=>{
					this.announcementInfo = res['data']['announcementInfoList'] ? res['data']['announcementInfoList'][0]['title'] : '银盾公告'
				})
			},
			getIntroduce(type) {
				this.type = type;
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup.open(type)
			},
			jumpToAnnouncement(){
				uni.navigateTo({
					url:`../announcement/announcement`
				})
			},
			jumpToSystemMsg(){
				uni.navigateTo({
					url:'../systemMsg/system_msg'
				})
			},
			querySystemMessage(){
				api.querySystemMessage({systemType:1,userId:uni.getStorageSync('cffp_userId')}).then((res)=>{
					if(res['success']){
					        this.messageUnreadCount = res['data']['unReadcount'];
					        if(Number(this.messageUnreadCount) > 99){
					          this.messageUnreadCount = '99+';
					        }
					      }else{
					        this.messageUnreadCount = null;
					      }
				})
			},
			goToCourselist(){
				uni.navigateTo({
					url:'../../components/courselist/courselist'
				})
			}
		},
		onShow() {
			if(!uni.getStorageSync('isLogin')){
				uni.navigateTo({
					url:'/components/login/login'
				})
			}
			
		}
	}
</script>

<style lang="scss">
	.container{
		padding: 30rpx;
		.top{
			.compony{
				display: flex;
				align-items:center;
				.name{
					font-size: 36rpx;
				}
				img{
					margin-right: 20rpx;
				}
				.icon-31tishi{
						font-size: 40rpx;
				}
			}
			.banner{
				border-radius: 20rpx;
				overflow: hidden;
			}
			.search{
				position: relative;
				display: flex;
				margin: 30rpx auto;
				align-items: center;
				.searchInput{
					height: 50rpx;
					line-height: 50rpx;
					border-radius: 60rpx;
					width: 95%;
					background: linear-gradient(to right,#E6F5FC,#FDE9F2);
					margin-right: 20rpx;
					padding: 15rpx;
				}
				.icon-sousuo{
					font-size: 60rpx;
					position: absolute;
					right: 80rpx;
					top: 14rpx;
					opacity: .7;
				}
				.icon-xiaoxi{
					font-size: 50rpx;
				}
				.system_msg{
					position: absolute;
					color: #fff;
					background: #fb4e40;
					width: 40rpx;
					height: 40rpx;
					line-height: 40rpx;
					border-radius: 50%;
					text-align: center;
					font-size: 16rpx;
					right: -20rpx;
					top: -5rpx;
				}
			}
		}
		.message{
			display: flex;
			align-items: center;
			margin: 20rpx 0;
			background-color: #fff;
			padding: 10rpx 0 10rpx 30rpx;
			justify-content: space-between;
			.icon-gonggao{
				font-size: 60rpx;
				color: #20279b;
				margin-right: 20rpx;
			}
			.msg{
				color: red;
			}
		}
		.content {
			margin-bottom: 20rpx;
			overflow: hidden;
			background: #fff;
			position: relative;
			.featureContent{
			  padding-top: 10px;
			  .nav_wrapper{
			    display: flex;
			    align-items: center;
			    justify-content: space-around;
			    flex-wrap: wrap;
			    width: 100%;
			    .nav_content{
			      display: flex;
			      flex-direction: column;
			      align-items: center;
			      justify-content: center;
				  margin-bottom: 20rpx;
			      flex:0 0 20%;
			      font-size: 14px;
			      color: #666;
				  margin: 10px 2%;
				  img{
					  max-width: 80%;
				  }
			    }
			  }
			}
		}
		.course_content{
			background: #fff;
			position: relative;
			.tag{
				padding: 20rpx;
				display: flex;
				justify-content: space-between;
				h4{
					margin-left: 20rpx;
				}
			}
			.tag:before{
				position: absolute;
				left: 20rpx;
				top: 20rpx;
				display: inline-block;
				content: '';
				width: 2px;
				height: 16px;
				background-color: #5F83FF;
				border-radius: 2px;
			}
		}
	}
	.description{
		padding: 40rpx;
	}
	
</style>
