<template>
	<view class="container">
		<!-- <page-top-bar /> -->
		<view class="top-bar">
			<view class="row">
				<view class="column column1" @click="navTo(1,'/pages/home/home')">
					<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="row">
				<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="column">
					上海市 </view>
				<view class="column2">
					<image src="/static/images/arr.png" style="width: 10px; height: 10px;"></image>
				</view>
				<view class="column">类型</view>
				<view class="column2">
					<image src="/static/images/arr.png" style="width: 10px; height: 10px;"></image>
				</view>
			</view>
			<!-- <view class="selected" v-if="">
				城市
			</view> -->
		</view>
		<view class="section3" style="padding-bottom: 75px;">

			<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>
						<view class="time">{{ event.openTime }} - {{ event.closeTime }}</view>
						<view class="time_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)">
							<image src="/static/images/lijiyuyue.jpg" style="width: 89px;height: 25px;"></image>
						</view>


					</view>


				</view>

			</view>

		</view>

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

	const app = getApp();
	export default {


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


		data() {
			return {

				events: [], // 用于存储事件数据
				eventshot: [],
				eventstag: [],
				active: 0,
				tagId: 5,
				keyword: ''
			};
		},

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



		methods: {
			//搜索内容
			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) {
				this.tagId = item.id
				this.active = index
				this.fetchEventsData()
			},

			fetchEventsData() {
				let _this = this;
				_this.$http.request('events/searchEvents', {
					page: 1,
					pageSize: 10,
					tagId: _this.tagId,
				}).then(response => {
					console.log(response); // 先打印整个响应对象查看结构
					this.events = response.data;
					console.log(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: 5,


				}).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>