<template>
	<view class="study">
		<u-navbar :is-back="false" background="{background: transparent}" :border-bottom="false" :is-fixed="false"><text class="title-view">学习</text></u-navbar>
		<image :src="bannerImage" mode="" class="banner"></image>
		<u-tabs-swiper
			bg-color="#F4F5F7"
			inactive-color="#999999"
			font-size="28"
			ref="uTabs"
			:list="tabs"
			:current="current"
			@change="tabsChange"
			:is-scroll="false"
			:bar-width="52"
			swiperWidth="750"
		></u-tabs-swiper>
		<swiper class="swiper_group" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
			<swiper-item @touchmove.stop.prevent="stopTouchMove">
				<scroll-view scroll-y style="width:100%;">
					<view class="jf-currency-class">
						<image :src="jianBianImg" mode="" class="current-img"></image>
						<view class="class1" style="position: relative;" @click="goToPrint">
							<image class="jf-img" :src="rule.pic" mode=""></image>
							<view class="right u-padding-top-10 u-padding-bottom-14 jf-right">
								<view class="u-font-32 font-bold u-margin-left-30 u-margin-top-30">充电桩交付规范</view>
								<view class="u-font-24 u-margin-left-30 u-margin-top-30">请点击学习</view>
							</view>
							<view class="jf-line u-margin-right-30 u-margin-top-60">去查看</view>
						</view>
					</view>
					<view class="jf-currency-class u-margin-top-100">
						<image :src="jianbianImage" mode="" class="current-img"></image>
						<view class="class1" style="position: relative;" @click="goToDocument">
							<image class="jf-img" :src="anzhuangwenjianImage" mode=""></image>
							<view class="right u-padding-top-10 u-padding-bottom-14 jf-right">
								<view class="u-font-32 font-bold u-margin-left-30 u-margin-top-30">充电桩安装文件</view>
								<view class="u-font-24 u-margin-left-30 u-margin-top-30">请点击查看</view>
							</view>
							<view class="jf-line u-margin-right-30 u-margin-top-60 red-color">去查看</view>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
			<swiper-item @touchmove.stop.prevent="stopTouchMove">
				<scroll-view
					scroll-y
					style="height:100%;width:100%;"
					@scrolltolower="onreachBottom"
					scroll-y="true"
					refresher-enabled="true"
					:refresher-triggered="triggered"
					:refresher-threshold="100"
					@refresherpulling="onPulling"
					@refresherrefresh="onRefresh"
					@refresherrestore="onRestore"
					@refresherabort="onAbort"
				>
					<view v-for="item in list" :key="item.id" class="notice" @click="bbb(item)">
						<view class="notice-bottom-left">{{ item.create_at }}</view>
						<view class="notice-content">
							<img :src="item.img" alt="" style="width:690rpx;height:260rpx;display:block" />
							<view class="notice-content-bottom">
								<view class="n-head">{{ item.title }}</view>
								<view class="news">{{ item.text }}</view>
							</view>
						</view>
					</view>
					<view v-shou="isLoadMore" class="load-more"><u-loadmore :status="loadStatus" /></view>
				</scroll-view>
			</swiper-item>
			<swiper-item @touchmove.stop.prevent="stopTouchMove" v-if="version">
				<scroll-view scroll-y style="height:100%;width:100%;">
					<view class="title u-margin-top-10 u-margin-bottom-30">通用课程</view>
					<view class="learn-currency-class">
						<view class="learn-class1" @click="goPlay(courselist[0])">
							<image class="learn-img" :src="courselist[0].pic" mode=""></image>
							<image class="bofang" :src="bofang" mode=""></image>
							<view class="learn-desc">
								<view class="u-font-28 font-bold h68">{{ courselist[0].title }}</view>
								<view class="u-font-20 learn-intro h48">{{ courselist[0].desc }}</view>
							</view>
							<view class="line-percent u-margin-top-35">
								<u-line-progress active-color="#2979ff" :percent="courselist[0].percent" :show-percent="false"></u-line-progress>
								<text class="font-default-color" :class="{ 'font-active-color': courselist[0].percent }" v-text="courselist[0].status"></text>
							</view>
						</view>
						<view class="learn-class1 u-margin-left-30" @click="goPlay(courselist[1])">
							<image class="learn-img" :src="courselist[1].pic" mode=""></image>
							<image class="bofang" :src="bofang" mode=""></image>
							<view class="learn-desc">
								<view class="u-font-28 font-bold h68">{{ courselist[1].title }}</view>
								<view class="u-font-20 learn-intro h48">{{ courselist[1].desc }}</view>
							</view>
							<view class="line-percent u-margin-top-35">
								<u-line-progress active-color="#2979ff" :percent="courselist[1].percent" :show-percent="false"></u-line-progress>
								<text class="font-default-color" :class="{ 'font-active-color': courselist[1].percent }" v-text="courselist[1].status"></text>
							</view>
						</view>
					</view>
					<view class="learn-currency-class u-margin-bottom-20 u-margin-top-30" style="padding-bottom: 300rpx;">
						<view class="learn-class1" @click="goPlay(courselist[2])">
							<image class="learn-img" :src="courselist[2].pic" mode=""></image>
							<image class="bofang" :src="bofang" mode=""></image>
							<view class="learn-desc">
								<view class="u-font-28 font-bold h68">{{ courselist[2].title }}</view>
								<view class="u-font-20 learn-intro h48">{{ courselist[2].desc }}</view>
							</view>
							<view class="line-percent u-margin-top-35" style="display:flex;justify-content: space-between;">
								<u-line-progress active-color="#2979ff" :percent="courselist[2].percent" :show-percent="false"></u-line-progress>
								<text class="font-default-color" :class="{ 'font-active-color': courselist[2].percent }" v-text="courselist[2].status"></text>
							</view>
						</view>
						<view class="learn-class1 u-margin-left-30" @click="goPlay(courselist[3])">
							<image class="learn-img" :src="courselist[3].pic" mode=""></image>
							<image class="bofang" :src="bofang" mode=""></image>
							<view class="learn-desc">
								<view class="u-font-28 font-bold h68">{{ courselist[3].title }}</view>
								<view class="u-font-20 learn-intro h48">{{ courselist[3].desc }}</view>
							</view>
							<view class="line-percent u-margin-top-35">
								<u-line-progress active-color="#2979ff" :percent="courselist[3].percent" :show-percent="false"></u-line-progress>
								<text class="font-default-color" :class="{ 'font-active-color': courselist[3].percent }" v-text="courselist[3].status"></text>
							</view>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
			<swiper-item @touchmove.stop.prevent="stopTouchMove">
				<scroll-view scroll-y style="width:100%;">
					<view class="title u-margin-top-10 u-margin-bottom-30">通用认证</view>
					<view class="currency-class">
						<view class="class1" @click="aaa(0)">
							<image class="img" :src="examList[0].pic" mode=""></image>
							<view class="right">
								<view class="u-font-32 font-bold">{{ examList[0].title }}</view>
								<view class="u-font-24">{{ examList[0].desc }}</view>
								<view class="u-font-24" style="display:flex;justify-content: space-between;">
									<text class="font-color-999999">{{ examList[0].condition }}</text>
									<text class="font-default-exam-color" :class="{ 'font-active-color': examList[0].isComplete }">{{ examList[0].status }}</text>
								</view>
							</view>
						</view>
						<view class="class1 u-margin-top-40" @click="aaa(1)">
							<image class="img" :src="examList[1].pic" mode=""></image>
							<view class="right">
								<view class="u-font-32 font-bold">{{ examList[1].title }}</view>
								<view class="u-font-24">{{ examList[1].desc }}</view>
								<view class="u-font-24" style="display:flex;justify-content: space-between;">
									<text class="font-color-999999">{{ examList[1].condition }}</text>
									<text class="font-default-exam-color" :class="{ 'font-active-color': examList[1].isComplete }">{{ examList[1].status }}</text>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
var json = {
	dev: [
		{
			title: '安装材料及工具准备',
			desc: '前期的安装材料及安装工具的准备是工作的良好开始',
			pic: process.uniEnv.qn_base_url + 'fwgf-3x-v2.png',
			percent: 0,
			status: '',
			id: 173,
			sectionId: ''
		},
		{
			title: '服务理念与时效',
			desc: '为用户提供更好的服务，自己赚更多的钱',
			pic: process.uniEnv.qn_base_url + 'jdgf-3x-v2.png',
			percent: 0,
			status: '',
			id: 173,
			sectionId: ''
		},
		{
			title: '充电桩安装要点提示',
			desc: '在充电装安装过程中需要着重注意的要点',
			pic: process.uniEnv.qn_base_url + 'cdz-3x-v2.png',
			percent: 0,
			status: '',
			id: 173,
			sectionId: ''
		},
		{
			title: '充电桩安装要点提示',
			desc: '在充电装安装过程中需要着重注意的要点',
			pic: process.uniEnv.qn_base_url + 'cdz-3x-v2.png',
			percent: 0,
			status: '',
			id: 173,
			sectionId: ''
		}
	],
	test: [
		{
			title: '安装材料及工具准备',
			desc: '前期的安装材料及安装工具的准备是工作的良好开始',
			pic: process.uniEnv.qn_base_url + 'fwgf-3x-v2.png',
			percent: 0,
			status: '',
			id: 150,
			sectionId: ''
		},
		{
			title: '服务理念与时效',
			desc: '为用户提供更好的服务，自己赚更多的钱',
			pic: process.uniEnv.qn_base_url + 'jdgf-3x-v2.png',
			percent: 0,
			status: '',
			id: 149,
			sectionId: ''
		},
		{
			title: '充电桩安装要点提示',
			desc: '在充电装安装过程中需要着重注意的要点',
			pic: process.uniEnv.qn_base_url + 'cdz-3x-v2.png',
			percent: 0,
			status: '',
			id: 151,
			sectionId: ''
		},
		{
			title: '小程序使用指南',
			desc: '小程序使用指南',
			pic: process.uniEnv.qn_base_url + 'cdz-3x-v2.png',
			percent: 0,
			status: '',
			id: 152,
			sectionId: ''
		}
	],
	prod: [
		{
			title: '安装材料及工具准备',
			desc: '前期的安装材料及安装工具的准备是工作的良好开始',
			pic: process.uniEnv.qn_base_url + 'fwgf-3x-v2.png',
			percent: 0,
			status: '',
			id: 597,
			sectionId: ''
		},
		{
			title: '服务理念与时效',
			desc: '为用户提供更好的服务，自己赚更多的钱',
			pic: process.uniEnv.qn_base_url + 'jdgf-3x-v2.png',
			percent: 0,
			status: '',
			id: 598,
			sectionId: ''
		},
		{
			title: '充电桩安装要点提示',
			desc: '在充电装安装过程中需要着重注意的要点',
			pic: process.uniEnv.qn_base_url + 'cdz-3x-v2.png',
			percent: 0,
			status: '',
			id: 599,
			sectionId: ''
		},
		{
			title: '小程序使用指南',
			desc: '小程序使用指南',
			pic: process.uniEnv.qn_base_url + 'yaodiantishi.png',
			percent: 0,
			status: '',
			id: 600,
			sectionId: ''
		}
	]
};

var examJson = {
	dev: [
		{
			title: '安装材料及工具准备',
			desc: '通过本认证，是接单的必要条件',
			condition: '随机20题，及格20题',
			status: '',
			pic: process.uniEnv.qn_base_url + 'fuwuguifan-d.png',
			id: 2,
			examId: '',
			examStatus: '',
			isComplete: false,
			questionTime: null
		},
		{
			title: '接单操作',
			desc: '快速认证,是否具备接单操作能力',
			condition: '随机20题，及格16题',
			status: '',
			pic: process.uniEnv.qn_base_url + 'jiedanguifan-d.png',
			id: 2,
			examId: '',
			examStatus: '',
			isComplete: false,
			questionTime: null
		}
	],
	test: [
		{
			title: '安装材料及工具准备',
			desc: '通过本认证，是接单的必要条件',
			condition: '随机4题，及格4题',
			status: '',
			pic: process.uniEnv.qn_base_url + 'fuwuguifan-d.png',
			id: 3,
			examId: '',
			examStatus: '',
			questionTime: null,
			isComplete: false
		},
		{
			title: '接单规范',
			desc: '快速认证,是否具备接单操作能力',
			condition: '随机5题，及格5题',
			status: '',
			pic: process.uniEnv.qn_base_url + 'jiedanguifan-d.png',
			id: 4,
			examId: '',
			examStatus: '',
			questionTime: null,
			isComplete: false
		}
	],
	prod: [
		{
			title: '安装材料及工具准备',
			desc: '通过本认证，是接单的必要条件',
			condition: '随机4题，及格4题',
			status: '',
			pic: process.uniEnv.qn_base_url + 'fuwuguifan-d.png',
			id: 3,
			examId: '',
			examStatus: '',
			isComplete: false,
			questionTime: null
		},
		{
			title: '接单规范',
			desc: '快速认证,是否具备接单操作能力',
			condition: '随机5题，及格5题',
			status: '',
			pic: process.uniEnv.qn_base_url + 'jiedanguifan-d.png',
			id: 4,
			examId: '',
			examStatus: '',
			isComplete: false,
			questionTime: null
		}
	]
};
let env = process.uniEnv.node_env;
let courseListJson = json[env];
let examListJson = examJson[env];

export default {
	data() {
		return {
			tabs: [
				{
					name: '交付规范'
				},
				{
					name: '消息通知'
				},
				{
					name: '在线学习'
				},
				{
					name: '考核认证'
				}
			],
			tabs2: [
				{
					name: '交付规范'
				},
				{
					name: '消息通知'
				},
				{
					name: '考核认证'
				}
			],
			bofang: process.uniEnv.qn_base_url + 'bofang@3x.png',
			current: 0,
			swiperCurrent: 0,
			params: {
				start: 0
			},
			list: [],
			rule: {
				pic: process.uniEnv.qn_base_url + 'guifan-d.png'
			},
			courselist: [
				{
					title: courseListJson[0].title,
					desc: courseListJson[0].desc,
					percent: courseListJson[0].percent,
					status: courseListJson[0].status,
					pic: courseListJson[0].pic,
					id: courseListJson[0].id,
					sectionId: courseListJson[0].sectionId
				},
				{
					title: courseListJson[1].title,
					desc: courseListJson[1].desc,
					percent: courseListJson[1].percent,
					status: courseListJson[1].status,
					pic: courseListJson[1].pic,
					id: courseListJson[1].id,
					sectionId: courseListJson[1].sectionId
				},
				{
					title: courseListJson[2].title,
					desc: courseListJson[2].desc,
					percent: courseListJson[2].percent,
					status: courseListJson[2].status,
					pic: courseListJson[2].pic,
					id: courseListJson[2].id,
					sectionId: courseListJson[2].sectionId
				},
				{
					title: courseListJson[3].title,
					desc: courseListJson[3].desc,
					percent: courseListJson[3].percent,
					status: courseListJson[3].status,
					pic: courseListJson[3].pic,
					id: courseListJson[3].id,
					sectionId: courseListJson[3].sectionId
				}
			],
			examList: [
				{
					title: examListJson[0].title,
					desc: examListJson[0].desc,
					condition: examListJson[0].condition,
					status: examListJson[0].status,
					pic: examListJson[0].pic,
					id: examListJson[0].id,
					examId: examListJson[0].examId,
					examStatus: examListJson[0].examStatus,
					isComplete: examListJson[0].isComplete,
					questionTime: examListJson[0].questionTime
				},
				{
					title: examListJson[1].title,
					desc: examListJson[1].desc,
					condition: examListJson[1].condition,
					status: examListJson[1].status,
					pic: examListJson[1].pic,
					id: examListJson[1].id,
					examId: examListJson[1].examId,
					examStatus: examListJson[1].examStatus,
					isComplete: examListJson[1].isComplete,
					questionTime: examListJson[1].questionTime
				}
			],
			loadStatus: 'loading',
			isLoadMore: false,
			exam: null,
			jianBianImg: process.uniEnv.qn_base_url + 'jianbian-fp.png',
			isReflesh: true,
			triggered: false,
			freshing: false,
			version: true
		};
	},
	onLoad(param) {
		getApp().trackPage('学习首页');
		var that = this;
		try {
			if (param.tabs) {
				this.current = param.tabs;
				this.swiperCurrent = param.tabs;
			}
		} catch (e) {}
		this.getVersion();
	},
	computed: {
		bannerImage() {
			return process.uniEnv.qn_base_url + 'xuexibanner-p.png';
		},
		jianbianImage() {
			return process.uniEnv.qn_base_url + 'jianbian-p.png';
		},
		anzhuangwenjianImage() {
			return process.uniEnv.qn_base_url + 'wenjian-d.png';
		}
	},
	onShow: function(param) {
		try {
			if (param.tabs) {
				this.current = param.tabs;
				this.swiperCurrent = param.tabs;
			}
		} catch (e) {}
		if (this.current == 2 || this.current == 3) {
			this.tabsChange(this.current);
		}
	},
	methods: {
		getVersion() {
			let version = process.uniEnv.version_number;
			let that = this;
			this.$u.api
				.getVersionInfo(version)
				.then(res => {
					let data = res.data;
					if (data.hasOwnProperty('is_audit') && data.is_audit == 0) {
						that.tabs = that.tabs2;
						that.version = false;
					}
				})
				.catch(err => {});
		},
		stopPull() {
			let that = this;
			setTimeout(function() {
				that.triggered = false;
				that.freshing = false;
			}, 1000);
		},
		onPulling(e) {
			return true;
		},
		onRefresh() {
			if (this.freshing) return;
			this.triggered = true;
			this.freshing = true;
			this.isLoadMore = false;
			this.loadStatus = 'loading';
			this.loadNews();
		},
		onRestore() {
			this.triggered = 'restore'; // 需要重置
		},
		onAbort() {
			console.log('onAbort');
		},
		transition(e) {
			// swiper-item左右移动，通知tabs的滑块跟随移动
			let dx = e.detail.dx;
			this.$refs.uTabs.setDx(dx);
		},
		//scroll-view到底部加载更多
		onreachBottom() {
			//上拉触底函数
			if (!this.isLoadMore) {
				this.isLoadMore = true;
				this.params.start += 5;
				if (this.loadStatus !== 'nomore') {
					this.getNoticeList();
				}
			}
		},
		stopTouchMove() {
			return false;
		},
		//取文本第一张图片
		imgUrlFun(str) {
			var data = '';
			str.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/, function(match, capture) {
				data = capture;
			});
			return data;
		},
		//取文本信息
		getText(str) {
			return str
				.replace(/<[^<>]+>/g, '')
				.replace(/&nbsp;/gi, '')
				.replace(/(\n)/g, '');
		},
		getNoticeList() {
			let that = this;
			this.$u.api
				.getTrainingNoticeList(this.params)
				.then(res => {
					that.stopPull();
					if (res.code != 200) {
						uni.showToast({
							title: res.message,
							icon: 'none'
						});
						that.isLoadMore = false;
						if (that.params.start > 0) {
							that.page -= 5;
						}
					}
					if (res.data) {
						let length = res.data.length;
						for (let i = 0; i < length; i++) {
							res.data[i].create_at = this.timeFormat(res.data[i].create_at, 'yyyy.MM.dd hh:mm');
							res.data[i].img = this.imgUrlFun(res.data[i].body);
							res.data[i].text = this.getText(res.data[i].body);
						}
						that.list = that.list.concat(res.data);
						console.log('消息列表', that.list);
					}
					if (res.data.length >= 5) {
						that.isLoadMore = false;
					} else {
						that.isLoadMore = true;
						that.loadStatus = 'nomore';
					}
				})
				.catch(err => {
					uni.showToast({
						title: err,
						icon: 'none'
					});
					that.isLoadMore = false;
					if (that.params.start > 0) {
						that.page -= 5;
					}
				});
		},
		timeFormat(time, format, fromMysql = true) {
			let rate = fromMysql ? 1000 : 1;
			let dataFmt = format || 'yyyy-MM-dd hh:mm:ss'; // 需要格式化的规则
			time = typeof time == 'number' ? time : new Date(time * rate); // 处理传入的time
			let fmt = {
				'y+': time.getFullYear(), // 年份
				'M+': time.getMonth() + 1, // 月份
				'd+': time.getDate(), // 日
				'h+': time.getHours(), // 小时
				'm+': time.getMinutes(), // 分钟
				's+': time.getSeconds() // 秒
			};

			for (let i in fmt) {
				if (new RegExp('(' + i + ')').test(dataFmt)) {
					dataFmt = dataFmt.replace(RegExp.$1, fmt[i].toString().length <= 1 ? '0' + fmt[i] : fmt[i]);
				}
			}
			return dataFmt;
		},
		getTypeName(percent) {
			if (percent == 0) {
				return '未开始';
			} else if (percent == '100') {
				return '已完成';
			} else {
				return '继续';
			}
		},
		//在线学习通用课程信息
		getCourseList() {
			let courseLength = this.courselist.length;
			for (let i = 0; i < courseLength; i++) {
				let param = {
					course_id: this.courselist[i].id
				};
				this.$u.api
					.CourseList(param)
					.then(res => {
						if (res.code != 200) {
							uni.showToast({
								title: res.message,
								icon: 'none'
							});
						}
						if (res.data) {
							res.data.learnedInfo.learnPercent *= 100;
							this.courselist[i].status = this.getTypeName(res.data.learnedInfo.learnPercent);
							this.courselist[i].percent = res.data.learnedInfo.learnPercent;
							this.courselist[i].sectionId = res.data.learnedInfo.nextLearnedSectionId;
						}
					})
					.catch(err => {
						uni.showToast({
							title: err,
							icon: 'none'
						});
					});
			}
		},
		//tabs通知swiper切换
		tabsChange(index) {
			this.swiperCurrent = Number(index);
			switch (this.swiperCurrent) {
				case 1:
					this.loadNews();
					break;
				case 2:
					this.getCourseList();
					break;
				case 3:
					this.getUserExamInfo();
					break;
			}
		},
		loadNews() {
			this.params.start = 0;
			this.list = [];
			this.getNoticeList();
		},
		animationfinish(e) {
			let current = e.detail.current;
			this.$refs.uTabs.setFinishCurrent(current);
			this.swiperCurrent = current;
			this.current = current;
		},
		//跳转到拍照小程序首页
		goToPrint() {
			uni.navigateToMiniProgram({
				appId: 'wxd1d6eede324b0465',
				path: '/pages/photo/index',
				success(res) {
					//打开成功
					console.log('success', res);
				},
				fail(err) {
					console.log('err', err);
				}
			});
		},
		// 安装文件
		goToDocument() {
			getApp().track('learn_goToDocument', {});
			this.$u.route({
				url: 'pages/order/document'
			});
		},
		//考核认证,通用认证,考试通过or未通过查询接口请求
		getUserExamInfo() {
			uni.hideLoading();

			let that = this;
			let token = that.vuex_token;
			let length = this.examList.length;
			for (let i = 0; i < length; i++) {
				let examId = this.examList[i].id;
				this.$u.api
					.getExamResult(examId)
					.then(res => {
						if (res.code != 200) {
							console.log('getUserExamInfo 200 err');
							uni.showToast({
								icon: 'none',
								title: '获取考试信息失败'
							});
						}
						this.examList[i].examId = res.data.id;
						this.examList[i].examStatus = res.data.examStatus; //i;//
						this.examList[i].questionTime = res.data.questionTime;
						let examResult = res.data.examLevelResult;
						this.examList[i].status = examResult != '' ? examResult : '未通过';
						//动态获取条件

						let ruleDisc = res.data.ruleDisc;
						let targetIndex = ruleDisc.indexOf('（');

						if (targetIndex) {
							this.examList[i].condition = ruleDisc.substr(targetIndex + 1).replace('）', '');
						}

						// examStatus 用户考试状态 0考试中 1考试完成 2未参与
						that.exam = res.data;
						if (res.data.examStatus == 2) {
							return;
						}
						if (res.data.examStatus == 1) {
							that.examList[i].isComplete = this.examList[i].status == '已通过';
							that.examScore = res.data.examScore;
							return;
						}
						if (res.data.examStatus == 0) {
							that.userExamId = res.data.id;
						}
					})
					.catch(err => {
						uni.hideLoading();
						uni.showToast({
							icon: 'none',
							title: '获取考试信息失败'
						});
					});
			}
		},
		//跳转到assessment页面
		aaa(index) {
			if (!this.vuex_token) {
				uni.showToast({
					icon:'none',
					title:"请先登录"
				})
				return false;
			}
			//examStatus 用户考试状态 0考试中 1考试完成 2未参与
			//考试完成分成通过、未通过
			getApp().globalData.questionTime = this.examList[index].questionTime;
			var examInfo = this.examList[index];
			wx.navigateTo({
				url: '/pages/learn/assessment?examId=' + examInfo.id
			});
		},
		//跳转到播放
		goPlay(info) {
			getApp().track('learn_allPlayCounts', { courseId: info.id });
			if (info.title === '小程序使用指南') {
				getApp().track('learn_guidePlayCounts', { courseId: info.id });
			}
			uni.navigateTo({
				url: '/pages/learn/section?section_id=' + info.sectionId + '&course_id=' + info.id
			});
		},
		//跳转到消息详情页
		bbb(e) {
			var news = {
				body: e.body,
				title: e.title,
				create_at: e.create_at
			};
			getApp().track('learn_goToMessage', {});
			let that = this;
			wx.navigateTo({
				url: '/pages/learn/news-details',
				success: function(res) {
					res.eventChannel.emit('acceptDataFromLearn', news);
				}
			});
		}
	}
};
</script>
<style>
.study {
	height: 100vh;
	background-color: #f4f5f7;
	padding: 0rpx 30rpx 0 30rpx;
}

.title-view {
	color: #333333;
	font-weight: bold;
	font-size: 40rpx;
}

.banner {
	width: 690rpx;
	height: 220rpx;
	margin-top: 10rpx;
}

/* 交付规范 */
.standard {
	width: 690rpx;
	height: 180rpx;
	display: flex;
	justify-content: space-between;
	/* border-bottom: 1rpx solid #82848a; */
	/* padding: 0 34rpx; */
	/* margin: 72rpx auto; */
	border-radius: 12rpx;
	padding: 30rpx;
	margin-top: 30rpx;
	background-color: #ffffff;
}

/* 培训通知 */
.notice {
	/* border: #808080 solid 2rpx; */
	width: 100%;
	min-height: 370rpx;
	margin-top: 36rpx;
	overflow: hidden;
	border-radius: 12rpx;
}
.notice-content {
	background: #ffffff;
	width: 100%;
	border-radius: 12rpx;
	overflow: hidden;
}
.notice-content-bottom {
	height: 150rpx;
	padding: 0 30rpx;
	overflow: hidden;
}
.n-head {
	text-align: left;
	font-size: 32rpx;
	font-weight: bold;
	color: #333333;
	margin-top: 30rpx;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.news {
	overflow: hidden;
	/* margin-top: 30rpx; */
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size: 24rpx;
	color: #666666;
	line-height: 34rpx;
	margin-bottom: 20rpx;
	margin-top: 16rpx;
}

/* 在线学习 */
.currency-class {
	width: 100%;
	background: #ffffff;
	padding: 30rpx;
	border-radius: 12rpx;
}

.learn-currency-class {
	width: 100%;
	border-radius: 12rpx;
	display: flex;
}

.jf-currency-class {
	width: 100%;
	height: 180rpx;
	/* position: absolute; */
	position: relative;
	border-radius: 12rpx;
	margin-top: 80rpx;
}

.title {
	font-size: 32rpx;
	font-weight: bold;
	font-family: PingFang-SC-Bold, PingFang-SC;
}

.class1 {
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: justify;
	-webkit-justify-content: space-between;
	justify-content: space-between;
}

.learn-class1 {
	display: -webkit-box;
	display: -webkit-flex;
	display: block;
	-webkit-box-pack: justify;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	width: 330rpx;
	height: 420rpx;
	background-color: #ffffff;
	position: relative;
	border-radius: 12rpx;
}

.img {
	width: 160rpx;
	height: 120rpx;
	border-radius: 12rpx;
}

.learn-img {
	width: 330rpx;
	height: 194rpx;
}

.jf-img {
	width: 160rpx;
	height: 200rpx;
	position: absolute;
	bottom: 5rpx;
	left: 30rpx;
	border-radius: 10rpx;
}

.right {
	width: 434rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.intro {
	color: #9999a6;
}

.tab {
	background: #fff;
	height: 82rpx;
	margin: 0 0;
}

.text {
	margin: 0 40rpx;
	line-height: 82rpx;
	color: #667eb5;
}

.content {
	margin: 5px 0;
	height: 485rpx;
	background: #fff;
}

swiper {
	height: 70vh;
}

.line-percent {
	display: flex;
	justify-content: space-between;
	font-size: 24rpx;
	color: #999999;
	margin: 20rpx;
	margin-top: 25rpx;
}

.jf-line {
	width: 120rpx;
	height: 52rpx;
	border-radius: 26rpx;
	background-color: #ffffff;
	color: #2272ff;
	text-align: center;
	font-size: 24rpx;
	line-height: 52rpx;
}

.red-color {
	color: #fa5a49;
}

.u-progress {
	width: 160rpx !important;
	height: 12rpx !important;
	background-color: #ececec;
}

.font-bold {
	font-weight: bold;
}

.font-default-color {
	color: #999999;
}

.font-default-exam-color {
	color: #fa5a49;
}

.font-active-color {
	color: #2272ff;
}

.font-color-999999 {
	color: #999999;
}

.standard-img {
	width: 160rpx;
	height: 120rpx;
}

.standard-body {
	height: 120rpx;
	display: flex;
}

.standard-body-title {
	font-size: 32rpx;
	font-weight: bold;
}

.jf-right {
	padding-left: 190rpx;
	width: 460rpx;
	color: #ffffff;
}

.notice-bottom {
	margin-top: 20rpx;
	display: block;
	position: relative;
}

.notice-bottom-left {
	font-size: 24rpx;
	font-weight: 500;
	color: #999999;
	text-align: center;
	margin-bottom: 20rpx;
}

.notice-bottom-right {
	font-size: 24rpx;
	color: #2272ff;
	float: right;
}

.bofang {
	width: 60rpx;
	height: 60rpx;
	position: absolute;
	left: 130rpx;
	top: 70rpx;
}

.learn-desc {
	height: 138rpx;
	margin-top: -10rpx;
	padding-top: 20rpx;
	padding-left: 20rpx;
	padding-right: 20rpx;
}

.learn-intro {
	color: #999999;
	margin-top: 20rpx;
	font-size: 20rpx;
}

.h48 {
	height: 48rpx;
}

.current-img {
	width: 100%;
	height: 180rpx;
	position: absolute;
}

.load-more {
	padding-top: 50rpx;
	padding-bottom: 200rpx;
}

.u-margin-top-100 {
	margin-top: 100rpx;
}
</style>
