<template>
	<view class="diy-wechat-channel" :style="channelWarpCss">
		<!-- 视频号头部，显示视频号名称、头像等信息 -->
		<diy-channel-header :value="value" @header-tap="handlerClick" />
		<!-- 视频号视频，显示视频封面、标题等信息 -->
		<diy-channel-video :value="value" @video-play="playVideo" />
	</view>
</template>


<script>
/**
 * 微信视频号组件
 * 用于展示单个微信视频号的完整信息，包括头部信息和视频内容
 * 支持点击头部进入视频号主页，点击视频播放视频
 */
import DiyMinx from './minx.js'
import { wechatChannelUtil } from './js/wechat-channel.js'

export default {
	name: 'diy-channel',
	props: {
		/**
		 * 视频号数据对象
		 * @type {Object}
		 * @required
		 * @property {string} channelName - 视频号名称
		 * @property {string} avatarUrl - 视频号头像URL
		 * @property {string} videoTitle - 视频标题
		 * @property {string} coverUrl - 视频封面URL
		 * @property {string} feedId - 视频号内容ID，用于播放视频
		 * @property {number} viewCount - 视频观看次数
		 * @property {boolean} showFollow - 是否显示关注按钮
		 * @property {string} componentAngle - 组件圆角类型，可选值：round
		 * @property {number} topAroundRadius - 顶部圆角半径
		 * @property {number} bottomAroundRadius - 底部圆角半径
		 * @property {boolean} embedMode - 是否启用嵌入式播放
		 * @property {boolean} showViewCount - 是否显示观看次数
		 * @property {string} finderUserName - 视频号ID
		 * @property {string} feedToken - 视频token，用于嵌入式播放
		 */
		value: {
			type: Object,
			required: true
		}
	},
	data() {
		return {};
	},
	created() { 
		// 组件创建时的初始化逻辑
	},
	mixins: [DiyMinx],
	watch: {
		/**
		 * 组件刷新监听
		 * 当组件需要刷新时触发
		 * @param {*} nval - 新值
		 */
		componentRefresh: function (nval) { }
	},
	computed: {
		/**
		 * 组件容器样式
		 * 根据配置动态生成样式字符串，主要处理圆角样式
		 * @returns {string} 样式字符串
		 */
		channelWarpCss: function () {
			var obj = '';
			if (this.value.componentAngle == 'round') {
				obj += 'border-top-left-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
				obj += 'border-top-right-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
				obj += 'border-bottom-left-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
				obj += 'border-bottom-right-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
			}
			return obj;
		}
	},
	methods: {
		/**
		 * 处理头部点击事件
		 * 触发 channel-tap 事件，用于跳转到视频号主页
		 */
		async handlerClick() {
			await this.__$emitEvent({
				eventName: 'channel-tap', 
				data: this.value, 
				promiseCallback: (event, handler, awaitedResult) => {
					if (!awaitedResult) return;
				}
			})
		},
		/**
		 * 处理视频播放事件
		 * 触发 video-play 事件，并在微信小程序中调用视频播放接口
		 */
		async playVideo() {
			await this.__$emitEvent({
				eventName: 'video-play', 
				data: this.value, 
				promiseCallback: async (event, handler, awaitedResult) => {
					if (!awaitedResult) return;
					try {
						// #ifdef MP-WEIXIN
						await wechatChannelUtil.playVideo(this.value);
						// #endif
					} catch (err) {
						console.error('打开视频号失败', err);
					}
				}
			})
		}
	}
};
</script>

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

.diy-wechat-channel {
	width: 100%;
	background-color: #fff;
	border-radius: 12rpx;
	overflow: hidden;
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
}

.channel-video {
	position: relative;
}

.video-cover {
	width: 100%;
	height: 320rpx;
	object-fit: cover;
}

.video-info {
	padding: 16rpx;
}
</style>