<template>
	<view class="skin-wrap">
		<view class="plv-player-comp-box"  :style="{
			'width': (holeWidth) + 'px'
		}">
			<view class="plv-player-longpress-speed" v-if="isInLongPress && !isLock">
				<image class="plv-player-longpress-speed__image" src="@/static/skin/forward.png"></image>
				<text class="plv-player-longpress-speed__text">快进x2.0</text>
			</view>
			<drag-tips class="plv-player-skin-drag-tips" v-if="showGestureSeekTips" :duration="duration" :changeTime="gestureChangeSeekTime" :currentTime="currentTime"></drag-tips>
		</view>
		<gesture class="plv-player-mask"
			:holeWidth="holeWidth"
			:duration="duration"
			:currentTime="currentTime"
			@onLongPress="handleLongPress"
			@onTouchCancel="handleTouchCancel"
			@onGestureClick="handleMask"
			@onTouchEnd="handleTouchEnd"
			@onGestureSeekTo="handleSeekTo"
			@onGestureEvent="handleGEvent">
		</gesture>
		<light class="plv-player-light" :imgUrl="lightImg" :precent="lightPrecent"></light>
		<volume class="plv-player-volume" :imgUrl="volumeImg" :muteImgUrl="volumeMuteImg" :value="volumeValue"></volume>
		<view class="plv-player-subtitle-view" v-if="isShowSubtitle">
			<text v-if="isShowDoubleSubTitle" :style="{ fontWeight: topSubtitle.isBold? 'bold' : 'normal', 
			fontStyle: topSubtitle.isItalic? 'italic' : 'normal', color: topSubtitle.fontColor,
			backgroundColor: topSubtitle.bgColor, fontSize: topSubtitle.fontSize }">{{topSubtitle.text}}</text>
			<text v-if="isShowDoubleSubTitle" :style="{ fontWeight: bottomSubtitle.isBold? 'bold' : 'normal', 
			fontStyle: bottomSubtitle.isItalic? 'italic' : 'normal', color: bottomSubtitle.fontColor,
			backgroundColor: bottomSubtitle.bgColor, fontSize: bottomSubtitle.fontSize }">{{bottomSubtitle.text}}</text>
			<text v-else="isShowSingleSubTitle" :style="{ fontWeight: singleSubtitle.isBold? 'bold' : 'normal',
			fontStyle: singleSubtitle.isItalic? 'italic' : 'normal', color: singleSubtitle.fontColor,
			backgroundColor: singleSubtitle.bgColor, fontSize: singleSubtitle.fontSize }">{{singleSubtitle.text}}</text>
		</view>
		<view class="plv-player-bar" v-if="!selectStatus && showBar && !isLock">
			<image class="plv-player-bar__bg" :src="bottomBar"></image>
			<view class="plv-player-bar__box">
				<view class="plv-player-mr-left"></view>
				<view class="plv-player-middle">
					<view class="plv-player-progress">
						<view class="plv-player-progress__play__wrap">
							<view class="plv-player-progress__wrap__played"  :style="'flex:' + progressPrecent"></view>
							<view class="plv-player-progress__wrap__surplus" :style="'flex:' + progressLeftOverPrecent"></view>
						</view>
						<view class="plv-player-progress__dot__wrap">
							<view class="plv-player-progress__dot__box">
								<view class="plv-player-progress__dot__played" :style="'flex:' + (progressPrecent || 1)">
									<view class="plv-player-progress__dot"></view>
								</view>
								<view class="plv-player-progress__dot__surplus" :style="'flex:' + progressLeftOverPrecent"></view>
							</view>
						</view>
						<view class="plv-player-progress__mask"
							@touchstart="touchstart"
							@touchmove="touchmove"
							@touchend="touchend"></view>
					</view>
					<view class="plv-player-bar-bottom">
						<image class="plv-btn plv-player-play-btn" :src=playBtnLink @click="handlePlay"></image>
						<view class="plv-player-time">
							<text class="plv-player-btn__text">{{ currentTimeText }}</text>
							<text class="plv-player-btn__text"> / </text>
							<text class="plv-player-btn__text">{{ durationText }}</text>
						</view>
						<image class="plv-btn plv-player-full-btn" :src="fullBtnLink" @click="handleFull"></image>
						<text class="plv-btn plv-player-hd-btn plv-player-btn__text" @click="handleBtn(types.LEVEL)">{{ currentLevelText }}</text>
						<text class="plv-btn plv-player-rate-btn plv-player-btn__text" @click="handleBtn(types.SPEED)">{{ currentSpeedText }}</text>
						<text class="plv-btn plv-player-scaling-btn plv-player-btn__text" @click="handleBtn(types.SCALING)">画面</text>
						<text class="plv-btn plv-player-subtitle-btn plv-player-btn__text"
						 v-if="isEnableSubTitle" @click="handleBtn(types.SUBTITLE)">字幕</text>
					</view>
				</view>
				<view class="plv-player-mr-right"></view>
			</view>
		</view>
		<view class="plv-player-select" v-if="selectStatus">
			<view class="plv-player-select__bg"></view>
			<view class="plv-player-select__option">
				<text v-for=" (item, index) in selects"
					:key="index"
					class="plv-player-select__option__item"
					:class="{ 'select-option__text': true, active: index === currentOptionIndex}"
					@click="selectOption(index)">
					{{ item[0] }}
				</text>
			</view>
		</view>
		<view class="plv-player-screenshot" v-if="!selectStatus && showBar && !isLock" :style="'bottom:' + screenShotY">
			<image class="plv-player-screenshot__btn" :src="screenShotImg" @click="$emit('onScreenShot')"></image>
		</view>
		<view class="plv-player-lock" v-if="!selectStatus && showBar" :style="'bottom:' + screenShotY">
			<image class="plv-player-lock__btn" :src="lockImgSrc" @click="isLock = !isLock"></image>
		</view>
		
	</view>
</template>

<script setup>
	import { ref, reactive, computed, watch, onMounted } from 'vue';
	import Gesture from './gesture.nvue';
	import Light from './light.nvue';
	import Volume from './volume.nvue';
	import DragTips from '@/components/plv-player-skin/drag-tips.nvue';
	import LockImg from '@/static/skin/lock.png';
	import UnLockImg from '@/static/skin/unlock.png';
	// 部分img 放到了static/skin目录下
	const imgLink = {
		play: 'https://play1.polyv.net/player2/demo/uniapp/pause-left-btn.png',
		pause: 'https://play1.polyv.net/player2/demo/uniapp/play-left-btn.png',
		full: 'https://play1.polyv.net/player2/demo/uniapp/fullscreen-btn.png',
		normal: 'https://play1.polyv.net/player2/demo/uniapp/normalscreen-btn.png',
		bottomBar: 'https://play1.polyv.net/player2/demo/uniapp/bottombar.png',
		light: 'https://play1.polyv.net/player2/demo/uniapp/light.png',
		volume: 'https://play1.polyv.net/player2/demo/uniapp/volume.png',
		mute: 'https://play1.polyv.net/player2/demo/uniapp/mute.png',
		screenShot: 'https://play1.polyv.net/player2/demo/uniapp/screenShot.png'
	};

	const emit = defineEmits([
		'onScreenShot',
		'onPlayBtnClick',
		'onFullBtnClick',
		'onHdBtnClick',
		'onRateBtnClick',
		'onScalingBtnClick',
		'onOpenSRT',
		'onChangeSRTSingleMode',
		'onChangeSRTBtnClick',
		'onToSeek',
		'onVolumeChanged'
	]);

	// data 原有状态
	const showBar = ref(true);
	const showBarTime = ref(10);
	const playStatus = ref(true);
	const playBtnLink = ref(imgLink.play);
	const fullStatus = ref(false);
	const fullBtnLink = ref(imgLink.full);
	const bottomBar = ref(imgLink.bottomBar);
	const timeShowBlock = ref(null);
	const currentTime = ref(null);
	const currentTimeText = ref('00:00');
	const duration = ref(null);
	const durationText = ref(null);
	const precent = ref(0);
	const progressPrecent = ref(0);
	const progressLeftOverPrecent = ref(100);
	const isDraging = ref(false);
	const selects = ref([]);
	const selectStatus = ref(false);
	const types = {
		LEVEL: 'level',
		SPEED: 'speed',
		SCALING: 'scaling',
		SUBTITLE: 'subtitle'
	};
	const type = ref(null);
	const levels = ref([
		['自动', 0],
		['流畅', 1],
		['高清', 2],
		['超清', 3]
	]);
	const level = ref(0);
	const selectedHdAuto = ref(false);
	const speeds = ref([
		['0.5x', 0.5],
		['1x', 1],
		['1.5x', 1.5],
		['2x', 2]
	]);
	const speed = ref(1);
	const lightImg = ref(imgLink.light);
	const lightPrecent = ref(0);
	const volumeImg = ref(imgLink.volume);
	const volumeMuteImg = ref(imgLink.mute);
	const volumeValue = ref(0.5);
	const screenShotImg = ref(imgLink.screenShot);
	const screenShotY = ref('200rpx');

	const showGestureSeekTips = ref(false);
	const gestureChangeSeekTime = ref(0);

	const seekedNeedPlay = ref(false);
	const isLock = ref(false);
	const scalings = ref([['居中', 0], ['适应', 1], ['填充', 2], ['拉伸', 3]]);
	const scaling = ref(undefined);
	const isInLongPress = ref(false);
	const isEnableSubTitle = ref(true);
	const isEnableDoubleSubTitle = ref(false);
	const subtitles = ref([['不显示', 0]]);
	const isShowSubtitle = ref(false);
	const isShowSingleSubTitle = ref(false);
	const isShowDoubleSubTitle = ref(false);
	const subtitle = ref(0);

	const topSubtitle = reactive({
		text: '',
		isBold: false,
		isItalic: false,
		fontColor: '#fb12d4',
		bgColor: '#67f933',
		fontSize: 14
	});

	const bottomSubtitle = reactive({
		text: '',
		isBold: false,
		isItalic: false,
		fontColor: '#ffff00',
		bgColor: '#00f3ff',
		fontSize: 14
	});

	const singleSubtitle = reactive({
		text: '',
		isBold: false,
		isItalic: false,
		fontColr: '#ffffff',
		bgColor: '#000000',
		fontSize: 14
	});

	// 额外在 methods 中用到但 data 里没显式声明的字段
	const holeWidth = ref(0);
	const clock = ref(null);
	const initTouchPageX = ref(0);
	const finalPrecent = ref(0);
	const enableSubTitleDouble = ref(false);

	let gestureTimeout;

	// watch
	watch(type, () => {
		const key = `${type.value}s`;
		const source = (key in { levels, speeds, scalings, subtitles } ? {
			levels,
			speeds,
			scalings,
			subtitles
		}[key] : null);
		if (source && source.value) {
			selects.value = source.value;
		}
	});

	// computed
	const currentLevelText = computed(() => {
		const list = levels.value;
		return list[level.value]?.[0] ?? '';
	});

	const currentSpeedText = computed(() => {
		const list = speeds.value;
		return list[speed.value]?.[0] ?? '';
	});

	const currentOptionIndex = computed(() => {
		switch (type.value) {
			case types.LEVEL:
				return level.value;
			case types.SPEED:
				return speed.value;
			case types.SCALING:
				return scaling.value;
			case types.SUBTITLE:
				return subtitle.value;
			default:
				return 0;
		}
	});

	const lockImgSrc = computed(() => (isLock.value ? LockImg : UnLockImg));

	onMounted(() => {
		countHoleWidth();
		barHide();
	});

	/**
	 * 计算进度条总长度
	 */
	function countHoleWidth() {
		const height = plus.display.resolutionHeight;
		const width = plus.display.resolutionWidth;

		if (fullStatus.value) {
			holeWidth.value = height > width ? height : width;
		} else {
			holeWidth.value = width < height ? width : height;
		}
	}

	/**
	 * Toogle修改播放按钮状态，传入forceStatus以forceStatus为主
	 */
	function changePlayStatus(forceStatus) {
		let newStatus = !playStatus.value;
		if (typeof forceStatus !== 'undefined') {
			newStatus = forceStatus;
		}
		playStatus.value = newStatus;
		playBtnLink.value = newStatus ? imgLink.play : imgLink.pause;
	}

	function pause() {
		playStatus.value = true;
		handlePlay();
	}

	function play() {
		playStatus.value = false;
		handlePlay();
	}

	/**
	 * 播放按钮点击
	 */
	function handlePlay() {
		changePlayStatus();
		emit('onPlayBtnClick', playStatus.value);
	}

	/**
	 * Toogle修改全屏按钮状态
	 */
	function changeFullStatus() {
		let newStatus = !fullStatus.value;
		fullStatus.value = newStatus;
		fullBtnLink.value = newStatus ? imgLink.normal : imgLink.full;
	}

	/**
	 * 全屏按钮点击
	 */
	function handleFull() {
		changeFullStatus();
		emit('onFullBtnClick', fullStatus.value);
		countHoleWidth();
		screenShotY.value = fullStatus.value ? '300rpx' : '200rpx';
	}

	/**
	 * 点击清晰度/倍速按钮
	 */
	function handleBtn(t) {
		type.value = t;
		selectStatus.value = !selectStatus.value;
	}

	/**
	 * 选择切换清晰度/倍速
	 */
	function selectOption(value) {
		const currentType = type.value;
		const currentTypes = types;
		const currentSpeeds = speeds.value;
		const currentSubtitles = subtitles.value;

		if (currentType === currentTypes.LEVEL) {
			level.value = value;
		} else if (currentType === currentTypes.SPEED) {
			speed.value = value;
		} else if (currentType === currentTypes.SCALING) {
			scaling.value = value;
		} else if (currentType === currentTypes.SUBTITLE) {
			subtitle.value = value;
		}

		selectStatus.value = false;

		switch (currentType) {
			case currentTypes.LEVEL:
				selectedHdAuto.value = value === 0;
				emit('onHdBtnClick', value);
				break;
			case currentTypes.SPEED:
				emit('onRateBtnClick', currentSpeeds[value][1]);
				break;
			case currentTypes.SCALING:
				emit('onScalingBtnClick', value);
				break;
			case currentTypes.SUBTITLE:
				if (value === 0) {
					isShowSubtitle.value = false;
					emit('onOpenSRT', false);
					isShowDoubleSubTitle.value = false;
					isShowSingleSubTitle.value = false;
					break;
				}
				if (currentSubtitles[value][0] === '双语') {
					console.log('===1 切换双语');
					isShowSubtitle.value = true;
					isShowDoubleSubTitle.value = true;
					isShowSingleSubTitle.value = false;
					emit('onChangeSRTSingleMode', false);
					emit('onOpenSRT', true);
					break;
				}
				isShowSubtitle.value = true;
				isShowDoubleSubTitle.value = false;
				isShowSingleSubTitle.value = true;
				emit('onChangeSRTSingleMode', true);
				emit('onOpenSRT', true);
				emit('onChangeSRTBtnClick', currentSubtitles[value][0]);
				break;
		}
	}

	/**
	 * 点击空白区域
	 */
	function handleMask() {
		if (selectStatus.value) {
			selectStatus.value = false;
			return;
		}

		if (showBar.value) {
			showBar.value = false;
		} else {
			showBar.value = true;
			barHide();
		}
	}

	/**
	 * 当前播放时间更新
	 */
	function timeUpdate(time) {
		currentTime.value = time;
		currentTimeText.value = timeFormat(time);
		updateProgress();
	}

	/**
	 * 是否有字幕功能
	 */
	function setEnableSubtitle(enableSubTitle, enableSubTitleDoubleArg) {
		isEnableSubTitle.value = enableSubTitle;
		enableSubTitleDouble.value = enableSubTitleDoubleArg;
		if (enableSubTitleDoubleArg) {
			subtitles.value.push(['双语', subtitles.value.length]);
		}
	}

	/**
	 * 设置字幕的样式
	 */
	function setSRTTextConfig(config) {
		const position = config.position;
		console.log('===1 setSRTTextConfig position: ' + config.position);
		console.log('===1 setSRTTextConfig color: ' + config.backgroundColor);
		const color = convertARGBtoRGBA(config.backgroundColor);
		console.log('===1 change color: ' + color);

		if (position === 'bottom') {
			bottomSubtitle.fontColor = convertARGBtoRGBA(config.fontColor);
			bottomSubtitle.fontSize = config.fontSize;
			bottomSubtitle.bgColor = convertARGBtoRGBA(config.backgroundColor);
			bottomSubtitle.isBold = config.fontBold;
			bottomSubtitle.isItalic = config.fontItalics;
		}

		if (position === 'top') {
			topSubtitle.fontColor = convertARGBtoRGBA(config.fontColor);
			topSubtitle.fontSize = config.fontSize;
			topSubtitle.bgColor = convertARGBtoRGBA(config.backgroundColor);
			topSubtitle.isBold = config.fontBold;
			topSubtitle.isItalic = config.fontItalics;
		}

		if (position === null || position === '') {
			singleSubtitle.fontColor = convertARGBtoRGBA(config.fontColor);
			singleSubtitle.fontSize = config.fontSize;
			singleSubtitle.bgColor = convertARGBtoRGBA(config.backgroundColor);
			singleSubtitle.isBold = config.fontBold;
			singleSubtitle.isItalic = config.fontItalics;
		}
	}

	function convertARGBtoRGBA(argbValue) {
		if (!argbValue.startsWith('#') || argbValue.length !== 9) {
			return argbValue;
		}
		const hexValue = argbValue.replace('#', '');
		const alpha = parseInt(hexValue.slice(0, 2), 16) / 255;
		const red = parseInt(hexValue.slice(2, 4), 16);
		const green = parseInt(hexValue.slice(4, 6), 16);
		const blue = parseInt(hexValue.slice(6, 8), 16);
		return `rgba(${red}, ${green}, ${blue}, ${alpha})`;
	}

	/**
	 * 插入当前有多少可选的字幕
	 */
	function setSRTTitle(titles) {
		console.log('===1 title is ' + titles);
		const baseLen = subtitles.value.length;
		const newItems = titles.map((lang, idx) => [lang, idx + baseLen + 1]);
		subtitles.value.push(...newItems);
	}

	/**
	 * 字幕
	 */
	function setSRTText(srt) {
		singleSubtitle.text = '';
		topSubtitle.text = '';
		bottomSubtitle.text = '';

		console.info('====3 srtList: ' + srt);

		const data = JSON.parse(srt);
		if (!data) {
			return;
		}
		data.strList.forEach(item => {
			const position = item.position;
			if (position === 'singleSubtitles') {
				singleSubtitle.text = item.srtText;
			}
			if (position === 'bottomSubtitles') {
				bottomSubtitle.text = item.srtText;
			}
			if (position === 'topSubtitles') {
				topSubtitle.text = item.srtText;
			}
		});
	}

	/**
	 * 视频总时长更新
	 */
	function updateDuration(durationVal) {
		duration.value = durationVal;
		timeShowBlock.value = durationVal >= 3600 ? 2 : 1;
		durationText.value = timeFormat(durationVal);
	}

	/**
	 * 更新进度条显示
	 */
	function updateProgress(precentVal) {
		let _precent;

		const changeProgressWidth = (_p) => {
			progressPrecent.value = parseInt(_p * 100);
			progressLeftOverPrecent.value = 100 - progressPrecent.value;
		};

		if (precentVal !== undefined) {
			_precent = limit(precentVal, 0, 1);
			changeProgressWidth(_precent);
		} else {
			if (!duration.value || isDraging.value) return;
			_precent = currentTime.value / duration.value;
			precent.value = _precent;
			changeProgressWidth(_precent);
		}
	}

	/**
	 * 更新视频画面缩放模式
	 */
	function updateScaling(mode) {
		scaling.value = mode;
	}

	/**
	 * 监听进度条拖拽seek
	 */
	function handleTouch(t, e) {
		switch (t) {
			case 'start':
				initTouchPageX.value = e.touches[0].pageX * 2;
				barShow();
				break;
			case 'move':
				isDraging.value = true;
				const touchPageX = e.touches[0].pageX * 2;
				const changedX = getChangedX(touchPageX, initTouchPageX.value);
				calcPrecentChange(changedX);
				break;
			case 'end':
				if (isDraging.value) {
					toSeek(finalPrecent.value);
					isDraging.value = false;
				}
				break;
		}
	}

	/**
	 * 计算变化百分比
	 */
	function calcPrecentChange(changedX) {
		const changedPrecent = changedX / holeWidth.value;
		let fp = precent.value + changedPrecent;
		fp = limit(fp, 0, 1);
		updateProgress(fp);
		finalPrecent.value = fp;
	}

	/**
	 * 获取变化的X坐标
	 */
	function getChangedX(touchPageX, initTouchPageXVal) {
		return touchPageX - initTouchPageXVal;
	}

	function touchstart(e) {
		handleTouch('start', e);
	}

	function touchmove(e) {
		handleTouch('move', e);
	}

	function touchend(e) {
		handleTouch('end', e);
	}

	function toSeek(precentVal) {
		const seekTime = parseInt(precentVal * duration.value);
		if (!isNaN(seekTime)) emit('onToSeek', seekTime);
	}

	function handleSeekTo(time) {
		if (!isNaN(time)) {
			emit('onToSeek', time);
			setTimeout(() => {
				if (seekedNeedPlay.value) {
					play();
					seekedNeedPlay.value = false;
				}
			}, 100);
		}
	}

	/**
	 * 更新可选码率
	 */
	function updateLevels(num) {
		if (!num) return;
		const realNum = num + 1;
		const allLevels = [
			['自动', 0],
			['流畅', 1],
			['高清', 2],
			['超清', 3]
		];
		levels.value = allLevels.slice(0, realNum);
		if (type.value === types.LEVEL) {
			selects.value = levels.value;
		}
	}

	/**
	 * 更新当前码率
	 */
	function updateCurrentLevel(levelVal) {
		if (selectedHdAuto.value) return;
		level.value = levelVal;
	}

	/**
	 * 显示控制栏
	 */
	function barShow() {
		if (clock.value) {
			clearTimeout(clock.value);
			clock.value = null;
		}
		showBar.value = true;
	}

	/**
	 * 隐藏控制栏
	 */
	function barHide() {
		// 保持与原逻辑一致：直接 return，不自动隐藏
		return;
		// 如需开启自动隐藏，可以取消上面的 return，并使用以下代码：
		// if (clock.value) {
		// 	clearTimeout(clock.value);
		// 	clock.value = null;
		// }
		// clock.value = setTimeout(() => {
		// 	showBar.value = false;
		// }, showBarTime.value * 1000);
	}

	/**
	 * 处理手势控制
	 */
	function handleGEvent(data) {
		switch (data.type) {
			case 'SEEK_TIME_UPDATE': {
				if (playStatus.value) {
					seekedNeedPlay.value = true;
					pause();
				}
				const { finalTime } = data;
				if (isNaN(finalTime)) {
					return;
				}
				gestureChangeSeekTime.value = finalTime;
				showGestureSeekTips.value = true;
				clearTimeout(gestureTimeout);

				gestureTimeout = setTimeout(() => {
					showGestureSeekTips.value = false;
					gestureChangeSeekTime.value = 0;
				}, 600);
				break;
			}
			case 'LEFT_UP':
				uni.getScreenBrightness({
					success: (res) => {
						setBrightness(res.value, data.position, 1);
					}
				});
				break;
			case 'LEFT_DOWN':
				uni.getScreenBrightness({
					success: (res) => {
						setBrightness(res.value, data.position, -1);
					}
				});
				break;
			case 'RIGHT_UP':
				volumeChanged(data.position, 1);
				break;
			case 'RIGHT_DOWN':
				volumeChanged(data.position, -1);
				break;
			case 'DOUBLE_CLICK':
				console.log('DOUBLE_CLICK');
				if (playStatus.value) {
					pause();
				} else {
					play();
				}
				break;
		}
	}

	/**
	 * 设置亮度
	 */
	function setBrightness(currentValue, changedValue, isDown) {
		changedValue = Math.abs(changedValue / 6) / 100 * isDown;
		let realValue = currentValue + changedValue;
		realValue = limit(realValue, 0, 1);
		lightPrecent.value = parseInt(realValue * 100);

		uni.setScreenBrightness({
			value: realValue
		});
	}

	/**
	 * 音量变化
	 */
	function volumeChanged(changedValue, isDown) {
		changedValue = Math.abs(changedValue / 10) / 100 * isDown;
		emit('onVolumeChanged', changedValue);
	}

	/**
	 * 更新音量变化显示
	 */
	function updateVolumeValue(value) {
		volumeValue.value = value;
	}

	/**
	 * 时间（秒）格式化
	 */
	function timeFormat(result) {
		const h = Math.floor(result / 3600) < 10 ? '0' + Math.floor(result / 3600) : Math.floor(result / 3600);
		const m = Math.floor((result / 60 % 60)) < 10 ? '0' + Math.floor((result / 60 % 60)) : Math.floor((result / 60 % 60));
		const s = Math.floor((result % 60)) < 10 ? '0' + Math.floor((result % 60)) : Math.floor((result % 60));

		if (timeShowBlock.value === 2) {
			return h + ':' + m + ':' + s;
		} else {
			return m + ':' + s;
		}
	}

	/**
	 * 控制最小值，最大值
	 */
	function limit(num, min, max) {
		if (num < min) return min;
		if (num > max) return max;
		return num;
	}

	function handleTouchCancel() {
		if (isLock.value) return;
		if (isInLongPress.value) {
			isInLongPress.value = false;
			emit('onRateBtnClick', 1);
		}
	}

	// 特殊情况如果不触发touchcancel, 触发touchend时取消长按状态
	function handleTouchEnd() {
		handleTouchCancel();
	}

	function handleLongPress() {
		if (isLock.value) return;
		isInLongPress.value = true;
		play();
		emit('onRateBtnClick', 2);
	}

	// 暴露给父组件调用的方法（等价于 Vue2 的 this.xxx）
	defineExpose({
		pause,
		play,
		timeUpdate,
		updateDuration,
		updateLevels,
		updateCurrentLevel,
		updateScaling,
		updateVolumeValue,
		setEnableSubtitle,
		setSRTTextConfig,
		setSRTTitle,
		setSRTText
	});
</script>

<style>
	.plv-player-mask {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 120rpx;
	}
	
	.plv-player-bar__bg {
		width: 1624rpx;
		height: 120rpx;
	}
	
	.plv-player-bar {
		position: absolute;
		left: 0;
		right: 0;
		height: 120rpx;
		bottom: 0;
	}
	
	.plv-player-bar__box {
		position: absolute;
		left: 0;
		right: 0;
		height: 120rpx;
		bottom: 0;
		flex-direction: row;
	}
	
	.plv-player-mr-left {
		flex: 10;
	}
	
	.plv-player-mr-right {
		flex: 10;
	}
	
	.plv-player-middle {
		flex: 80;
	}
	
	.plv-player-progress {
		flex: 40;
	}
	
	.plv-player-subtitle-view {
		position: absolute;
		left: 0;
		right: 0;
		height: 150rpx;
		bottom: 50rpx;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}
	
	.plv-subtitle-top-text {
		background-color: greenyellow;
	}
	
	.plv-subtitle-bottom-text {
		background-color: darkred;
	}
	
	.plv-player-progress__play__wrap {
		flex-direction: row;
		flex: 1;
	}
	
	.plv-player-progress__wrap__played {
		top: 20rpx;
		height: 8rpx;
		background-color: #0A98D5;
	}
	
	.plv-player-progress__wrap__surplus {
		top: 20rpx;
		height: 8rpx;
		background-color: #FFFFFF;
	}
	
	.plv-player-progress__dot__wrap {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1;
	}
	
	.plv-player-progress__dot__box {
		flex: 1;
		flex-direction: row;
	}
	
	.plv-player-progress__dot__played {
		flex: 20;
	}
	
	.plv-player-progress__dot__surplus {
		flex: 80;
	}
	
	.plv-player-progress__mask {
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		border-radius: 4rpx;
		z-index: 2;
	}
	
	.plv-player-progress__dot {
		position: absolute;
		width: 10rpx;
		height: 30rpx;
		top: 8rpx;
		right: 0;
		border-radius: 4rpx;
		background-color: #FFFFFF;
		/* transform: translateX(15rpx); */
	}
	
	.plv-player-bar-bottom {
		flex-direction: row;
		flex: 60;
	}

	.plv-btn {
		position: relative;
		width: 64rpx;
		height: 64rpx;
		top: 8rpx;
		bottom: 0;
		margin-right: 10rpx;
	}
	
	.plv-player-full-btn {
		position: absolute;
		right: 0;
	}
	
	.plv-player-hd-btn {
		position: absolute;
		right: 64rpx;
	}
	
	.plv-player-rate-btn {
		position: absolute;
		right: 128rpx;
	}
	
	.plv-player-scaling-btn {
		position: absolute;
		right: 210rpx;
	}

	.plv-player-subtitle-btn {
		position: absolute;
		right: 278rpx;
	}
	
	.plv-player-time {
		position: relative;
		top: 8rpx;
		flex-direction: row
	}
	
	.plv-player-select {
		position: absolute;
		width: 200rpx;
		right: 0;
		top: 0;
		bottom: 0;
		z-index: 1;
	}
	
	.plv-player-select__bg {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #0A98D5;
		opacity: 0.5;
	}
	
	.plv-player-select__option {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 20rpx;
		justify-content: center;
		align-items: center;
	}
	
	.plv-player-select__option__item {
		padding: 18rpx;
	}
	
	
	.plv-player-btn__text {
		color: #FFFFFF;
		font-size: 28rpx;
		line-height: 64rpx;
	}
	
	.select-option__text {
		color: #FFFFFF;
		font-size: 28rpx;
		line-height: 20rpx;
		text-align: center;
	}
	
	.active {
		color: #0A98D5;
	}
	
	.plv-player-light {
		flex: 1;
		align-items: center;
	}
	
	.plv-player-volume {
		position: absolute;
		top: 50rpx;
		left: 0;
		right: 0;
		height: 80rpx;
	}
	
	.plv-player-screenshot {
		position: absolute;
		margin-left: 80rpx;
	}
	
	.plv-player-screenshot__btn {
		width: 80rpx;
		height: 80rpx;
	}
	
	.plv-player-lock {
		position: absolute;
		right: 80rpx;
		width: 80rpx;
		height: 80rpx;
		background: rgba(0,0,0, .5);
		border-radius: 40rpx;
		justify-content: center;
		align-items: center;
	}
	
	.plv-player-lock__btn {
		width: 48rpx;
		height: 48rpx;
	}
	
	.plv-player-skin-drag-tips {
		position: absolute;
		top: 60rpx;
		justify-content: center;
		align-items: center;
		flex-direction: row;
	/* 	justify-content: center;
		align-items: center; */
	}
	
	.plv-player-longpress-speed {
		position: absolute;
		width: 175rpx;
		padding: 10rpx;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		top: 40rpx;
		border-radius: 15px;
		background: rgba(0,0,0,.8);
	}

	
	.plv-player-longpress-speed__image {
		width: 40rpx;
		height: 40rpx;
	}
	
	.plv-player-longpress-speed__text {
		color: #FFFFFF;
		font-size: 28rpx;
	}
	
	.plv-player-comp-box {
		position: absolute;
		height: 300rpx;
		left: 0;
		top: 0;
		z-index: 0;
		justify-content: center;
		align-items: center;
	}
</style>
