<!-- 选择场次 -->

<template>
	<view class="content">
		<view class="main" v-if="tabTime.length > 0">
			<view class="main-desc">
				<!-- 背景 -->
				<view class="film-bg">
					<image :src="filmData.posterUrl"></image>
				</view>
				<!-- 轮播 -->
				<view class="film-banner">
					<FilmBanner :list="filmData.plotUrl" :height="316"></FilmBanner>
				</view>
				<!-- 定位 -->
				<view class="film-address" @click="openLocation()">
					<image src="https://img.agrimedia.cn/chwl%2Fv2%2Fdingwei%20bai.png"></image>
				</view>
				<view class="film-desc">
					<view class="title">{{filmData.movieName}}</view>
					<view class="desc">{{filmData.movieType}}    {{filmData.duration}}分钟</view>
				</view>
			</view>
			<view class="main-tab">
				<view class="main-tab-wrap">
					<u-sticky bgColor="#FFFFFF" v-if="tabTime">
						<u-tabs @click="clickTabs" activeStyle="color:#FC4B5C; font-size:28rpx; font-weight:600"
							inactiveStyle="color:#666666; font-size:28rpx;" lineColor="#FC4B5C" keyName="name"
							:current="0" :scrollable="true" :list="tabTime"></u-tabs>
					</u-sticky>
					<view class="main-tab-content">
						<div v-for="(item, index) in filmPlay" :key="item.showId">
							<view  v-for="(ite, ind) in item">
								<film-play :filmList="ite" :filmData="filmData" :cinemaData="cinemaData"></film-play>
							</view>
						</div>
					</view>
				</view>
			</view>
		</view>
		<view class="mains" v-else>
			<view class="film-list">
				<view class="film-left">
					<view class="film-name">
						{{cinemaData.cinemaName}}
					</view>
					<view class="film-address">
						{{cinemaData.cinemaAddress}}
					</view>
				</view>
				<view class="film-right" @click="openLocation()">
					<image src="https://img.agrimedia.cn/chwl%2Fv2%2Fdingwei%20hei.png" mode=""></image>
				</view>
			</view>
			<view class="no-film">
				<image src="https://img.agrimedia.cn/chwl%2Fv2%2Fwuchangci.png" mode=""></image>
				<view class="no-text">未查询到场次信息</view>
			</view>
		</view>
		
		<!-- 加载状态 -->
		<b-load :show="loading" width="79" height="80" background="rgba(0,0,0,0.3)" type="load"></b-load>
	</view>
</template>

<script>
import FilmPlay from '@/components/film-play/film-play.vue';
import FilmBanner from '@/components/film-swiper/film-banner.vue';
import { getFilmTime } from '@/request/film/index.js';
import film from '@/static/js/mixin/film.js';
export default {
	mixins: [film],
	components: {
		FilmPlay,
		FilmBanner
	},
	data() {
		return {
			loading: true,
			tabTime:[],
			active: 0,
			filmItem: [],
			cinemaData: {},  // 影院数据
			filmList: [], // 当前电影列表
			filmData: [],  // 单个电影数据
			dataList: [], // 所有电影数据
			filmPlay: []  // 当前日期数据
		}
	},
	onLoad(option) {
		this.cinemaData = JSON.parse(decodeURIComponent(option.cinemaData));  // 影院详情
		this.filmData = JSON.parse(decodeURIComponent(option.filmData));  // 电影数据
		this.filmData.plotUrl = this.filmData.plotUrl.split(',')  // 轮播
		
		// 获取场次
		this.getYuanData();
	},
	
	methods: {
		/**
		 * @获取场次列表
		 * */
		getYuanData() {
			const params = {
				cinemaId: this.cinemaData.cinemaId,
				movieId: this.filmData.movieId,
			}
			
			console.log(params)
			getFilmTime(params).then((res) => {
				this.filmList = res.data.data.showInfor;
				let brr = []
				Object.keys(this.filmList).forEach(key => {
					let obj = {}
					obj.name = key
					this.tabTime.push(obj)
					
					let arr = []
					arr.push(this.filmList[key])
					brr.push(arr)
				})
				
				this.dataList = brr
				this.filmPlay = brr[0]
				this.loading = false;
			});
		},
		clickTabs(e) {
			console.log(this.dataList[e.index])
			this.filmPlay = this.dataList[e.index]
		},
		lookesImg(index) {
			let photoList = this.list.map(item => {
				return item.thumb;
			});
			uni.previewImage({
				current: 0,
				urls: photoList.reverse()
			});
		}
	}
}
</script>


<style lang="scss">
page {
	background-color: #F5F5F5;
}
</style>
<style lang="scss" scoped>
	.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%;
			height: 512rpx;
			top: 0;
			left: 0;
			.film-bg {
				width: 100%;
				height: 512rpx;
				overflow: hidden;
				image {
					width: 100%;
					height: 100%;
					filter: blur(10rpx);
					transform: scale(1.2)
				}
			}
			.film-banner {
				position: absolute;
				left:0;
				right:0;
				top: 32px;
			}
			.film-address {
				position: absolute;
				top: 20rpx;
				right: 20rpx;
				image {
					width: 40rpx;
					height: 42rpx;
				}
			}
			.film-desc {
				position: absolute;
				left:0;
				right:0;
				bottom: 30rpx;
				.title {
					font-size: 32rpx;
					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;
					line-height: 32rpx;
					text-align: center;
					color: #e1dee3;
				}
				.tag > text {
					width: 100%;
					height: 28rpx;
					border: 2rpx solid #FFFFFF;
					margin-right: 10rpx;
				}
			}
			.film-tab {
				width: 100%;
				height: 50vh;
				background-color: #FFFFFF;
				border-radius: 40rpx 40rpx 0rpx 0rpx;
			}
		}
		.main-tab {
			width: 100%;
			background-color: #FFFFFF;
			/deep/ .uni-scroll-view::-webkit-scrollbar {  // 隐藏tab滚动条
				display:none !important;
			}
			.main-tab-wrap {
				.main-tab-content {
					padding: 20rpx 24rpx;
					box-sizing: border-box;
					.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: 200rpx;
					}
					.feature-photo {
						width: 100%;
						height: 400rpx;
						image {
							width: 100%;
							height: 400rpx;
						}
					}
				}
			}
		}
	}
	.mains {
		.film-list {
			width: 100%;
			margin-top: 10px;
			height: 60px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: #FFFFFF;
			padding: 0px 12px;
			.film-left {
				.film-name {
					font-size: 13px;
					font-family: PingFangSC-Semibold, PingFang SC;
					font-weight: 600;
					color: #333333;
					line-height: 19px;
					margin-bottom: 5px;
				}
				.film-address {
					font-size: 12px;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #666666;
					line-height: 16px;
				}
			}
			.film-right {
				width: 20px;
				height: 22px;
				image {
					width: 20px;
					height: 22px;
				}
			}
		}
		.no-film {
			text-align: center;
			margin-top: 100px;
			image {
				width: 262px;
				height: 262px;
				margin: 0 auto;
			}
			.no-text {
				font-size: 12px;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #666666;
				line-height: 16px;
			}
		}
	}
</style>