<template>
	<view class="container">
		<!-- <page-top-bar /> -->
		<view class="top-bar">
			<view class="row">
				<view class="column column1" @click="navTo(1,'/pages/theater/index/index')">
					<image src="@/static/images/backhome.png" style="width: 24px; height: 24px;"></image>
				</view>
				<view class="column column2"><input @input="KeyName" class="input-box" type="text" placeholder="搜索内容"
						style="width: 100%;" /></view>
				<view class="column column3">
					<image src="@/static/images/fangdajing.png" style="width: 21px; height: 21px;" @click="seachText">
					</image>
				</view>
				<view class="column column4"></view>
			</view>
		</view>
		<view class="banner">
			<swiper style="height: 240px;" indicator-dots="true" autoplay="true" interval="2000" duration="500">
				<swiper-item v-for="hot in eventshot" @click="onView(hot.id)">
					<image :src=hot.imgList[0] class="slide-image"></image>
				</swiper-item>
			</swiper>
		</view>

		<view class="section1">
			<view class="serow">
				<view class="column">
					<view class="cell" :class="active == 6?'active':''" @click="selActive('',6)">
						<view class="cl">
							<image :src="'/static/images/chart_alt6.png'" style="width: 24px; height: 24px;">
							</image>
						</view>
						<view class="cl">全部</view>
					</view>
				</view>
				<view class="column" v-for="(tag,index) in eventstag">
					<view class="cell" :class="active == index?'active':''" @click="selActive(tag,index)">
						<view class="cl">
							<image :src="'/static/images/chart_alt'+index+'.png'" style="width: 24px; height: 24px;">
							</image>
						</view>
						<view class="cl">{{tag.name}}</view>
					</view>
				</view>
			</view>
			<view class="full-row">
				<view class="rows" @click="showCity">
					<view class="column" style="min-width: 40px;">
						{{activeCity}}
					</view>
					<view class="column2">
						<image src="/static/images/arr.png" style="width: 10px; height: 10px;"></image>
					</view>
				</view>
				<view class="rows" @click="showType">
					<view class="column">类型</view>
					<view class="column2">
						<image src="/static/images/arr.png" style="width: 10px; height: 10px;"></image>
					</view>
				</view>

			</view>
			<view class="selected"  v-if="cityShow">
				<view class="textInfo"  @click="selCity('全国')">
					全国
				</view>
				<view class="textInfo" v-for="(item,index) in cityLists" :key='index' @click="selCity(item)">
					{{item.name}}
				</view>
			</view>
			<view class="selected" style="left: 16%;width: 80px;" v-if="typeShow">
				<view class="textInfo" :class="active == 6?'active':''"  @click="selActive('',6)">
					全部
				</view>
				<view class="textInfo" :class="active == index?'active':''" v-for="(item,index) in eventList"
					:key='index' @click="selActive(item,index)">
					{{item.name}}
				</view>
			</view>
		</view>
		<view class="section3" style="padding-bottom: 110px;">

			<view class="item" @click="onView(event.id)" v-for="event in events" :key="event.id">
				<view class="item_img">
					<img :src="event.imgList[0]"></img>
				</view>
				<view class="item_info">
					<view class="title"> {{ event.title }}</view>
					<view class="time_yuyue">
						<view class="ico">
							<image src="/static/images/time.png" style="width: 12px; height: 12px;"></image>
						</view>
						<!-- - {{ event.closeTime }} -->
						<view class="time">{{ event.openTime }} </view>
						<view class="adres_yuyue">
							<view class="ico">
								<image src="/static/images/daohang.png" style="width: 12px; height: 12px;"></image>
							</view>
							<view class="didian">{{ event.address }}</view>

						</view>
						<view class="yuyue_btn" @click="onView(event.id)" >
							<button type="default" style="background-color: white; font-size: 14px; height: 30px; line-height: 30px; color: #666; font-weight: bold;border: 1px solid  #666; border-radius: 8px; padding: 0px 4px;">立即预约</button>
						</view>


					</view>


				</view>

			</view>

		</view>

		<page-btm-bar :active="1" />
	</view>
</template>
<script>
	import {
		mapState,
		mapGetters,
		mapMutations
	} from 'vuex'

	const app = getApp();
	const data = require('@/static/city.json')
	export default {


		computed: {
			...mapState(['store_id', 'systemInfo'])
		},


		data() {
			return {

				events: [], // 用于存储事件数据
				eventshot: [],
				eventstag: [],
				active: 6,
				tagId: '',
				keyword: '',
				cityShow: false,
				cityLists: [],
				cities: data,
				activeCity: '全国',
				city: '',
				typeShow: false,
				eventList: [],
				total: null, //总共多少条数据
				formData: {
					pageSize: 10, //每页10条数据
					page: 1, //第几页
				}
			};
		},

		mounted() {
			this.fetchEventsData();
			this.fetchEventsHotData();
			this.fetchEventsTag();
		},

		onReachBottom() {
			let allTotal = this.formData.page * this.formData.pageSize
			if (allTotal < this.total) {
				//当前条数小于总条数 则增加请求页数
				this.formData.page++;
				this.fetchEventsData() //调用加载数据方法
			} else {
				// console.log('已加载全部数据')
			}
		},
		onPullDownRefresh() {
			this.events = []
			//调用获取数据方法
			this.getData()
			setTimeout(() => {
				//结束下拉刷新
				uni.stopPullDownRefresh();
			}, 1000);
		},

		methods: {
			showType() {
				let _this = this
				this.cityShow=false
				_this.$http.request('events/searchTags', {
					page: 1,
					pageSize: 50,
				}).then(response => {
					console.log(response); // 先打印整个响应对象查看结构
					this.eventList = response.data;
					this.typeShow = !this.typeShow
				}).catch(error => {
					console.error('数据获取失败:', error);
				});
			},
			selCity(item) {
				if(item=='全国'){
					this.activeCity=item
					this.city = ""
					this.cityShow = false
					this.fetchEventsData()
				}else{
					console.log(item);
					this.activeCity = item.name
					this.city = item.city
					this.cityShow = false
					this.fetchEventsData()
				}
				
			},
			showCity() {
				this.typeShow=false
				this.cityShow = !this.cityShow
			},
			navTo(index, url) {
				if (index != this.active) {
					uni.switchTab({
						url: url
					})
				}
			},
			//搜索内容
			seachText() {
				this.$http.request('events/searchEvents', {
					page: 1,
					pageSize: 10,
					keyword: this.keyword
				}).then(response => {
					this.events = response.data;
				}).catch(error => {
					console.error('数据获取失败:', error);
				});
			},
			KeyName(t) {
				this.keyword = t.detail.value;
			},
			//切换筛选条件
			selActive(item, index) {
				if(item==''){
					this.city=''
				}
				this.tagId = item.id
				this.active = index
				this.fetchEventsData()
				this.typeShow = false
			},

			fetchEventsData() {
				let _this = this;
				_this.formData.tagId = _this.tagId;
				_this.formData.city = _this.city;
				_this.$http.request('events/searchEvents', _this.formData).then(response => {
				    if (_this.cityLists.length === 0) {
				        response.data.forEach(item => {
				            _this.cities.forEach(el => {
				                if (item.province === el.code) {
				                    let obj = {
				                        name: el.name,
				                        city: item.city
				                    };
				                    // 检查是否已经存在相同的城市对象
				                    if (!_this.cityLists.some(city => city.city === obj.city)) {
				                        _this.cityLists.push(obj);
				                    }
				                }
				            });
				        });
				    }
				    console.log(_this.cityLists); // 先打印整个响应对象查看结构
				    _this.total = response.data.length;
				    _this.events = response.data;
				}).catch(error => {
				    console.error('数据获取失败:', error);
				});
			},

			fetchEventsHotData() {
				let _this = this;
				_this.$http.request('events/searchEvents', {
					page: 1,
					pageSize: 5,
					hot: 1,


				}).then(response => {
					console.log(response); // 先打印整个响应对象查看结构
					this.eventshot = response.data;
					console.log(response.data)
				}).catch(error => {
					console.error('数据获取失败:', error);
				});
			},
			fetchEventsTag() {
				let _this = this;
				_this.$http.request('events/searchTags', {
					page: 1,
					pageSize: 4,


				}).then(response => {
					console.log(response); // 先打印整个响应对象查看结构
					this.eventstag = response.data;
					console.log(response.data)
				}).catch(error => {
					console.error('数据获取失败:', error);
				});
			},


			onView(e) {
				console.log('传递的ID:', e);
				uni.navigateTo({
					url: '/pages/home/detail/detail?id=' + e,
				})
			},


		},



	}
</script>

<style lang="scss">
	@import "./index.scss"
</style>