<template>
	<view>
		<cu-custom bgColor="bg-gradual-blueness" :isBack="true" :backUrl="backUrl">
			<block slot="backText">返回</block>
			<block slot="content">课件管理</block>
		</cu-custom>
		<view v-if="TabCur == 0" class="svideo">
			<video id="coursewareVideo" style="width: 100%;" :src="movie.url" :poster="movie.src" :show-progress="false"
				   :enable-progress-gesture="false" direction="-90" autoplay @play="onPlayerPlay($event)"
			 @pause="onPlayerPause($event)" @ended="onPlayerEnded($event)" @loadedmetadata="playerReadied($event)" @timeupdate="onPlayerTimeupdate($event)"></video>
		</view>
		<scroll-view scroll-x class="bg-white nav">
			<view class="flex text-center">
				<view class="cu-item flex-sub" :class="index==TabCur?'text-orange cur':''"
					v-for="(item,index) in tabList" :key="index" @tap="tabSelect" :data-id="index">
					{{item.name}}
				</view>
			</view>
		</scroll-view>
		<scroll-view scroll-x class="slist-tabs" scroll-with-animation :scroll-left="scrollLeft">
			<view class="cu-item" :class="index==TabCurPostType?'text-white cur':''" v-for="(item,index) in postTypeList" :key="index" @tap="tabPostTypeSelect" :data-id="index">
				{{item.NAME}}
			</view>
		</scroll-view>
		<block>
			<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption">
				<view v-if="TabCur==0" class="slist" v-for="(item,index) in list" :key="item.VIDEOCOURSEWARE_ID">
					<view class="slist-item" @click="$noMultipleClicks(studyVideo,item)">
						<view class="slist-img">
							<image v-if="item.VIDEOCAPTURE" :src="item.VIDEOCAPTURE" mode=""></image>
							<image v-else  src="../../../static/null.png" mode=""></image>
						</view>
						<view class="slist-right">
							<view class="slist-title">
								{{item.COURSEWARENAME}}
							</view>
							<view class="slist-p">
								{{item.COURSEWAREINTRODUCE}}
							</view>
						</view>
					</view>
				</view>
				<view v-if="TabCur==1" class="slist" v-for="(item,index) in list" :key="item.DATACOURSEWARE_ID">
					<view class="slist-item" @click="$noMultipleClicks(studyData,item)">
						<view class="slist-img">
							<image :src="baseImgPath + item.COURSEWARECAPTURE" mode=""></image>
						</view>
						<view class="slist-right">
							<view class="slist-title">
								{{item.COURSEWARENAME}}
							</view>
							<view class="slist-p">
								{{item.COURSEWAREINTRODUCE}}
							</view>
						</view>
					</view>
				</view>
				<view v-if="list.length < 1 && dataFlag=='noData'" class="dy-null">
					<view class="dy-null-img">
						<image src="../../../static/null.png" mode=""></image>
					</view>
					<view class="dy-null-title">
						暂无数据
					</view>
				</view>
				<view class="cu-tabbar-height"></view>
			</mescroll-body>
		</block>
	</view>
</template>

<script>
	import {
		basePath,baseImgPath,corpinfoId,loginSession,formatDate,loginUser
	} from '@/common/tool.js';
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js"
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				baseImgPath: baseImgPath,
				backUrl: '/pages/application/onlinexxks/home',
				sTop: 0,
				totalHeight: 0,
				downOption: {
					use: true,
					auto: false
				},
				upOption: {
					use: true,
					auto: false,
					noMoreSize: 1,
					textNoMore: '--已经没有更多了--'
				},
				scrollLeft: 0,
				dataFlag: 'noData',
				list: [], //返回数据
				page: 1, //分页参数--页数
				rows: 10, //分页参数--每页数据条数
				totalCount: 0, //分页参数--初始化页数
				isEnd: false, //防止多次刷新
				totalPage: 0, //分页参数--分页数量
				noClick: true,
				movie: {
					'id': 0,
					'title': '课件名称',
					'src': '',
					'actors': '主讲人',
					'desc': '课件简介',
					'url': ''
				},
				listVal: [],
				TabCur: 0,
				tabList : [
					{id:'1',name:'视频课件'},
					{id:'2',name:'资料课件'}
				],
				COURSEWARETYPE: '1',
				TabCurPostType: 0,
				postTypeList: [],
				POSTTYPE: ''
			}
		},
		onLoad() {
			var _this = this
			_this.background = require('@/common/background.json')
			_this.showCount = -1
			_this.currentPage = 1
			_this.list = []
			_this.isEnd = false
			this.getDict()
			loginSession()
		},
		onShow() {
		},
		methods: {
			//跳转事件
			getCoursewareInit() { //搜索按钮事件
				var _this = this;
				_this.showCount = -1;
				_this.currentPage = 1;
				_this.list = [];
				_this.isEnd = false;
				_this.getCoursewareData();
			},
			//跳转事件
			downCallback(page) { //搜索按钮事件
				var _this = this;
				_this.showCount = -1;
				_this.currentPage = 1;
				_this.list = [];
				_this.isEnd = false;
				_this.getCoursewareData();
			},
			// 滑动到底方法
			upCallback(page) {
				var _this = this;
				_this.showCount = -1;
				_this.currentPage = _this.currentPage + 1;
				_this.isEnd = false;
				if (_this.totalPage >= _this.currentPage) {
					_this.getCoursewareData(); //开始分页查询
				}
			},
			getCoursewareData() {
				var _this = this;
				if (_this.isEnd) {
					return
				} else {
					this.isEnd = true;
				}
				uni.showLoading({
					title: "加载中..."
				}); //加载中动画
				uni.request({
					url: basePath + '/app/courseware/list?showCount=' + _this.showCount + '&currentPage=' + _this.currentPage,
					method: 'POST',
					dataType: 'json',
					header: {
						'Content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						COURSEWARETYPE: _this.COURSEWARETYPE,
						POSTTYPE: _this.POSTTYPE,
						STATE: '0',
						tm: new Date().getTime(),
            CORPINFO_ID:loginUser.CORPINFO_ID,
            USER_ID:loginUser.USER_ID,
					},
					success: (res) => {
						uni.hideLoading(); //结束加载中动画
						if (res.data != null) {
							_this.totalPage = res.data.page.totalPage
							// 从后端获取的数据，将这一步骤放到异步获取后端数据的地方，对后端返回的数据进行处理
							if (_this.list.length == 0) {
								_this.list = res.data.varList;
							} else {
								if (res.data.varList != null) {
									_this.list2 = res.data.varList;
									_this.list = _this.list.concat(_this.list2);
								}
							}
							_this.mescroll.endSuccess(res.data.varList.length, (res.data.page.totalPage > res.data.page.currentPage))
							_this.mescroll.endUpScroll(res.data.page.totalPage == res.data.page.currentPage)
						}
					},
					fail: () => {
						//  请求失败,隐藏加载状态
						_this.mescroll.endErr()
					}
				})
			},
			// 获取数据字典数据
			getDict() {
				var _this = this;
				uni.showLoading({
					title: '请稍候'
				})
				uni.request({
					url: basePath + '/dictionaries/getLevelsByCourseware',
					method: 'POST',
					dataType: 'json',
					header: {
						'Content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						COURSEWARETYPE: _this.COURSEWARETYPE,
						DICTIONARIES_ID: 'f6a7c4f5602f46e291d06b1390a3f820',
            CORPINFO_ID:loginUser.CORPINFO_ID,
            USER_ID:loginUser.USER_ID,
					},
					success: (res) => {
						uni.hideLoading(); //结束加载中动画
						var result = res.data.result
						if ("success" == result) {
							_this.postTypeList = res.data.list
							_this.TabCurPostType = 0;
							_this.POSTTYPE = _this.postTypeList[0].DICTIONARIES_ID
							_this.getCoursewareInit()
						}
					}
				})
			},
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				if (this.TabCur == 1) {
					this.movie.src = ''
					this.movie.url = ''
				}
				if (this.COURSEWARETYPE != this.tabList[this.TabCur].id) {
					this.COURSEWARETYPE = this.tabList[this.TabCur].id
					this.getDict()
				}
			},
			tabPostTypeSelect(e) {
				this.TabCurPostType = e.currentTarget.dataset.id;
				if (this.COURSEWARETYPE != this.postTypeList[this.TabCurPostType].DICTIONARIES_ID) {
					this.POSTTYPE = this.postTypeList[this.TabCurPostType].DICTIONARIES_ID
					this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
					this.getCoursewareInit()
				}
			},
			validStr(str) {
				if (str != null && str != '' && typeof(str) != "undefined" && str != 0)
					return true
				return false
			},
			studyVideo(item) {
				var _this = this;
				uni.request({
					url: basePath + '/app/audioOrVideo/getPlayInfo',
					method: 'POST',
					dataType: 'json',
					header: {
						'Content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						videoId: item.VIDEOFILES,
            VIDEOCOURSEWARE_ID:item.VIDEOCOURSEWARE_ID,
            CORPINFO_ID:loginUser.CORPINFO_ID,
            USER_ID:loginUser.USER_ID,
					},
					success: (res) => {
						if (res.data != '') {
							_this.movie.src = res.data.COVERURL
							_this.movie.url = res.data.PLAYURL
							console.info(_this.movie.url)
						} else {
							uni.showToast({
								icon: 'none',
								title: '课件视频资源已失效，请联系管理员',
								duration: 2000
							});
						}
					}
				})



				// if (this.validStr(item.VIDEOFILES)) {
				// 	this.movie.src = baseImgPath + item.VIDEOCAPTURE
				// 	this.movie.url = baseImgPath + item.VIDEOFILES
				// 	// var myvideo = uni.createVideoContext('coursewareVideo')
				// 	// // console.log('获取视频进度')
				// 	// // console.log('this.playTime：'+this.playTime)
				// 	// // console.log('this.playTime.toFixed：'+parseInt(this.playTime))
				// 	// myvideo.seek(parseInt(this.playTime));
				// } else {
				// 	uni.showToast({
				// 		icon: 'none',
				// 		title: '课件视频资源已失效，请联系管理员',
				// 		duration: 2000
				// 	});
				// }
			},
			// 监听播放
			onPlayerPlay(player) {
				this.isPaused = false
			},
			// 监听暂停
			onPlayerPause(player) {
				this.isPaused = true
			},
			// 当前播放位置发生变化时触发。
			onPlayerTimeupdate(player) {
				this.playTime = player.detail.currentTime
			},
			onPlayerEnded(player) {
				this.isPaused = true
			},
			studyData(item) {
				if (this.validStr(item.COURSEWAREFILES)) {
					uni.showLoading({
						title: "加载中..."
					}); //加载中动画
					uni.downloadFile({
						url: baseImgPath + item.COURSEWAREFILES,
						success: (res) => {
							uni.hideLoading(); //结束加载中动画
							uni.openDocument({
								filePath: res.tempFilePath,
								success: function(res) {
									// console.log(res)
								}
							})
						}
					})
				} else {
					uni.showToast({
						icon: 'none',
						title: '课件文件资源已失效，请联系管理员',
						duration: 2000
					});
				}

			}
		}
	}
</script>

<style>
	.nav{margin-bottom: 4upx;}
	.cu-tag+.cu-tag{
		margin-left: 30upx;
	}
</style>