<template>
	<view class="search-page">
		<view class="header-wrap" :style="{ paddingTop: statusBarHeight + 'px' }">
			<view class="nav-bar" :style="{ height: navBarHeight + 'px' }">
				<text class="nav-title">&#8981; 团课搜索</text>
			</view>
			<view class="search-area">
				<view class="search-box">
					<text class="search-symbol">&#8981;</text>
					<input class="search-input" v-model="searchKeyword" placeholder="搜索课程名称、教练、场地..."
						placeholder-style="color: rgba(255,255,255,0.35);" @input="onSearchInput" />
					<text v-if="searchKeyword" class="clear-btn" @click="clearSearch">&#10005;</text>
				</view>

				<view class="date-range-row">
					<picker mode="date" :value="startDate" @change="onStartDateChange" :end="endDate || '2099-12-31'">
						<view class="date-range-item">
							<text class="range-label">开始</text>
							<text class="range-value" :class="{ placeholder: !startDate }">{{ startDate || '选择日期' }}</text>
						</view>
					</picker>
					<text class="range-sep">至</text>
					<picker mode="date" :value="endDate" @change="onEndDateChange" :start="startDate || '2020-01-01'">
						<view class="date-range-item">
							<text class="range-label">结束</text>
							<text class="range-value" :class="{ placeholder: !endDate }">{{ endDate || '选择日期' }}</text>
						</view>
					</picker>
					<text v-if="startDate || endDate" class="date-clear" @click="clearDateRange">&#10005;</text>
				</view>

				<view class="period-row">
					<view v-for="(period, idx) in periods" :key="idx" class="period-item"
						:class="{ active: currentPeriod === period.value }" @click="selectPeriod(period.value)">
						<text>{{ period.label }}</text>
					</view>
				</view>
			</view>
		</view>

		<view class="type-section">
				<view class="type-all-row">
					<view class="filter-tab" :class="{ active: currentFilter === 'all' }" @click="switchFilter('all')">全部</view>
				</view>
				<view class="type-grid" :class="{ expanded: typesExpanded }">
					<view v-for="(row, ri) in typeRows" :key="ri" class="type-row" :class="{ 'row-visible': isRowVisible(ri) }">
						<view v-for="(tab, ti) in row" :key="ti" class="filter-tab"
							:class="{ active: currentFilter === tab.value }" @click="selectType(tab)">
							{{ tab.label }}
						</view>
					</view>
				</view>
				<view v-if="typeRows.length > 1" class="type-expand-row">
					<text class="type-expand-btn" @click="typesExpanded = !typesExpanded">
						{{ typesExpanded ? '收起 ▲' : '展开更多 ▾' }}
					</text>
				</view>
			</view>

		<view class="sort-bar">
			<text class="result-count">共 {{ filteredCourses.length }} 个课程</text>
			<view class="sort-options">
				<text v-for="(sort, idx) in sortOptions" :key="idx" class="sort-item"
					:class="{ active: currentSort === sort.value }" @click="switchSort(sort.value)">
					{{ sort.label }}
				</text>
			</view>
		</view>

		<scroll-view class="course-list" scroll-y :style="{ height: 'calc(100vh - ' + totalHeaderHeight + 'px - 104px)' }">
			<view class="course-list-inner">
				<view v-for="(course, idx) in filteredCourses" :key="idx" class="course-item" @click="goToDetail(course)">
					<view class="course-card">
						<view class="course-cover">
							<view class="cover-skeleton" v-if="course.coverImage && !course.coverLoaded && !course.coverError"></view>
							<image v-if="course.coverImage" class="cover-img" :class="{ loaded: course.coverLoaded }" :src="course.coverImage" mode="aspectFill" @load="onCoverLoad(course)" @error="onCoverError(course)"></image>
							<text class="cover-text" v-if="(!course.coverImage || course.coverError) && course.typeName">{{ course.typeName.slice(0, 2) }}</text>
						</view>
						<view class="course-body">
							<view class="course-top">
								<text class="course-name">{{ course.courseName }}</text>
								<view class="course-tags">
									<text class="course-category">{{ course.category }}</text>
									<text class="course-difficulty" :class="'diff-' + course.difficultyLevel">{{ course.difficultyLabel }}</text>
								</view>
							</view>
							<view class="course-meta">
								<text class="course-date">{{ course.shortDate }}</text>
								<text class="course-time">{{ course.shortTime }} - {{ course.endShortTime }}</text>
								<text class="course-duration" v-if="course.duration">{{ course.duration }}</text>
							</view>
							<view class="course-meta">
								<text class="course-location">{{ course.location }}</text>
							</view>
							<view class="course-meta">
								<text class="course-capacity">已预约 {{ course.currentMembers }}/{{ course.maxMembers }}人</text>
							</view>
							<view class="course-labels" v-if="course.labels">
								<text v-for="(label, li) in course.labels" :key="li" class="course-label"
									:style="{ background: label.color + '1a', color: label.color }">{{ label.labelName }}</text>
							</view>
							<text class="course-price" :class="{ free: course.storedValueAmount === 0 }">
									{{ course.storedValueAmount > 0 ? '￥' + course.storedValueAmount + '/次' : '免费' }}
								</text>
								<view class="course-bottom">
									<button class="btn-book" :class="{ disabled: !course.canBook }" :disabled="!course.canBook"
										@click.stop="bookCourse(course)">
										{{ course.canBook ? '立即预约' : course.statusLabel }}
									</button>
								</view>
						</view>
					</view>
				</view>

			<view v-if="filteredCourses.length === 0" class="empty-state">
				<text class="empty-symbol">&#8857;</text>
				<text class="empty-text">暂无匹配的课程</text>
			</view>

				<view class="bottom-safe"></view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	const courseApi = require('../../api/course')
	const bookingApi = require('../../api/booking')
	const store = require('../../store/index')

	export default {
		data() {
			return {
				statusBarHeight: 0,
				navBarHeight: 44,
				totalHeaderHeight: 44,
				loading: true,
				searchKeyword: '', startDate: '', endDate: '',
				currentPeriod: 'all', currentFilter: 'all', currentSort: 'time',
				periods: [
					{ label: '全部', value: 'all' },
					{ label: '早晨', value: 'morning' },
					{ label: '上午', value: 'forenoon' },
					{ label: '下午', value: 'afternoon' },
					{ label: '晚间', value: 'evening' }
				],
				courseTypes: [],          // 从后端获取的团课类型列表
				typesExpanded: false,     // 类型列表是否展开
				visibleRowStart: 0,       // 折叠时显示的起始行索引
				COLS_PER_ROW: 4,          // 每行类型数量
				sortOptions: [
					{ label: '时间', value: 'time' },
					{ label: '难度', value: 'difficulty' },
					{ label: '热度', value: 'popular' }
				],
				courses: []
			}
		},
		onLoad() {
			const systemInfo = uni.getSystemInfoSync()
			const statusBarHeight = systemInfo.statusBarHeight || 20
			let navBarHeight = 44
			// #ifdef MP-WEIXIN
			const menuButton = uni.getMenuButtonBoundingClientRect()
			if (menuButton) {
				navBarHeight = (menuButton.top - statusBarHeight) * 2 + menuButton.height
			}
			// #endif
			this.statusBarHeight = statusBarHeight
			this.navBarHeight = navBarHeight
			this.totalHeaderHeight = statusBarHeight + navBarHeight
			this.loadCourses()
			this.loadTypes()
		},
		onPullDownRefresh() {
			Promise.all([this.loadCourses(), this.loadTypes()])
				.finally(() => { uni.stopPullDownRefresh() })
		},
		computed: {
			// 将类型列表按每行 COLS_PER_ROW 个拆分为二维数组
			typeRows() {
				const tabs = this.courseTypes.map(t => ({
					label: t.typeName,
					value: String(t.id)
				}))
				const rows = []
				for (let i = 0; i < tabs.length; i += this.COLS_PER_ROW) {
					rows.push(tabs.slice(i, i + this.COLS_PER_ROW))
				}
				return rows
			},
			filteredCourses() {
				let list = this.courses.map(c => {
					const bd = c.baseDifficulty || c.calculatedDifficulty || 5
					const st = c.startTime || ''
					const et = c.endTime || ''
					// 兼容 "2026-07-15T16:45:00" 和 "2026-07-15 16:45:00" 两种格式
					const dt = st ? new Date(st.replace(/ /, 'T')) : null
					const edt = et ? new Date(et.replace(/ /, 'T')) : null
					const hh = dt && !isNaN(dt) ? String(dt.getHours()).padStart(2, '0') : '--'
					const mm = dt && !isNaN(dt) ? String(dt.getMinutes()).padStart(2, '0') : '--'
					const md = dt && !isNaN(dt) ? String(dt.getMonth() + 1).padStart(2, '0') : '--'
					const dd = dt && !isNaN(dt) ? String(dt.getDate()).padStart(2, '0') : '--'
					const ehh = edt && !isNaN(edt) ? String(edt.getHours()).padStart(2, '0') : '--'
					const emm = edt && !isNaN(edt) ? String(edt.getMinutes()).padStart(2, '0') : '--'

					// 计算持续时间（分钟）
					let durationStr = ''
					if (dt && edt && !isNaN(dt) && !isNaN(edt)) {
						const diffMin = Math.round((edt - dt) / 60000)
						if (diffMin > 0) {
							const hours = Math.floor(diffMin / 60)
							const mins = diffMin % 60
							durationStr = hours > 0 ? hours + '小时' + (mins > 0 ? mins + '分钟' : '') : diffMin + '分钟'
						}
					}
					const statusStr = c.status != null ? Number(c.status) : 0
					const curMembers = c.currentMembers != null ? c.currentMembers : 0
					const maxMems = c.maxMembers != null ? c.maxMembers : 0
					const isFull = maxMems > 0 && curMembers >= maxMems

					let statusLabel = '正常'
					let canBook = statusStr === 0 && !isFull
					if (statusStr === 1) statusLabel = '已取消'
					else if (statusStr === 2) statusLabel = '已结束'
					else if (statusStr !== 0) statusLabel = '已关闭'
					if (!canBook && statusStr === 0 && isFull) statusLabel = '已约满'

					return {
						...c,
						currentMembers: curMembers,
						maxMembers: maxMems,
						isFull: isFull,
						canBook: canBook,
						difficultyLevel: bd <= 3 ? 'low' : bd <= 6 ? 'mid' : 'high',
						difficultyLabel: bd <= 3 ? '入门' : bd <= 6 ? '中等' : '困难',
						baseDifficulty: bd,
						shortDate: md + '-' + dd,
						shortTime: hh + ':' + mm,
						endShortTime: ehh + ':' + emm,
						duration: durationStr,
						period: dt && !isNaN(dt) ? (hh < 8 ? 'morning' : hh < 12 ? 'forenoon' : hh < 17 ? 'afternoon' : 'evening') : 'all',
						category: c.category || c.typeCategory || '',
						typeName: c.typeName || (c.typeInfo && c.typeInfo.typeName) || '',
						coachName: c.coachName || (c.typeInfo && c.typeInfo.coachName) || '',
						location: c.location || '',
						status: statusStr,
						statusLabel: statusLabel,
						storedValueAmount: c.storedValueAmount != null ? c.storedValueAmount : 0,
						labels: c.labels || [],
						coverImage: c.coverImage || ''
					}
				})
				if (this.searchKeyword) {
					const kw = this.searchKeyword.toLowerCase()
					list = list.filter(c =>
						(c.courseName || '').toLowerCase().includes(kw) ||
						(c.coachName || '').toLowerCase().includes(kw) ||
						(c.location || '').toLowerCase().includes(kw)
					)
				}
				if (this.currentFilter !== 'all') list = list.filter(c => String(c.courseType) === this.currentFilter)
				if (this.currentPeriod !== 'all') list = list.filter(c => c.period === this.currentPeriod)
				// 日期范围过滤：根据课程 startTime 的日期部分进行筛选
				if (this.startDate || this.endDate) {
					list = list.filter(c => {
						const courseDate = (c.startTime || '').substring(0, 10)
						if (!courseDate) return false
						if (this.startDate && courseDate < this.startDate) return false
						if (this.endDate && courseDate > this.endDate) return false
						return true
					})
				}
				if (this.currentSort === 'difficulty') list = [...list].sort((a, b) => a.baseDifficulty - b.baseDifficulty)
				else if (this.currentSort === 'popular') list = [...list].sort((a, b) => (b.currentMembers || 0) - (a.currentMembers || 0))
				else if (this.currentSort === 'time') {
					list = [...list].sort((a, b) => {
						const ta = a.startTime || ''
						const tb = b.startTime || ''
						return ta < tb ? -1 : ta > tb ? 1 : 0
					})
				}
				// 只显示可预约的团课
				list = list.filter(c => c.canBook)
				return list
			}
		},
		methods: {
			// 判断某行是否可见：展开时全部可见，折叠时只有 visibleRowStart 行可见
			isRowVisible(rowIndex) {
				if (this.typesExpanded) return true
				return rowIndex === this.visibleRowStart
			},
			async loadCourses() {
				this.loading = true
				try {
					const res = await courseApi.getCoursesByPage({ page: 0, size: 50 })
					// 兼容 PageResponse 格式 { content: [...], totalElements, ... } 或直接数组
					const list = Array.isArray(res) ? res : (res.content || [])
					this.courses = list
				} catch (e) {
					console.error('加载课程列表失败:', e)
				} finally {
					this.loading = false
				}
			},
			async loadTypes() {
				try {
					const types = await courseApi.getCourseTypes()
					// 按 id 排序
					this.courseTypes = (Array.isArray(types) ? types : []).sort((a, b) => (a.id || 0) - (b.id || 0))
				} catch (e) {
					console.error('加载课程类型失败:', e)
				}
			},
			onSearchInput() {},
			clearSearch() { this.searchKeyword = '' },
			onCoverLoad(course) { course.coverLoaded = true },
			onCoverError(course) { course.coverError = true },
			onStartDateChange(e) { this.startDate = e.detail.value },
			onEndDateChange(e) { this.endDate = e.detail.value },
			clearDateRange() { this.startDate = ''; this.endDate = '' },
			selectPeriod(value) { this.currentPeriod = value },
			switchFilter(value) { this.currentFilter = value },
			selectType(tab) {
				this.currentFilter = tab.value
				// 找到该类型所在的行索引，折叠到那一行
				const idx = this.typeRows.findIndex(row => row.some(t => t.value === tab.value))
				if (idx >= 0) this.visibleRowStart = idx
				this.typesExpanded = false
			},
			switchSort(value) { this.currentSort = value },
			goToDetail(course) { uni.navigateTo({ url: '/pages/course-detail/course-detail?id=' + course.id }) },
			async bookCourse(course) {
				if (!course.canBook) return
				const memberInfo = store.getMemberInfo()
				const memberId = memberInfo ? (memberInfo.memberId || memberInfo.id) : null
				if (!memberId) {
					uni.showToast({ title: '请先登录', icon: 'none' })
					return
				}
				uni.showLoading({ title: '预约中...' })
				try {
					await bookingApi.bookCourse({
						courseId: course.id,
						memberId: memberId
					})
					uni.hideLoading()
					uni.showToast({ title: '预约成功', icon: 'success' })
					// 跳转到「我的课程」页面
					setTimeout(() => { uni.switchTab({ url: '/pages/my-courses/my-courses' }) }, 1000)
				} catch (e) {
					uni.hideLoading()
					console.error('预约失败:', e)
					const msg = (e.data && e.data.message) || '预约失败，请重试'
					uni.showToast({ title: msg, icon: 'none' })
				}
			}
		}
	}
</script>

<style scoped>
	.search-page { min-height: 100vh; background: #F5F7FA; overflow-x: hidden; }
	.header-wrap { background: #1A1A1A; }
	.nav-bar { background: #1A1A1A; padding: 0 20px; display: flex; align-items: center; }
	.nav-title { font-size: 18px; font-weight: 700; color: #FFFFFF; }

	.search-area { background: #1A1A1A; padding: 18px 16px 20px; }
	.search-box { background: rgba(255,255,255,0.12); border-radius: 40px; padding: 0 16px; display: flex; align-items: center; height: 42px; margin-bottom: 14px; }
	.search-symbol { font-size: 15px; color: rgba(255,255,255,0.5); flex-shrink: 0; margin-right: 8px; }
	.search-input { flex: 1; font-size: 14px; color: #FFFFFF; height: 100%; }
	.clear-btn { font-size: 15px; color: rgba(255,255,255,0.5); padding: 4px; flex-shrink: 0; }

	.date-range-row { display: flex; align-items: center; margin-bottom: 14px; }
	.date-range-row picker { flex: 1; margin-right: 10px; }
	.date-range-item { background: rgba(255,255,255,0.1); border-radius: 12px; padding: 10px 14px; }
	.range-label { font-size: 11px; color: rgba(255,255,255,0.5); display: block; margin-bottom: 2px; }
	.range-value { font-size: 14px; font-weight: 600; color: #FFFFFF; }
	.range-value.placeholder { color: rgba(255,255,255,0.35); font-weight: 400; }
	.range-sep { color: rgba(255,255,255,0.5); font-size: 14px; flex-shrink: 0; margin-right: 10px; }
	.date-clear { font-size: 16px; color: rgba(255,255,255,0.4); padding: 8px; flex-shrink: 0; }

	.period-row { display: flex; }
	.period-item { flex: 1; text-align: center; padding: 7px 0; border-radius: 40px; font-size: 13px; color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.08); margin: 0 3px; }
	.period-item.active { background: #00E676; color: #1A1A1A; font-weight: 600; }

	.type-section { background: #FFFFFF; padding: 12px 16px 14px; border-bottom: 1px solid #EEEEEE; }
	.type-all-row { margin-bottom: 6px; }
	.type-grid { }
	.type-row {
		display: flex; flex-wrap: wrap;
		max-height: 0; opacity: 0;
		margin-bottom: 0; overflow: hidden;
		transition: max-height 0.25s ease, opacity 0.25s ease, margin-bottom 0.25s ease;
	}
	.type-row.row-visible { max-height: 100px; opacity: 1; margin-bottom: 6px; }
	.type-grid.expanded .type-row { max-height: 100px; opacity: 1; margin-bottom: 6px; }
	.filter-tab { display: inline-block; padding: 6px 16px; border-radius: 40px; font-size: 13px; color: #7A7E84; background: #F5F7FA; margin-right: 8px; margin-bottom: 6px; }
	.filter-tab.active { background: #00E676; color: #1A1A1A; font-weight: 600; }
	.type-expand-row { text-align: center; padding-top: 2px; }
	.type-expand-btn { font-size: 12px; color: #00C853; font-weight: 500; }

	.sort-bar { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; background: #FFFFFF; border-bottom: 1px solid #EEEEEE; }
	.result-count { font-size: 13px; color: #7A7E84; }
	.sort-options { display: flex; }
	.sort-item { font-size: 13px; color: #7A7E84; margin-right: 16px; }
	.sort-item.active { color: #00C853; font-weight: 600; }

	.course-list-inner { padding: 12px 16px 0; }
	.course-item { margin-bottom: 12px; border-radius: 20px; box-shadow: 0 4px 12px rgba(0,0,0,0.06); overflow: hidden; }
	.course-card { background: #FFFFFF; border-radius: 20px; padding: 14px; display: flex; }
	.course-cover { width: 72px; height: 72px; border-radius: 12px; background: rgba(0,230,118,0.12); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-right: 14px; overflow: hidden; position: relative; }
	.cover-skeleton { position: absolute; inset: 0; background: linear-gradient(90deg, #E8E8E8 25%, #F0F0F0 50%, #E8E8E8 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; z-index: 1; }
	@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
	.cover-img { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.3s; z-index: 0; }
	.cover-img.loaded { opacity: 1; z-index: 2; }
	.cover-text { font-size: 22px; font-weight: 700; color: #00C853; }
	.course-body { flex: 1; display: flex; flex-direction: column; min-width: 0; }
	.course-top { display: flex; justify-content: space-between; align-items: flex-start; }
	.course-name { font-size: 16px; font-weight: 700; color: #1E1E1E; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.course-tags { display: flex; flex-shrink: 0; margin-left: 6px; }
	.course-category { font-size: 11px; color: #00C853; background: rgba(0,230,118,0.12); padding: 1px 8px; border-radius: 20px; font-weight: 500; margin-right: 4px; }
	.course-difficulty { padding: 1px 8px; border-radius: 20px; font-size: 11px; font-weight: 600; }
	.diff-low { background: rgba(0,230,118,0.15); color: #00C853; }
	.diff-mid { background: rgba(255,165,2,0.15); color: #FFA502; }
	.diff-high { background: rgba(255,82,82,0.15); color: #FF5252; }
	.course-meta { display: flex; align-items: center; font-size: 12px; color: #7A7E84; margin-top: 4px; }
	.course-date { flex-shrink: 0; }
	.course-time { margin-left: 8px; }
	.course-duration { margin-left: 8px; color: #00C853; font-weight: 500; }
	.course-location { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.course-capacity { color: #7A7E84; }
	.course-labels { display: flex; flex-wrap: wrap; margin-top: 6px; }
	.course-label { font-size: 10px; padding: 1px 6px; border-radius: 10px; margin-right: 4px; margin-bottom: 2px; }
	.course-bottom { text-align: right; margin-top: 6px; }
	.course-price { font-size: 18px; font-weight: 700; color: #00C853; display: block; margin-top: 6px; }
	.course-price.free { color: #00C853; }
	.btn-book { background: #00E676; color: #1A1A1A; border: none; padding: 6px 16px; border-radius: 40px; font-weight: 700; font-size: 13px; line-height: 1.4; box-shadow: 0 2px 8px rgba(0,230,118,0.3); }
	.btn-book::after { border: none; }
	.btn-book.disabled { background: #E0E0E0; color: #BDBDBD; box-shadow: none; }

	.empty-state { display: flex; flex-direction: column; align-items: center; padding: 60px 0; }
	.empty-symbol { font-size: 40px; color: #BDBDBD; }
	.empty-text { font-size: 14px; color: #BDBDBD; }
	.bottom-safe { height: 30px; }
</style>
