<template>
	<scroll-view class="lists col" scroll-y="true" scroll-with-animation='true' :style="topheight">
		<view class="col" style="width: 750rpx;">

			<view class="col" style="width: 750rpx;" v-if="!introShow && data.vod_name">
				<view class="video-name row_s">
					<text class="video-name-t">{{data.vod_name}}</text>
				</view>

				<view class="video-describe row_s">
					<view class="video-describe-tag row_c">
						<text class="video-describe-tag-text ">{{data.vod_year}}年</text>
					</view>
					<view class="video-describe-tag row_c">
						<text class="video-describe-tag-text ">{{data.vod_score}}分</text>
					</view>
					<view class="video-describe-tag row_c">
						<text class="video-describe-tag-text ">{{data.type_name_1}}</text>
					</view>
					<view class="video-describe-tag row_c" v-for="(item,index) of data.vod_class" v-if="index<3"
						:key="index">
						<text class="video-describe-tag-text ">{{item}}</text>
					</view>

					<view class="video-describe-tag row_c" @click="openIntro">
						<text class="video-describe-tag-text ">简介</text>
						<image style="width: 10rpx;height: 20rpx;margin-left: 4rpx;" src="@/static/app-player/right.png" mode="">
						</image>
					</view>
				</view>

				<view class="video-statistics row_s">
					<view class="video-statistics-item row_s" @click="dig('up')">
						<uni-icons :type="data.is_up === 1 ? 'heart-filled' : 'heart'"
							:color="data.is_up === 1 ? '#fa3534' : '#b9bbbd'" size="18"></uni-icons>
						<text class="like-text">{{data.is_up === 1 ? data.vod_up+1 : data.vod_up}}</text>
					</view>
					<view class="video-statistics-item row_s" @click="dig('down')">
						<uni-icons :type="data.is_down === 1 ? 'hand-down-filled' : 'hand-down'"
							:color="data.is_down === 1 ? '#909399' : '#b9bbbd'" size="18"></uni-icons>
						<text class="like-text">{{data.vod_down}}</text>
					</view>
				</view>

				<view class="soure-lists row_b">
					<text class="video-episodes-title">播放源</text>
					<!-- v-if="data.type_id_1==1" -->
					<scroll-view scroll-x="true" class="soure-scroll row_s" :show-scrollbar='false'  v-if="data.vod_play_url.length > 1">
						<view class="video-episodes row_c" v-for="(item, index) of souceList" :key="index"
							@click="selectFrom(index)">
							<text class="soure-text" :class="souceIndex==index?'green':'hui'">{{item.name}}</text>
							
							<!-- <view class="soure-line abe-b-l" v-if="souceIndex==index"></view> -->
						</view>
					</scroll-view>
				</view>
				
				<view class="soure-lists col">
					<scroll-view scroll-x="true" class="soure-scroll row_s" style="width: 720rpx;" :show-scrollbar='false'>
							<view class="video-episodes-url ree row_c"
								:class="limpidIndex==index?'limpid-box-act':'limpid-box-nor'"
								v-for="(item,index) of limpidList" :key="index" @click="selectEpisodes(index)">
								<text class="limpid-text"
									:class="limpidIndex==index?'limpid-green':'limpid-hui'">{{item.name}}</text>
								
								<view class="vip-box abe-t-r row_c" v-if="item.badge&&item.badge.value">
									<text class="vip-text">{{item.badge.value}}</text>
								</view>
							</view>
					</scroll-view>
				</view>
				<view v-if="limpidList.length > 10&&data.type_id_1!=1" class="video-episodes-button row_c"
					@click="triggerEpisodes(true)">
					<text class="video-episodes-button-text">查看全部</text>
				</view>
			</view>
			<view v-if="adv.banner_adv2" class="ad-banner" @click="openAD(adv.banner_adv2.adv_link)">
			  <image class="banner-image" :src="adv.banner_adv2.adv_image" style="" mode="widthFix">
			</view>
			<view v-if="introShow" class="video-intro">
				<view class="video-intro-item row_s">
					<text class="item-title">导演：</text>
					<view class="item-value">
						<text class="intro-value " v-for="(director, i) in data.vod_director"
							:key="i">{{director}}</text>
					</view>
				</view>
				<view class="video-intro-item row">
					<text class="item-title">演员：</text>
					<view class="item-value row_s">
						<text class="intro-value" space="ensp">{{vod_actor}}</text>
					</view>
				</view>
				<view class="video-intro-item row">
					<text class="item-title">简介：</text>
					<view class="item-value row">
						<text class="intro-value">
							{{data.vod_content}}
						</text>
					</view>
				</view>
			</view>

			<view class="video-like row_s">
				<text class="video-like-title">猜您喜欢</text>
			</view>

			<!-- 列表 -->
			<view class="vod-container row_s">
				<view class="v-box col ree" v-for="(item,index) of list" :key="index" @click="videoSelected(item)">
					<!-- <image :src="item.vod_pic||'@/static/logo/144x144.png'" mode="aspectFill" class="v-img"> -->
						<vod-image :src="item.vod_pic" class=" v-img" />
						<view v-if="item.is_hot === 1" class="vod-tag-hot abe-t-l row_c">
							<text class="hot-text">HOT</text>
						</view>
						
						<view v-if="item.type_id_1 == 1 && item.is_hd === 1" class="vod-tag-hd abe-t-r row_c">
							<text class="hd-text">高清</text>
						</view>
						
						<view v-if="item.type_id_1 == 1" class="vod-tag-score abe-b-r row_c">
							<text class="score-text">{{item.vod_score}}</text>
						</view>
					</image>
					<view class="v-name">
						<text class="v-name-t nowarp">{{item.vod_name}}</text>
					</view>
				</view>
			</view>
		</view>
		
		<episodes :isShow='status' :limpidIndex='limpidIndex' :list='limpidList' @click='selectEpisodes' @close='status=false'></episodes>
	</scroll-view>
</template>

<script>
	import episodes from './episodes.vue'
	import vodImage from '@/components/vod-image.vue'
	export default {
		components: {
			episodes,
			vodImage
		},
		props: {
			topheight: {
				type: String,
				default: '500px'
			},
			id: {
				type: Number,
				default: 0
			},
			adv: {
			  type: Object,
			  default: {}
			},
		},
		computed: {
			vod_actor() {
				if (!this.data.vod_actor) {
					return ''
				};
				return this.data.vod_actor.join(' ');
			}
		},
		data() {
			return {
				episodesScroll: 0,
				banner: '',
				status: false, 
				introShow: false,
				data: {},
				souceList: [],
				souceIndex: 0,
				limpidList: [],
				limpidIndex: 0,
				list: []
			}
		},
		mounted() {
			// this.getVideoInfo();
		},
		methods: {
			triggerEpisodes(status) {
				this.status = status;
			},
			updateVideoInfo(data) {
				this.data = data;
				this.list = data.hot_list;
				this.souceList = data.vod_play_url,
				this.selectFrom(0)
			},
			videoSelected(item) {
				console.log(item)
				this.$emit('videoSelected', item);
			},
			selectFrom(index) {
				this.souceIndex = index;
				this.limpidIndex = 0;
				this.limpidList = this.souceList[index].list;
				this.$emit('playerIndexDidChange', index);
				// this.selectEpisodes(0)
			},
			setjiIndex(index) {
				this.limpidIndex = index;
			},
			selectEpisodes(index) {
				console.log("selectEpisodes: ",index);
				this.limpidIndex = index;
				this.$emit('videoEpisodesDidChange', index);
			},
			closeIntro() {
				this.introShow = false;
				this.$emit('closeIntro');
			},
			openIntro(){
				this.introShow = true
				this.$emit('openIntro');
			},
			dig(e) {
				if (this.data['is_'+e] === 1) {
				  this.data['is_'+e] = 0
				} else {
				  this.data['is_'+e] = 1
				}
			  this.$emit('dig', e)
			},
			openAD (url) {
				this.$emit('openAD', url)
			},
		}
	}
</script>

<style>
	@import "uni.scss";

	.video-name {
		width: 750rpx;
		padding: 0 30rpx;
		height: 100rpx;
	}

	.video-name-t {
		font-size: 38rpx;
		font-weight: bold;
		color: #000;
	}

	.video-describe {
		width: 750rpx;
		padding: 0 30rpx;
		height: 40rpx;
	}

	.video-describe-tag {
		padding: 10rpx;
		min-width: 20rpx;
		height: 38rpx;
		border-radius: 6rpx;
		background: #f1f1f1;
		margin-right: 10rpx;
	}

	.video-describe-tag-text {
		font-size: 24rpx;
		line-height: 33rpx;
		color: #333;
	}

	.video-statistics {
		width: 750rpx;
		padding: 0 30rpx;
		height: 80rpx;
	}

	.video-statistics-item {
		margin-right: 20rpx;
	}

	.like-text {
		font-size: 22rpx;
		color: #999;
	}

	.video-episodes-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #000;
	}
	
/* 	.soure-list {
		height: 80rpx;
	} */

	.soure-lists {
		margin-top: 10rpx;
		padding: 0 30rpx;
		width: 750rpx;
		height: 80rpx;
	}
	
	.soure-scroll {
		width: 500rpx;
		height: 80rpx;
		/* background-color: darkblue; */
	}

	.video-episodes {
		margin-right: 18rpx;
		width: auto;
		height: 48rpx;
	}

	.soure-text {
		font-size: 28rpx;
		font-weight: 400;
		
	}

	.green {
		border-bottom: 1px solid #33A379;
		color: #33A379;
		text-align: center;
		font-weight: bold;
	}

	.hui {
		color: #716a6e;
	}

	.limpid-green {
		color: #4fd87d;
		font-weight: bold;
	}

	.limpid-hui {
		color: #716a6e;
	}

	.soure-line {
		height: 4rpx;
		border-radius: 2rpx;
		width: 30rpx;
		background: #74d852;
		left: 45rpx;
	}

	.video-episodes-url {
		margin-right: 18rpx;
		/* width: 100rpx; */
		padding: 5px 10px;
		height: 100rpx;
		border-radius: 20rpx;
	}
	
	.limpid-box-act {
		background: rgba(83, 139, 66, 0.1);
	}

	.limpid-box-nor {
		background: #f1f1f1;
	}

	.limpid-text {
		font-size: 26rpx;
		font-weight: 600;
	}

	.vip-box {
		top: 10rpx;
		right: 0;
		border-radius: 0 6rpx 0 10rpx;
		height: 20rpx;
		width: 50rpx;
		background: red;
	}

	.vip-text {
		font-size: 20rpx;
		font-weight: bold;
		color: #fff;
	}

	.video-like {
		width: 750rpx;
		padding: 0 30rpx;
		height: 100rpx;
	}

	.video-like-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #000;
	}

	.video-comment-scroll {
		height: 100%;
		width: 750rpx;
	}

	.vod-container {
		width: 750rpx;
		padding: 0 24rpx;
		flex-wrap: wrap;
		/* height: max-content; */
	}

	.v-box {
		width: 200rpx;
		height: 360rpx;
		margin: 0 16rpx 0rpx;
	}

	.v-img {
		width: 200rpx;
		height: 300rpx;
		border-radius: 6rpx;
	}

	.v-name {
		margin-top: 5px;
		left: 0;
		width: 200rpx;
		height: 60rpx;
		line-height: 1.6;
	}

	.v-name-t {
		font-size: 13px;
		font-weight: 600;
		color: #333;
		lines: 1;
	}

	.vod-tag-hot {
		top: 5px;
		left: 5px;
		padding: 2px 4px;
		border-radius: 2px;
		background-image: linear-gradient(270deg,#f57a50,#f7ab2f);
	}
	
	.hot-text {
		font-size: 20rpx;
		color: #fff;
	}
	
	.vod-tag-hd {		
		border-radius: 2px;
		padding: 2px 4px;
		top: 5px;
		right: 5px;
		border-radius: 2px;
		background-image: linear-gradient(270deg,#fde39e,#fff3d4);
	}
	
	.hd-text {
		color: #421901;
		font-size: 9px;
	}
	
	.vod-tag-score {
		right: 8px;
		bottom: 70rpx;
		z-index: 99;
	}
	
	.score-text {
		font-size: 12px;
		color: #f57a50;
	}

	.list {
		width: 750rpx;
		padding: 0 30rpx;
	}

	.video-intro {
		padding: 0 30rpx;
		width: 750rpx;

	}

	.video-intro-item {
		margin-top: 10px;
		display: flex;

	}

	.item-title {
		width: 110rpx;
		font-size: 14px;
		font-weight: 700;
		color: #1a1a2a;
		line-height: 25px;
	}

	.item-value {
		width: 580rpx;
		flex-wrap: wrap;
		white-space: pre-wrap;

	}

	.intro-value {
		width: 580rpx;
		font-size: 14px;
		color: #888;
		line-height: 25px;
		margin-right: 6px;
		white-space: pre-wrap;
	}

	.video-episodes-button {
		width: 600rpx;
		height: 70rpx;
		line-height: 70rpx;
		margin: 20px 75rpx 0;
		text-align: center;
		font-size: 14px;
		color: #09a96a;
		border: 1px solid #09a96a;
		border-radius: 40rpx;
	}
	
	.video-episodes-button-text {
		text-align: center;
		font-size: 14px;
		color: #09a96a;
	}
	
	.ad-banner {
		padding:5px;
	}
	
	.banner-image {
		border-radius: 8px;
		width: 730rpx; 
	}
</style>
