<!-- 电影简介 -->

<template>
	<view class="main">
		<view class="main-desc">
			<view class="main-blue"></view>
			<view class="film-banner">
				<image :src="data.plotUrl" ></image>
			</view>
			<view class="film-desc">
				<view class="title">{{data.movieName}}</view>
				<view class="desc">{{data.movieType}}{{data.duration}}分钟</view>
				<view class="time">{{data.publishDate}}上映</view>
				<view class="tag">
					<text>{{data.versionType}}</text>
					<text>{{data.movieType}}</text>	
				</view>
				<view class="score">{{data.grade}}</view>
				<view class="score-text">电影评分	</view>
			</view>
		</view>
		<view class="main-tab">
			<view class="main-tab-wrap">
				<!-- <u-sticky bgColor="#FFFFFF" >
					<u-tabs @click="clickTabs" activeStyle="color:#333333; font-size:28rpx; font-weight:600"
						inactiveStyle="color:#666666; font-size:28rpx;" lineColor="#333333" keyName="name"
						:current="0" :scrollable="false" :list="tabLsit"></u-tabs>
				</u-sticky> -->
				<view style="position: sticky;left: 0;top: 0;z-index: 99;background-color: #ffffff;">
					<u-tabs @click="clickTabs" activeStyle="color:#333333; font-size:28rpx; font-weight:600"
						inactiveStyle="color:#666666; font-size:28rpx;" lineColor="#333333" keyName="name"
						:current="0" :scrollable="false" :list="tabLsit"></u-tabs>
				</view>
				<view class="main-tab-content">
					<view v-show="NowActive === 0">
						<view class="content-desction">
							{{data.intro}}
						</view>
					</view>
					<view class="swiper-people" v-show="NowActive === 1">
						<u-scroll-list indicatorActiveColor="#FC5159">
						    <view v-for="(item, index) in data.producer.actors" :key="index">
								<view class="scroll-List">
									<view class="scroll-item">
										<image :src="item.avatar"></image>
										<view class="scroll-name">{{item.scName}}</view>
										<view class="scroll-sub">饰 {{item.actName}}</view>
									</view>
								</view>
						    </view>
						</u-scroll-list>
					</view>
					<view v-show="NowActive === 2" style="padding-bottom: 140rpx;">
						<view style="font-size: 0;" @click="lookesImg">
							<image v-for="item,index in directorList" :src="item"  mode="widthFix"></image>
						</view>
					</view>
					<view class="main-tab-btn">
						<view class="buyGate" @click="saleBuy">特惠购票</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			data: {},
			tabLsit:[
				{
					name:'简介'
				},
				{
					name:'演职人员'
				},
				{
					name:'剧情照'
				}
			],
			directorList: [],
			active: 0,
			NowActive: 0
		}
	},
	onLoad(option) {
		this.data = JSON.parse(decodeURIComponent(option.filmData))
		console.log(this.data,'接收数据');
		this.directorList = this.data.plotUrl.split(',')
		this.tabLsit[2].name = `剧情照(${this.directorList.length})`
		this.tabLsit[1].name = `演职人员(${this.data.producer.actors.length})`
	},
	methods: {
		clickTabs(e) {
			this.NowActive = e.index
		},
		// 预览剧照
		lookesImg(index) {
			// picinfo：图片对象
			console.log(this.directorList)
			let photoList = this.directorList.map(item => {
				return item;
			});
			uni.previewImage({
				current: 0,
				urls: photoList.reverse()
			});
		},
		// 购票跳转
		saleBuy() {
			uni.navigateTo({
				url: `../../pages/film/filmYuan?filmData=${encodeURIComponent(JSON.stringify(this.data))}`
			})
		}
	}
}
</script>

<style lang="scss">
	page {
		background-color: #F5F5F5;
	}
	.main {
		width: 100%;
		height: 100vh;
		/deep/ swiper-item {
			  width: 100%;
			  height: 200rpx !important;
		}
		
		/deep/ .u-sticky {
			// border-radius: 40rpx 40rpx 0rpx 0rpx !important;
			border-bottom: 2rpx solid #EDEDED;
		}
		
		/deep/ .u-tabs__wrapper__nav__line {
			bottom: 0rpx !important;
		}
		.main-desc {
			position: relative;
			width: 100%;
			top: 0;
			left: 0;
			.main-blue {
				position: absolute;
				width: 100%;
				height: 55vh;
				background-color: rgba(0, 0, 0, .4);
				z-index: 9;
			}
			.film-banner {
				width: 100%;
				height: 55vh;
				// image {
				// 	width: 100%;
				// 	height: 100%;
				// }
			}
			.film-desc {
				position: absolute;
				left:0;
				right:0;
				bottom: 40rpx;
				z-index: 99;
				.title {
					font-size: 40rpx;
					font-family: PingFangSC-Semibold, PingFang SC;
					font-weight: 600;
					color: #FFFFFF;
					line-height: 52rpx;
					text-align: center;
					margin-bottom: 10rpx;
				}
				.desc, .time, .tag {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #e1dee3;
					line-height: 32rpx;
					text-align: center;
					margin-top: 10rpx;
				}
				.tag > text {
					width: 100%;
					height: 28rpx;
					border: 2rpx solid #e1dee3;
					margin-right: 10rpx;
					padding: 0rpx 10rpx;
				}
				.score {
					font-size: 32rpx;
					font-family: Alibaba-PuHuiTi-B, Alibaba-PuHuiTi;
					font-weight: 600;
					color: #e1dee3;
					line-height: 40rpx;
					text-align: center;
					margin-top: 24rpx;
				}
				.score-text {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #e1dee3;
					line-height: 32rpx;
					text-align: center;
					margin-top: 12rpx;
				}
			}
			.film-tab {
				width: 100%;
				height: 50vh;
				background-color: #FFFFFF;
				border-radius: 40rpx 40rpx 0rpx 0rpx;
			}
		}
		.main-tab {
			width: 100%;
			height: 45vh;
			background-color: #FFFFFF;
			.main-tab-wrap {
				.main-tab-content {
					// height: calc(100vh - 55vh - 220rpx);
					padding: 20rpx 24rpx;
					box-sizing: border-box;
					// overflow: hidden;
					.content-desction {
						width: 100%;
						height: calc(100vh - 50vh - 220rpx);
						white-space: pre-wrap; 
						word-wrap: break-word;
						overflow: hidden;
						overflow-y: scroll;
						padding-bottom: 120rpx;
						font-size: 24rpx;
						font-family: PingFangSC-Semibold, PingFang SC;
						font-weight: 600;
						color: #666666;
						line-height: 34rpx;
					}
					
					// H5隐藏滚动条
					.swiper-people {
						/deep/ .uni-scroll-view::-webkit-scrollbar { width: 0 !important }
					}
					
					.scroll-List {
						.scroll-item {
							margin-right: 20rpx;
							image {
								width: 160rpx;
								height: 224rpx;
								border-radius: 10rpx;
							}
							.scroll-name {
								font-size: 26rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #333333;
								line-height: 40rpx;
								text-align: center;
								margin-top: 10rpx;
							}
							.scroll-sub {
								font-size: 24rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #666666;
								line-height: 32rpx;
								text-align: center;
							}
						}
					}
					.priver-image {
						width: 100%;
						height: 100px;
					}
					.feature-photo {
						width: 100%;
						height: 400rpx;
						image {
							width: 100%;
							height: 400rpx;
						}
					}
					.main-tab-btn {
						width: 100%;
						position: fixed;
						bottom: 40rpx;
						left: 0rpx;
						.buyGate {
							width: 90%;
							margin: 0 auto;
							height: 84rpx;
							background: linear-gradient(132deg, #FC5159 0%, #FF7700 100%);
							border-radius: 40rpx;
							color: #FFFFFF;
							text-align: center;
							line-height: 84rpx;
							font-size: 28rpx;
							box-sizing: border-box;
						}
					}
				}
				
			}
		}
	}
</style>