<template>
	<view>
		<!-- <view style="height: 80upx;">
			<uni-search-bar @confirm="startSearch" v-model="search"></uni-search-bar>
		</view> -->
		<scroll-view class="nav-scroll" :enable-flex="true" scroll-with-animation :throttle="false"
			:scroll-left="scrollToLeft" scroll-x @scroll="handleScroll">
			<view class="nav uni-nav">
				<view class="nav-item" :class="swiperIndex == index ? 'nav-item-act' : ''" :key="item.title"
					v-for="(item, index) in list" @click="taggleNav(index)">
					{{ item.title }}
				</view>
				<view class="nav-line" :style="style"></view>
			</view>
		</scroll-view>
		<view class="swiper">
			<swiper :current="swiperIndex" :duration="300" class="swiper-1" easing-function="linear"
				@change="swiperChange">
				<swiper-item v-for="(item, index) in list" :key="item.title">
					<scroll-view :lower-threshold="80" :refresher-triggered="refreStatus"
						@refresherrefresh="handleRefre" :refresher-enabled="true" class="swiper-scroll" scroll-y="true"
						@scrolltolower="swiperScrollLower">
						<view>
							<view class="swiper-item-list" v-for="video in item.content" :key="video.id">
								<!-- <video class="video" :src="video.mediaurl" controls object-fit="cover"
									:id="'video'+video.id" :poster="video.coverurl" @play="doPlay($event, index)"
									@pause="doPlay($event, index)" @ended="doPlay($event, index)">
									<view class='video-slot' v-if="video.showTitle" :title="video.name">
										<span style="margin-left:6px">{{video.name}}</span>
									</view>
								</video> -->
							
								<u-icon size="80" name="play-right-fill" color="rgb(245,245,245)" @click="videoOpen(video)" class="playIcon"></u-icon>
								<view class='video-slot' v-if="video.showTitle" :title="video.name">
									<span style="margin-left:6px">{{video.name}}</span>
								</view>
								<image :src="video.coverurl" class="video"></image>
								<view style="color:darkblue;margin-left:4upx">
								<text>{{video.name}}</text>
								<text style="float:right;color:gray;margin-right: 8upx;">{{video.viewsp}}人观看</text>
								</view>
							</view>
						</view>
						<view style="color:gray;text-align: center;margin-top:20upx;">{{loadingText}}</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
		<view v-if="videoDialog" id="videoDialog">
			<view class="closeIconWrap">
				<u-icon size="60" name="close-circle" color="rgb(255,255,255)" @click="closeVideo" class="closeIcon"></u-icon>
			</view>
			<video class="video" :src="videoUrl" controls object-fit="cover"
				:id="videoId" :poster="videoCoverurl" @play="doPlay($event)"
				@pause="doPlay($event)" @ended="doPlay($event)">
			</video>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				playingVideoStr: null,
				swiperIndex: 0, //当前的swiperindex
				navItemWidth: '', //选中下划线的宽度
				navItemLeft: 0, //选中下划线的显示位置
				scrollToLeft: 0, //scrollview需要滚动的距离
				navInfos: [], //所有navitem的节点信息
				parentLeft: 0, //nav盒子的节点信息
				componentWidth: 0, //nav盒子的宽度
				list: [{
					id: 0,
					title: '全部',
					page: 1,
					content: []
				}],
				refreStatus: false,
				videoDialog:false,
				loadingText: "加载中",
				search:"",
				videoCoverurl:'',
				videoUrl:'',
				videoId:0,
			};
		},
		computed: {
			style() {
				return `width:${this.navItemWidth}px; left:${this.navItemLeft}px`;
			}
		},
		mounted() {
			// this.init();
		},
		onLoad() {
			this.$u.api.getDickey({
				pageoff: true,
				type__code: 'data_video'
			}).then(res => {
				let list = [{
					id: 0,
					title: '全部',
					page: 1,
					content: []
				}]
				for (var i = 0; i < res.data.length; i++) {
					let data = res.data[i]
					list.push({
						id: data.id,
						title: data.name,
						page: 1,
						content: []
					})
				}
				this.list = list
				this.$nextTick(function() {
					this.init()
					this.getVideos()
				});
			})
		},
		methods: {
			videoOpen(video){
				debugger;
				console.log(video)
				this.videoId = video.id;
				this.videoUrl = video.mediaurl;
				this.videoCoverurl = video.coverurl;
				this.videoDialog = true;
			},
			closeVideo(){
				this.videoDialog = false;
			},
			doPlay(e, index) {
				if (e.type == 'play') {
					var playingVideoStr = e.target.id
					// this.list[this.swiperIndex].content[index].showTitle = false   
					// this.$u.api.putMyVideoView(this.list[this.swiperIndex].content[index].id).then(res=>{})
					this.$u.api.putMyVideoView(this.videoId).then(res=>{})
					//暂停其他视频播放
					if(this.playingVideoStr==null){
						this.playingVideoStr = playingVideoStr
					}
					else if (playingVideoStr != this.playingVideoStr) {
						var videoContextPrev = uni.createVideoContext(this.playingVideoStr)
						videoContextPrev.pause()
						this.playingVideoStr = playingVideoStr
					}
				} else {
					// this.list[this.swiperIndex].content[index].showTitle = true
				}
			},
			// 获取dom信息
			init() {
				const query = uni.createSelectorQuery().in(this);
				query.select('.uni-nav').fields({
					rect: true,
					size: true
				}, res => {
					this.parentLeft = res.left;
					this.componentWidth = res.width;
					console.log('res==>', res);
				});
				query.selectAll('.nav-item').fields({
					rect: true,
					size: true
				}, data => {
					data.forEach((item, index) => {
						if (index == 0) {
							this.navItemWidth = item.width;
							this.navItemLeft = item.left;
						}
						this.navInfos.push({
							width: item.width,
							left: item.left
						});
					});
				});
				query.exec();
			},
			// 点击导航切换swiper
			taggleNav(val) {
				this.swiperIndex = val;
			},
			// 滚动tabs以及移动下划线
			scrollDom() {
				let info = this.navInfos[this.swiperIndex];
				let offsetLeft = info.left - this.parentLeft;
				let scrollLeft = offsetLeft - (this.componentWidth - info.width) / 2;
				this.scrollToLeft = scrollLeft < 0 ? 0 : scrollLeft;
				this.navItemLeft = this.navInfos[this.swiperIndex].left;
				setTimeout(() => {
					this.navItemWidth = info.width;
				}, 50);
			},
			// swiper的index变动
			swiperChange(e) {
				this.swiperIndex = e.detail.current;
				this.scrollDom();
				this.$emit('currentIndex', this.swiperIndex);
				if (this.list[e.detail.current].content.length == 0) {
					this.getVideos()
				}
			},
			// tabs-scrollview触底
			handleScroll(e) {
				this.scrollDom();
			},
			// swiper-ScrollLower触底
			swiperScrollLower() {
				// uni.showToast({
				// 	icon: 'none',
				// 	title: `此时为${this.list[this.swiperIndex].title}触底`
				// });
				// setTimeout(() => {
				// 	this.getData();
				// }, 500);
				this.list[this.swiperIndex].page = this.list[this.swiperIndex].page + 1
				this.getVideos()
			},
			getVideos() {
				let swiperIndex = this.swiperIndex
				let currentData = this.list[swiperIndex]
				var params = {
					page: currentData.page
				}
				if (currentData.id == 0) {} else {
					params.category = currentData.id
				}
				this.$u.api.getVideos(params).then(res => {
					this.refreStatus = false
					let results = res.data.results
					for (var i = 0; i < results.length; i++) {
						results[i].showTitle = true
					}
					if (currentData.page == 1) {
						if (results == 0) {
							this.loadingText = '暂无视频'
						} else {
							this.loadingText = ''
							this.list[swiperIndex].content = results
						}
					} else {
						this.loadingText = ''
						let a = this.list[swiperIndex].content;
						let b= a.concat(results);
						this.list[swiperIndex].content=b;
					}

				}).catch(res => {
					this.refreStatus = false
					if (res.code == 404) {
						this.loadingText = '到底了'
					}
				})


			},
			// 生成列表数据
			getData() {
				uni.showLoading({
					title: '加载中'
				});
				setTimeout(() => {
					for (let index = 0; index < 10; index++) {
						let arr = this.list[this.swiperIndex].content;
						this.$set(arr, arr.length, Math.random() + '-' + index + this.list[this.swiperIndex]
							.title);
					}
					uni.hideLoading();
				}, 1000);
				console.log(this.list[this.swiperIndex]);
			},
			// 下拉事件
			handleRefre() {
				this.refreStatus = true;
				// uni.showLoading({
				// 	title: '下拉加载中'
				// });
				this.list[this.swiperIndex].page = 1
				this.getVideos()
				// setTimeout(() => {
				// 	this.list[this.swiperIndex].content = [];
				// 	for (var i = 0; i < 5; i++) {
				// 		this.list[this.swiperIndex].content.push([this.list[this.swiperIndex].title + '下拉-' + i]);
				// 	}
				// 	uni.hideLoading();
				// }, 1000);
				// setTimeout(() => {
				// 	this.refreStatus = false;
				// }, 1000);
			},
			startSearch(e){
				console.log(e)
			}
		}
	};
</script>

<style lang="scss" scoped>
	.nav-item {
		display: inline-block;
		margin: 0 16upx;
		text-align: center;
		transition: color 0.3s ease;
	}

	.nav {
		white-space: nowrap;
		position: relative;
		height: 80upx;
		padding: 20upx 0;
	}

	/* #ifndef APP-NVUE */
	::-webkit-scrollbar {
		display: none;
	}

	/* #endif */

	/* #ifdef H5 */
	// 通过样式穿透，隐藏H5下，scroll-view下的滚动条
	scroll-view ::v-deep ::-webkit-scrollbar {
		display: none;
	}

	/* #endif */

	.nav-item-act {
		color: pink;
		font-weight: bolder;
	}

	.nav-line {
		position: absolute;
		bottom: 0;
		height: 10upx;
		border-radius: 10upx;
		background-color: pink;
		transition: left 0.3s ease;
	}

	swiper {
		height: calc(100vh - 80upx);
	}

	// swiper-item {
	// 	text-align: center;
	// 	color: #000;
	// 	position: relative;
	// 	background-color: skyblue;
	// 	color: #fff;
	// }

	.swiper-item {
		overflow-y: scroll;
	}

	.swiper-item-list {
		margin-top:4upx;
		// height: 400upx;
		border-bottom: 4upx solid pink;
		// line-height: 400upx;
		position: relative;
	}

	.swiper-scroll {
		height: 100%;
	}

	.video {
		width: 100%;
		height: 380rpx;
	}

	.video-slot {
		width: 100%;
		height: 40px;
		line-height: 40px;
		font-size: 16px;
		color: white;
		background-color: black;
		opacity: 0.6;
		position: absolute;
	}
	.playIcon{
		position: absolute;
		top: 50%;
		left: 50%;
		z-index: 100;
		transform: translate(-50%, -50%);
	}
	#videoDialog{
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		background-color: rgba(0, 0, 0, 0.5);   
	}
	.closeIconWrap{
		position: relative;
		text-align: right;
	}
	.closeIcon{
		padding: 20px;
		margin-bottom: 10px;
	}
</style>
