<template>
	<list v-if="showAndriod" :bounce="false" :loadmoreoffset="wHeight * 3" :show-scrollbar="false" ref="listBox"
		:pagingEnabled="true" @loadmore="loadmore" :scrollable="scrollable">
		<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"
					:isAndriod="isAndriod" :showAndriod="showAndriod" :isIos="isIos" :isH5="isH5" :isTabbar="isTabbar"
					@playStatusChange="playStatusChange" :height="wHeight" :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($event, item, index)" @dianzanClick="dianzanClick(item, index)"
					@share="share(item)" @zhuijuClick="zhuijuClick(item)" @progressScroll="progressScroll"
					@progressScrollEnd="progressScrollEnd" @popupShow="popupShow($event, item, index)"></list-item-vue>
			</view>
		</cell>
	</list>
	<view v-if="isH5 || isIos" 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" :height="wHeight"
					:isAndriod="isAndriod" :showAndriod="showAndriod" :isIos="isIos" :isH5="isH5" :isTabbar="isTabbar"
					@playStatusChange="playStatusChange" :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>

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

	<!-- 选集 -->
	<up-overlay :show="popup.show" @click="popupClose('show')">
		<view class="u-p-30 bg-fff xuanji-box">
			<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 xuanji-scroll" :style="{ height: xuanjiData.height + 'px' }"
				:scroll-top="xuanjiData.scrollTop" :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="[nowIndex == index ? 'active' : '', (index + 1) % 3 == 0 ? 'mr-0' : '', 'ji-item' + index]"
						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>
							<!-- <image class="lock-icon" src="@/static/images/lock.png" mode=""></image> -->
						</view>
						<image v-if="nowIndex == index" class="playing" src="@/static/images/playIng.png" mode="">
						</image>
					</view>
				</view>
			</scroll-view>
		</view>
	</up-overlay>

	<!-- 暂时舍弃，因为在ios上会有奇怪问题导致经常不出现 -->
	<!-- 选集-->
	<!-- <view class="mask" :class="{'mask-show':popup.show}">
		<view class="u-p-30 bg-fff box">
			<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>
			<view :style="{height:xuanjiData.height+'px',overflow:'hidden'}">
				<scroll-view scroll-y="true" class="u-m-t-30 xuanji-scroll" :style="{height:xuanjiData.height+'px'}"
					:scroll-top="xuanjiData.scrollTop" :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="[nowIndex==index?'active':'',(index+1)%3==0?'mr-0':'','ji-item'+index]"
							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>

		</view>
	</view> -->
	<up-popup :show="popup.show1" :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>
			<view :style="{ height: xuanjiData.height + 'px', overflow: 'hidden' }">
				<scroll-view scroll-y="true" class="u-m-t-30 xuanji-scroll"
					:style="{ height: xuanjiData.height + 'px' }" :scroll-top="xuanjiData.scrollTop"
					: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="[nowIndex == index ? 'active' : '', (index + 1) % 3 == 0 ? 'mr-0' : '', 'ji-item' + index]"
							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>
								<!-- <image class="lock-icon" src="@/static/images/lock.png" mode=""></image> -->
							</view>
							<image v-if="nowIndex == index" class="playing" src="@/static/images/playIng.png" mode="">
							</image>
						</view>
					</view>
				</scroll-view>
			</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">{{ paytips }}</text>
			</view>
			<view class="u-m-t-30">
				<text class="color-999 u-font-24">注：抽奖机会仅当日可用，次日作废</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)" v-if="nowDanjiPrice * goldBili > 0">
					<image class="hot" src="@/static/images/hot.png" mode=""></image>
					<text class="u-font-28 font-bold">{{ to2(nowDanjiPrice * goldBili)}}金币解锁单集视频</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> -->
					<text class="u-font-28 font-bold">{{ nowNewDanjiPrice }}元解锁单集视频</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">{{ $common.payTips }}</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>
	<!-- 达到每天支付赠送抽奖次数上限时弹窗确认 -->
	<up-popup :show="popup.payConfirm" mode="center" :round="22" @close="popupClose('payConfirm')"
		:customStyle="payConfirmCustomStyle">
		<view class="u-p-32">
			<text class="u-font-32 color-333 font-bold u-text-center">付款确认</text>
			<view class="u-p-l-14 u-p-r-14">
				<view class="color-333 u-font-28 u-m-t-28 u-m-b-28">
					<view class="u-flex u-flex-row">
						<text class="u-font-28">今日已付款解锁{{ payCount.canGetRedPackMax }}次，本次解锁后将</text>
						<text class="no-get">不会获得</text>
					</view>
					<text class="u-font-28">抽奖机会，请确认是否继续付款</text>
				</view>
				<view class="u-flex u-flex-row u-row-between gap-20 u-p-l-28 u-p-r-28">
					<text class="cancel-btn" @click="popupClose('payConfirm')">取消</text>
					<text class="confirm-btn" @click="continuePay()">继续付款</text>
				</view>
			</view>
		</view>
	</up-popup>

	<!-- 绑定微信 -->
	<up-popup :show="popup.bindWx" mode="center" :round="22" @close="popupClose('bindWx')"
		:customStyle="payConfirmCustomStyle">
		<view class="u-p-32">
			<text class="u-font-32 color-333 font-bold u-text-center">绑定微信</text>
			<view class="u-p-l-14 u-p-r-14">
				<text class="u-text-center color-333 u-font-28 u-m-t-28 u-m-b-28">请先绑定微信，再继续完成支付</text>
				<view class="u-flex u-flex-row u-row-between gap-20 u-p-l-28 u-p-r-28">
					<text class="cancel-btn" @click="popupClose('bindWx')">取消</text>
					<text class="confirm-btn" @click="bindWx()">立即绑定</text>
				</view>
			</view>
		</view>
	</up-popup>
	<!-- #ifdef H5 -->
	<my-poster ref="refPoster"></my-poster>
	<!-- #endif -->
</template>

<script setup>
	import {
		insertuserisopen
	} from '@/api/index/index.js'
	import {
		getPayMoney
	} from '@/api/order/index.js'
	import {
		toBindWx
	} from '@/utils/wx.js';
	import {
		useCommonStore
	} from '@/store/common.js';
	import {
		getElRect
	} from '@/utils/util.js';
	const $common = useCommonStore();
	// #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,
		throttle
	} from 'lodash';
	import * as Api from '@/api/video/index.js';
	import infoBox from '@/utils/infoBox.js';
	import {
		computed,
		reactive,
		ref,
		watch,
		nextTick,
		onMounted,
		getCurrentInstance,
		onUnmounted
	} from 'vue';

	function to2(n) {
		if (n) {
			return n.toFixed(2)
		}
	}
	//绑定微信
	function bindWx() {
		popupClose('bindWx');
		toBindWx();
	}

	const payConfirmCustomStyle = {
		width: '694rpx'
	};

	let scrollable = ref(true);

	function progressScroll() {
		scrollable.value = false;
	}

	function progressScrollEnd() {
		scrollable.value = true;
	}

	let isH5 = false;
	// #ifdef H5
	isH5 = true;
	// #endif
	const sysinfo = uni.getSystemInfoSync();
	const isIos = sysinfo.platform == 'ios' ? true : false;
	const isAndriod = sysinfo.platform == 'android' ? true : false;
	const showAndriod = !isH5 && isAndriod ? true : false;
	let initing = true;
	const refPoster = ref(null);

	let paytips = ref('');
	const props = defineProps({
		list: {
			type: Array,
			default: () => {
				[];
			}
		},
		options: {
			tpye: Object,
			default: () => {
				return {
					courseDetailsId: ''
				};
			}
		},
		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,
		bindWx: false,
		payTips: false,
		speed: false,
		data: null,
		payConfirm: false,
		payType: null
	});

	//选集数据
	const xuanjiData = reactive({
		scrollTop: 0,
		items: [],
		scrollHeight: 0,
		height: 300
	});
	const refXuanjiList = ref(null);

	function xuanjiScroll(e) {
		console.log(e);
	}
	async function xuanjiInit() {
		const height = 44;
		const marginBottom = 10;
		const oneItemHeight = height + marginBottom;
		const scrollTop = Math.ceil((nowIndex.value + 1) / 3) * oneItemHeight - xuanjiData.height / 2 + oneItemHeight /
			2;
		if (props.list.length <= 15) {
			xuanjiData.scrollTop = 0;
			return;
		}
		xuanjiData.scrollTop = scrollTop * 1 < 0 ? 0 : scrollTop;

		// #ifdef H5
		if (!xuanjiData.items[props.list.length - 1]) {
			const res = await getElRect('ji-list', instance, {
				rect: true
			});
			xuanjiData.scrollHeight = res.height;
			let firstItemTop = 0;
			for (let i in props.list) {
				const res1 = await getElRect('ji-item' + i, instance, {
					rect: true
				});
				if (i == 0) {
					firstItemTop = res1.top;
				}
				xuanjiData.items[i] = {
					height: res1.height,
					top: i == 0 ? 0 : res1.top - firstItemTop
				};
			}
		}
		xuanjiData.scrollTop = xuanjiData.items[nowIndex.value].top - xuanjiData.height / 2 + xuanjiData.items[nowIndex
			.value].height / 2;
		console.log(xuanjiData);
		// #endif
	}

	function openBs() {}

	let cacheIndex = null;

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

	function disappear(e, 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) {
			uni.setStorageSync('nobuyCourseId', popup.data.courseDetailsId);
			// #ifdef APP
			uni.showModal({
				title: '提示',
				content: '是否立即前往支付',
				showCancel: true,
				confirmText: '立即支付',
				success(action) {
					if (action.confirm) {
						insertuserisopen({
							order_id: data.orderId,
							user_sure: 1
						}).then(() => {
							uni.navigateTo({
								url: '/pages/pays/pays?orderId=' + data.orderId + '&url=' + res.h5Url
							});
						})
			
					}
				}
			})
			// uni.navigateTo({
			// 	url: '/pages/pays/pays?orderId=' + data.orderId + '&url=' + res.h5Url
			// });
			// #endif
			// #ifdef H5
			uni.showModal({
				title: '提示',
				content: '是否立即前往支付',
				showCancel: true,
				confirmText: '立即支付',
				success(action) {
					if (action.confirm) {
						insertuserisopen({
							order_id: data.orderId,
							user_sure: 1
						}).then(() => {
							window.location.href = res.h5Url;
						})
			
					}
				}
			})
			// window.location.href = res.h5Url;
			
			
			// #endif
			popupClose();
		}
	}
	//金币支付
	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() {
		const [type, num] = popup.payType.split('-');
		if (type != 'gold') {
			if (!isAgree.value) {
				return infoBox.showToast('请阅读并同意 《付费须知说明》');
			}
		}

		console.log(type, num);
		let data = {
			courseId: popup.data.courseId
		};
		if (num == 1) {
			data.courseDetailsId = popup.data.courseDetailsId;
		}
		try {
			const res = num == '10' ? await Api.buyTenVideo(data) : await Api.buyVideo(data);
			if (res && res.code == 407) {
				popupShow('bindWx');
				return;
			}
			if (!res || !res.orders) {
				return uni.showToast({
					title: '创建订单失败',
					icon: 'none'
				});
			}
			if (res) {
				if (type == 'gold') {
					goldPay({
						orderId: res.orders.ordersId
					});
				} else {
					
					uni.showLoading()
					console.log('延迟开始')
					setTimeout(() => {
						uni.hideLoading()
						console.log('延迟结束')
						payOrder({
							orderId: res.orders.ordersId
						});
					}, 200)

				}
			} else {}
		} catch (error) {
			console.log(error);
		}
	}

	async function payBtnClick(type, num) {
		console.log(type, num);
		popup.payType = `${type}-${num}`;
		if (type == 'gold') {
			return payConfirm();
		}
		try {
			if (payCount.now > payCount.canGetRedPackMax) {
				popupShow('payConfirm');
				return;
			}
			popupClose('show');
			popupShow('payTips');
		} catch (error) {}
	}

	function continuePay() {
		popupClose('payConfirm');
		popupClose('show');
		popupShow('payTips');
	}

	function jiClick(item, index) {
		initing = false;
		let newCurrent = (current.value + 1) % 3;
		videoList.value[newCurrent] = item;
		current.value = newCurrent;
		popupClose('show');
		if (showAndriod) {
			goListPosition(index);
		}
	}

	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);
		const el = refList.value[index];
		if (initing) {
			if (!$mountedComponents[index]) {
				positonmer = setTimeout(() => {
					goListPosition(index);
				}, 200);
				return;
			}
		}
		domModule.scrollToElement(el, {
			animated: false
		});
		initing = false;
		const item = props.list[index];
		setVideoList(item);
		insertHistory();
	}

	function popupClose(key) {
		console.log('popupClose:' + key);
		if (key == 'show') {
			// xuanjiData.scrollTop = 0
		}
		if (key) {
			popup[key] = false;
			return;
		}
		for (let i in popup) {
			if (!i.includes(['data', 'payType'])) {
				popup[i] = false;
			}
		}
	}

	const payCount = reactive({
		canGetRedPackMax: 0,
		now: 1
	});

	function extractNumbers(str) {
		const numbers = str.match(/\d+/g);
		if (numbers) {
			return numbers.map((num) => parseInt(num, 10));
		}
		return [];
	}
	async function popupShow(key = 'show', item, index) {
		console.log(key, item, 'debug');
		console.log('key' + popup[key]);
		console.log('popupShow');
		if (key == 'show') {
			// #ifdef H5
			nextTick(() => {
				xuanjiInit();
			});
			// #endif
			// #ifdef APP
			xuanjiInit();
			// #endif
		}
		if (key == 'pay') {
			const res = await Api.getPayTips();

			await getDanjiPrice()
			const numbers = extractNumbers(res);
			console.log(numbers);
			if (numbers.length >= 2) {
				payCount.canGetRedPackMax = numbers[0];
				payCount.now = numbers[1];
				console.log(payCount);
			}
			paytips.value = res;
		}
		popup[key] = true;
		if (item) {
			popup.data = item;
			popup.index = index;
		}
	}

	let goldBili = ref($common.goldBili || 0);
	let wHeight = ref(0);
	async function configInit() {
		goldBili.value = $common.goldBili;

		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() {
		let item = props.list.find((v) => props.options.courseDetailsId == v.courseDetailsId);
		item = item ? item : props.info.current;
		if (JSON.stringify(item) !== '{}') {
			if (showAndriod) {
				nextTick(() => {
					const index = props.list.findIndex((v) => v.courseDetailsId == item.courseDetailsId);
					goListPosition(index);
				});
			} else {
				setVideoList(item);
			}
		}
	}

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

	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
		}).then((res) => {
			if (res) {
				uni.showToast({
					title: '操作成功！',
					icon: 'none'
				});
			}
		});
	}, 500);

	let showControls = ref(false);

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

	function videoPlay(videoId, courseDetailsId) {}

	function ended() {}

	function share(item) {
		const {
			qdCode
		} = uni.getStorageSync('userInfo') || {};
		const urls =
			returnShareUrl() +
			'/me/detail/detail?id=' +
			item.courseId +
			'&courseDetailsId=' +
			item.courseDetailsId +
			'&invitation=' +
			uni.getStorageSync('invitationCode') +
			'&qdCode=' +
			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(async () => {
		try {
			if (uni.getStorageSync('token')) {
				const item = videoList.value[current.value];
				const res = await Api.insertHistory({
					courseId: item.courseId,
					courseDetailsId: item.courseDetailsId
				});

				console.log('insertHistory===', res);
			}
		} catch (error) {
			console.log('insertHistory.error===', error);
			emits('errorHandle', error);
		}
	}, 1000);

	async 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];
		await insertHistory();
		setVideoList(item);
	}

	const refPopup = ref(null);

	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;
		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];
			}
		}
		if (!item.videoUrl) {
			nextTick(() => {
				setTimeout(() => {
					popupShow('pay', item, index);
				}, 100);
			});
		}
	}

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

	function waiting() {}
	configInit();
	onMounted(() => {
		init();
		// setTimeout(()=>{
		// },500)
	});
	watch(
		() => props.list.length,
		(newval) => {
			console.log('props.list.length change' + newval);
			if (!showAndriod) {
				init();
			}
		}
	);
	watch(
		() => nowIndex.value,
		(newval) => {}
	);
	const nowDanjiPrice = computed(() => {
		return videoList.value[current.value].price;
	});


	const nowNewDanjiPrice = ref(0);


	async function getDanjiPrice() {
		const res = await getPayMoney({
			y_price: nowDanjiPrice.value,
		})
		nowNewDanjiPrice.value = res
	}

	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;
		});
	}

	/**
	 * @param {type}  = [start,end]
	 */
	const playStatusChange = debounce(async (data) => {
		try {
			const res = await Api.playStatus(data);
			console.log('playStatusChange.res', res);
		} catch (error) {
			console.log('playStatusChange.error', error);
			emits('errorHandle', error);
		}
	}, 2000);

	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: 208rpx;
			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;

				.lock-icon {
					width: 24rpx;
					height: 24rpx;
				}
			}

			.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;

			.playing {}

			&.active {
				background-color: #ffffff;

				.playing {}
			}
		}
	}

	.mask {
		position: fixed;
		z-index: 2000;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		justify-content: end;
		transition: transform 0.3s ease-in-out;
		transform: translateY(100vh);

		&.mask-show {
			transform: translateY(0);
		}

		.box {
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			border-radius: 10px 10px 0 0;
			background-color: #fff;
		}
	}

	.xuanji-box {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		border-radius: 10px 10px 0 0;
		background-color: #fff;
	}

	.cancel-btn,
	.confirm-btn {
		width: 210rpx;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		font-size: 32rpx;
		color: #fff;
		background: #ed838a;
		box-shadow: inset 0rpx -6rpx 12rpx 0rpx rgba(255, 255, 255, 0.77);
		border-radius: 40rpx 40rpx 40rpx 40rpx;
	}

	.no-get {
		color: #ff5560;
		font-size: 32rpx;
	}
</style>