<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" @tap="showSortPicker">
                    <text :class="{active: showSort}">{{ selectedSort }}</text>
                    <text class="arrow" :class="{ 'arrow-up': showSort }">▼</text>
                </view>
            </view>
            <view class="filter-item-wrapper">
                <view class="filter-item" @tap="showDaysPicker">
                    <text :class="{active: showDays}">{{ selectedDays > 4 ? selectedDays + '天以上' : selectedDays < 5 ? selectedDays  + '天' : selectedDays}}</text>
                    <text class="arrow" :class="{ 'arrow-up': showDays }">▼</text>
                </view>
            </view>
            <view class="filter-item-wrapper">
                <view class="filter-item" @tap="showThemePicker">
                    <text :class="{active: showTheme}">{{ selectedTheme }}</text>
                    <text class="arrow" :class="{ 'arrow-up': showTheme }">▼</text>
                </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.name }}</text>
			        </view>
			    </view>
			    <!-- 行程天天下拉菜单 -->
			    <view class="dropdown-menu" v-if="showDays">
			        <view class="dropdown-item" :class="{selected: selectedDays===item}" v-for="(item, index) in daysOptions" :key="index" @tap="selectDays(item)">
			            <text>{{ item > 4 ? item + '天以上' : 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.name }}</text>
			        </view>
			    </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-card" v-for="(item, index) in attractionsList" :key="index" @click="goToDetail(item)">
                <view class="card-image">
                    <image :src="item.photo" mode="aspectFill" style="width: 100%; height: 400rpx;"></image>
                    <view class="card-title">{{ item.name }}</view>
                    <view class="card-info">
                        <view class="info-item">
                            <image class="info-icon" src="https://api.ccttiot.com/smartmeter/img/static/uaXZbuu10macCqUHCY5o" mode=""></image>
                            <text>{{ item.spotNum }}个景点</text>
                        </view>
                        <view class="info-item">
                           <image class="info-icon" src="https://api.ccttiot.com/smartmeter/img/static/utR3KxdGuUgrdvIIv2bU" mode=""></image>
                            <text>约{{ item.duration }}小时</text>
                        </view>
                        <view class="info-item">
                            <image class="info-icon" src="https://api.ccttiot.com/smartmeter/img/static/uSCX0XFEULmiznMgSO2e" mode=""></image>
                            <text>{{ item.distance == null ? '--' : item.distance }}公里</text>
                        </view>
                    </view>
                </view>
            </view>
			<view class="" style="margin-top: 30rpx;text-align: center;color: #ccc;width: 100%;">
				当前没有更多攻略了...
			</view>
        </scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
                bgc: {
                	backgroundColor: "#fff",
                },
                searchKeyword: '',
                showSort: false,
                showDays: false,
                showTheme: false,
                // 选中项显示
                selectedSort: '智能排序',
				selectedSortvalue:'',
                selectedDays: '行程天数',
                selectedTheme: '主题玩法',
				selectedThemeid:'',
                sortOptions: [{name:'智能排序',value:''},{name:'距离最近',value:'distance_asc'},{name:'评分最高',value:'rating_desc'},{name:'价格最低',value:'price_asc'}],
                daysOptions: ['1', '2', '3', '4', '5'],
                themeOptions: [{name:'自然风光',id:1},{name:'历史文化',id:2},{name:'美食体验',id:3},{name:'休闲娱乐',id:4},{name:'亲子游',id:5}],
                attractionsList: [],
				isRefreshing:false,
				pageNum:1,
				total:0,
				lat:'',
				lng:''
			}
		},
		onLoad() {
            this.getlist()
		},
		onShow() {
			// 页面显示时关闭所有下拉菜单
			this.closeAllDropdowns()
		},
		methods: {
			// 请求攻略列表
			getlist(){
				let url = ''
				let jingweidu = ''
				if(this.selectedDays < 5){
					url = `&dayNumber=${this.selectedDays}`
				}else if(this.selectedDays >= 1){
					url = `&minDayNumber=4`
				}else{
					url = ''
				}
				if(this.selectedSortvalue == 'distance_asc'){
					jingweidu = `currLat=${this.lat == null ? '' : this.lat}&currLon=${this.lng == null ? '' : this.lng}`
				}else{
					jingweidu = ''
				}
				this.$u.get(`/app/strategy/list?keyword=${this.searchKeyword}${url}&theme=${this.selectedThemeid}&pageNum${this.pageNum}&pageSize=20&sortBy=${this.selectedSortvalue}&${jingweidu}`).then((res) => {
					if(res.code == 200){
						this.total = res.total
						if(this.pageNum == 1){
							this.pageNum++
							this.attractionsList = res.rows
						}else{
							this.pageNum++
							this.attractionsList = this.attractionsList.concat(res.rows)
						}
					}
				})
			},
			// 上拉加载更多
			handqixing() {
				if(this.attractionsList.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() {
                if (this.showSort) {
                    this.showSort = false
                } else {
                    this.closeAllDropdowns()
                    this.showSort = true
                }
            },
			// 点击展示下拉菜单行程天数
            showDaysPicker() {
                if (this.showDays) {
                    this.showDays = false
                } else {
                    this.closeAllDropdowns()
                    this.showDays = true
                }
            },
			// 点击展示下拉菜单主题玩法
            showThemePicker() {
                if (this.showTheme) {
                    this.showTheme = false
                } else {
                    this.closeAllDropdowns()
                    this.showTheme = true
                }
            },
			// 点击隐藏下拉菜单
            closeAllDropdowns() {
                this.showSort = false
                this.showDays = false
                this.showTheme = false
            },
			// 点击选择排序
            selectSort(item) {
                this.selectedSort = item.name
				this.selectedSortvalue = item.value
                this.showSort = false
				if(this.selectedSortvalue == 'distance_asc'){
					uni.getLocation({
					    type: 'gcj02', // 国内地图更兼容
						isHighAccuracy: true,
						accuracy:'best',
					    success: (res) => {
					        console.log('精确坐标:', res)
					        this.lat = res.latitude
					        this.lng = res.longitude
							this.pageNum = 1
							this.getlist()
					    },
					    fail: (err) => {
					        console.error('获取位置失败:', err)
					        this.lat = ''
					        this.lng = ''
							this.pageNum = 1
							this.getlist()
					    }
					})
				}
            },
			// 点击选择行程天数
            selectDays(item) {
                this.selectedDays = item
                this.showDays = false
				this.pageNum = 1
				this.getlist()
            },
			// 点击选择主题
            selectTheme(item) {
                this.selectedTheme = item.name
				this.selectedThemeid = item.id
                this.showTheme = false
				this.pageNum = 1
				this.getlist()
            },
			// 跳转到详情页
            goToDetail(item) {
                uni.navigateTo({
                    url: '/page_fenbao/gonglue/gongluexq?id=' + item.id
                })
            }
		}
	}
</script>

<style lang="scss">
	page {
		background: #fff;
	}
	.page {
		background: #fff;
		min-height: 100vh;
	}
	// 搜索栏样式
	.search-container {
		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: relative; 
		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 0;
				font-size: 28rpx;
				color: #333;
				border-bottom: 2rpx solid transparent;
				transition: all 0.3s ease;
				.arrow {
					font-size: 20rpx;
					color: #999;
					transition: transform 0.3s ease;
					margin-left: 10rpx;
				}
				.arrow-up {
					transform: rotate(180deg);
				}
			}
		}
	}
	// 下拉菜单容器样式
	.dropdown-container {
		position: fixed;
		top: 366rpx; // 状态栏 + 搜索栏 + 筛选器的高度
		left: 0;
		background: #fff;
		border-radius: 0 0 20rpx 20rpx;
		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;
				}
			}
		}
	}
	// 景点列表样式
	.attractions-list {
		background: #fff;
		width: 750rpx;
		height: 73vh;
		overflow: scroll;
        margin-top: 30rpx;
		.attraction-card {
			margin: auto;
			margin-bottom: 30rpx;
			border-radius: 20rpx;
			overflow: hidden;
			box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
			background: #fff;
            width: 700rpx;
			.card-image {
				position: relative;
				height: 400rpx;
				image {
					width: 100%;
					height: 100%;
				}
				.card-title {
					position: absolute;
					top: 0;
					left: 0;
					color: #fff;
					font-size: 32rpx;
					font-weight: bold;
					width: 100%;
					padding: 30rpx;
					background: linear-gradient(rgba(0, 0, 0, 0.7) 20%,transparent);
				}
				.card-info {
					position: absolute;
					bottom: 0;
					left: 0;
					right: 0;
					background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
					padding: 60rpx 30rpx 30rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					.info-item {
						display: flex;
						align-items: center;
						gap: 8rpx;
						color: #fff;
						font-size: 24rpx;
						.info-icon {
							width: 32rpx;
							height: 32rpx;
						}
						text {
							font-size: 24rpx;
						}
					}
				}
			}
		}
	}

	// 遮罩层样式 - 只覆盖景点列表区域
	.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 {
			padding: 0 20rpx;
		}
	}
</style>