<!-- 电影首页 -->

<template>
	<view class="film">
		<view class="film-header">
			<view class="film-city">
				<navigator url="/pages/film/filmAddress" hover-class="none">
					<view class="content-top-search-area-search-text">
						<!-- 第一次获取肯定是获取不到的，主要是动态显示用户改变的地址 -->
						<view class="film-city-name">
							<view class="film-city-text">{{UserFilmArae['regionName']? UserFilmArae['regionName'] : UserFilmArae['cityName'] ? UserFilmArae['cityName'] : UserArae2['city']}}</view>
							<image style="width: 35rpx;height: 30rpx;" class="img" src="https://img.agrimedia.cn/chwl%2Fv2%2Fxialajian%20hei.png"></image>
						</view>
					</view>
				</navigator>
			</view>
			
			<view class="film-tab">
				<view class="tab-main tab-left" :class="active === 0? 'tab-active':''" @click="changeTab(0)">
					电影
				</view>
				<view class="tab-main tab-right" :class="active === 1? 'tab-active':''" @click="changeTab(1)">
					影院
				</view>
			</view>
			<view class="film-search" @click="goSearchPage">
				<image src="https://img.agrimedia.cn/chwl%2Fv2%2Fsousuo%20hei.png"></image>
			</view>
		</view>
		
		<!-- 电影/影院 -->
		<view class="content">
			<view class="content-film" v-if="active === 0">
				<view class="film-banner">
					<image src="https://img.agrimedia.cn/chwl%2Fv2%2Fbanner.jpg"></image>
				</view>
				<view class="film-list">
					<view class="film-wrap">
						<u-sticky bgColor="">
							<u-tabs @click="clickTabs" activeStyle="color:#FC4B5C; font-size:28rpx; font-weight:600"
								inactiveStyle="color:#666666; font-size:28rpx;" lineColor="#FC4B5C" keyName="name"
								:current="current" :scrollable="false" :list="listTab"></u-tabs>
						</u-sticky>
					</view>
					<!-- 电影组件 -->
					<view v-for="(item, index) in listFilm" :key="index">
						<film-item :data="item" :key="index"></film-item>
					</view>
				</view>
			</view>
			<view class="content-movie" v-if="active === 1">
				<view class="content-movie-tab">
					<view class="content-movie-item">
						<view class="flex align-item-center flex-center">
							<text>全城</text>
							<image style="width: 35rpx;height: 30rpx;" class="img" src="https://img.agrimedia.cn/chwl%2Fv2%2Fxialajian%20hei.png" @click="getCityData()"></image>
						</view>
					</view>
				</view>
				<!-- 下拉选项 -->
				<view class="content-movie-select" v-show="citySelct">
					<view class="content-item"  @click="allCity()">
						<view class="content-title">全城</view>
						<view class="content-number">{{CityMovies}}</view>
					</view>
					<view class="content-item" v-for="(city, index) in cityData" :key="city.id" @click="clickCity(city)">
						<view class="content-title">{{city.regionName}}</view>
						<view class="content-number">{{city.cinema_num}}</view>
					</view>
				</view>
				<!-- 影院组件 -->
				<view v-for="(item, index) in listYuan" :key="index" v-if="listYuan">
					<movies-item :data="item" :key="index" :isFilm='true'></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 { getCityId, getFilmList, getFilmYuan } from '@/request/film/index.js';
import FileItem from '@/components/film-item/film-item.vue';
import MoviesItem from '@/components/movies-item/movies-item.vue';
import mixin from '@/static/js/mixin/mixin.js';
import film from '@/static/js/mixin/film.js';
import restaurantmixins from '@/static/js/mixin/restaurantmixins.js';
import { mapGetters, mapMutations } from 'vuex';

export default {
	name: "",
	mixins: [mixin, film, restaurantmixins],
	components: {
		FileItem,
		MoviesItem
	},
	data() {
		return {
			current: 0,
			CityMovies: 0,
			listTab:[
				{ name:'正在热映', type: 'HOT' },
				{ name:'即将上映', type: 'WAIT' }
			],
			listFilm: [],
			active: 0,
			NowActive: 0,
			citySelct: false,
			
			// 加载状态关闭
			loading: true,
			cityData: [],
			
			cityId: ""  ,// 当前城市名
			
			
		}
	},
	onLoad() {
		this.getCity()
		this.getFilmData()
		this.getYuanData()
	},
	computed: {
		...mapGetters({
			// 获取用户自主改变的地址
			UserArae1: 'GetUserArae',
			// 获取用户自主选择的电影城市信息
			UserFilmArae: 'GetFilmData',
			// 获取用户设备定位的地址
			UserArae2: 'GetcityInfor',
		}),
	},
	watch: {
		UserFilmArae(val) {
			this.getYuanData()
		},
	},
	methods: {
		...mapMutations({
			SETFILMDATA: 'SETFILMDATA',
		}),
		
		/**
		 * @获取城市ID
		 * */
		getCity() {
			this.loading = true;
			const params = {
				city_name: this.UserFilmArae.cityName
			}
			getCityId(params).then((res) => {
				let num = 0
				res.data.map(item => {
					num += item.cinema_num
				})
				
				this.CityMovies = num
				this.cityData = res.data;
				this.loading = false;
			});
		},

		/**
		 * @获取电影列表
		 * */
		getFilmData() {
			const params = {
				type: this.listTab[this.NowActive].type
			}
			getFilmList(params).then((res) => {
				let listData = res.data;
				
				// 上映排序
				if (params.type == 'WAIT') {
					listData = this.ReverseRankingDate(listData, 'publishDate')
				}
				
				this.listFilm = listData;
				this.loading = false;
			});
		},
		/**
		 * @获取电影院
		 * */
		getYuanData() {
			const params = {
				cityId: this.UserFilmArae.cityId,
				regionId: this.UserFilmArae.regionId
			}
			getFilmYuan(params).then((res) => {
				this.listYuan = res.data;
				this.$forceUpdate()
			});
		},
		
		// 选择全城
		allCity() {
			this.loading = true;
			const params = {
				cityId: this.UserFilmArae.cityId,  // 全城ID
			}
			getFilmYuan(params).then((res) => {
				this.listYuan = res.data;
				this.$forceUpdate();
				this.citySelct = false;
				this.loading = false;
				
			});
		},
		
		// 选择城市
		clickCity(city) {
			const FilmCity = {
				cityName: this.UserFilmArae.cityName,
				cityId: this.UserFilmArae.cityId,
				regionName: city.regionName,
				regionId: city.regionId
			}
			this.SETFILMDATA(FilmCity);
			this.citySelct = !this.citySelct;
		},
		
		// 下拉选择区域
		getCityData() {
			this.citySelct = !this.citySelct;
			if (this.citySelct) {
				this.getCity()  // 更新下拉
			}
		},
		
		// 影片类型
		clickTabs(e) {
			this.current = e.index;
			this.NowActive = e.index;
			this.loading = true;
			this.getFilmData();
		},
		
		// 搜索
		goSearchPage() {
			uni.navigateTo({
				url: `./filmSearch?type=${this.active}`  // 0 电影  1 影院
			})
		},
		
		// 电影or影院
		changeTab(index, isTop) {
			this.active = index;
		},
	}
}
</script>

<style lang="scss">
	page {
		background-color: #F5F5F5;
	}
	.film {
		.film-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx 24rpx;
			margin: 0rpx 0rpx;
			
			.film-city {
				width: 300rpx;
				font-size: 30rpx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #333333;
				line-height: 40rpx;
				display: flex;
				align-items: center;
				image {
					width: 24rpx;
					height: 24rpx;
					padding-left: 4rpx;
				}
				.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;
					}
					image {
						display: inline-block;
					}
				}
			}
			.film-tab {
				width: 288rpx;
				height: 66rpx;
				border-radius: 32rpx;
				border: 2rpx solid #FC4B5C;
				display: flex;
				align-items: center;
				box-sizing: border-box;
				.tab-main {
					width: 144rpx;
					height: 66rpx;
					font-size: 26rpx;
					font-family: PingFangSC-Semibold, PingFang SC;
					font-weight: 600;
					color: #FC4B5C;
					line-height: 66rpx;
					text-align: center;
				}
				.tab-left {
					border-radius: 32rpx 0rpx 0rpx 32rpx;
				}
				.tab-right {
					border-radius: 0rpx 32rpx 32rpx 0rpx;
				}
				.tab-active {
					color: #fff;
					background-color: #FC4B5C;
				}
			}
			.film-search {
				width: 300rpx;
				height: 40rpx;
				text-align: right;
				image {
					width: 40rpx;
					height: 40rpx;
				}
			}
		}
		
		.content {
			.content-film {
				.film-banner {
					width: 100%;
					height: 224rpx;
					padding: 0rpx 24rpx 24rpx 24rpx;
					image {
						width: 100%;
						height: 224rpx;
						border-radius: 20rpx;
					}
				}
				.film-list {
					padding: 24rpx;
					.film-wrap {
						margin-bottom: 20rpx;
						border-bottom: 1rpx solid #DEDEDE;
						/deep/ .u-tabs__wrapper__nav__line {
							bottom: 0px !important;
						}
					}
				}
			}
			.content-movie {
				width: 100%;
				background-color: #ffffff;
				position: relative;
				.content-movie-tab {
					display: flex;
					justify-content: space-between;
					align-items: center;
					border-radius: 20rpx 20rpx 0rpx 0rpx;
					color: #333333;
					font-size: 26rpx;
					border-bottom: 2rpx solid #DEDEDE;
					.content-movie-item {
						width: 100%;
						height: 80rpx;
						text-align: center;
						line-height: 80rpx;
						color: #333333;
						font-size: 26rpx;
						font-weight: 600;
					}
				}
				.content-movie-select {
					width: 100%;
					background-color: #FFF;
					position: absolute;
					top: 80rpx;
					.content-item {
						display: flex;
						justify-content: space-between;
						align-items: center;
						padding: 0rpx 40rpx;
						height: 80rpx;
						color: #000000;
						font-size: 28rpx;
					}
				}
			}
		}
	}
</style>