<template>
	<view class="live-page">
		<view class="top-safe" :style="{ height: menuButtonInfo.top + 'px' }"></view>
		<view class="nav">
			<view class="back" @tap="back">‹</view>
			<view class="title">{{title}}</view>
			<view class="ghost"></view>
		</view>
		<view class="content" v-if="liveUrl">
			<view class="shop-card">
				<view class="shop-title">{{title}}</view>
				<view class="shop-sub">商家已接入明厨亮灶，可实时查看后厨画面</view>
			</view>
			<view class="live-card">
				<view class="card-head">
					<view class="head-left">
						<view class="head-dot"></view>
						<text>后厨实时画面</text>
					</view>
					<view class="head-status">可查看</view>
				</view>
				<view class="preview-box" @tap="playerUrl ? '' : playLive()">
					<video v-if="playerUrl" id="openKitchenPlayer" class="live-player" :src="playerUrl" :controls="true"
						:autoplay="false" object-fit="contain" @play="isPlaying = true" @pause="isPlaying = false"
						@fullscreenchange="onFullscreenChange" @error="onPlayerError"></video>
					<view v-else class="preview-placeholder">
						<view class="preview-top">
							<view class="camera-dot"></view>
							<text>LIVE</text>
						</view>
						<view class="preview-play">▶</view>
						<view class="preview-text">点击查看直播</view>
					</view>
				</view>
				<view class="play-entry" @tap="playLive">
					查看直播画面
				</view>
				<view class="entry-tip">默认不自动播放，点击后全屏观看</view>
			</view>
		</view>
		<view class="empty" v-else>明厨亮灶地址为空</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				menuButtonInfo: { top: 44 },
				title: '明厨亮灶',
				liveUrl: '',
				playerUrl: '',
				isPlaying: false
			}
		},
		onLoad(options) {
			if (uni.getMenuButtonBoundingClientRect) this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			const cacheKey = (options && options.key) || ''
			this.liveUrl = cacheKey ? (uni.getStorageSync(cacheKey) || '') : decodeURIComponent((options && options.url) || '')
			this.title = decodeURIComponent((options && options.name) || '') || '明厨亮灶'
		},
		methods: {
			playLive() {
				if (!this.playerUrl) {
					this.playerUrl = this.liveUrl
				}
				this.$nextTick(() => {
					const context = uni.createVideoContext('openKitchenPlayer', this)
					if (context && context.requestFullScreen) {
						context.requestFullScreen({
							direction: 0
						})
					}
					if (context && context.play) context.play()
				})
			},
			onFullscreenChange(event) {
				const fullScreen = event && event.detail ? event.detail.fullScreen : false
				if (!fullScreen) this.isPlaying = false
			},
			onPlayerError() {
				uni.showToast({
					title: '直播画面加载失败',
					icon: 'none'
				})
			},
			back() {
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #f5f6f7;
	}

	.live-page {
		min-height: 100vh;
		box-sizing: border-box;
		color: #222;
		background: #f5f6f7;
	}

	.nav {
		height: 88rpx;
		display: flex;
		align-items: center;
		padding: 0 24rpx;
		box-sizing: border-box;
		background: #fff;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.back,
	.ghost {
		width: 72rpx;
		color: #333;
		font-size: 56rpx;
	}

	.title {
		flex: 1;
		text-align: center;
		font-size: 30rpx;
		font-weight: 800;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.content {
		min-height: calc(100vh - 150rpx);
		padding: 24rpx;
		box-sizing: border-box;
	}

	.shop-card,
	.live-card {
		background: #fff;
		border-radius: 20rpx;
		padding: 28rpx;
		box-sizing: border-box;
	}

	.shop-title {
		font-size: 34rpx;
		font-weight: 900;
		color: #222;
		line-height: 44rpx;
	}

	.shop-sub {
		margin-top: 10rpx;
		font-size: 24rpx;
		line-height: 34rpx;
		color: #777;
	}

	.live-card {
		margin-top: 20rpx;
	}

	.card-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 22rpx;
	}

	.head-left {
		display: flex;
		align-items: center;
		font-size: 28rpx;
		font-weight: 900;
		color: #222;
	}

	.head-dot {
		width: 12rpx;
		height: 12rpx;
		border-radius: 50%;
		background: #21b37b;
		margin-right: 10rpx;
	}

	.head-status {
		height: 42rpx;
		line-height: 42rpx;
		padding: 0 16rpx;
		border-radius: 999rpx;
		background: #e9fff5;
		color: #18a66f;
		font-size: 22rpx;
		font-weight: 800;
	}

	.preview-box {
		position: relative;
		height: 360rpx;
		border-radius: 18rpx;
		background: #202326;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.preview-placeholder {
		position: relative;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.preview-box::before {
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		height: 80rpx;
		background: linear-gradient(180deg, rgba(255, 255, 255, .08), transparent);
	}

	.preview-top {
		position: absolute;
		left: 20rpx;
		top: 18rpx;
		display: flex;
		align-items: center;
		height: 34rpx;
		line-height: 34rpx;
		padding: 0 12rpx;
		border-radius: 999rpx;
		background: rgba(0, 0, 0, .38);
		color: #fff;
		font-size: 18rpx;
		font-weight: 900;
	}

	.camera-dot {
		width: 10rpx;
		height: 10rpx;
		border-radius: 50%;
		background: #ff4d4f;
		margin-right: 8rpx;
	}

	.preview-play {
		width: 104rpx;
		height: 104rpx;
		line-height: 104rpx;
		border-radius: 50%;
		text-align: center;
		background: rgba(255, 255, 255, .92);
		color: #19a974;
		font-size: 44rpx;
		padding-left: 8rpx;
		box-sizing: border-box;
	}

	.preview-text {
		margin-top: 18rpx;
		font-size: 24rpx;
		font-weight: 800;
		color: rgba(255, 255, 255, .72);
	}

	.play-entry {
		margin-top: 28rpx;
		height: 84rpx;
		line-height: 84rpx;
		border-radius: 999rpx;
		text-align: center;
		background: linear-gradient(90deg, #dcff9c, #baffec);
		color: #073d33;
		font-size: 28rpx;
		font-weight: 900;
	}

	.entry-tip {
		margin-top: 20rpx;
		text-align: center;
		font-size: 22rpx;
		color: #999;
	}

	.live-player {
		width: 100%;
		height: 100%;
		background: #000;
	}

	.empty {
		margin-top: 200rpx;
		text-align: center;
		color: rgba(255, 255, 255, .56);
		font-size: 26rpx;
	}
</style>
