<template>
	<view :style="[componentStyle, { '--row-count': value.rowCount }]">
		<!-- 轮播模式 -->
		<swiper v-if="value.showStyle == 'carousel' && carouselConfig.type != 'hide'" :indicator-dots="isIndicatorDots"
			:autoplay="carouselConfig.autoplay || false" :interval="carouselConfig.interval || 3000"
			:duration="carouselConfig.duration || 500" :circular="carouselConfig.circular || false"
			:style="swiperHeight" class="channel-swiper">
			<swiper-item v-for="(slide, slideIndex) in swiperSlides" :key="slideIndex">
				<view :class="['swiper-slide-content', 'row1-of' + value.rowCount]">
					<view v-for="(item, index) in slide" :key="index" :class="['channel-item', value.mode]">
						<!-- 视频号视频卡片，轮播模式 -->
						<diy-channel-video :value="item" @video-play="playVideo" :list-mode="true"
							:title-line-clamp="value.titleLineClamp" :show-play-btn="value.showPlayBtn"
							:cover-style="computedCoverStyle" :play-btn-style="value.playBtnStyle"
							:aspect-ratio="value.aspectRatio" />
					</view>
				</view>
			</swiper-item>
		</swiper>

		<!-- 固定布局模式 -->
		<view v-else-if="value.showStyle == 'fixed'" :class="['channel-list', 'row1-of' + value.rowCount]">
			<view v-for="(item, index) in value.list" :key="index" class="channel-item">
				<!-- 视频号视频卡片，列表模式 -->
				<diy-channel-video :value="item" @video-play="playVideo" :list-mode="true"
					:title-line-clamp="value.titleLineClamp" :show-play-btn="value.showPlayBtn"
					:cover-style="computedCoverStyle" :play-btn-style="value.playBtnStyle"
					:aspect-ratio="value.aspectRatio" />
			</view>
		</view>

		<!-- 其他布局模式（如滚动布局） -->
		<scroll-view v-else
			:class="['channel-nav', value.showStyle == 'fixed' ? 'fixed-layout' : value.showStyle, 'row1-of' + value.rowCount]"
			:scroll-x="value.showStyle == 'singleSlide'">
			<view class="uni-scroll-view-content">
				<view v-for="(item, index) in value.list" :key="index" :class="['channel-nav-item', value.mode]">
					<!-- 视频号视频卡片，滚动模式 -->
					<diy-channel-video :value="item" @video-play="playVideo" :list-mode="true"
						:title-line-clamp="value.titleLineClamp" :show-play-btn="value.showPlayBtn"
						:cover-style="computedCoverStyle" :play-btn-style="value.playBtnStyle"
						:aspect-ratio="value.aspectRatio" />
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
/**
 * 微信视频号列表组件
 * 支持多种布局模式，包括固定布局和滚动布局
 * 可配置列数、视频高度、标题行数等属性
 * 用于在页面中展示多个微信视频号视频
 */
import DiyMinx from './minx.js'
import { wechatChannelUtil, wechatChannelConfig } from './js/wechat-channel.js'

export default {
	name: 'diy-channel-list',
	props: {
		/**
		 * 组件配置数据
		 * @type {Object}
		 * @default () => ({})
			 * @property {string} showStyle - 显示样式，可选值：carousel, fixed, singleSlide
			 * @property {number} rowCount - 每行显示的视频数量
			 * @property {Array} list - 视频列表数据
			 * @property {string} componentBgColor - 组件背景色
			 * @property {string} componentAngle - 组件圆角类型，可选值：round
			 * @property {number} topAroundRadius - 顶部圆角半径
			 * @property {number} bottomAroundRadius - 底部圆角半径
			 * @property {Object} ornament - 装饰效果配置
			 * @property {number} titleLineClamp - 标题显示行数
			 * @property {string} aspectRatio - 视频比例，可选值：16:9, 3:4
			 * @property {boolean} showPlayBtn - 是否显示播放按钮
			 * @property {Object} coverStyle - 视频封面图样式
			 * @property {Object} playBtnStyle - 播放按钮样式
			 * @property {string} mode - 显示模式, 可选值：video, text, image, graphic
			 * @property {number} imageSize - 图片尺寸（仅在特定模式下使用）
			 * @property {number} pageCount - 每页显示的视频数量
			 * @property {Object} carousel - 轮播配置
			 * @property {string} carousel.type - 轮播类型，可选值：default, hide
			 * @property {boolean} carousel.autoplay - 是否自动播放，默认false
			 * @property {number} carousel.interval - 自动播放间隔，默认3000ms
			 * @property {number} carousel.duration - 切换动画时长，默认500ms
			 * @property {boolean} carousel.circular - 是否循环播放，默认false
		 */
		value: {
			type: Object,
			default: () => ({})
		}
	},
	mixins: [DiyMinx],
	data() {
		return {
			pageWidth: '', // 页面宽度
			indicatorDots: false, // 是否显示轮播指示器
			swiperCurrent: 0 // 当前轮播索引
		}
	},
	created() {
		// 组件创建时的逻辑
		// 可以在这里进行初始化操作，如获取页面宽度等
	},
	watch: {
		/**
		 * 组件刷新监听
		 * 当组件需要刷新时触发
		 * @param {*} newValue - 新值
		 */
		componentRefresh(newValue) {
			// 监听组件刷新
			// 可以在这里处理组件刷新时的逻辑
		}
	},
	computed: {
		carouselConfig() {
			return this.value?.carousel || {
				type: 'default',
				autoplay: false,
				interval: 3000,
				duration: 500,
				circular: true
			}
		},
		/**
		 * 组件样式
		 * 根据配置动态生成样式字符串，包括背景色、圆角、阴影和边框
		 * @returns {string} 样式字符串
		 */
		componentStyle() {
			let style = '';
			// 背景色
			if (this.value?.componentBgColor) {
				style += 'background-color:' + this.value?.componentBgColor + ';';
			}

			// 圆角样式
			if (this.value?.componentAngle == 'round') {
				style += 'border-top-left-radius:' + (2 * this.value?.topAroundRadius) + 'rpx;';
				style += 'border-top-right-radius:' + (2 * this.value?.topAroundRadius) + 'rpx;';
				style += 'border-bottom-left-radius:' + (2 * this.value?.bottomAroundRadius) + 'rpx;';
				style += 'border-bottom-right-radius:' + (2 * this.value?.bottomAroundRadius) + 'rpx;';
			}

			// 装饰效果：阴影
			style += 'box-shadow:' + (this.value?.ornament?.type == 'shadow' ? '0 0 10rpx ' + this.value?.ornament?.color : '') + ';';
			// 装饰效果：边框
			style += 'border:' + (this.value?.ornament?.type == 'stroke' ? '2rpx solid ' + this.value?.ornament?.color : '') + ';';

			return style;
		},

		/**
		 * 轮播高度
		 * 根据模式和配置计算轮播高度
		 * @returns {string} 轮播高度样式
		 */
		swiperHeight() {
			let height = 0;

			const pageCount = this.value?.pageCount || 1;

			// 根据不同模式计算高度
			if (this.value?.mode == 'graphic') {
				height = (49 + this.value?.imageSize) * pageCount;
			} else if (this.value?.mode == 'img') {
				height = (22 + this.value?.imageSize) * pageCount;
			} else if (this.value?.mode == 'text') {
				height = 43 * pageCount;
			} else { // 默认视频模式
				if (this.value?.aspectRatio == '16:9') {
					height = [250, 160, 140, 120][this.value.rowCount - 1];
				} else {
					height = [510, 280, 220, 180][this.value.rowCount - 1];
				}
			}
			
			return 'height:' + (2 * height) + 'rpx';
		},

		/**
		 * 是否显示指示器
		 * 根据轮播配置和列表长度判断是否显示指示器
		 * @returns {boolean} 是否显示指示器
		 */
		isIndicatorDots() {
			// 当轮播类型不是隐藏，且视频数量超过一页时显示指示器
			const pageCount = this.value?.pageCount || 1;
			return this.value?.carousel?.type != 'hide' && Math.ceil(this.value?.list?.length / (pageCount * this.value?.rowCount)) > 1
		},

		/**
		 * 轮播幻灯片数据
		 * 将视频列表分割成轮播所需的幻灯片数据
		 * @returns {Array} 轮播幻灯片数据
		 */
		swiperSlides() {
			const slides = [];
			const list = this.value?.list || [];
			const pageSize = (this.value?.pageCount || 1) * (this.value?.rowCount || 1);

			// 将列表数据分割成每页显示的数量
			for (let i = 0; i < list.length; i += pageSize) {
				slides.push(list.slice(i, i + pageSize));
			}

			return slides;
		},
		/**
		 * 视频封面样式
		 * 根据aspectRatio属性动态计算封面样式
		 * @returns {Object} 封面样式对象
		 */
		computedCoverStyle() {
			const aspectRatio = this.value?.aspectRatio || '16:9';
			let paddingTop = '56.25%'; // 默认 16:9 比例

			if (aspectRatio === '3:4') {
				paddingTop = '133.33%'; // 3:4 比例
			}

			return {
				width: '100%',
				height: '0',
				paddingTop: paddingTop
			};
		}
	},
	methods: {
		/**
		 * 播放视频
		 * 触发 video-play 事件，并在微信小程序中调用视频播放接口
		 * @param {Object} item - 视频数据对象
		 */
		async playVideo(item) {
			await this.__$emitEvent({
				eventName: 'video-play',
				data: item,
				promiseCallback: async (event, handler, awaitedResult) => {
					if (!awaitedResult) return;
					try {
						// 发送视频被点击播放事件
						this.$emit('channel-video-click-play', item);
						console.log('播放视频:', item);

						// #ifdef MP-WEIXIN
						// 在微信小程序环境中调用视频播放接口
						await wechatChannelUtil.playVideo(item);
						// #endif

						// #ifndef MP-WEIXIN
						if (item?.channelType === 'wechat') {
							uni.showToast({
								title: '视频号仅支持在微信小程序环境中播放',
								icon: 'none',
								duration: 2000
							});
						} else {
							// 在非微信小程序环境中，直接触发事件
							this.$emit('video-play', item);
						}
						// #endif						
					} catch (err) {
						console.error('打开视频号失败', err);
					}
				}
			})
		},

		/**
		 * 图片加载错误处理
		 * 当图片加载失败时，设置默认图片
		 * @param {number} index - 图片索引
		 */
		imgError(index) {
			// 图片加载失败的处理逻辑
			console.log('图片加载失败:', index);
			// 为失败的图片设置默认图片
			const item = this.value.list[index];
			if (item) {
				// 使用默认图片替代加载失败的图片
				// #ifdef MP-WEIXIN
				item.coverUrl = wechatChannelConfig.video.defaultCoverUrl;
				// #endif
			}
		}
	}
}
</script>

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

/**
 * 列表布局样式
 */
.channel-list {
	display: grid;
	grid-template-columns: repeat(var(--row-count, 2), 1fr);
	gap: 8px;
	padding: 16px 16px 0px;
}

/**
 * 导航布局样式
 * 支持固定布局和滚动布局
 */
.channel-nav {
	padding: 16rpx;
	box-sizing: border-box;

	.uni-scroll-view-content {
		display: grid;
		grid-template-columns: repeat(var(--row-count, 2), 1fr);
		gap: 16rpx;
	}

	// 单滑动模式
	&.singleSlide {
		.uni-scroll-view-content {
			display: flex;
			flex-wrap: nowrap;
			gap: 16rpx;
		}

		.channel-nav-item {
			flex-shrink: 0;
			width: 280rpx;
		}
	}

	.channel-nav-item {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
	}

	// 1 列布局
	&.row1-of1 {
		.uni-scroll-view-content {
			grid-template-columns: 1fr;
		}
	}

	// 2 列布局
	&.row1-of2 {
		.uni-scroll-view-content {
			grid-template-columns: repeat(2, 1fr);
		}
	}

	// 3 列布局
	&.row1-of3 {
		.uni-scroll-view-content {
			grid-template-columns: repeat(3, 1fr);
		}
	}

	// 4 列布局
	&.row1-of4 {
		.uni-scroll-view-content {
			grid-template-columns: repeat(4, 1fr);
		}
	}
}

/**
 * 确保所有视频卡片高度一致
 */
.channel-item,
.channel-nav-item {
	display: flex;
	flex-direction: column;
}

/**
 * 轮播样式
 * 支持轮播模式的布局和样式
 */
.channel-swiper {
	width: 100%;
	box-sizing: border-box;

	.swiper-slide-content {
		display: grid;
		grid-template-columns: repeat(var(--row-count, 2), 1fr);
		gap: 16rpx;
		padding: 16rpx;
		box-sizing: border-box;

		.channel-item {
			display: flex;
			flex-direction: column;
			box-sizing: border-box;
		}

		// 轮播模式下的 1 列布局
		&.row1-of1 {
			grid-template-columns: 1fr;
		}

		// 轮播模式下的 2 列布局
		&.row1-of2 {
			grid-template-columns: repeat(2, 1fr);
		}

		// 轮播模式下的 3 列布局
		&.row1-of3 {
			grid-template-columns: repeat(3, 1fr);
		}

		// 轮播模式下的 4 列布局
		&.row1-of4 {
			grid-template-columns: repeat(4, 1fr);
		}
	}
}

/**
 * 响应式调整
 * 在小屏幕设备上调整布局和间距
 */
@media (max-width: 375px) {

	.channel-list,
	.channel-nav,
	.channel-swiper .swiper-slide-content {
		gap: 12rpx;
		padding: 12rpx;
	}

	// 小屏幕上的单滑动模式
	.channel-nav {
		&.singleSlide {
			.uni-scroll-view-content {
				gap: 12rpx;
			}

			.channel-nav-item {
				width: 240rpx;
			}
		}
	}
}

/**
 * 视频比例样式调整
 * 根据不同的视频比例调整布局
 */

// // 3:4 比例的视频卡片样式
// .channel-video.ratio-3-4 {
// 	// 调整视频卡片的整体高度
// 	/deep/ .video-cover-wrap {
// 		padding-top: 133.33%; // 3:4 比例
// 	}

// 	// 列表模式下的3:4比例调整
// 	&.list-mode {
// 		/deep/ .video-cover-wrap {
// 			padding-top: 133.33%; // 3:4 比例
// 		}
// 	}
// }

// // 16:9 比例的视频卡片样式（默认）
// .channel-video.ratio-16-9 {
// 	// 保持默认的16:9比例
// 	/deep/ .video-cover-wrap {
// 		padding-top: 56.25%; // 16:9 比例
// 	}

// 	// 列表模式下的16:9比例保持默认
// 	&.list-mode {
// 		/deep/ .video-cover-wrap {
// 			padding-top: 56.25%; // 16:9 比例
// 		}
// 	}
// }</style>