<template>
	<view class="wechat-channel-demo">
		<view class="demo-header">
			<text class="demo-title">微信视频号集成示例</text>
		</view>

		<view class="demo-section">
			<view class="section-title">单个视频号</view>
			<diy-wechat-channel :value="channelData" />
		</view>

		<view class="demo-section">
			<view class="section-title">视频号列表</view>
			<diy-wechat-channel-list :value="channelListData" />
		</view>

		<view class="demo-section">
			<view class="section-title">使用说明</view>
			<view class="section-content">
				<view class="content-item">1. 确保微信小程序已开通视频号权限</view>
				<view class="content-item">2. 小程序需与视频号关联</view>
				<view class="content-item">3. 传递正确的feedId用于播放视频</view>
				<view class="content-item">4. 仅支持微信小程序环境</view>
			</view>
		</view>
	</view>
</template>

<script>
import diyWechatChannel from '@/components-diy/diy-wechat-channel.vue'
import diyWechatChannelList from '@/components-diy/diy-wechat-channel-list.vue'

export default {
	name: 'wechat-channel-demo',
	components: {
		diyWechatChannel,
		diyWechatChannelList
	},
	data() {
		return {
			// 单个视频号数据
			channelData: {
				channelName: "示例视频号",
				avatarUrl: "https://via.placeholder.com/100",
				videoTitle: "这是一个示例视频，展示如何使用微信视频号组件",
				coverUrl: "https://via.placeholder.com/640x360",
				feedId: "v02004g10000c3f7l7j5u87l33n8f160",
				viewCount: 12345,
				showFollow: true,
				componentAngle: "round",
				topAroundRadius: 10,
				bottomAroundRadius: 10
			},
			// 视频号列表数据
			channelListData: {
				list: [
					{
						channelName: "示例视频号1",
						coverUrl: "https://via.placeholder.com/640x360",
						videoTitle: "这是示例视频1，展示如何使用微信视频号组件",
						feedId: "v02004g10000c3f7l7j5u87l33n8f160",
						viewCount: 12345
					},
					{
						channelName: "示例视频号2",
						coverUrl: "https://via.placeholder.com/640x360",
						videoTitle: "这是示例视频2，展示如何使用微信视频号组件",
						feedId: "v02004g10000c3f7m7j5u87l33n8f161",
						viewCount: 67890
					},
					{
						channelName: "示例视频号3",
						coverUrl: "https://via.placeholder.com/640x360",
						videoTitle: "这是示例视频3，展示如何使用微信视频号组件",
						feedId: "v02004g10000c3f7n7j5u87l33n8f162",
						viewCount: 98765
					},
					{
						channelName: "示例视频号4",
						coverUrl: "https://via.placeholder.com/640x360",
						videoTitle: "这是示例视频4，展示如何使用微信视频号组件",
						feedId: "v02004g10000c3f7o7j5u87l33n8f163",
						viewCount: 54321
					}
				],
				rowCount: 2,
				showStyle: "fixed",
				font: {
					size: 14,
					weight: "normal",
					color: "#333"
				},
				componentBgColor: "#fff",
				componentAngle: "round",
				topAroundRadius: 10,
				bottomAroundRadius: 10
			}
		}
	},
	onLoad() {
		console.log('微信视频号示例页面加载');
	},
	methods: {
		// 可以在这里添加自定义方法
	}
}
</script>

<style scoped>
.wechat-channel-demo {
	padding: 20rpx;
	background-color: #f5f5f5;
}

.demo-header {
	text-align: center;
	padding: 40rpx 0;
	background-color: #fff;
	margin-bottom: 20rpx;
	border-radius: 12rpx;
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
}

.demo-title {
	font-size: 32rpx;
	font-weight: 600;
	color: #333;
}

.demo-section {
	background-color: #fff;
	margin-bottom: 20rpx;
	border-radius: 12rpx;
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
	overflow: hidden;
}

.section-title {
	font-size: 28rpx;
	font-weight: 500;
	color: #333;
	padding: 20rpx;
	border-bottom: 1rpx solid #f0f0f0;
}

.section-content {
	padding: 20rpx;
}

.content-item {
	font-size: 24rpx;
	color: #666;
	margin-bottom: 12rpx;
	line-height: 1.5;
}

/* 组件样式调整 */
.demo-section >>> .diy-wechat-channel {
	margin: 20rpx;
}

.demo-section >>> .diy-wechat-channel-list {
	margin: 20rpx;
}
</style>