<template>
	<view class="content-movie">
		<view class="content-bg">
			<image src="https://cdn.uviewui.com/uview/goods/1.jpg"></image>
		</view>
		<view>
			<view class="film-header">
				<!-- 第一次获取肯定是获取不到的，主要是动态显示用户改变的地址 -->
				<navigator url="/pages/film/filmAddress" hover-class="none">
					<view class="film-city-name">
						<view class="film-city-text">{{UserFilmArae['cityName']?UserFilmArae['cityName']:UserArae2['city']}}</view>
						<image style="width: 35rpx;height: 30rpx;" class="img" src="https://img.agrimedia.cn/chwl/v2/xialajian%20bai.png"></image>
					</view>
				</navigator>
				<view class="film-title">{{filmDesc.movieName}}</view>
				<view class="film-search" @click="goSearchPage()">
					<image src="https://img.agrimedia.cn/chwl%2Fv2%2Fsousuo%20bai.png"></image>
				</view>
			</view>
			
			<view class="film">
				<!-- 影院组件 -->
				<view v-for="(item, index) in listYuan" :key="index">
					<movies-item :data="item" :key="index" :filmDesc="filmDesc"></movies-item>
				</view>
			</view>
			
			<!-- 加载状态 -->
			<b-load :show="loading" width="79" height="80" background="rgba(0,0,0,0.3)" type="load"></b-load>
		</view>
	</view>
</template>

<script>
import MoviesItem from '@/components/movies-item/movies-item.vue';
import { getFilmList, getFilmYuan } from '@/request/film/index.js';
import { mapGetters } from 'vuex';

export default {
	components: {
		MoviesItem
	},
	data() {
		return {
			filmDesc: {},  // 电影详情
			listYuan: [],  // 影院列表
			loading: true,
			active: 0,  // TAB
		}
	},
	
	onLoad(option) {
		this.filmDesc = JSON.parse(decodeURIComponent(option.filmData));
		this.getYuanData();
	},
	
	computed: {
		...mapGetters({
			// 获取用户自主选择的电影城市信息
			UserFilmArae: 'GetFilmData',
		}),
	},
	
	watch: {
		UserFilmArae(val) {
			this.getYuanData()
		},
	},
	
	methods: {
		/**
		 * @获取电影院
		 * */
		getYuanData() {
			const params = {
				cityId: this.UserFilmArae.cityId,
				movieId: this.filmDesc.movieId
			}
			getFilmYuan(params).then((res) => {
				this.listYuan = res.data;
				this.loading = false;  // 关闭加载
				this.$forceUpdate()
			});
		},
		
		/**
		 * @搜索电影
		 * */
		goSearchPage() {
			uni.navigateTo({
				url: "./filmSearch"
			})
		},
	}
}
</script>

<style lang="scss" scoped>
page {
	background-color: #F5F5F5;
}

.content-movie {
	position: relative;
	.content-bg {
		position: absolute;
		width: 90%;
		height: 84rpx;
		top: 0;
		left: 0;
		z-index: 99;
		image {
			width: 100%;
			height: 84rpx;
			filter: blur(10rpx);
			transform: scale(1.2);
		}
	}
}
	
.film-header {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0rpx 24rpx;
	height: 84rpx;
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 99;
	.film-city-name {
		display: flex;
		align-items: center;
		.film-city-text {
			width: 100rpx;
			white-space: nowrap;
			overflow: hidden;
			text-overflow:ellipsis;
			text-align: center;
			display: inline-block;
			color: #FFFFFF;
		}
		image {
			display: inline-block;
		}
	}
	.film-title {
		font-size: 30rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #FFFFFF;
		line-height: 40rpx;
		white-space: nowrap;
	    /*当文本溢出包含元素时，以省略号表示超出的文本*/
	    text-overflow: ellipsis;
	}
	.film-search {
		width: 100rpx;
		height: 40rpx;
		text-align: right;
		image {
			width: 40rpx;
			height: 40rpx;
		}
	}
}
.film {
	width: 100%;
	position: absolute;
	top: 84rpx;
	left: 0px;
	z-index: 999;
	.film-wrap {
		border-bottom: 1rpx solid #DEDEDE;
		/deep/ .u-tabs__wrapper__nav__line {
			bottom: 0rpx !important;
		}
		.mov {
			z-index: 999;
		}
	}
}
</style>