<template>
	<view class="vd-screen" :style="screenStyle">
		<find-play
			ref="findPlay"
			:find_id="find_id"
			:label_id="label_id"
			:list_type="list_type"
			:user_no="user_no"
			:compID="compID"
			:width="windowWidth"
			:height="windowHeight"
			:bottom="windowBottom"
			:safe-bottom="safeBottom"
			:page="page"
			:order_type="order_type"
			:is_hot_dian="is_hot_dian"
			:search="search"
			: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>
import FindPlay from '@/components/find/play.vue'
import {
	applyBackgroundPlaybackSession,
	shouldKeepFeedPlaybackOnPageHide
} from '@/features/feed/background-playback'

export default {
	components: { FindPlay },
	data() {
		return {
			find_id: '',
			label_id: '',
			list_type: '',
			user_no: '',
			compID: '',
			order_type: '',
			is_hot_dian: '',
			search: '',
			headTop: 0,
			headHeight: 0,
			windowWidth: 0,
			windowHeight: 0,
			safeBottom: 0,
			windowBottom: 0,
			page: 1,
			pageVisible: true
		}
	},
	computed: {
		screenStyle() {
			return {
				width: `${this.windowWidth}px`,
				height: `${this.windowHeight}px`
			}
		}
	},
	onLoad(option) {
		this.find_id = (option && (option.id || option.find_id)) || ''
		if (option && option.page) {
			this.page = option.page
		}
		this.label_id = (option && option.label_id) || ''
		this.list_type = (option && option.type) || ''
		this.user_no = (option && option.user_no) || ''
		this.compID = (option && option.compID) || ''
		this.order_type = (option && option.order_type) || ''
		this.is_hot_dian = (option && option.is_hot_dian) || ''
		this.search = (option && option.search)
			? decodeURIComponent(String(option.search))
			: ''

		const sys = uni.getSystemInfoSync()
		this.headTop = sys.statusBarHeight || 0
		this.headHeight = this.headTop + uni.upx2px(90)
		this.windowWidth = sys.windowWidth
		this.windowHeight = sys.windowHeight
		// 详情页无自定义 tabbar；勿把 windowBottom 当 bottomInset，
		// iOS 上非 0 会把合辑入口抬出可视区（bottom 仅留给评论区兼容）
		this.windowBottom = 0
		this.safeBottom = (sys.safeAreaInsets && sys.safeAreaInsets.bottom) || 0
	},
	onReady() {
		this.$nextTick(() => {
			const play = this.$refs.findPlay
			if (play && typeof play.tryEntryBootstrap === 'function') {
				// force：确保 onLoad 写入的 compID/find_id 已落到子组件后再拉合辑列表
				play.tryEntryBootstrap(true)
			}
		})
	},
	onShow() {
		this.pageVisible = true
		const delay = uni.getSystemInfoSync().platform === 'ios' ? 320 : 80
		setTimeout(() => {
			if (this.$refs.findPlay) {
				this.$refs.findPlay.handleVideoPlay()
			}
		}, delay)
	},
	onHide() {
		setTimeout(() => {
			if (shouldKeepFeedPlaybackOnPageHide()) {
				applyBackgroundPlaybackSession(true)
				return
			}
			this.pageVisible = false
			if (this.$refs.findPlay) {
				this.$refs.findPlay.handleVideoPause()
			}
		}, 50)
	},
	methods: {
		handleBack() {
			uni.navigateBack({
				fail: () => uni.switchTab({ url: '/pages/index/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;
}

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