<template>
	<view class="channel-video">
		<!-- 嵌入式视频播放 -->
		<native-component v-if="canUseEmbedMode">
			// #ifdef MP-WEIXIN
			<channel-video 
				:feed-id="value.feedId" 
				:finder-user-name="value.finderUserName" 
				:feed-token="value.feedToken" 
				style="width: 100%; height: 320rpx;">
			</channel-video>
			// #endif
		</native-component>
		
		<!-- 跳转式视频播放 -->
		<view v-else @tap="playVideo">
			<image class="video-cover" :src="$util.img(value.coverUrl)" mode="aspectFill"></image>
			<view class="channel-play-btn">
				<image class="play-icon" v-if="playIcon" :src="$util.img(playIcon)" mode="aspectFill"></image>
			</view>
			<view class="channel-stats">
				<text>{{ value.viewCount }}次观看</text>
			</view>
			<view class="video-info">
				<view class="video-title">{{ value.videoTitle }}</view>
				<view class="video-stats">{{ value.viewCount }}次观看</view>
			</view>
		</view>
	</view>
</template>

<script>

// #ifdef MP-WEIXIN
import { wechatChannelUtil, wechatChannelConfig } from './js/wechat-channel.js'
// #endif

export default {
	name: 'diy-channel-video',
	props: {
		value: {
			type: Object,
			required: true
		}
	},
	computed: {
		canUseEmbedMode() {
			// #ifdef MP-WEIXIN
			return this.value.embedMode && wechatChannelUtil.isEmbedModeSupported();
			// #endif
			return false
		},
		playIcon() {
			// #ifdef MP-WEIXIN
			return wechatChannelConfig.icon.playIcon
			// #endif
			return ''
		}
	},
	methods: {
		async playVideo() {
			this.$emit('video-play', this.value);
		}
	}
};
</script>

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

.channel-video {
	position: relative;
}

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

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