<template>
	<!-- #ifdef H5 -->
	<view class=" w-full box" style="width: 100vw;">
		<swiper @longpress="popupShow('speed')" :style="{height:wHeight+'px'}" v-if="videoList.length"
			@change="swiperChange" :current="current" :circular="true" vertical class="u-flex-1"
			@transition="transition" :indicator-dots="false" :autoplay="false" :interval="0" :duration="200">
			<swiper-item v-for="(item,index) in videoList" :key="index">
				<list-item-vue :total="list.length" :item="item" :isCommand="isCommand" :showControls="control.showControls" :current="current"
					:isCollect="isCollect" @toDetail="toDetail(item,index)" @controlstoggles="controlstoggles"
					:playSpeeds="playSpeeds" :index="index" :nowIndex="nowIndex"
					@dianzanClick="dianzanClick(item,index)" @share="share(item)" @zhuijuClick="zhuijuClick(item)"
					@popupShow="popupShow($event,item,index)"></list-item-vue>
			</swiper-item>
		</swiper>
	</view>
	<!-- #endif -->

	<!-- #ifdef APP -->
	<list :bounce="false" :loadmoreoffset="wHeight*3" :show-scrollbar="false" ref="listBox" :pagingEnabled="true"
		@loadmore="loadmore" :scrollable="true">
		<cell v-for="(item,index) in list" :key="item.courseDetailsId" :ref="setRefList(index)">
			<view class="swipers-items" :style="boxStyle" @longpress="popupShow('speed')">
				<list-item-vue :total="list.length" :item="item" :current="current" :isCollect="isCollect"
					 :isCommand="isCommand"
					:showControls="control.showControls" @toDetail="toDetail(item,index)" @itemMounted="itemMounted"
					@controlstoggles="controlstoggles" :index="index" :instance="instance" :nowIndex="nowIndex"
					@appear="appear($event,item,index)" :playSpeeds="playSpeeds" @disappear="disappear(item,index)"
					@dianzanClick="dianzanClick(item,index)" @share="share(item)" @zhuijuClick="zhuijuClick(item)"
					@popupShow="popupShow($event,item,index)"></list-item-vue>
			</view>
		</cell>
	</list>

	<!-- #endif -->

	<!-- 返回按钮 -->
	<view class="back-icon" v-if="!isTabbar&&control.showBack">
		<u-icon name="arrow-left" color="#fff" :size="28" @click="back"></u-icon>
	</view>

	<!-- 选集 -->
	<up-popup :show="popup.show" :round="10" @close="popupClose('show')" :customStyle="customStyle">
		<view class="u-p-30">
			<view class="u-flex u-flex-row u-row-between">
				<view class="u-flex u-flex-row" style="align-items: baseline;">
					<text class="color-333 u-font-32 ">{{info.title}}</text>
					<text class="u-font-28 color-666 u-m-l-20">共{{list.length}}集</text>
				</view>
				<up-icon name="close" :size="16" color="#333" bold @click="popupClose('show')"></up-icon>
			</view>
			<scroll-view scroll-y="true" class="u-m-t-30" style="height: 400px;box-sizing: border-box;"
				:show-scrollbar="false">
				<view class="ji-list u-flex u-flex-row u-flex-wrap">
					<view class="ji-item u-flex-xy-center u-text-center" @click="jiClick(item,index)"
						:class="{active:nowIndex==index,'mr-0':(index+1)%3==0}" v-for="(item,index) in list"
						:key="index">
						<text class="u-font-28" :class="{'color-fff':nowIndex==index}">第{{index+1}}集</text>
						<view class="lock u-flex-xy-center" v-if="!item.videoUrl">
							<up-icon name="lock" :size="14" color="#fff"></up-icon>
						</view>
						<image v-if="nowIndex==index" class="playing" src="@/static/images/playIng.png" mode="">
						</image>
					</view>
				</view>

			</scroll-view>
		</view>
	</up-popup>
	<!-- 支付 -->
	<up-popup :show="popup.pay" :round="10" @close="popupClose('pay')" :customStyle="customStyle">
		<view class="u-p-30">
			<view class="u-flex u-flex-row u-row-between">
				<view class="u-flex u-flex-row" style="align-items: baseline;">
					<text class="color-333 u-font-32 ">当前视频 没有播放权限</text>
				</view>
				<up-icon name="close" :size="16" color="#333" bold @click="popupClose('pay')"></up-icon>
			</view>
			<view class="u-m-t-30">
				<text class=" color-999 u-font-24">每日前10次付款均可获取抽奖机会，抽奖保底抽中付款金额等额红包，红包可直接提现。当前为第1次付款</text>
			</view>
			<view class="colo-333 pay-list font-bold u-font-28 u-m-t-20">
				<view class="pay-list-item" v-if="info&&info.price" @click="payBtnClick('money','all')">
					<image class="hot" src="@/static/images/hot.png" mode=""></image>
					<text class="u-font-28 font-bold">{{info.price}}元解锁全剧</text>
				</view>
				<view class="pay-list-item" v-if="info&&info.wholesalePrice" @click="payBtnClick('money',10)">
					<image class="hot" src="@/static/images/hot.png" mode=""></image>
					<text class="u-font-28 font-bold">{{info.price}}元解锁全剧</text>
				</view>
				<view class="pay-list-item" @click="payBtnClick('gold',1)">
					<image class="hot" src="@/static/images/hot.png" mode=""></image>
					<text class="u-font-28 font-bold">{{nowDanjiPrice*jinbiBili}}金币解锁单集视频</text>
				</view>
				<view class="pay-list-item" @click="payBtnClick('money',1)">
					<!-- <image class="hot" src="@/static/images/hot.png" mode=""></image> -->
					<text class="u-font-28 font-bold">{{nowDanjiPrice}}元解锁单集视频</text>
				</view>
			</view>
		</view>
	</up-popup>
	<!-- 支付确认 -->
	<up-popup :show="popup.payTips" :round="10" @close="popupClose('payTips')" :customStyle="customStyle">
		<view class="u-p-30">
			<view class="u-flex u-flex-row u-row-between">
				<view class="u-flex u-flex-row" style="align-items: baseline;">
					<text class="color-333 u-font-32 ">购买后继续观看</text>
				</view>
				<up-icon name="close" :size="16" color="#333" bold @click="popupClose('payTips')"></up-icon>
			</view>
			<view class="u-flex  u-m-t-24 u-flex-row u-row-between u-font-28">
				<view class="u-flex u-flex-row u-flex-y-center">
					<image src="@/static/images/zhifubao.png" class="zhifubao" mode=""></image>
					<text class="u-m-l-20 u-flex-xy-center u-font-28">支付宝</text>
				</view>
				<view>
					<up-radio-group>
						<up-radio :icon-size="20" :size="26" :activeColor="color.main"></up-radio>
					</up-radio-group>
				</view>
			</view>
			<view class="u-m-t-10">
				<text class="font-bold u-font-26 color-333">温馨提示</text>
				<text class="u-m-t-10 u-font-24 color-999">一经购买不予退款，未满18岁需在监护人的指导、同意下进行付费操作</text>
			</view>
			<view class="u-flex u-flex-row u-m-t-30 u-flex-y-center u-font-28">
				<view class="u-flex-y-center">
					<up-checkbox usedAlone shape="circle" v-model:checked="isAgree"
						:activeColor="color.main"></up-checkbox>
				</view>
				<view class="u-flex  u-flex-row u-flex-y-center">
					<text class="u-font-28 color-333">我已经阅读并同意</text>
					<text class="color-main u-font-28">《付费须知说明》</text>
				</view>

			</view>
			<view class="u-m-t-30 my-bg-main payConfirm" @click="payConfirm">
				<text class="u-font-28 color-fff">确认支付</text>
			</view>
		</view>
	</up-popup>

	<!-- 倍速 -->
	<up-popup :show="popup.speed" :round="0" @close="popupClose('speed')" :customStyle="customStyle">
		<view class="u-p-20 u-flex u-flex-row u-row-between  u-flex-y-center">
			<text class="font-bold color-333 u-font-28">倍速:</text>

			<view class="u-flex u-flex-row speed-list">
				<text class="speed-list-item u-font-28" @click="changeSpeed(index)"
					:class="{active:index==speeds.active}" v-for="(item,index) in speeds.list">{{item.num}}x</text>
			</view>
		</view>
	</up-popup>

	<my-poster ref="refPoster"></my-poster>
</template>

<script setup>
	// #ifdef APP
	const domModule = uni.requireNativePlugin('dom')
	// #endif
	import listItemVue from './list-item.vue';
	import {
		returnShareUrl
	} from '@/commons/config.js'
	import color from '@/commons/color.js'
	import {
		debounce
	} from 'lodash';
	import * as Api from '@/api/video/index.js'
	import infoBox from '@/utils/infoBox.js'
	import {
		computed,
		reactive,
		ref,
		watch,
		nextTick,
		onMounted,
		getCurrentInstance
	} from 'vue';

	const refPoster = ref(null)

	const props = defineProps({
		list: {
			type: Array,
			default: () => {
				[]
			}
		},
		isCommand: {
			type: Boolean,
			default: false
		},
		isTabbar: {
			type: Boolean,
			default: false
		},
		info: {
			tpye: Object,
			default: () => {
				return {
					collect: 0,
					current: {},
					list: [],
					price: 0,
					title: ''
				}
			}
		}
	})
	const control = reactive({
		showBack: true,
		showControls: true
	})
	// #ifdef APP
	control.showControls = false
	// #endif

	const customStyle = computed(() => {
		// #ifdef H5
		return {
			bottom: props.isTabbar ? '50px' : '0'
		}
		// #endif
		// #ifndef H5
		return {}
		// #endif
	})

	function controlstoggles(e) {
		control.showControls = e.detail.show
		control.showBack = control.showControls
	}

	const speeds = reactive({
		list: [{
			name: '0.5x',
			num: 0.5
		}, {
			name: '1x',
			num: 1
		}, {
			name: '1.25x',
			num: 1.25
		}, {
			name: '1.5x',
			num: 1.5
		}],
		active: 1
	})

	const $mountedComponents = {}

	function itemMounted(index) {
		// $mountedComponents[index]=true
	}

	function back() {
		const arr = getCurrentPages()
		if (arr.length < 2) {
			uni.switchTab({
				url: '/pages/index/index'
			})
			return
		}
		uni.navigateBack()
	}

	function changeSpeed(index) {
		speeds.active = index
		uni.showToast({
			title: '已切换' + speeds.list[index].num + '倍播放',
			icon: 'none',
			duration: 2000
		})
	}
	const playSpeeds = computed(() => {
		return speeds.list[speeds.active].num
	})

	const instance = getCurrentInstance()
	let isAgree = ref(false);
	const cutomStyle = {
		background: 'rgb(255, 117, 129)',
		height: '100rpx',
		'border-radius': '100px'
	}
	const popup = reactive({
		show: false,
		pay: false,
		payTips: false,
		speed: false,
		data: null,
		payType: null
	})


	function openBs() {

	}

	let cacheIndex = null

	function appear(isFirst, item, index) {
		if (isFirst) {
			$mountedComponents[index] = true
		}
		if (!initing) {
			cacheIndex = index
		}
	}

	function disappear(item, index) {

		if (index == nowIndex.value && cacheIndex != null && !initing) {
			console.log('disappear' + index);
			console.log('disappear nowIndex' + nowIndex.value);
			console.log('cacheIndex' + cacheIndex);
			nowIndex.value = cacheIndex
			const item=props.list[nowIndex.value]
			if (!item.videoUrl) {
				popupShow('pay', item, nowIndex.value)
			}
			cacheIndex = null
		}
	}



	//非金币支付
	async function payOrder(data) {
		const res = await Api.payOrder(data)
		if (res) {
			// #ifdef APP
			uni.navigateTo({
				url: '/pages/pays/pays?orderId=' + data.orderId + '&url=' + res.h5Url
			});
			// #endif
			// #ifdef H5
			window.location.href = res.h5Url
			// #endif
		}
	}
	//金币支付
	async function goldPay(data) {
		console.log(popup.index);
		const res = await Api.goldPay(data)
		if (res) {
			uni.showToast({
				title: '解锁成功',
				icon: 'none'
			})
			popupClose()
			emits('update', {
				index: popup.index
			})
		}

	}
	//确认支付
	async function payConfirm() {
		if (!isAgree.value) {
			return infoBox.showToast('请阅读并同意 《付费须知说明》')
		}
		const [type, num] = popup.payType.split('-');
		console.log(type, num);
		let data = {
			courseId: popup.data.courseId
		}
		if (num == 1) {
			data.courseDetailsId = popup.data.courseDetailsId
		}

		const res = num == '10' ? await Api.buyTenVideo(data) : await Api.buyVideo(data)
		if (res) {
			if (type == 'gold') {
				goldPay({
					orderId: res.orders.ordersId
				})
			} else {
				payOrder({
					orderId: res.orders.ordersId
				})
			}

		} else {

		}


	}

	function payBtnClick(type, num) {
		console.log(type, num);
		popup.payType = `${type}-${num}`
		popupClose('show')
		popupShow('payTips')
	}



	function jiClick(item, index) {
		let newCurrent = (current.value + 1) % 3;
		videoList.value[newCurrent] = item;
		current.value = newCurrent;
		popupClose('show')
		// #ifdef APP
		goListPosition(index)
		// #endif
	}

	let refList = ref([])

	function setRefList(index) {
		refList.value[index] = null;
		return (el) => {
			if (el) {
				refList.value[index] = el;
			}
		};
	}
	//滚动到指定位置
	let positonmer = null

	function goListPosition(index) {
		clearTimeout(positonmer)
		console.log('goListPosition:' + index)
		const el = refList.value[index]
		if ($mountedComponents[props.list.length - 1] && $mountedComponents[index]) {
			domModule.scrollToElement(el, {
				animated: false
			})
			initing = false;
			const item = props.list[index]
			setVideoList(item)
			insertHistory()
		} else {
			// 延迟设置元素位置，（可能视频位置比较靠后数据未渲染完毕）
			positonmer = setTimeout(() => {
				goListPosition(index)
			}, 200)
		}
	}



	function popupClose(key) {
		if (key) {
			popup[key] = false
			return
		}
		for (let i in popup) {
			popup[i] = false
		}
	}

	function popupShow(key = 'show', item, index) {
		console.log(item);
		popup[key] = true
		if (item) {
			popup.data = item
			popup.index = index
		}
	}


	let jinbiBili = ref(0)
	let wHeight = ref(0)
	async function configInit() {
		const res = await Api.getJinbiBili()
		jinbiBili.value = res.value

		const sysInfo = uni.getSystemInfoSync()
		wHeight.value = sysInfo.windowHeight
		// wHeight.value = sysInfo.screenHeight
	}

	let isCollect = ref(props.info.collect)
	watch(() => props.collect, (newval) => {
		isCollect.value = newval
	})

	function toDetail(item, index) {
		uni.navigateTo({
			url: '/pages/video/detail?courseId=' + item.courseId
		})
	}

	function posterError() {

	}

	function posterSuccess() {

	}

	let nowIndex = ref(0)
	let current = ref(0)
	let videoList = ref([])


	function init() {
		if (JSON.stringify(props.current) !== '{}') {
			// #ifdef H5
			setVideoList(props.info.current)
			// #endif
			// #ifdef APP
			nextTick(() => {
				const index = props.list.findIndex(v => v.courseDetailsId == props.info.current.courseDetailsId)
				goListPosition(index)
			})
			// #endif
		}
	}


	const emits = defineEmits(['zhuijuClick', 'swiperChange', 'share', 'update'])



	function zhuijuClick(item) {
		isCollect.value = !isCollect.value
		zhuiju({
			courseId: item.courseId,
			type: isCollect.value ? 1 : 0
		})
		emits('zhuijuClick')
	}
	const zhuiju = debounce((data) => {
		Api.zhuiju(data)
	}, 500)

	let dianZanTimer = null

	function dianzanClick(item, index) {
		item.isGood = !item.isGood
		const newval = item.goodNum + (item.isGood ? 1 : -1)
		item.goodNum = newval < 0 ? 0 : newval
		emits('update', {
			index,
			item
		})
		dianzan(item, index)
	}

	const dianzan = debounce((item, index) => {
		Api.dianzan({
			courseId: item.courseId,
			courseDetailsId: item.courseDetailsId,
			type: item.isGood ? 1 : 0
		})
	}, 500)



	let showControls = ref(false)

	function openShowPay(current, index, videoUrl) {
		showControls.value = true
	}



	function videoPlay(videoId, courseDetailsId) {

	}

	function ended() {

	}

	function share(item) {
		const urls = returnShareUrl() + '/me/detail/detail?id=' + item.courseId + '&courseDetailsId=' + item
			.courseDetailsId + '&invitation=' + uni.getStorageSync('invitationCode') + '&qdCode=' + this.qdCode;
		console.log(urls);
		// #ifdef H5
		refPoster.value.make({
			qrcode: urls,
			title: props.info.title,
			bigImg: item.titleImg,
			tips: '长按或扫描识别二维码观看'
		})
		// #endif

		// #ifndef H5
		uni.setClipboardData({
			data: urls,
			success() {
				uni.showToast({
					title: '邀请链接已复制到剪贴板',
					icon: 'none'
				})
			}
		})
		// #endif

	}



	const insertHistory = debounce(() => {
		const item = videoList.value[current.value]
		Api.insertHistory({
			courseId: item.courseId,
			courseDetailsId: item.courseDetailsId
		})
	}, 1000)

	function swiperChange(e) {
		console.log('e.detail.current');
		console.log(e.detail.current);
		current.value = e.detail.current
		const item = videoList.value[e.detail.current]
		insertHistory()
		setVideoList(item)
	}


	function setVideoList(item) {
		const listLen = props.list.length
		const lastIndex = listLen - 1
		const index = props.list.findIndex(v => v.courseDetailsId == item.courseDetailsId)
		nowIndex.value = index
		console.log('setVideoList nowIndex' + index);
		let position = ''
		if (index === 0) {
			position = 'start'
		}
		if (index === props.list.length - 1) {
			position = 'end'
		}
		if (current.value == 0) {
			if (position === 'start') {
				videoList.value = [item, props.list[index + 1], props.list[lastIndex]]
			} else if (position === 'end') {
				videoList.value = [item, props.list[0], props.list[lastIndex]]
			} else {
				videoList.value = [item, props.list[index + 1], props.list[index - 1]]
			}
		}
		if (current.value == 1) {
			if (position === 'start') {
				videoList.value = [props.list[lastIndex], item, props.list[index + 1]]
			} else if (position === 'end') {
				videoList.value = [props.list[lastIndex - 1], item, props.list[0]]
			} else {
				videoList.value = [props.list[index - 1], item, props.list[index + 1]]
			}
		}
		if (current.value == 2) {
			if (position === 'start') {
				videoList.value = [props.list[1], props.list[lastIndex], item]
			} else if (position === 'end') {
				videoList.value = [props.list[0], props.list[lastIndex - 1], item]
			} else {
				videoList.value = [props.list[index + 1], props.list[index - 1], item]
			}
		}
		console.log(videoList.value);
		if (!item.videoUrl) {
			popupShow('pay', item, index)
		}
	}

	function transition(e) {
		if (e.detail.dy > 0) {
			//down
		} else {
			//up
		}
	}

	function waiting() {

	}
	let initing = true
	configInit()
	onMounted(() => {
		init()
		// setTimeout(()=>{
		// },500)
	})
	watch(() => props.list.length, (newval) => {
		// #ifdef H5
		init()
		// #endif
	})
	const nowDanjiPrice = computed(() => {
		return videoList.value[current.value].price
	})

	function loadmore() {
		console.log('loadmore');
	}
	const boxStyle = computed(() => {
		return {
			'height': wHeight.value + 'px',
			'width': '750rpx',
		}
	})
	
	function videoListUpdata(){
		videoList.value=videoList.value.map(v=>{
			const item=props.list.find(listItem=>listItem.courseDetailsId==v.courseDetailsId)
			return item?item:v
		})
	}
	defineExpose({
		videoListUpdata
	})
</script>

<style lang="scss" scoped>
	.box {
		/* #ifdef H5 */
		flex: 1;
		/* #endif */
	}

	.u-flex-1 {
		flex: 1;
		width: 100%;
		height: 100%;
	}

	.u-popup {
		position: fixed !important;
	}

	::v-deep .u-popup {
		position: fixed !important;
	}

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

	.poster {
		/* #ifdef H5 */
		position: absolute;
		width: 100%;
		height: 90%;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		/* #endif */
		/* #ifdef APP */
		width: 750rpx;
		flex: 1;
		/* #endif */
	}

	.u-text-center {
		text-align: center;
	}

	.u-flex-row {
		flex-direction: row !important;
	}

	.info {
		width: 80%;
		height: auto;
		position: absolute !important;
		bottom: 50px;
		left: 10px;
		color: #ffffff;
		font-size: 15px;
		z-index: 9999;
	}

	.u-flex-y-center {
		align-items: center !important;
	}

	.swipers-items {
		width: 750rpx;
		flex: 1;
		position: relative;
		background-color: #000;
	}

	.right {
		width: 60rpx;
		position: absolute !important;
		right: 20rpx;
		top: 50%;
		transform: translate(0, -50%);
		z-index: 999;
		color: #fff;
		font-size: 24rpx;

		.icon {
			width: 60rpx;
			height: 60rpx;
		}

		.share {
			.text {
				white-space: nowrap;
			}
		}

		.zhuiju {}
	}

	.poster-popup {
		position: fixed !important;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.6);
		z-index: 9999;
		justify-content: center;
		align-items: center;
	}

	.ji-list {
		.ji-item {
			width: 210rpx;
			margin-bottom: 20rpx;
			margin-right: 30rpx;
			height: 88rpx;
			font-size: 28rpx;
			color: #333;
			border-radius: 12rpx;
			background-color: #F5F7FF;
			position: relative;

			&.active {
				background-color: $my-main-color;
				color: #fff;
			}

			&.mr-0 {
				margin-right: 0;
			}

			.lock {
				position: absolute;
				border-radius: 0px 6px 0px 6px;
				background-color: #ccc;
				padding: 2rpx 4rpx;
				top: 0;
				right: 0;
			}

			.playing {
				position: absolute;
				width: 32rpx;
				height: 24rpx;
				bottom: 5px;
				right: 7px;
			}
		}
	}

	.ji-item:nth-of-type(3n) {
		margin-right: 0;
	}

	.hot {
		width: 40rpx;
		height: 40rpx;
	}

	.back-icon {
		position: fixed;
		z-index: 9999;
		left: 30rpx;
		top: 100rpx;
	}

	.pay-list {
		.pay-list-item {
			flex-direction: row;
			justify-content: center;
			background-color: #F2F2F2;
			padding: 24rpx;
			border-radius: 20rpx;
			margin-bottom: 40rpx;
		}
	}

	.payConfirm {
		border-radius: 100px;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		justify-content: center;
		align-items: center;
	}

	.zhifubao {
		width: 56rpx;
		height: 56rpx;
	}

	.qrcode {
		position: fixed;
		top: -9999px;
		left: -9999px;
		opacity: 0;
	}

	.speed-list {
		align-items: center;
		background-color: #eeeeef;
		padding: 5px 10px;
		border-radius: 5px;

		.speed-list-item {
			border-radius: 3px;
			width: 50px;
			padding: 8px 0;
			justify-content: center;
			align-items: center;
			text-align: center;

			&.active {
				background-color: #ffffff;
			}
		}
	}
</style>