<template>
	<transition name="fade">
		<div class="video-preview-wrapper" v-show="visible">
			<div class="top">
				<div class="video-name">
					{{ activeFileObj.fileName }}.{{ activeFileObj.extendName }}
					<span class="size">{{ $file.calculateFileSize(activeFileObj.fileSize) }}</span>
				</div>

				<a class="download-link" :href="$file.getDownloadFilePath(activeFileObj)" target="_blank">
					<download-outlined class="download-icon" title="下载" />
				</a>

				<menu-fold-outlined
					v-if="isFoldVideoList"
					class="fold-icon"
					title="展开播放列表"
					@click="isFoldVideoList = false"
				/>
				<menu-unfold-outlined v-else class="fold-icon" title="折叠播放列表" @click="isFoldVideoList = true" />

				<close-outlined class="close-icon" title="关闭" @click="handleClosePreview" />
			</div>

			<div class="bottom">
				<video-player v-if="visible" ref="videoPlayerRef" class="video-player" :source="activeVideoSource" />

				<a-collapse-transition>
					<div class="video-list-wrapper" v-show="!isFoldVideoList">
						<div class="list-title">播放列表</div>
						<ul class="video-list">
							<li
								v-for="(item, index) in videoList"
								:key="index"
								class="video-item"
								:class="{ active: activeIndex === index }"
								@click="activeIndex = index"
							>
								<span class="name">{{ item.fileName }}.{{ item.extendName }}</span>
								<span class="size">{{ $file.calculateFileSize(item.fileSize) }}</span>
							</li>
						</ul>
					</div>
				</a-collapse-transition>
			</div>
		</div>
	</transition>
</template>

<script setup>
	import { ref, computed, watch, onMounted } from 'vue'
	import { DownloadOutlined, MenuFoldOutlined, MenuUnfoldOutlined, CloseOutlined } from '@ant-design/icons-vue'
	import VideoPlayer from './VideoPlayer.vue'
	import { useMyResourceStore } from '@/store/myResource'

	const props = defineProps({
		videoList: Array,
		defaultIndex: Number,
		callback: Function
	})

	// Store & Utils
	const store = useMyResourceStore()

	// Refs
	const visible = ref(false)
	const activeIndex = ref(0)
	const isFoldVideoList = ref(false)
	const videoPlayerRef = ref(null)

	// Computed
	const activeFileObj = computed(() => {
		return props.videoList.length ? props.videoList[activeIndex.value] : {}
	})

	const activeVideoSource = computed(() => ({
		type: `video/${props.videoList[activeIndex.value].extendName}`,
		src: props.videoList[activeIndex.value].fileUrl
	}))

	// Watchers
	watch(visible, (newValue) => {
		if (newValue) {
			activeIndex.value = props.defaultIndex
		}
	})

	watch(
		() => store.screenWidth,
		(newValue) => {
			if (newValue <= 768) {
				isFoldVideoList.value = true
			}
		}
	)

	// Methods
	const handleClosePreview = () => {
		visible.value = false
		props.callback('cancel')
	}

	onMounted(() => {
		if (store.screenWidth <= 768) {
			isFoldVideoList.value = true
		}
	})

	defineExpose({
		visible
	})
</script>

<style lang="less" scoped>
	@import '@/style/myResource/varibles.less';
	@import '@/style/myResource/mixins.less';

	.video-preview-wrapper {
		background: rgba(0, 0, 0, 0.75);
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		z-index: 3;

		.top {
			margin-bottom: 8px;
			background: #000;
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 48px;
			line-height: 48px;
			padding: 0 8px 0 16px;

			.video-name {
				flex: 1;
				color: #fff;

				.size {
					margin-left: 16px;
					color: @text-secondary-color;
					font-size: 12px;
				}
			}

			.download-link {
				display: block;
				height: 24px;
				line-height: 24px;
			}

			.download-icon,
			.fold-icon,
			.close-icon {
				margin-left: 8px;
				width: 32px;
				cursor: pointer;
				font-size: 24px;
				color: #fff;

				&:hover {
					opacity: 0.6;
				}
			}
		}

		.bottom {
			height: calc(100vh - 60px);
			display: flex;
			justify-content: space-between;

			.video-player {
				flex: 1;
				width: 100%;
				height: 100%;
				object-fit: fill;
			}

			.video-list-wrapper {
				margin-left: 8px;
				background: #000;
				width: 280px;
				height: 100%;
				color: #fff;

				.list-title {
					border-bottom: 2px solid @text-secondary-color;
					height: 40px;
					line-height: 40px;
					padding: 0 16px;
				}

				.video-list {
					padding: 8px 0;
					font-size: 12px;
					cursor: pointer;
					height: calc(100% - 42px);
					overflow: auto;
					list-style: none;
					.setScrollbar(8px);

					.video-item {
						padding: 8px 16px;
						display: flex;
						justify-content: space-between;

						&:hover {
							color: @Primary;
						}

						.name {
							flex: 1;
							word-break: break-all;
						}

						.size {
							margin-left: 8px;
							width: 56px;
							color: @SecondaryText;
							text-align: right;
						}
					}

					.video-item.active {
						background: #000;
						color: @Primary;
					}
				}
			}
		}
	}
</style>
