<template>
	<view>
	<!-- <scroll-view style="height:100%;" scroll-y="true"> -->
		<view class="video-scroll-view">
			<view v-if="data.vod_name" class="video-info">
				<view class="justify-between align-center">
					<view class="flex-row align-center video-info-title"  >
						<text class="video-name">{{data.vod_name}}</text>
						<view class="video-describe">
						<!-- 	<view class="video-describe-more" @click="triggerIntro(true)">简介<uni-icons type="forward"
									size="12"></uni-icons></view> -->
						</view>
					</view>
					
				</view>
				
				<view class="video-statistics">
					<view class="icons">
						<view class="video-statistics-item" @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>{{data.is_up === 1 ? data.vod_up : data.vod_up}}</text>
						</view>
						<view class="video-statistics-item" @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>{{data.is_down === 1 ? data.vod_down : data.vod_down}}</text>
						</view>
					</view>
					<view class="video-bar">
						<template>
							<uni-icons type="compose" size="24" color="#fff"
								@click="openUrl('/pages/feedback/feedback?type=1&vod_id=' + data.vod_id + '&vod_name=' + data.vod_name)"></uni-icons>
							<uni-icons :type="is_fav === 1 ? 'star-filled' : 'star'" size="24"
								:color="is_fav === 1 ? '#DA2538' : '#fff'"  @click="favVod"></uni-icons>
								<!-- #ifndef H5 -->
								<uni-icons type="download" size="24" color="#fff" @click="godownload"></uni-icons>
								<!-- #endif -->
							<uni-icons custom-prefix="xicon" color="#fff" type="x-icon-share" size="24" @click="Share"></uni-icons>
						</template>
					</view>
				</view>
				<u-popup :show="introShow" :round="10" @close="closeintro">
					<view class="video-intro">
						<scroll-view :scroll-top="episodesScroll" scroll-y>
							<view class="justify-between">
								<view class="video-name-info">{{data.vod_name}}</view>
								<uni-icons type="closeempty" size="20" @click="closeintro"></uni-icons>
							</view>
							<view class="video-describe">
								<u-tag bgColor="#f2f5fa" color="#1a1a1a" borderColor="#f2f5fa" :text="data.vod_year+'年'"
									size="mini" class="video-describe-tag" />
								<u-tag bgColor="#f2f5fa" color="#1a1a1a" borderColor="#f2f5fa"
									:text="data.vod_score+'分'" size="mini" class="video-describe-tag" />
								<u-tag v-if="data.type_name_1" bgColor="#f2f5fa" color="#1a1a1a" borderColor="#f2f5fa"
									:text="data.type_name_1" size="mini" class="video-describe-tag" />
								<u-tag v-if="i < 3" v-for="(tag, i) in data.vod_class" :key="i" bgColor="#f2f5fa"
									color="#1a1a1a" borderColor="#f2f5fa" :text="tag" size="mini"
									class="video-describe-tag" />
							</view>
							<view class="video-intro-item">
								<text class="item-title">导演：</text>
								<view class="item-value">
									<text v-for="(director, i) in data.vod_director" :key="i">{{director}}</text>
								</view>
							</view>
							<view class="video-intro-item">
								<text class="item-title">演员：</text>
								<view class="item-value">
									<text v-for="(actor, i) in data.vod_actor" :key="i">{{actor}}</text>
								</view>
							</view>
							<view class="video-intro-item">
								<text class="item-title">简介：</text>
								<text class="intro-value">
									{{data.vod_content}}
								</text>
							</view>
						</scroll-view>
					</view>
				</u-popup>

			</view>
			<template v-show="!introShow">
				<view class="video-episodes" >
					<!-- <view class="video-episodes-titlebox">
						<text class="video-episodes-title">播放源</text>
						<view v-if="data.vod_play_url.length > 1" class="video-episodes-from" @touchmove.stop>
							<u-tabs line-color="#DA2538" line-width="30" line-height="2" :item-style="{height: '40px'}"
								:active-style="{color: '#DA2538'}" :list="data.vod_play_url" :current="playIndex"
								@click="selectFrom"></u-tabs>
						</view>
					</view>
					<view v-for="(item, index) in data.vod_play_url" :key="index" v-if="playIndex === index"
						class="video-episodes-url" @touchmove.stop>
						<u-tabs :ref="'tabEpisodes'+index" :line-width="0" :line-height="0"
							:item-style="{height: '48px', padding: '0 5px'}"
							:inactive-style="{height: '48px', lineHeight: '48px', padding: '0 15px', background: '#f2f5fa', fontSize: '14px', color: '#000000', borderRadius: '4px'}"
							:active-style="{height: '48px', lineHeight: '48px', padding: '0 15px', background: '#DA2538', fontSize: '14px', fontWeight: '700', color: '#fff', borderRadius: '5px'}"
							:list="data.vod_play_url[index].list" :current="videoEpisodes"
							@click="selectEpisodes(index, $event)">
						</u-tabs>
						<view v-if="data.vod_play_url[index].list.length > 10" class="video-episodes-button"
							@click="triggerEpisodes(true)">查看全部</view>
					</view> -->
				</view>
				<view v-if="adv.banner_adv2" class="ad-banner" @click="openAD(adv.banner_adv2.adv_link)">
					<image :src="adv.banner_adv2.adv_image" mode="widthFix">
				</view>
				<view v-if="data.hot_list" class="video-like">
					<view class="video-like-titlebox">
						<text class="video-like-title">猜您喜欢</text>
						<!--<view class="video-like-more">
						  <text>查看更多</text>
						  <uni-icons type="forward" color="#60606c" size="16"></uni-icons>
						</view>-->
					</view>
					<view class="vod-container">
						<vod-item v-for="(vod, vodIndex) in data.hot_list" :key="vodIndex" :item="vod" />
					</view>
				</view>
			</template>
		</view>
	<!-- </scroll-view> -->
	</view>
</template>

<script>
	import vodItem from '@/components/vod-item-row.vue'

	export default {
		components: {
			vodItem
		},
		props: {
			introShow: {
				type: Boolean,
				default: false
			},
			videoEpisodes: {
				type: [Number, String],
				default: 0
			},
			data: {
				type: Object,
				default: ''
			},
			adv: {
				type: Object,
				default: {}
			},
			playIndex: {
				type: Number,
				default: 0
			},
			is_fav: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				episodesScroll: 0,
				banner: ''
			}
		},
		methods: {
			favVod() {
				this.$emit('favVod')
			},
			closeintro() {
				this.$emit('update:intro-show', false)
			},
			triggerEpisodes(status) {
				const tab = this.$refs['tabEpisodes' + this.playIndex][0]
				const scrollLeft = tab.scrollLeft
				tab.scrollLeft = 0
				this.$nextTick(() => {
					tab.scrollLeft = scrollLeft
				})
				this.$emit('episodes', status)
			},
			Share() {
				this.$emit('Share')
			},
			triggerIntro(status) {
				this.$emit('update:intro-show', status)
			},
			selectFrom(data) {
				this.$emit('update:play-index', data.index)
			},
			selectEpisodes(index, data) {
				this.$emit('update:video-episodes', data.index)
			},
			dig(e) {
				this.$emit('dig', e)
			},
			godownload(){
				this.$emit('download')
			}
		}
	}
</script>

<style lang="scss">
	.video-info {
		padding: 15px 15px 0;
		width: 100%;
		.video-info-title{
		
		}
		.video-bar {
			margin: 0 5px;
			position: relative;

			.uni-icons {
				margin: 0 8px;
			}
		}

		.video-name {
			font-size: 14px;
			font-weight: 700;
			color: #fff;
			// max-width: 540rpx;
			overflow: hidden;				
			text-overflow: ellipsis;		
			display: -webkit-box;		
			-webkit-line-clamp: 3;		
			-webkit-box-orient: vertical;	
		}

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

			.video-describe-tag {
				margin-right: 10px;
			}

			.video-describe-more {
				padding: 0 2px 0 5px;
				height: 22px;
				line-height: 22px;
				font-size: 12px;
				color: #999999;
				border-radius: 3px;
				// background-color: #f2f5fa;
			}
		}

		.video-statistics {
			margin-top: 10px;
			display: flex;
			width: 100%;
			justify-content: space-between;
			.icons{
				display: flex;
			}
			.video-statistics-item {
				margin-right: 5px;

				uni-text {
					margin-right: 5px;
					font-size: 13px;
					color: #b9bbbd;
				}
			}
		}

		.video-intro {
			margin-top: 20px;
			padding-bottom: 20px;
			padding-left: 20px;
			padding-right: 20px;

			.video-name-info {
				font-size: 20px;
				font-weight: 700;
				color: #1a1a2a;
			}

			uni-scroll-view {
				max-height: 380px;
			}

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

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

				.item-value {
					flex: 1 1 0%;

					uni-text {
						margin: 0 5px;
						font-size: 14px;
						color: #60606c;
						line-height: 25px;
					}
				}

				.intro-value {
					flex: 1 1 0%;
					margin: 0 5px;
					font-size: 14px;
					color: #60606c;
					line-height: 25px;
				}
			}
		}
	}

	.ad-banner {
		padding: 15px 15px 0;

		uni-image {
			width: 100%;
		}
	}

	.video-episodes {
		margin-top: 20px;

		.video-episodes-titlebox {
			height: 40px;
			margin: 0 15px;
			display: flex;
			align-items: center;

			.video-episodes-title {
				width: 70px;
				font-size: 17px;
				font-weight: 700;
				color: #1a1a2a;
			}

			.video-episodes-from {
				flex: 1 1 0%;
				overflow: hidden;
			}
		}

		.video-episodes-url {
			margin-top: 15px;
		}

		.video-episodes-button {
			height: 40px;
			line-height: 40px;
			margin: 20px 15px 0;
			text-align: center;
			font-size: 14px;
			color: #DA2538;
			border: 1px solid #DA2538;
			border-radius: 20px;
		}
	}

	.video-like {
		margin: 20px 15px 0;

		.video-like-titlebox {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.video-like-title {
				font-size: 17px;
				font-weight: 700;
				color: #fff;
			}

			.video-like-more {
				font-size: 14px;
				color: #60606c;
			}
		}

		.vod-container {
			padding: 15px 0;
		}
	}
</style>