<!-- 选择场次 -->

<template>
	<view class="content">
		<view class="main">
			<view class="main-address">
				<!-- 影院 -->
				<view class="title">
					<view class="name">{{cinemaData.cinemaName}}</view>
					<view class="address">{{cinemaData.cinemaAddress}}</view>
				</view>
				<!-- 定位 -->
				<view class="film-address" @click="openLocation()">
					<image src="https://img.agrimedia.cn/chwl%2Fv2%2Fdingwei%20hei.png"></image>
				</view>
			</view>
			<view class="main-desc">
				<!-- 背景 -->
				<view class="film-bg">
					<image :src="ActiveFilm.posterUrl"></image>
				</view>
				<!-- 轮播 -->
				<view class="film-banner">
					<FilmSwiper 
						:galleryheight="165" 
						bkstart="#000000" 
						bkend="#000000" 
						:imgviewwidth="100" 
						:imgviewheight="120" 
						:showbadge="true"
						badegtype="trian" 
						badegwidth="25" 
						badegheight="25" 
						:showdec="true" 
						:images="listFilm" 
						@clickimg="onclickimg"
						@scrollerItem="scrollerItem">
					</FilmSwiper>
				</view>
			</view>
			
			<!-- 选中电影的简介 -->
			<view class="film-desc"  v-if="ActiveFilm.grade">
				<view class="sanjiao"></view>
				<view class="title">
					<text class="name">{{ActiveFilm.movieName}}</text>
					<text class="score">{{ActiveFilm.grade}}分</text>
				</view>
				<view class="desc">
					{{ActiveFilm.duration}}分钟/{{ActiveFilm.movieType}}{{ActiveFilm.cast}}
				</view>
			</view>
			
			<!-- tab切换日期 -->
			<view class="main-tab" v-if="tabTime">
				<view class="main-tab-wrap">
					<u-sticky bgColor="#FFFFFF">
						<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="ActiveFilm" :cinemaData="cinemaData"></film-play>
							</view>
						</div>
					</view>
				</view>
			</view>
			
			<!-- 无场次 -->
			<view class="no-film" v-else>
				<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 FilmSwiper from '@/components/film-swiper/film-swiper.vue';
import { getFilmTime, getFilmList } from '@/request/film/index.js';
import film from '@/static/js/mixin/film.js';
import { mapMutations,mapGetters } from 'vuex';

export default {
	mixins: [film],
	components: {
		FilmPlay,
		FilmSwiper
	},
	data() {
		return {
			timer: null,
			loading: true,
			tabTime:[],
			active: 0,
			current: 0,
			CityMovies: 0,
			listTab:[
				{ name:'正在热映', type: 'HOT' },
				{ name:'即将上映', type: 'WAIT' }
			],
			methodDebounce: null,
			NowActive: 0,
			filmItem: [],
			listFilm: [],  // 电影数据
			ActiveFilm: {},  // 当前选择电影详情
			cinemaData: {},  // 影院数据
			filmList: [], // 当前电影列表
			dataList: [], // 所有电影数据
			filmPlay: []  // 当前日期数据
		}
	},
	
	onLoad(option) {
		this.SETBRANDINFOR({
			brand_id: 19,
			brand_name:'电影票'
		});
		// 延迟一秒确保wxapi已经挂载
		setTimeout(()=> {
			// 设置微信分享标识
			// wx.miniProgram.postMessage({ data: this['BrandInfor']['brand_id']});
			try{
				this.cinemaData = JSON.parse(decodeURIComponent(option.cinemaData));  // 影院详情
			}catch(e){
				console.log(option,'option--------');
				//TODO handle the exception
				this.cinemaData = {
					cinemaId:option['cinemaId'],
					cinemaAddress:option['cinemaAddress'],
					cinemaName:option['cinemaName'],
					longitude:option['longitude'],
					latitude:option['latitude']
				};  // 影院详情
			}
			this.getFilmData();
		}, 1000);
	},
	computed: {
		...mapGetters({
			// 获取品牌Id
			BrandInfor: 'shopping/BrandInfor',
		}),
	},
	
	methods: {
		...mapMutations({
			SETBRANDINFOR: 'shopping/SETBRANDINFOR'
		}),
		/**
		 * @获取场次列表
		 * */
		getYuanData() {
			this.tabTime = [];
			this.loading = true;
			const params = {
				cinemaId: this.cinemaData.cinemaId,
				movieId: this.ActiveFilm.movieId,
			};
			
			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 = this.ReverseRankingDate(brr[0], 'showTime');  // 时间排序
				this.loading = false;
			});
		},
		/**
		 * @获取电影列表
		 * */
		getFilmData() {
			this.loading = true;
			const params = {
				type: this.listTab[this.NowActive].type,
				cinemaId: this.cinemaData.cinemaId
			}
			getFilmList(params).then((res) => {
				let listData = res.data;
				
				this.listFilm = listData;
				this.ActiveFilm = listData[0];  // 选中第一个电影
				
				this.getYuanData()
				this.loading = false;
			});
		},
		
		// 点击轮播选中
		onclickimg(e) {
			this.ActiveFilm = e;
		},
		
		// 滚动轮播选中
		scrollerItem(e) {
			if (this.timer) return;
			setTimeout(() => {
				this.timer = null;
				this.ActiveFilm = e;
				this.getYuanData()
			}, 500, true)
		},
		
		clickTabs(e) {
			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-address {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx 20rpx;
			.film-address {
				image {
					width: 40rpx;
					height: 42rpx;
				}
			}
			.title {
				.name {
					font-weight: 900;
					color: #000;
					font-size: 30rpx;
				}
				.address {
					font-size: 28rpx;
					color: #666666;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					margin-top: 10rpx;
				}
			}
		}
		
		.main-desc {
			position: relative;
			width: 100%;
			height: 320rpx;
			top: 0;
			left: 0;
			.film-bg {
				width: 100%;
				height: 320rpx;
				overflow: hidden;
				image {
					width: 100%;
					height: 320rpx;
					filter: blur(10rpx);
					transform: scale(1.2)
				}
			}
			.film-banner {
				position: absolute;
				left:0;
				right:0;
				top: 0;
			}
		}
		
		
		.film-desc {
			width: 100%;
			background-color: #FFFFFF;
			text-align: center;
			color: #666666;
			display: flex;
			flex-direction: column;
			justify-content: center;
			padding: 20rpx 10rpx;
			box-sizing: border-box;
			margin-bottom: 20rpx;
			position: relative;
			.sanjiao {
				position: absolute;
				left:calc(50% - 15rpx);
				top: -15rpx;
				width: 0;
				height: 0;
				border-left: 15rpx solid transparent;
				border-right: 15rpx solid transparent;
				border-bottom: 15rpx solid #FFFFFF;
			}
			.title {
				.name {
					color: #000;
					font-size: 34rpx;
					font-weight: 900;
					padding-right: 6rpx;
				}
				.score {
					color: #FF6D04;
					font-size: 30rpx;
					font-weight: 600;
				}
			}
			.desc {
				font-size: 28rpx;
				color: #666666;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				margin-top: 10rpx;
			}
		}
		.film-tab {
			width: 100%;
			height: 50vh;
			background-color: #FFFFFF;
			border-radius: 40rpx 40rpx 0rpx 0rpx;
		}
		
		.main-tab {
			width: 100%;
			background-color: #FFFFFF;
			.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;
						}
					}
				}
			}
		}
		
		.no-film {
			text-align: center;
			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;
			}
		}
	}
	.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>