<template>
	<div class="wrapper" :style="'top:'+statusBarHeight+'px'">
		<div class="header">
			<view class="back_div">
				<image class="back_img" @click="back_city()" src="https://img.agrimedia.cn/chwl%2Fv2%2Fsearch.png" mode=""></image>
			</view>
			<view class="input-wrap">
				<input :class="inputActive? 'input':'input inputActive'" @input="onInput" :placeholder="type == 0? '搜索电影名':'搜索电影院'" v-model="searchValue" />
				<view class="cancel">
					<text v-show="searchValue" @click="searchValue = ''">清空</text>
					<text v-show="!searchValue" @click="cancels">取消</text>
				</view>
			</view>
		</div>
		<scroll-view class="calendar-list" scroll-y="true" :scroll-into-view="scrollIntoId">
			<!-- 搜索结果 -->
			<!-- 电影组件 -->
			<view class="city-div"  v-for="(item, index) in searchList" :key="index" v-if="type == 0">
				<film-item :data="item" :key="index"></film-item>
			</view>
			
			<!-- 影院组件 -->
			<view class="city-div"  v-for="(item, index) in searchList" :key="index" v-if="type == 1">
				<movies-item :data="item" :key="index" :isFilm='true'></movies-item>
			</view>
		</scroll-view>
	</div>
</template>

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

		data() {
			return {
				type: 0,
				
				statusBarHeight: this.statusBarHeight,
				ImgUrl: this.ImgUrl,
				letter: [],
				selectLetter: '',
				searchValue: '',
				scrollIntoId: '',
				list: [],
				tId: null,
				searchList: [],
				showMask: false,
				disdingwei: true,
				position: '',
				seconds: 3,
				citys:[],
				hotCity:[],
				inputActive: true,
				listYuan: []
			}
		},
		
		onLoad(option) {
			this.type = option.type;
		},
		
		computed: {
			...mapGetters({
				// 获取用户自主改变的地址
				UserArae1: 'GetUserArae',
				// 获取用户自主选择的电影城市信息
				UserFilmArae: 'GetFilmData',
				// 获取用户设备定位的地址
				UserArae2: 'GetcityInfor',
			}),
		},

		watch: {
			UserFilmArae(val) {
				this.getYuanData()
			},
		},
		
		created() {
			if (this.type == 0) {
				getFilmList().then(data=>{
					this.citys = data.data;
				})
			} else {
				this.getYuanData();
			}
		},
		
		methods: {
			...mapMutations({
				SETFILMDATA: 'SETFILMDATA',
			}),
			
			/**
			 * @获取电影院
			 * */
			getYuanData() {
				const params = {
					cityId: this.UserFilmArae.cityId,
					regionId: this.UserFilmArae.regionId
				}
				getFilmYuan(params).then((res) => {
					this.citys = res.data;
				});
			},
			
			getId(index) {
				return this.letter[index];
			},
			
			// 遍历搜索
			query(source, text) {
				let res = [];
				var self = this;
				let resultList = [];
				if (this.type == 0) {
					source.forEach((item) => {
						if (item.movieName.indexOf(text) > -1) {
					      resultList.push(item);
					    }
					});
				} else {
					source.forEach((item) => {
						if (item.cinemaName.indexOf(text) > -1) {
					      resultList.push(item);
					    }
					});
				}
				return resultList
			},

			cancels() {
				uni.navigateBack({
					delta: 1
				});
			},
			
			isString(obj) {
				return typeof obj === 'string';
			},

			onInput(e) {
					const value = e.target.value;
					if (value !== '' && this.citys && this.citys.length > 0) {
						const queryData = this.query(this.citys, String(value).trim());
						this.searchList = queryData;
						this.disdingwei = false;
						this.inputActive = false;
					} else {
						this.searchList = [];
						this.disdingwei = true;
						this.inputActive = true;
					}
				}
			},

			back_city(item, ind) {
				console.log(item, ind)
				if (item) {
					const FilmCity = {
						cityId: item.cityId,
						cityName: item.cityName
					}
					
					//unshift 把数据插入到首位，与push相反
					if(this.Visit  == null){
						this.Visit = []
					}

					this.Visit.unshift(FilmCity)
					this.searchValue = "";
					this.disdingwei = true
					var arr = this.Visit
					//数组去重
					function distinct(arr) {
						let newArr = []
						for (let i = 0; i < arr.length; i++) {
							if (newArr.indexOf(arr[i]) < 0) {
								newArr.push(arr[i])
							}
						}
						return newArr
					}
					this.Visit = distinct(arr)
					console.log(this.Visit, "---最近访问")
					uni.setStorage({
						key: 'Visit_key',
						data: this.Visit
					});

					this.SETFILMDATA(FilmCity);
					
					// 保存之后退页
					uni.navigateBack({
						delta: 1
					});
				}
			}
		}
</script>

<style lang="scss" scoped>
	.wrapper {
		position: fixed;
		z-index: 999999;
		background: #F5F5F5;
		height: 100%;
		width: 100%;
		top: 0px;
		left: 0px;
	}

	.mask {
		position: absolute;
		bottom: 0upx;
		top: 83upx;
		left: 0upx;
		right: 0upx;
		width: 750upx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: rgba(0, 0, 0, 0);
	}

	.mask-r {
		height: 120upx;
		width: 120upx;
		border-radius: 60upx;
		display: flex;
		background: rgba(0, 0, 0, 0.5);
		justify-content: center;
		align-items: center;
		font-size: 40upx;
		color: #FFFFFF
	}

	.content {
		height: 100%;
		width: 100%;
		background-color: #ffffff;
	}

	.header {
		height: 85upx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		display: flex;
		margin: 20rpx 0rpx;
	}

	.back_div {
		width: 35rpx;
		height: 35rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		top: 44rpx;
		left: 70rpx;
	}
	.input-wrap {
		width: 100%;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		padding: 0rpx 40rpx;
		.cancel {
			color: #666666;
			font-size: 28rpx;
			line-height: 88rpx;
			padding-left: 20rpx;
		}
	}
	.back_img {
		width: 35rpx;
		height: 35rpx;
	}
	.input {
		font-size: 24upx;
		height: 88rpx;
		line-height: 88rpx;
		border-radius: 44rpx;
		background-color: #EDEDED;
		padding-left: 20upx;
		padding-right: 20upx;
		box-sizing: border-box;
		text-align: left;
		margin: 0 auto;
		color: #333333;
		padding-left: 80rpx;
		flex: 1;
	}
	
	.inputActive {
		text-align: left !important;
	}

	.title {
		font-size: 30upx;
		color: white;
	}

	.show {
		left: 0;
		width: 100%;
		transition: left 0.3s ease;
	}

	.hide {
		left: 100%;
		width: 100%;
		transition: left 0.3s ease;
	}


	.title {
		font-size: 30upx;
		color: white;
	}

	.calendar-list {
		position: absolute;
		top: 120rpx;
		bottom: 0upx;
		width: 100%;
	}

	.letters {
		position: absolute;
		right: 30upx;
		bottom: 0px;
		width: 50upx;
		top: 260upx;
		color: #2f9bfe;
		text-align: center;
		font-size: 24upx;
	}

	.letters-item {
		margin-bottom: 5upx;
		color: #666666;
	}

	.letter-header {
		height: 45upx;
		font-size: 22upx;
		color: #333333;
		padding-left: 24upx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		/* background-color: #ebedef; */

	}

	.city-div {
		width: 100%;
		padding: 0rpx 20rpx 0rpx 20rpx;
		border-bottom-width: 0.5upx;
		border-bottom-color: #ebedef;
		border-bottom-style: solid;
		align-items: center;
		margin-right: 35upx;
		.regionName {
			width: 100%;
			padding: 20rpx 30rpx;
			margin: 0upx 24upx;
			align-items: center;
		}
	}

	.city {
		padding-left: 30upx;
		font-size: 24rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #333333;
		line-height: 34rpx;
	}

	.dingwei {
		width: 100%;
		padding-top: 25upx;
		box-sizing: border-box;
		margin-bottom: 26upx;
	}

	.dingwei_Tips {
		margin-left: 24upx;
		margin-bottom: 24upx;
		font-size: 24upx;
		color: #A5A5A5;
	}
	
	.dingwei_refresh {
		width: 44rpx;
		height: 44rpx;
	}
	.dingwei_city {
		width: 100%;
		padding-left: 55upx;
		padding-right: 70upx;
		box-sizing: border-box;
		display: flex;
	}

	.dingwei_city_one {
		width: 218rpx;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 24rpx;
		color: #333333;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #DEDEDE;
		border-radius: 44rpx;
		margin-right: 6rpx;
		display: inline-block;
		white-space: nowrap; 
		overflow: hidden;
		text-overflow:ellipsis;
		text-align: center;
		padding: 0rpx 20rpx;
	}

	.dingweis_div {
		display: flex;
		align-content: flex-end;
		align-items: center;
		font-size: 24upx;
		color: #FD5745;
	}

	.dingweis {
		width: 32upx;
		height: 32upx;
	}

	.dingwei_city_zuijin {
		display: flex;
		justify-content: flex-start;
	}

	.toright {
		margin-right: 25upx;
	}
</style>
