<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,
						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'
			}
		},
		components: {
			courselist,
			tabBar,
			carousel,
			search
		},
		onLoad(options) {
			if (uni.getStorageSync('isLogin')) {
				this.queryAreaCenterInfo();
				this.announcementQuery();
			} else {
				uni.navigateTo({
					url: '/components/login/login'
				})
			}
		},
		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(this.cffpUserInfo, 1544)
				if (this.cffpUserInfo.partnerType == null && featureItem.name == '邀请加盟') {
					uni.showToast({
						title: "您本人尚未加盟，您加盟后可邀请加盟",
						duration: 2000,
						icon: 'none'
					});
					return false
				} else 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
			}
		},
		mounted() {


		}
	}
</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>
