<template>
	<view class="vd-screen" :style="screenStyle">
		<feed-vertical-reel
			ref="reel"
			:frame-w="windowWidth"
			:frame-h="windowHeight"
			:safe-bottom="safeBottom"
			:auto-bootstrap="false"
			:loop-at-end="true"
			:tab-active="pageVisible"
		/>

		<view
			class="vd-back-wrap"
			:style="{ height: headHeight + 'px', paddingTop: headTop + 'px' }"
			@tap="handleBack"
		>
			<text class="vd-back-icon">←</text>
		</view>
	</view>
</template>

<script>
/**
 * 合辑专用播放页：不走 find/getList / videoseriesitem/list，
 * 直接使用上游传入的 series_list 播放与解锁。
 */
import FeedVerticalReel from '@/components/feed-reel/vertical-reel.vue'
import { takeSeriesHandoff } from '@/features/feed/series-handoff'
import {
	applyBackgroundPlaybackSession,
	shouldKeepFeedPlaybackOnPageHide
} from '@/features/feed/background-playback'

export default {
	components: { FeedVerticalReel },
	data() {
		return {
			startId: '',
			compID: '',
			headTop: 0,
			headHeight: 0,
			windowWidth: 0,
			windowHeight: 0,
			safeBottom: 0,
			pageVisible: true,
			bootDone: false
		}
	},
	computed: {
		screenStyle() {
			return {
				width: `${this.windowWidth}px`,
				height: `${this.windowHeight}px`
			}
		}
	},
	onLoad(option) {
		this.startId = (option && (option.id || option.find_id)) || ''
		this.compID = (option && option.compID) || ''

		const sys = uni.getSystemInfoSync()
		this.headTop = sys.statusBarHeight || 0
		this.headHeight = this.headTop + uni.upx2px(90)
		this.windowWidth = sys.windowWidth
		this.windowHeight = sys.windowHeight
		this.safeBottom = (sys.safeAreaInsets && sys.safeAreaInsets.bottom) || 0
	},
	onReady() {
		this.$nextTick(() => {
			this.bootFromHandoff()
		})
	},
	onShow() {
		this.pageVisible = true
		const delay = uni.getSystemInfoSync().platform === 'ios' ? 320 : 80
		setTimeout(() => {
			const reel = this.$refs.reel
			if (reel && typeof reel.wakePlayback === 'function') {
				reel.wakePlayback()
			}
		}, delay)
	},
	onHide() {
		setTimeout(() => {
			if (shouldKeepFeedPlaybackOnPageHide()) {
				applyBackgroundPlaybackSession(true)
				return
			}
			this.pageVisible = false
			const reel = this.$refs.reel
			if (reel && typeof reel.freezePlayback === 'function') {
				reel.freezePlayback()
			}
		}, 50)
	},
	methods: {
		bootFromHandoff() {
			if (this.bootDone) return
			const reel = this.$refs.reel
			if (!reel || typeof reel.openFromSeriesList !== 'function') return

			const pack = takeSeriesHandoff() || {}
			const seriesList = Array.isArray(pack.seriesList) ? pack.seriesList : []
			const seriesId = pack.seriesId || this.compID || ''
			const startId = pack.startId || this.startId || ''

			this.bootDone = true
			reel.openFromSeriesList({
				seriesList,
				seriesId,
				startId,
				user: pack.user || (pack.anchor && pack.anchor.user) || null,
				isFollow: pack.isFollow != null ? pack.isFollow : (pack.anchor && pack.anchor.isFollow) || 0,
				anchor: pack.anchor || null,
				parentFindId: pack.parentFindId || (pack.anchor && pack.anchor.id) || ''
			})
		},
		handleBack() {
			uni.navigateBack({
				fail: () => uni.switchTab({ url: '/pages/feed/index' })
			})
		}
	}
}
</script>

<style>
.vd-screen {
	flex: 1;
	background-color: #000000;
}

.vd-back-wrap {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	padding-left: 24rpx;
	padding-right: 24rpx;
	z-index: 30;
}

.vd-back-icon {
	color: #ffffff;
	font-size: 40rpx;
}
</style>
