<template>
	<view class="channel-video" :class="{ 'list-mode': listMode }">
		<!-- 嵌入式视频播放 -->
		<view v-if="canUseEmbedMode" class="embed-video-container">
			<view class="video-cover-wrap" :class="videoCoverClass">
				<!-- #ifdef MP-WEIXIN -->
				<native-component>
					<!-- 嵌入式视频播放组件 -->
					<channel-video :feed-id="value.feedId" :finder-user-name="value.finderUserName"
						:feed-token="value.feedToken" :auto-play="autoPlay">
					</channel-video>
				</native-component>
				<!-- #endif -->
			</view>
			<view class="video-info">
				<!-- 视频标题，支持多行显示控制 -->
				<view class="video-title" :style="{ '--title-line-clamp': titleLineClamp }">{{ value.videoTitle }}
				</view>
				<!-- 视频统计信息 -->
				<view class="video-stats" v-if="value.showViewCount">{{ value.viewCount }}次观看</view>
			</view>
		</view>

		<!-- 跳转式视频播放 -->
		<view v-else @click.stop="playVideo" class="video-container">
			<view class="video-cover-wrap" :class="videoCoverClass">
				<image class="video-cover" :src="$util.img(value.coverUrl)" mode="aspectFill"></image>
				<view class="channel-play-btn" v-if="showPlayBtn" :style="playBtnStyle">
					<image class="play-icon" v-if="playIcon" :src="$util.img(playIcon)" mode="aspectFill"></image>
					<view class="play-icon-css" v-else></view>
				</view>
				<view class="video-stats-overlay" v-if="value.showViewCount">
					{{ value.viewCount }}次观看
				</view>
			</view>
			<view class="video-info">
				<!-- 视频标题，支持多行显示控制 -->
				<view class="video-title" :style="{ '--title-line-clamp': titleLineClamp }">{{ value.videoTitle }}
				</view>
				<!-- 视频统计信息，非列表模式下显示 -->
				<view class="video-stats" v-if="value.showViewCount && !listMode">{{ value.viewCount }}次观看</view>
			</view>
		</view>
	</view>
</template>

<script>

import { wechatChannelUtil, wechatChannelConfig } from './js/wechat-channel.js'

/**
 * 微信视频号视频卡片组件
 * 支持嵌入式播放和跳转式播放两种模式
 * 可配置列表模式、视频高度、标题行数等属性
 */
export default {
	name: 'diy-channel-video',
	props: {
		/**
		 * 视频数据对象
		 * @type {Object}
		 * @required
		 * @property {string} feedId - 视频 feedId
		 * @property {string} feedToken - 视频 token
		 * @property {string} coverUrl - 视频封面图
		 * @property {string} videoTitle - 视频标题
		 * @property {number} viewCount - 观看次数
		 * @property {boolean} showViewCount - 是否显示观看次数
		 * @property {boolean} embedMode - 是否启用嵌入式播放
		 */
		value: {
			type: Object,
			required: true
		},
		/**
		 * 是否为列表模式
		 * @type {boolean}
		 * @default false
		 */
		listMode: {
			type: Boolean,
			default: false
		},
		/**
		 * 视频高度（仅适用于嵌入式播放）
		 * @type {number}
		 * @default 220
		 */
		videoHeight: {
			type: Number,
			default: 220
		},
		/**
		 * 标题显示行数
		 * @type {number}
		 * @default 1
		 */
		titleLineClamp: {
			type: Number,
			default: 1
		},
		/** 是否显示播放按钮 */
		showPlayBtn: {
			type: Boolean,
			default: true
		},
		/**
		 * 视频比例
		 * @type {string}
		 * @default '16:9'
		 * @options '16:9', '3:4'
		 */
		aspectRatio: {
			type: String,
			default: '16:9',
			validator: (value) => ['16:9', '3:4'].includes(value)
		},
		/**
		 * 视频封面图样式
		 * 采用 16:9 比例的响应式高度
		 */
		coverStyle: {
			type: Object,
			default: () => ({
				width: '100%',
				height: '0',
				paddingTop: '56.25%' // 16:9 比例
			})
		},
		/**
		 * 播放按钮样式
		 */
		playBtnStyle: {
			type: Object,
			default: () => ({
				width: '60rpx',
				height: '60rpx',
				borderRadius: '30rpx',
				backgroundColor: 'rgba(0, 0, 0, 0.6)'
			})
		},
		/** 是否自动播放 */
		autoPlay: {
			type: Boolean,
			default: false
		},
	},
	computed: {
		/**
		 * 是否支持嵌入式播放
		 * @returns {boolean}
		 */
		canUseEmbedMode() {
			// #ifdef MP-WEIXIN
			const enableEmbedMode = Boolean(this.value?.embedMode)
				&& Boolean(this.value?.feedToken)
				&& wechatChannelUtil.isEmbedModeSupported();
			console.log('enableEmbedMode', enableEmbedMode);
			return enableEmbedMode;
			// #endif
			return false
		},
		/**
		 * 播放按钮图标
		 * @returns {string}
		 */
		playIcon() {
			// #ifdef MP-WEIXIN
			return wechatChannelConfig.icon.playIcon
			// #endif
			return ''
		},
		/**
		 * 计算视频封面类名
		 * 根据环境和宽高比生成适当的 CSS 类
		 * @returns {Array}
		 */
		videoCoverClass() {
			const classes = [];
			// #ifdef MP-WEIXIN
			classes.push('mp-weixin');
			// #endif
			// #ifndef MP-WEIXIN
			classes.push('h5');
			// #endif
			classes.push(`ratio-${this.aspectRatio.replace(':', '-')}`);
			return classes;
		}
	},
	methods: {
		/**
		 * 播放视频
		 * 触发 video-play 事件，由父组件处理具体播放逻辑
		 */
		async playVideo() {
			this.$emit('video-play', this.value);
		}
	}
};
</script>

<style scoped lang="scss">
@import './css/common-channel.scss';

/* 微信小程序环境样式 - 3:4 比例 */
.video-cover-wrap.mp-weixin.ratio-3-4 {
	height: 400rpx;
	position: relative;
}

/* 微信小程序环境样式 - 16:9 比例 */
.video-cover-wrap.mp-weixin.ratio-16-9 {
	height: 300rpx;
	position: relative;
}

/* H5 环境样式 - 3:4 比例 */
.video-cover-wrap.h5.ratio-3-4 {
	height: 0;
	padding-top: 133.33%;
}

/* H5 环境样式 - 16:9 比例 */
.video-cover-wrap.h5.ratio-16-9 {
	height: 0;
	padding-top: 56.25%;
}


/**
 * 视频卡片容器样式
 * 包含卡片基础样式、悬停效果和列表模式样式
 */
.channel-video {
	position: relative;
	background-color: #fff;
	border-radius: 12rpx;
	overflow: hidden;
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	display: flex;
	flex-direction: column;
	height: 100%;

	// 悬停效果
	&:hover {
		transform: translateY(-4rpx);
		box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.15);
	}

	// 列表模式样式调整
	&.list-mode {
		border-radius: 10rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.08);

		.video-info {
			padding: 14rpx;

			.video-title {
				font-size: 24rpx;
				margin-bottom: 6rpx;
			}
		}
	}
}

/**
 * 视频容器样式
 * 用于跳转式播放模式
 */
.video-container {
	display: flex;
	flex-direction: column;
	height: 100%;
}

/**
 * 嵌入式视频容器样式
 * 与视频容器样式保持一致
 */
.embed-video-container {
	display: flex;
	flex-direction: column;
	height: 100%;
}

/**
 * 视频封面容器
 */
.video-cover-wrap {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
	/* 16:9 比例 */
	height: 0;
	overflow: hidden;
	border-radius: 12rpx 12rpx 0 0;
	transition: transform 0.3s ease;

	// 悬停时缩放效果
	.channel-video:hover & {
		transform: scale(1.02);
	}

	// 列表模式下的边框圆角调整
	.channel-video.list-mode & {
		border-radius: 10rpx 10rpx 0 0;
	}
}

/**
 * 视频封面图片
 * 绝对定位填充整个容器
 */
.video-cover {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

/**
 * 视频统计信息遮罩
 * 显示在视频封面底部
 */
.video-stats-overlay {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
	padding: 12rpx 16rpx;
	color: #fff;
	font-size: 20rpx;
	text-align: right;
	font-weight: 500;
	transition: opacity 0.3s ease;

	// 悬停时的透明度变化
	.channel-video:hover & {
		opacity: 1;
	}

	.channel-video:not(:hover) & {
		opacity: 0.8;
	}
}

/**
 * 视频信息区域
 * 包含标题和统计信息
 */
.video-info {
	padding: 16rpx;
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	background-color: #fff;
	transition: background-color 0.3s ease;

	// 悬停时的背景色变化
	.channel-video:hover & {
		background-color: #fafafa;
	}
}

/**
 * 视频标题
 * 支持多行显示控制和渐变遮罩效果
 */
.video-title {
	font-size: 28rpx;
	font-weight: 600;
	color: #222;
	margin-bottom: 10rpx;
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: var(--title-line-clamp, 2);
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: color 0.3s ease;
	position: relative;
	word-break: break-all;
	word-wrap: break-word;
	white-space: normal;

	// 悬停时的颜色变化
	.channel-video:hover & {
		color: #000;
	}

	// 列表模式下的样式调整
	.channel-video.list-mode & {
		-webkit-line-clamp: var(--title-line-clamp, 1);
		font-size: 24rpx;
		margin-bottom: 6rpx;
		font-weight: 500;
		color: #333;
		line-height: 1.3;
	}

	// 添加渐变遮罩效果，让过长的文字有柔和的结束
	&::after {
		content: '';
		position: absolute;
		bottom: 0;
		right: 0;
		width: 40rpx;
		height: 1.4em;
		background: linear-gradient(to right, transparent, #fff 90%);
		pointer-events: none;
	}

	// 列表模式下的遮罩高度调整
	.channel-video.list-mode &::after {
		height: 1.3em;
	}

	// 根据行数调整遮罩高度
	&[style*="--title-line-clamp: 1"]::after {
		height: 1.4em;
	}

	&[style*="--title-line-clamp: 3"]::after {
		height: 4.2em;
	}

	&[style*="--title-line-clamp: 4"]::after {
		height: 5.6em;
	}

	// 列表模式下的多行遮罩高度调整
	.channel-video.list-mode &[style*="--title-line-clamp: 1"]::after {
		height: 1.3em;
	}

	.channel-video.list-mode &[style*="--title-line-clamp: 3"]::after {
		height: 3.9em;
	}

	.channel-video.list-mode &[style*="--title-line-clamp: 4"]::after {
		height: 5.2em;
	}
}

/**
 * 视频统计信息
 * 显示观看次数等数据
 */
.video-stats {
	font-size: 22rpx;
	color: #999;
	margin-top: 6rpx;
	transition: color 0.3s ease;

	// 悬停时的颜色变化
	.channel-video:hover & {
		color: #666;
	}
}

/**
 * 列表模式下的播放按钮样式
 * 更小的尺寸和悬停效果
 */
.channel-video.list-mode .channel-play-btn {
	width: 50rpx;
	height: 50rpx;
	background-color: rgba(0, 0, 0, 0.5);
	transition: all 0.3s ease;

	// 悬停效果
	&:hover {
		background-color: rgba(0, 0, 0, 0.7);
		transform: scale(1.1);
	}

	// 播放图标尺寸
	.play-icon {
		width: 25rpx;
		height: 25rpx;
	}
}

/**
 * 通用播放按钮样式优化
 * 添加悬停效果
 */
.channel-play-btn {
	transition: all 0.3s ease;

	// 悬停效果
	&:hover {
		background-color: rgba(0, 0, 0, 0.6);
		transform: scale(1.05);
	}
}

/**
 * 纯 CSS 播放按钮图标
 * 当没有 playIcon 时使用
 */
.play-icon-css {
	width: 0;
	height: 0;
	border-top: 12rpx solid transparent;
	border-bottom: 12rpx solid transparent;
	border-left: 18rpx solid #fff;
	margin-left: 4rpx;
	transition: transform 0.3s ease;

	// 悬停时的缩放效果
	.channel-play-btn:hover & {
		transform: scale(1.1);
	}

	// 列表模式下的尺寸调整
	.channel-video.list-mode & {
		border-top: 10rpx solid transparent;
		border-bottom: 10rpx solid transparent;
		border-left: 15rpx solid #fff;
		margin-left: 3rpx;
	}
}

/**
 * 原生组件样式控制
 * 确保 native-component 和 channel-video 正确填充容器
 */
native-component {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}

/**
 * channel-video 组件样式控制
 * 避免受到 wx-channel-video 全局样式的影响
 */
channel-video {
	width: 100%;
	height: 100%;
	min-width: 100%;
	min-height: 100%;
	max-width: 100%;
	max-height: 100%;
	object-fit: cover;
}
</style>