<template>
	<view @click="navTo(item.vod_id)" class="vod-item" :class="type > 0 && 'vod-item' + type">
		<!-- <navigator :url="'/pages/video/video?id='+item.vod_id" hover-class="none" class="vod-item" :class="type > 0 && 'vod-item'+type"> -->
		<view class="vod-image">
			<!-- <image :src="item.vod_pic" mode="aspectFill"  /> -->
			<vodImage :src="item.vod_pic" />
			<template v-if="order">
				<!-- <image v-if="index <= 3" :src="'/static/images/order-' + index + '.png'" class="vod-tag-order" /> -->
			</template>
			<text v-else-if="item.is_hot === 1" class="vod-tag-hot">HOT</text>
			<text v-if="item.type_id_1 == 1 && item.is_hd === 1" class="vod-tag-hd">高清</text>
			<text v-if="item.type_id_1 == 1" class="vod-tag-score"></text>
			<text v-else class="vod-tag-episode">{{ item.vod_serial }}</text>
		</view>
		<view class="vod-info">
			<view class="vod-name">{{ item.vod_name }} <text>{{item.vod_score}}</text></view>
			<view class="vod-tags">
				<u-tag v-if="i < 3" v-for="(tag, i) in item.vod_class" :key="i" bgColor="#FEF7E5" color="#1a1a1a"
					borderColor="#f2f5fa" size="mini" :text="tag" class="vod-tags-item" />
			</view>
			<view v-if="type == 1" class="vod-year-area">{{ item.vod_year }}/{{ item.vod_area }}</view>
			<view class="vod-actor">{{ item.vod_actor }}</view>
			<!-- <view class="vod-intro">{{ item.vod_blurb }}</view> -->
			<view v-if="type < 1" class="align-end">
				<view class="vod-play">
					<u-icon color="#ffffff" name="play-right-fill"></u-icon>
					<text>立即播放</text>
				</view>
				<!-- <text class="vod-play-count">{{ item.vod_hits }}次播放</text> -->
			</view>
		</view>
		<!-- </navigator> -->
	</view>
</template>

<script>
	import {
		app
	} from '@/utils/api';
	import vodImage from "@/components/vod-image.vue";
	export default {
		components:{
			vodImage
		},
		props: {
			index: {
				type: Number,
				default: 1
			},
			type: {
				type: Number,
				default: 0
			},
			order: {
				type: Boolean,
				default: false
			},
			item: {
				type: Object,
				default: {}
			}
		},
		methods: {
			async navTo(id) {
				//#ifdef H5
				this.openUrl('/pages/video/video?id=' + id);
				return;
				// #endif
				if (uni.getSystemInfoSync().platform == 'android') {
					this.openUrl('/pages/video/video?id=' + id);
					return;
				}
				let res = uni.getStorageSync('isDisable')
				if (this.isVpn()) {
					this.openUrl('/pages/video/videoIntroduction?id=' + id);
					return;
				}
				if (res == 1) {
					this.openUrl('/pages/video/videoIntroduction?id=' + id);
				}
				if (res == 0) {
					this.openUrl('/pages/video/video?id=' + id);
				}
			}
		}
	};
</script>

<style lang="scss">
	.vod-item {
		padding: 10px 15px;
		display: flex;
		align-items: center;

		.vod-image {
			width: 100px;
			height: 150px;
			margin-right: 5px;
			.vod-tag-order {
				position: absolute;
				left: 0;
				top: 0;
				width: 36px;
				height: 36px;
			}
		}

		.vod-info {
			flex: 1 1 0%;
			overflow: hidden;

			.vod-name {
				font-size: 16px;
				font-weight: 700;
				overflow: hidden;
				line-clamp: 2;
				text-overflow: ellipsis;
				white-space: nowrap;
				
				
				// text-overflow: -o-ellipsis-lastline;
				// overflow: hidden;				//溢出内容隐藏
				// text-overflow: ellipsis;		//文本溢出部分用省略号表示
				// display: -webkit-box;			//特别显示模式
				// -webkit-line-clamp: 2;			//行数
				// line-clamp: 2;					
				// -webkit-box-orient: vertical;	//盒子中内容竖直排列
				uni-text {
					font-weight: 500;
					color: #DA2538;
					margin-left: 10px;
					font-size: 11px;
				}
			}

			.vod-tags {
				margin-top: 11px;
				display: flex;
				flex-wrap: wrap;

				.vod-tags-item {
					margin-right: 5px;
				}
			}

			.vod-year-area {
				margin-top: 8px;
				color: #595965;
				font-size: 13px;
			}

			.vod-actor {
				margin-top: 4px;
				margin-bottom:4px;
				color: #595965;
				font-size: 13px;
				line-height: 1.5;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
				text-overflow: ellipsis;
				word-break: break-all;
			}

			.vod-intro {
				margin-top: 8px;
				color: #9c9c9c;
				font-size: 14px;
				line-height: 1.5;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
				text-overflow: ellipsis;
				word-break: break-all;
			}

			.vod-play {
				margin: 8px 10px 0 0;
				display: flex;
				justify-content: center;
				align-items: center;
				width: 100px;
				height: 32px;

				width: 108px;
				background: #D8D8D8 linear-gradient(90deg, #DA2538 0%, #F75F68 100%);
				border-radius: 14px;


				uni-text {
					margin-left: 5px;
					font-size: 13px;
					font-weight: 700;
					color: #FFF;
				}
			}

			.vod-play-count {
				flex: 1 1 0%;
				text-align: right;
				font-size: 12px;
				color: #60606c;
			}
		}

		&.vod-item1 {
			.vod-actor {
				margin-top: 5px;
				-webkit-line-clamp: 2;
			}
		}
	}
</style>