<template>
	<view class="xt-video-controls" :class="{'xt-video-controls-show': showControls}">
		<image v-if="!playing" class="xt-controls-btn xt-controls-play" src="../static/xt-video/xt-controls-play.png" @click="xtPlay"></image>
		<image v-else class="xt-controls-btn xt-controls-play" src="../static/xt-video/xt-controls-pause.png" @click="xtVideoPause"></image>
		<view class="xt-controls-progress">
			<text class="xt-controls-time xt-controls-start">{{showCurrentTime}}</text>
			<slider
				class="xt-slider"
				:value="progressValue"
				:block-size="12"
				backgroundColor="rgba(255,255,255,0.45)"
				:activeColor="activeColor"
				@change="xtVideoSlider"
				@changing="xtVideoSliding"
			></slider>
			<text class="xt-controls-time xt-controls-end">{{showTotalTime}}</text>
		</view>
		<text v-if="ratios && ratios.length > 0" class="xt-controls-text" @click="xtRatioChange">{{ ratioName.name }}</text>
		<text v-if="episodes && episodes.length > 0" class="xt-controls-text" @click="xtOpenEpiEmit">选集</text>
		<text v-if="showSpeed" class="xt-controls-text" @click="xtOpenSpeed">倍速</text>
		<image v-if="!isFull" class="xt-controls-btn" src="../static/xt-video/xt-enter-full.png" @click="xtVideoFullscreen"></image>
		<image v-else class="xt-controls-btn" src="../static/xt-video/xt-exit-full.png" @click="xtVideoExitFullscreen"></image>
	</view>
</template>

<script>
	import { formatSeconds } from '../utils/xt-uitls.js'
	export default {
		props: {
			// 是否显示控制条
			showControls: {
				type: Boolean,
				default: true
			},
			// 是否正在播放
			playing: {
				type: Boolean,
				default: false
			},
			// 当前播放时间
			startTime: {
				type: Number,
				default: 0
			},
			// 视频总时长
			totalTime: {
				type: Number,
				default: 0
			},
			// 进度条颜色
			activeColor: {
				type: String,
				default: '#03A3F8'
			},
			// 是否全屏
			isFullscreen: {
				type: Boolean,
				default: false
			},
			// 视频分辨率播放
			ratios: {
				type: Array,
				default: () => {
					return []
				}
			},
			// 视频分辨率id
			ratioId: {
				type: [String, Number]
			},
			// 选集列表
			episodes: {
				type: Array,
				default: () => {
					return []
				}
			},
			// 是否展示倍速播放
			showSpeed: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				// 是否全屏
				isFull: this.isFullscreen
			}
		},
		watch: {
			isFullscreen(n) {
				this.isFull = n
			}
		},
		computed: {
			// 展示的视频总时长
			showTotalTime() {
				return formatSeconds(this.totalTime)
			},
			// 展示当前视频播放时间
			showCurrentTime() {
				return formatSeconds(this.startTime)
			},
			// 进度条
			progressValue() {
				return this.startTime * 100 / this.totalTime
			},
			// 分辨率名称
			ratioName() {
				return this.ratios.find(item => item.id === this.ratioId)
			}
		},
		methods: {
			// 向父组件触发播放事件
			xtPlay() {
				this.$emit('xtPlay')
			},
			
			// 向父组件触发暂停事件
			xtVideoPause() {
				this.$emit('xtPause')
			},
			
			// 向父组件触发进度条改变事件
			xtVideoSlider({ detail }) {
				this.$emit('xtVideoSlider', detail)
			},
			
			// 向父组件触发进度条正在拖动事件
			xtVideoSliding() {
				this.$emit('xtVideoSliding')
			},
			
			// 向父组件触发全屏事件
			xtVideoFullscreen() {
				this.$emit('xtVideoFullscreen')
			},
			
			// 向父组件触发退出全屏事件
			xtVideoExitFullscreen() {
				this.$emit('xtVideoExitFullscreen')
			},
			
			// 向父组件触发切换分辨率
			xtRatioChange() {
				this.$emit('xtRatioChange')
			},
			
			// 向父组件触发展示选集弹框事件
			xtOpenEpiEmit() {
				this.$emit('xtOpenEpi')
			},
			
			// 向父组件触发倍速事件
			xtOpenSpeed() {
				this.$emit('xtOpenSpeed')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.xt-video-controls {
		position: absolute;
		left: 0;
		bottom: 0;
		z-index: 7;
		transform: translateY(64rpx);
		width: 100%;
		height: 64rpx;
		background: linear-gradient(0deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.3) 59%, rgba(20,20,21,0) 100%);
		display: flex;
		align-items: center;
		box-sizing: border-box;
		padding: 0 14rpx;
		transition: all .3s ease;
		.xt-controls-btn {
			width: 48rpx;
			height: 48rpx;
			margin: 0 10rpx;
		}
		.xt-controls-progress {
			flex: 1;
			display: flex;
			align-items: center;
			margin: 0 10rpx;
			.xt-controls-time {
				font-size: 24rpx;
				color: #fff;
			}
			.xt-slider {
				flex: 1;
			}
		}
		.xt-danmu-send {
			width: 78rpx;
			height: 38rpx;
		}
		&-show {
			transform: translateY(0);
		}
		.xt-controls-text {
			padding: 0 16rpx;
			font-size: 28rpx;
			color: #fff;
		}
	}
</style>