<template>
	<view class="page">
		<u-navbar title="热门景区推荐" :border-bottom="false" :background="bgc" back-icon-color="#262B37" title-color='#262B37'
			title-size='36' height='36' id="navbar">
		</u-navbar>
        <!-- 搜索栏 -->
        <view class="search-container">
            <view class="search-bar">
				<image class="search-icon" src="https://api.ccttiot.com/smartmeter/img/static/uAO3fdmrrHTzqbVx9hYd" mode=""></image>
                <input class="search-input" placeholder="搜索景区、场馆" v-model="searchKeyword" />
            </view>
            <view class="search-btn" @tap="handleSearch">
                <text>搜索</text>
            </view>
        </view>
        <!-- 筛选器 -->
       <view class="filter-container">
            <view class="filter-item-wrapper">
                <view class="filter-item" :class="{ 'active-border': showSort }" @tap="showSortPicker">
                    <text :class="{active: showSort}">{{ selectedSort }}</text>
                    <text v-if="showSort" class="arrow arrow-active">▲</text>
                    <text v-else class="arrow">▼</text>
                </view>
            </view>
            <view class="filter-item-wrapper">
                <view class="filter-item" :class="{ 'active-border': showDays }" @tap="showDaysPicker">
                    <text :class="{active: showDays}">{{ selectedDays }}</text>
                    <text v-if="showDays" class="arrow arrow-active">▲</text>
                    <text v-else class="arrow">▼</text>
                </view>
            </view>
            <view class="filter-item-wrapper">
                <view class="filter-item" :class="{ 'active-border': showTheme }" @tap="showThemePicker">
                    <text :class="{active: showTheme}">{{ selectedTheme }}</text>
                    <text v-if="showTheme" class="arrow arrow-active">▲</text>
                    <text v-else class="arrow">▼</text>
                </view>
            </view>
        </view>
        <!-- 下拉菜单容器 -->
        <view class="dropdown-container" v-if="showSort || showDays || showTheme">
            <!-- 全部类型下拉菜单 -->
            <view class="dropdown-menu" v-if="showSort">
                <view class="dropdown-item" :class="{selected: selectedSort===item}" v-for="(item, index) in sortOptions" :key="index" @tap="selectSort(item)">
                    <text>{{ item }}</text>
                </view>
            </view>
            <!-- 位置区域下拉菜单 - 网格布局 -->
            <view class="dropdown-menu location-grid" v-if="showDays">
                <view class="dropdown-item-grid" :class="{selected: selectedDays===item, 'primary-selected': item==='全市区' && selectedDays==='位置区域'}" v-for="(item, index) in daysOptions" :key="index" @tap="selectDays(item)">
                    <text>{{ item }}</text>
                </view>
            </view>
            <!-- 门票价格下拉菜单 -->
            <view class="dropdown-menu" v-if="showTheme">
                <view class="dropdown-item" :class="{selected: selectedTheme===item}" v-for="(item, index) in themeOptions" :key="index" @tap="selectTheme(item)">
                    <text>{{ item }}</text>
                </view>
            </view>
        </view>
         <!-- 景点列表 -->
         <scroll-view class="attractions-list" @scrolltolower="handqixing" scroll-y refresher-enabled @refresherrefresh="onRefresh" :refresher-triggered="isRefreshing" refresher-default-style="black">
             <!-- 遮罩层，只覆盖景点列表区域 -->
             <view class="dropdown-mask" v-if="showSort || showDays || showTheme" @tap="closeAllDropdowns"></view>
             <view class="attraction-item" v-for="(item, index) in list" :key="index" @click="goToDetail(item)">
                 <image :src="getFirstImage(item.picture)" class="attraction-image" mode="aspectFill"></image>
                 <view class="attraction-info">
                     <view class="attraction-title">{{ item.name }}</view>
                    <!-- <view class="attraction-tags">
                         <view class="tag" v-for="(tag, tagIndex) in item.tags" :key="tagIndex">{{ tag }}</view>
                     </view> -->
                     <view class="attraction-time">开放时间: {{ item.startTime }} - {{item.endTime}}</view>
                     <view class="attraction-address">{{ item.address }}</view>
                     <view class="attraction-price">
                         <text class="price-text">门票</text> <text class="price-text"> <text style="color: #3d3d3d;font-size: 28rpx;font-weight: 600;">¥{{item.minTicketPrice == null ? '0.00' : item.minTicketPrice}}</text> 起</text>
                     </view>
                 </view>
             </view>
			 <view class="" style="width: 100%;text-align: center;color: #ccc;">
			 	当前没有更多推荐了...
			 </view>
         </scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
                bgc: {
                	backgroundColor: "#fff",
                },
                searchKeyword: '',
                showSort: false,
                showDays: false,
                showTheme: false,
                // 选中项显示
                selectedSort: '全部类型',
                selectedDays: '位置区域',
                selectedTheme: '门票价格',
                sortOptions: ['全部类型', '爬山', '玩水', '徒步'],
                daysOptions: ['全市区', '山前街道', '前岐镇', '硖门畲族乡', '太姥山镇', '龙安街道', '沙埕镇', '佳阳畲族乡', '嵛山镇', '贯岭镇', '店下镇', '叠石乡'],
                themeOptions: ['100-200', '200-500', '500-1000', '1000以上'],
				isRefreshing:false,
				list: [],
				pageNum:1,
				total:0,
			}
		},
		onLoad() {
            this.getlist()
		},
		onShow() {
			// 页面显示时关闭所有下拉菜单
			this.closeAllDropdowns();
		},
		methods: {
			// 获取第一张图片
			getFirstImage(pictureString) {
				if (!pictureString) return '';
				// 如果包含逗号，取第一张图片
				if (pictureString.includes(',')) {
					return pictureString.split(',')[0].trim();
				}
				return pictureString.trim();
			},
			// 请求攻略列表
			getlist(){
				this.$u.get(`/app/scenicArea/list?keyword=${this.searchKeyword}&pageNum=${this.pageNum}&pageSize=20`).then((res) => {
					if(res.code == 200){
						this.total = res.total
						if(this.pageNum == 1){
							this.pageNum++
							this.list = res.rows
						}else{
							this.pageNum++
							this.list = this.list.concat(res.rows)
						}
					}
				})
			},
			// 上拉加载更多
			handqixing() {
				if(this.list.length < this.total){
					this.getlist()
				}
				console.log(11)
			},
			// 下拉刷新列表
			onRefresh() {
				this.isRefreshing = true
				this.pageNum = 1
				this.getlist()
				setTimeout(() => {
					this.isRefreshing = false
				}, 1000)
			},
			// 点击搜索查询列表
			handleSearch() {
				this.pageNum = 1
			    this.getlist()
			},
			
            showSortPicker() {
                console.log('点击智能排序');
                // 如果当前已经打开，直接切换状态
                if (this.showSort) {
                    this.showSort = false;
                } else {
                    // 关闭其他下拉菜单，打开当前下拉菜单
                    this.closeAllDropdowns();
                    this.showSort = true;
                }
                console.log('showSort状态:', this.showSort);
            },
            showDaysPicker() {
                console.log('点击行程天数');
                // 如果当前已经打开，直接切换状态
                if (this.showDays) {
                    this.showDays = false;
                } else {
                    // 关闭其他下拉菜单，打开当前下拉菜单
                    this.closeAllDropdowns();
                    this.showDays = true;
                }
                console.log('showDays状态:', this.showDays);
            },
            showThemePicker() {
                console.log('点击主题玩法');
                // 如果当前已经打开，直接切换状态
                if (this.showTheme) {
                    this.showTheme = false;
                } else {
                    // 关闭其他下拉菜单，打开当前下拉菜单
                    this.closeAllDropdowns();
                    this.showTheme = true;
                }
                console.log('showTheme状态:', this.showTheme);
            },
            closeAllDropdowns() {
                this.showSort = false;
                this.showDays = false;
                this.showTheme = false;
            },
            selectSort(item) {
                console.log('选择排序:', item);
                this.selectedSort = item;
                this.showSort = false;
                // 这里可以添加排序逻辑
            },
            selectDays(item) {
                console.log('选择位置区域:', item);
                // 如果选择的是"全市区"，保持显示"位置区域"，否则显示选择的区域
                if (item === '全市区') {
                    this.selectedDays = '位置区域';
                } else {
                    this.selectedDays = item;
                }
                this.showDays = false;
                // 这里可以添加位置区域筛选逻辑
            },
            selectTheme(item) {
                console.log('选择主题:', item);
                this.selectedTheme = item;
                this.showTheme = false;
                // 这里可以添加主题筛选逻辑
            },
			// 跳转到详情页
            goToDetail(item) {
                uni.navigateTo({
                	url:'/page_fenbao/remenxq?id=' + item.id
                })
            }
		}
	}
</script>

<style lang="scss">
	page {
		background: #fff;
	}
	.page {
		background: #fff;
		min-height: 100vh;
	}
	// 搜索栏样式
	.search-container {
		position: fixed;
		top: 154rpx; // 状态栏高度
		left: 0;
		right: 0;
		display: flex;
		align-items: center;
		padding: 40rpx 30rpx;
		background: #fff;
		gap: 20rpx;
		z-index: 1002;
		.search-bar {
			flex: 1;
			display: flex;
			align-items: center;
			background: #f5f5f5;
			border-radius: 50rpx;
			padding: 16rpx 30rpx;
			gap: 20rpx;
			.search-icon {
				width: 32rpx;
				height: 32rpx;
			}
			.search-input {
				flex: 1;
				font-size: 28rpx;
				color: #333;
				border: none;
				background: transparent;
				outline: none;
				&::placeholder {
					color: #999;
				}
			}
		}
		.search-btn {
			color: #333;
			font-size: 32rpx;
			text-align: center;
			min-width: 120rpx;
		}
	}
	// 筛选器样式
	.filter-container {
		position: fixed;
		top: 300rpx; // 状态栏 + 搜索栏的高度
		left: 0;
		right: 0;
		display: flex;
		background: #fff;
		padding: 0 30rpx 20rpx;
		gap: 40rpx;
		z-index: 1002;
		box-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.1);
		.filter-item-wrapper {
			flex: 1;
			.filter-item {
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 10rpx 20rpx;
				font-size: 28rpx;
				color: #333;
				border: 2rpx solid transparent;
				border-radius: 4rpx;
				transition: all 0.3s ease;
				white-space: nowrap;
				overflow: hidden;
				// &.active-border {
				// 	border-color: #ff0000;
				// }
				text.active {
					color: #333;
				}
				.arrow {
					font-size: 20rpx;
					color: #999;
					margin-left: 10rpx;
				}
				.arrow-active {
					color: #a0aba0;
				}
			}
		}
	}
	// 下拉菜单容器样式
	.dropdown-container {
		position: fixed;
		top: 372rpx; // 状态栏 + 搜索栏 + 筛选器的高度
		left: 0;
		background: #fff;
		border-radius: 0 0 20rpx 20rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
		z-index: 1001;
		overflow: hidden;
        width: 100%;
		.dropdown-menu {
			width: 100%;
			.dropdown-item {
				padding: 30rpx 20rpx;
				font-size: 28rpx;
				color: #333;
				border-bottom: 1rpx solid #f0f0f0;
				transition: all 0.3s ease;
				background: #fff;
				position: relative;
				&:last-child {
					border-bottom: none;
				}
				&:active {
					background: #4db4fd;
					color: #fff;
				}
				&.selected {
					color: #4db4fd;
					font-weight: 600;
				}
			}
			&.location-grid {
				padding: 30rpx;
				.dropdown-item-grid {
					display: inline-block;
					width: calc(33.33% - 20rpx);
					margin: 10rpx;
					padding: 20rpx 10rpx;
					font-size: 26rpx;
					color: #666;
					text-align: center;
					border-radius: 8rpx;
					background: #f5f5f5;
					transition: all 0.3s ease;
					box-sizing: border-box;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					&.primary-selected {
						background: #e8e8e8;
						color: #fff;
					}
					&.selected:not(.primary-selected) {
						background: #e8e8e8;
						color: #333;
					}
					&:active {
						opacity: 0.8;
					}
				}
			}
		}
	}
 	// 景点列表样式
 	.attractions-list {
        background: #fff;
        height: 75vh;
        overflow: scroll;
		margin-top: 220rpx;
 		.attraction-item {
 			display: flex;
 			background: #fff;
 			border-radius: 10rpx;
 			margin-bottom: 30rpx;
 			// box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.1);
 			overflow: hidden;
 			padding: 20rpx;
 			.attraction-image {
 				width: 220rpx;
 				height: 220rpx;
 				border-radius: 10rpx;
 				margin-right: 20rpx;
 			}
 			.attraction-info {
 				flex: 1;
 				display: flex;
 				flex-direction: column;
 				justify-content: space-between;
 				.attraction-title {
 					font-weight: 600;
 					font-size: 40rpx;
 					color: #3D3D3D;
 					margin-bottom: 20rpx;
 				}
 				.attraction-tags {
 					display: flex;
 					gap: 10rpx;
 					margin-bottom: 20rpx;
 					.tag {
 						background: #E8FFFB;
 						color: #1EC28B;
 						font-size: 20rpx;
 						padding: 8rpx 16rpx;
 						border-radius: 20rpx;
 					}
 				}
 				.attraction-time {
 					font-size: 28rpx;
 					color: #666;
 					margin-bottom: 10rpx;
 				}
 				.attraction-address {
 					font-size: 28rpx;
 					color: #999;
 					line-height: 1.4;
 					margin-bottom: 20rpx;
 				}
 				.attraction-price {
 					width: 100%;
					display: flex;
					justify-content: space-between;
 					.price-text {
 						font-size: 22rpx;
 						color: #808080;
 					}
 				}
 			}
 		}
 	}
	// 遮罩层样式 - 只覆盖景点列表区域
	.dropdown-mask {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.3);
		z-index: 1;
	}
	// 响应式设计
	@media screen and (max-width: 750rpx) {
		.search-container {
			padding: 15rpx 20rpx;
		}
		.filter-container {
			padding: 0 20rpx 15rpx;
			gap: 20rpx;
		}
		.attractions-list {
		}
	}
</style>