<template>
	<view class="vod-item">
		<view class="vod-image" @click.stop="gotovideo(item.vod_id)" v-if="item.vod_pic">
			<vod-image :src="item.vod_pic" />
			<view class="vod-icon" v-if="mode == 'channel' && index < 3">
				<image class="vod-ranking" src="/static/icon/ranking.png" />

				<text>{{ index + 1 }}</text>
			</view>
			<!-- #ifdef APP-PLUS -->
			<view v-if="previewShow && previewState !== 'error'" class="preview">
				<view
					v-show="previewState === 'loaded'"
					class="preview-image"
					style="background-size: 100% 100%"
					:style="{ backgroundImage: 'url(' + item.vod_thumbnails + ')', backgroundPosition: `-${previewPosition}px center`, backgroundSize: `${previewwidth}px auto` }"
				></view>
			</view>
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<view v-if="previewShow && previewState !== 'error'" class="preview">
				<view v-show="previewState === 'loaded'" class="preview-image"></view>
			</view>
			<!-- #endif -->

			<view class="vod-tag-hot" @click.stop="show">
				<image src="/static/icon/click.png" mode="aspectFill"></image>
			</view>
			<view class="vod-img-bottom">
				<image src="/static/icon/see.png" mode="aspectFill"></image>
				<text style="margin-left: 5px">{{ item.vod_hits | formatNum }}</text>
			</view>
			<view class="vod-time">
				{{ item.vod_duration }}
			</view>
			<text class="vod-tag-hd" v-if="item.vod_mode == 2">VIP</text>
			<view class="vod-tag-hd" v-if="item.vod_mode == 1">
				<image src="../static/icon/yuanbao.png" mode="aspectFill"></image>
				<text style="margin-left: 15px">{{ item.vod_bullion }}</text>
			</view>
			<text v-if="item.type_id_1 == 1 && item.is_hd === 1" class="vod-tag-hd">高清</text>
			<!-- <text v-else class="vod-tag-episode">全1集</text> -->
		</view>
		<view class="vod-image" v-else @click="openApp(item.adv_link)">
			<vod-image :src="item.adv_image" />
			<view class="vod-img-bottom">
				<image src="/static/icon/see.png" mode="aspectFill"></image>
				<text style="margin-left: 5px">{{ getRandomInt(2000, 8000) }}</text>
			</view>
			<view class="vod-tag-hot">
				<image src="/static/icon/click.png" mode="aspectFill"></image>
			</view>
			<view class="vod-time">
				{{ Math.floor(Math.random() * 60) + '分' + Math.floor(Math.random() * 60) + '秒' }}
			</view>
		</view>
		<view v-if="item.vod_name" @click.stop="gotovideo(item.vod_id)" class="vod-title">{{ item.vod_name }}</view>
		<view v-if="item.adv_name" class="vod-title">{{ item.adv_name }}</view>
	</view>
</template>

<script>
import { app } from '@/utils/api';
import vodImage from '@/components/vod-image';
export default {
	components: {
		vodImage
	},
	props: {
		item: {
			type: Object,
			default: {}
		},
		mode: {
			type: String,
			default: ''
		},
		index: {
			type: Number,
			default: 0
		}
	},
	data() {
		return {
			previewState: null,
			previewPosition: 0,
			previewShow: false,
			previewTime: null,
			viewimg: {},
			previewwidth: 0,
			isClicked: false,
			randomNumber: 0
		};
	},
	filters: {
		formatNum(value) {
			if (Number(value) > 10000) {
				value = Math.floor(value / 10000) + 'w+';
			}
			return value;
		}
	},

	methods: {
		getRandomInt(min, max) {
			return Math.floor(Math.random() * (max - min + 1)) + min;
		},
		gotovideo(id) {
			if (this.isClicked) {
				return;
			}
			this.isClicked = true;
			//this.openVideo(id);
			// #ifdef APP-PLUS
			let url = '/pages/video/video-app?id=' + id;
			// #endif
			// #ifdef H5
			let url = '/pages/video/video?id=' + id;
			// #endif
			const pages = getCurrentPages();
			let route = pages[pages.length - 1].route;
			if (route == 'pages/video/video-app' || route == 'pages/video/video') {
				console.log('视频页删除操作');
				uni.redirectTo({
					url
				});
			} else {
				console.log('其他页面');
				uni.navigateTo({
					url
				});
			}

			setTimeout(() => {
				this.isClicked = false;
			}, 200);
		},
		show() {
			if (this.item.vod_thumbnails) {
				this.previewShow = true;
				this.$nextTick(() => {
					this.previewLoad();
				});
			}
		},
		previewLoad() {
			if (this.previewState === 'loading' || this.previewState === 'error' || this.previewTime) return;

			let posterWidth;
			let previewImage;

			// #ifdef APP-PLUS

			posterWidth = 180;

			// #endif

			// #ifdef H5
			posterWidth = this.$el.querySelector('.preview').offsetWidth;
			previewImage = this.$el.querySelector('.preview-image');
			// #endif

			this.continueExecution(posterWidth, previewImage);
		},
		continueExecution(posterWidth, previewImage) {
			const srcMatch = this.item.vod_thumbnails.match(/-(\d+).(jpg|jpeg|png|webp|gif|bmp)+$/i);
			const previewNum = srcMatch ? parseInt(srcMatch[1]) : 100;
			const previewWidth = posterWidth * previewNum;
			this.previewwidth = previewWidth;
			if (!this.previewState) {
				this.previewState = 'loading';
				// #ifdef APP-PLUS
				this.previewState = 'loaded';
				// #endif
				// #ifdef H5
				const img = new Image();
				img.src = this.item.vod_thumbnails;
				img.onload = () => {
					previewImage.style.backgroundImage = `url(${img.src})`;
					previewImage.style.backgroundSize = `${previewWidth}px auto`;
					previewImage.style.backgroundPosition = '0 center';
					this.previewPosition = 0;
					this.previewState = 'loaded';
				};
				img.onerror = () => {
					this.previewState = 'error';
				};
				// #endif
			} else if (this.previewState === 'loaded') {
				previewImage.style.backgroundImage = `url(${this.data.vod_thumbnails})`;
				previewImage.style.backgroundSize = `${previewWidth}px auto`;
				previewImage.style.backgroundPosition = '0 center';
				this.previewPosition = 0;
			}

			this.previewTime = setInterval(() => {
				if (this.previewShow === false) {
					clearInterval(this.previewTime);
					this.previewTime = null;
					return;
				}
				if (this.previewState === 'loaded') {
					this.previewPosition += posterWidth;
					if (this.previewPosition > previewWidth) {
						this.previewPosition = 0;
					}

					previewImage.style.backgroundPosition = `-${this.previewPosition}px center`;
				}
			}, 360);
		}
	}
};
</script>

<style lang="scss">
.vod-item {
	width: 100%;
	max-width: 140px;

	.preview {
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		position: absolute;
		top: 0;
		left: 0;
	}

	.preview .preview-image {
		width: 100%;
		height: 100%;
		background-color: #000;
		background-repeat: no-repeat;
	}

	.vod-img-bottom {
		height: 30px;
		padding: 0 10px;
		color: #fff;
		background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
		border-radius: 4px;
		font-size: 12px;
		display: flex;
		align-items: center;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		overflow: hidden;
		uni-image {
			width: 15px;
			height: 15px;
			margin-right: 10px;
			margin-top: 7px;
		}
	}
	.vod-time {
		border-radius: 5px;
		position: absolute;
		right: 5px;
		bottom: 6px;
		background-color: #171929;
		padding: 1px 3px;
		font-size: 12px;
		color: #fff;
	}
	.swpinfo-rate {
		color: #f6b409;
		font-size: 12px;
	}

	.vod-title {
		width: 100%;
		margin-top: 5px;
		font-size: 14px;
		font-weight: 500;
		color: #a7a8b0;
		line-height: 1.6;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: wrap;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.vod-title-channel {
		width: 100%;
		margin-top: 5px;
		font-size: 14px;
		font-weight: 500;
		line-height: 1.6;
		color: #fff;
		position: relative;

		overflow: hidden;
		text-overflow: ellipsis;
		white-space: wrap;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;

		bottom: 30px;
		left: 4px;
	}

	.vod-image {
		&:before {
			content: '';
			display: block;
			padding-top: 65%;
			background-color: #171929;
		}

		.vod-icon {
			.vod-ranking {
				width: 40px;
				height: 20px;
				position: absolute;
				left: 35%;
			}

			uni-text {
				color: #fff;
				position: absolute;
				top: -1px;
				left: 49%;
				font-size: 12px;
			}
		}

		uni-image {
			position: absolute;
			left: 0;
			top: 0;
		}
	}

	.vod-duration,
	.adv-duration， {
		height: 22px;
		line-height: 22px;
		padding: 0 8px;
		color: #fff;
		font-size: 12px;
		background-color: rgba(0, 0, 0, 0.8);
		border-radius: 4px;
		position: absolute;
		right: 5px;
		bottom: 5px;
	}
}
</style>
