<template>
	<movable-area style="width: 100vw; height: 100vh; pointer-events:none; z-index: 9999;position:fixed;top:0;left:0;"
	 @tap="tokefu()">
	    <movable-view direction="all" style="width: 100rpx; pointer-events:auto; height: 80rpx;top: 50%;left: 85%;text-align: center;">
			<image :src="kefu" mode="widthFix"></image>
			<text style="font-size:20rpx;color: #1954fe;">在线客服</text>
		</movable-view>
	</movable-area>
	<view class="container">
		<view class="top">
			<view class="compony">
				<image :src="cffpUserInfo.logo" mode="widthFix" style="max-width:400rpx"></image>
				<text class="name">{{cffpUserInfo.name}}</text>
				<text class="iconfont icon-31tishi" @click="getIntroduce('center')"></text>
			</view>
			<!--搜索组件-->
			<search :isSearch="0"></search>
			<!--轮播组件-->
			<carousel :carouselList="cffpUserInfo.fileUploadItemList"></carousel>
		</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" :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>{{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]" :onlyShowList="0"></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 '@/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';
	export default {
		data() {
			return {
				x: 0,
				y: 0,
				old: {
				    x: 0,
				    y: 0
				},
				featureLists:[
					{ key: '00', name: '销售课程', icon: 'salesCourse', link: '/pages/saleCourseLists/saleCourseLists', isOpen: true },
					{ key: '01', name: '我的积分', icon: 'integral', link: '/pages/myPoints/myPoints', isOpen: true },
					{ key: '02', name: '申请加盟', icon: 'applyJoin', link: '/pages/application-process/basic-info', isOpen: true },
					{ key: '03', name: '学习认证', icon: 'learningCertify', link: '/pages/learnCertify/learnCertify', isOpen: true },
					{ key: '04', name: '邀请加盟', icon: 'shareJoin', link: '/pages/inviteJoin/inviteJoin', isOpen: 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'
			}
		},
		components:{
			courselist,
			tabBar,
			carousel,
			search
		},
		onLoad(options) {
			this.queryAreaCenterInfo();
			this.announcementQuery();
		},
		methods: {
			tokefu(){
				let url = 'http://q.url.cn/abkzV9?_type=wpa&qidian=true'  // URL是要跳转的外部地址 作为参数
				uni.navigateTo({
				  url: '/components/webview?url=' + url
				  // page.json定义的路径 传url 到webview界面去接收 实现跳转
				})
			},
			featureSelect(featureItem){
				console.log(featureItem)
				if(featureItem.isOpen && featureItem.link){
					uni.navigateTo({
						url:featureItem.link
					})
				}else{
					uni.showToast({
						title:'此功能暂未开放，敬请期待。' ,
						duration: 2000,
						icon: 'none'
					})
				}
			},
			queryAreaCenterInfo(){
				api.queryAreaCenterInfo({userId:this.userId}).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))
					}else{
						uni.showToast({
							title: res['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`
				})
			},
			goToCourselist(){
				uni.navigateTo({
					url:'../../pages/courselist/courselist'
				})
			},
			 onChange: function(e) {
				 console.log(e)
			            this.old.x = e.detail.x
			            this.old.y = e.detail.y
			        }
		},
		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;
				max-height: 90rpx;
				overflow: hidden;
				.name{
					font-size: 36rpx;
				}
				image{
					margin-right: 20rpx;
				}
				.icon-31tishi{
						font-size: 40rpx;
				}
			}
			.banner{
				border-radius: 20rpx;
				overflow: hidden;
			}
		}
		.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%;
				  image{
					  max-width: 80%;
				  }
			    }
			  }
			}
		}
		.course_content{
			background: #fff;
			position: relative;
			padding-bottom: 100rpx;
			.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>
