<template>
	<scroll-view
		class="xt-video-episodes-scroll"
		:class="{'xt-epi-show': showEpi}"
		:scroll-y="true"
		:style="{
			paddingTop: isFullscreen ? navHeight + 'px' : '24rpx'
		}"
		@click="xtEpiHide"
	>
		<view class="xt-video-episodes">
			<view v-for="item in episodes" :key="item.id" class="xt-video-episodes-item" @click="xtVideoEmit(item)">
				<view class="xt-video-epi-item-inner" :class="{'xt-video-epi-active': currentEpi === item.id}">
					<text class="xt-video-epi-text">{{ item.name }}</text>
					<text
						v-if="item.isVip" class="xt-video-vip"
						:style="{
							'background-color': vipBgColor,
							'color': vipFontColor
						}"
					>vip</text>
				</view>
			</view>
		</view>
	</scroll-view>
</template>

<script>
	export default {
		props: {
			// 选集列表
			episodes: {
				type: Array,
				default: () => {
					return []
				}
			},
			// vip背景色
			vipBgColor: {
				type: String,
				default: '#FF5345'
			},
			// vip文字颜色
			vipFontColor: {
				type: String,
				default: '#ffffff'
			},
			// 是否全屏
			isFullscreen: {
				type: Boolean,
				default: false
			},
			// 导航栏高度
			navHeight: {
				type: Number
			},
			// 默认播放第几集
			epiDefaultId: {
				type: [Number, String],
				default: null
			}
		},
		data() {
			return {
				// 当前选择的剧集
				currentEpi: this.epiDefaultId ? this.epiDefaultId : this.episodes[0] && this.episodes[0].id,
				// 是否显示
				showEpi: false
			}
		},
		methods: {
			// 向父组件触发选集事件
			xtVideoEmit(item) {
				this.currentEpi = item.id
				this.showEpi = false
				this.$emit('xtEpiChange', item)
			},
			
			// 展示
			_show() {
				this.showEpi = true
			},
			
			// 隐藏
			xtEpiHide() {
				this.$emit('xtEpiHide')
				this.showEpi = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.xt-video-episodes-scroll {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 10;
		background-color: rgba(0, 0, 0, 0.3);
		box-sizing: border-box;
		height: 100%;
		padding: 24rpx 0;
		display: none;
	}
	.xt-epi-show {
		display: block;
	}
	.xt-video-episodes {
		display: flex;
		flex-wrap: wrap;
		padding: 0 10rpx;
		&-item {
			width: 20%;
			height: 100rpx;
			box-sizing: border-box;
			padding: 6rpx;
		}
		.xt-video-epi-item-inner {
			height: 100%;
			position: relative;
			text-align: center;
			background-color: rgba(255, 255, 255, 0.1);
			border-radius: 8rpx;
			.xt-video-epi-text {
				line-height: 100rpx;
				font-size: 28rpx;
				color: #fff;
			}
		}
		.xt-video-epi-active {
			background-color: rgba(255, 255, 255, 0.4);
		}
		.xt-video-vip {
			position: absolute;
			display: block;
			font-size: 20rpx;
			top: 0;
			right: 0;
			background-color: red;
			color: #fff;
			padding: 0 10rpx;
			border-radius: 0 8rpx 0 8rpx;
		}
	}
</style>