<template>
	<view class="page">
		<scroll-view scroll-y class="page-scroll">
			<common-hero title="五四评优" :use-image-bg="true"></common-hero>

			<view class="section">
				<view class="section-head">
					<view>
						<view class="section-title">项目列表</view>
						<view class="section-subtitle">当前仅展示可申报项目</view>
					</view>
					<view class="refresh-btn" :class="{ 'refresh-btn--loading': loading }" @tap="loadData()">
						{{ loading ? '刷新中' : '刷新' }}
					</view>
				</view>

				<view v-if="loading" class="state-card">
					<view class="state-title">正在加载申报项目...</view>
					<view class="state-desc">请稍候，正在同步后台开放的申报配置。</view>
				</view>

				<view v-else-if="loadError" class="state-card state-card--error">
					<view class="state-title">加载失败</view>
					<view class="state-desc">{{ loadError }}</view>
					<view class="state-action" @tap="loadData()">重新加载</view>
				</view>

				<view v-else-if="!declareList.length" class="state-card">
					<view class="state-title">当前暂无可申报项目</view>
					<view class="state-desc">后台还没有开放可申报数据，稍后再来查看。</view>
				</view>

				<view v-else>
					<view class="filter-bar">
						<picker class="filter-item" mode="selector" :range="yearLabels" :value="yearIndex" @change="handleYearChange">
							<view class="filter-trigger">
								<text class="filter-text">{{ selectedYear ? `${selectedYear} 年` : '全部年份' }}</text>
								<text class="filter-arrow">▼</text>
							</view>
						</picker>
						<view class="filter-item" @tap="openModulePicker">
							<view class="filter-trigger">
								<text class="filter-text">{{ selectedModule ? getDeclareModuleLabel(selectedModule) : '全部模块' }}</text>
								<text class="filter-arrow">▼</text>
							</view>
						</view>
					</view>

					<view v-if="filteredDeclareList.length" class="declare-list">
						<view
							v-for="item in filteredDeclareList"
							:key="item.id || `${item.module}-${item.year}`"
							class="declare-card"
							:class="{ 'declare-card--disabled': !isModuleSupported(item.module) }"
							@tap="goApply(item)"
						>
							<view class="card-top">
								<view class="card-main">
									<view class="card-title">{{ getDeclareTitle(item) }}</view>
									<view class="card-subtitle">{{ getDeclareModuleLabel(item.module) }}</view>
								</view>
								<view
									class="card-status"
									:class="isModuleSupported(item.module) ? 'card-status--active' : 'card-status--disabled'"
								>
									{{ isModuleSupported(item.module) ? '可申报' : '待支持' }}
								</view>
							</view>

							<view class="card-year">
								{{ item.year ? `${item.year} 年` : '未设置年度' }}
							</view>

							<view class="card-desc">{{ getDeclareDescription(item.module) }}</view>

							<view class="card-meta">
								<view class="meta-row">
									<view class="meta-row-label">开始时间</view>
									<view class="meta-row-value">{{ formatDateTime(item.startTime) }}</view>
								</view>
								<view class="meta-row">
									<view class="meta-row-label">结束时间</view>
									<view class="meta-row-value">{{ formatDateTime(item.endTime) }}</view>
								</view>
							</view>

							<view class="card-footer">
								<view class="card-tag">{{ getDeclareGroup(item.module) }}</view>
								<view class="card-action">
									{{ isModuleSupported(item.module) ? '进入申报' : '暂未开放' }}
								</view>
							</view>
						</view>
					</view>
						<view v-else class="state-card">
							<view class="state-title">暂无匹配项目</view>
							<view class="state-desc">请调整年份或模块筛选条件后重试。</view>
						</view>
					</view>
			</view>
		</scroll-view>
		<uv-picker
			ref="modulePicker"
			title="选择模块"
			:columns="modulePickerColumns"
			:defaultIndex="[moduleIndex]"
			keyName="text"
			@close="noop"
			@cancel="noop"
			@confirm="confirmModulePicker"
		></uv-picker>
	</view>
</template>

<script>
	import CommonHero from '../../components/common-hero/common-hero.vue'
	import { getFormConfig, getModuleMeta } from '../../utils/gxmu/config'
	import { listDeclare } from '../../utils/gxmu/declare-service'

	export default {
		components: {
			CommonHero
		},
		data() {
			return {
				loading: false,
				loadError: '',
				declareList: [],
				selectedYear: '',
				selectedModule: ''
			}
		},
		computed: {
			supportedCount() {
				return this.declareList.filter((item) => this.isModuleSupported(item.module)).length
			},
			latestYear() {
				const year = this.declareList.reduce((result, item) => {
					const current = Number(item.year || 0)
					return current > result ? current : result
				}, 0)
				return year || new Date().getFullYear()
			},
			yearOptions() {
				const set = new Set(
					this.declareList
						.map((item) => String(item.year || '').trim())
						.filter(Boolean)
				)
				return [...set].sort((left, right) => Number(right) - Number(left))
			},
			moduleOptions() {
				const set = new Set(
					this.declareList
						.map((item) => String(item.module || '').trim())
						.filter(Boolean)
				)
				return [...set]
			},
			yearLabels() {
				return ['全部年份', ...this.yearOptions.map((item) => `${item} 年`)]
			},
			moduleLabels() {
				return ['全部模块', ...this.moduleOptions.map((item) => this.getDeclareModuleLabel(item))]
			},
			modulePickerColumns() {
				return [[
					{ text: '全部模块', value: '' },
					...this.moduleOptions.map((item) => ({
						text: this.getDeclareModuleLabel(item),
						value: item
					}))
				]]
			},
			yearIndex() {
				if (!this.selectedYear) {
					return 0
				}
				const index = this.yearOptions.findIndex((item) => item === this.selectedYear)
				return index > -1 ? index + 1 : 0
			},
			moduleIndex() {
				if (!this.selectedModule) {
					return 0
				}
				const index = this.moduleOptions.findIndex((item) => item === this.selectedModule)
				return index > -1 ? index + 1 : 0
			},
			filteredDeclareList() {
				return this.declareList.filter((item) => {
					const yearMatched = !this.selectedYear || String(item.year || '').trim() === this.selectedYear
					const moduleMatched = !this.selectedModule || String(item.module || '').trim() === this.selectedModule
					return yearMatched && moduleMatched
				})
			}
		},
		onLoad() {
			this.loadData()
		},
		onPullDownRefresh() {
			this.loadData(true)
		},
		methods: {
			showToast(title) {
				uni.showToast({
					title,
					icon: 'none'
				})
			},
			getModuleMetaSafe(code) {
				return getModuleMeta(code) || {
					title: code || '未命名模块',
					icon: (code || '申').slice(0, 1),
					group: '申报项目',
					desc: '当前申报项目已开放，点击可查看申报内容。'
				}
			},
			getDeclareTitle(item) {
				const title = String(item.title || '').trim()
				if (title) {
					return title
				}
				return this.getDeclareModuleLabel(item.module)
			},
			getDeclareModuleLabel(module) {
				return this.getModuleMetaSafe(module).title
			},
			getDeclareDescription(module) {
				return this.getModuleMetaSafe(module).desc
			},
			getDeclareGroup(module) {
				return this.getModuleMetaSafe(module).group
			},
			isModuleSupported(module) {
				return !!getFormConfig(module)
			},
			getTimestamp(value) {
				if (!value) {
					return 0
				}
				const result = new Date(String(value).replace(/-/g, '/')).getTime()
				return Number.isNaN(result) ? 0 : result
			},
			formatDateTime(value) {
				if (!value) {
					return '-'
				}
				const date = new Date(String(value).replace(/-/g, '/'))
				const pad = (item) => String(item).padStart(2, '0')
				return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`
			},
			handleYearChange(event) {
				const index = Number((event.detail && event.detail.value) || 0)
				this.selectedYear = index === 0 ? '' : (this.yearOptions[index - 1] || '')
			},
			handleModuleChange(event) {
				const index = Number((event.detail && event.detail.value) || 0)
				this.selectedModule = index === 0 ? '' : (this.moduleOptions[index - 1] || '')
			},
			openModulePicker() {
				this.$nextTick(() => {
					this.$refs.modulePicker && this.$refs.modulePicker.open()
				})
			},
			confirmModulePicker(event) {
				const value = (((event || {}).value || [])[0] || {}).value || ''
				this.selectedModule = value
			},
			noop() {
				return
			},
			syncFilterState() {
				if (this.selectedYear && !this.yearOptions.includes(this.selectedYear)) {
					this.selectedYear = ''
				}
				if (this.selectedModule && !this.moduleOptions.includes(this.selectedModule)) {
					this.selectedModule = ''
				}
			},
			async loadData(fromPullDown = false) {
				if (this.loading) {
					return
				}
				this.loading = true
				this.loadError = ''
				try {
					const result = await listDeclare({ usable: true })
					const list = Array.isArray(result) ? result : []
					this.declareList = [...list].sort((left, right) => {
						const yearDiff = Number(right.year || 0) - Number(left.year || 0)
						if (yearDiff !== 0) {
							return yearDiff
						}
						return this.getTimestamp(right.startTime || right.createTime) - this.getTimestamp(left.startTime || left.createTime)
					})
					this.syncFilterState()
				} catch (error) {
					this.loadError = (error && error.message) || '申报项目加载失败'
					this.showToast(this.loadError)
				} finally {
					this.loading = false
					if (fromPullDown) {
						uni.stopPullDownRefresh()
					}
				}
			},
			goApply(item) {
				if (!item.module) {
					this.showToast('当前申报项目缺少模块标识')
					return
				}
				if (!this.isModuleSupported(item.module)) {
					this.showToast('当前申报项目在小程序端暂未配置')
					return
				}
				const moduleRouteMap = {
					gxmu_tzbcy_form: '/pages/gxmu/tzbcy',
					gxmu_qmgc_form: '/pages/gxmu/qmgc',
					gxmu_wxxzx_project: '/pages/gxmu/wxxzx'
				}
				const moduleRoute = moduleRouteMap[item.module]
				if (moduleRoute) {
					const query = [
						`code=${encodeURIComponent(item.module)}`,
						`year=${encodeURIComponent(item.year || '')}`,
						`declareTitle=${encodeURIComponent(this.getDeclareTitle(item))}`,
						`id=${encodeURIComponent(item.id)}`
					]
					uni.navigateTo({
						url: `${moduleRoute}?${query.join('&')}`
					})
					return
				}
				const query = [
					`code=${encodeURIComponent(item.module)}`,
					`year=${encodeURIComponent(item.year || '')}`,
					`declareTitle=${encodeURIComponent(this.getDeclareTitle(item))}`
				]
				uni.navigateTo({
					url: `/pages/gxmu/form?${query.join('&')}`
				})
			},
			goStatsCenter() {
				uni.navigateTo({
					url: '/pages/gxmu/stats'
				})
			},
			goCrossSchoolBoard() {
				uni.navigateTo({
					url: '/pages/gxmu/cross-school-board'
				})
			},
			goTzbDatabase() {
				uni.navigateTo({
					url: '/pages/gxmu/tzb-database'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		min-height: 100vh;
		background:
			radial-gradient(circle at top left, rgba(20, 150, 242, 0.14), transparent 30%),
			linear-gradient(180deg, #f5fbff 0%, #eef7ff 100%);
	}

	.page-scroll {
		height: 100vh;
		padding: 28rpx 24rpx 40rpx;
	}

	.hero-card {
		padding: 34rpx 30rpx;
		border-radius: 32rpx;
		background: linear-gradient(145deg, #0d6fba 0%, #1496f2 56%, #5bc2ff 100%);
		box-shadow: 0 18rpx 44rpx rgba(20, 118, 194, 0.2);
		color: #f7fcff;
	}

	.hero-badge {
		display: inline-flex;
		padding: 10rpx 18rpx;
		border-radius: 999rpx;
		background: rgba(255, 255, 255, 0.16);
		font-size: 22rpx;
		letter-spacing: 1rpx;
	}

	.hero-title {
		margin-top: 22rpx;
		font-size: 42rpx;
		line-height: 1.35;
		font-weight: 700;
	}

	.hero-desc {
		margin-top: 16rpx;
		font-size: 25rpx;
		line-height: 1.7;
		color: rgba(255, 247, 244, 0.86);
	}

	.hero-meta {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 16rpx;
		margin-top: 28rpx;
	}

	.hero-actions {
		display: flex;
		flex-wrap: wrap;
		gap: 16rpx;
		margin-top: 22rpx;
	}

	.hero-action {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 16rpx 26rpx;
		border-radius: 999rpx;
		background: rgba(255, 255, 255, 0.18);
		font-size: 24rpx;
		font-weight: 600;
		color: #f7fcff;
	}

	.hero-action--secondary {
		background: rgba(13, 36, 61, 0.18);
	}

	.hero-action--tertiary {
		background: rgba(8, 74, 61, 0.24);
	}

	.meta-item {
		padding: 18rpx 16rpx;
		border-radius: 22rpx;
		background: rgba(255, 255, 255, 0.12);
	}

	.meta-value {
		font-size: 32rpx;
		font-weight: 700;
	}

	.meta-label {
		margin-top: 6rpx;
		font-size: 22rpx;
		color: rgba(255, 247, 244, 0.8);
	}

	.section {
		margin-top: 30rpx;
	}

	.section-head {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: 20rpx;
		padding: 0 6rpx;
	}

	.section-title {
		font-size: 34rpx;
		font-weight: 700;
		color: #1f2329;
	}

	.section-subtitle {
		margin-top: 8rpx;
		font-size: 22rpx;
		color: #8b827d;
	}

	.refresh-btn {
		flex-shrink: 0;
		padding: 12rpx 24rpx;
		border-radius: 999rpx;
		background: rgba(20, 150, 242, 0.08);
		color: #1496f2;
		font-size: 22rpx;
	}

	.refresh-btn--loading {
		opacity: 0.7;
	}

	.state-card {
		margin-top: 18rpx;
		padding: 30rpx 26rpx;
		border-radius: 28rpx;
		background: rgba(255, 255, 255, 0.9);
		border: 1rpx solid rgba(20, 150, 242, 0.08);
		box-shadow: 0 10rpx 28rpx rgba(34, 94, 142, 0.08);
	}

	.state-card--error {
		border-color: rgba(20, 150, 242, 0.18);
		background: rgba(240, 248, 255, 0.96);
	}

	.state-title {
		font-size: 30rpx;
		font-weight: 700;
		color: #1f2329;
	}

	.state-desc {
		margin-top: 12rpx;
		font-size: 24rpx;
		line-height: 1.7;
		color: #786e69;
	}

	.state-action {
		margin-top: 18rpx;
		font-size: 24rpx;
		font-weight: 600;
		color: #1496f2;
	}

	.filter-bar {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 14rpx;
		margin-top: 18rpx;
	}

	.filter-item {
		display: block;
	}

	.filter-trigger {
		display: flex;
		align-items: center;
		justify-content: space-between;
		min-height: 84rpx;
		padding: 0 20rpx;
		border-radius: 22rpx;
		background: rgba(255, 255, 255, 0.92);
		border: 1rpx solid rgba(21, 84, 173, 0.08);
		font-size: 24rpx;
		color: #1f2329;
		text-align: center;
	}

	.filter-text {
		flex: 1;
		min-width: 0;
		text-align: center;
	}

	.filter-arrow {
		flex-shrink: 0;
		margin-left: 12rpx;
		font-size: 20rpx;
		color: #7b8ba1;
	}

	.declare-list {
		display: flex;
		flex-direction: column;
		gap: 18rpx;
		margin-top: 18rpx;
	}

	.declare-card {
		padding: 26rpx;
		border-radius: 28rpx;
		background:
			linear-gradient(180deg, rgba(240, 247, 255, 0.95) 0%, #ffffff 44%),
			#ffffff;
		border: 1rpx solid rgba(21, 84, 173, 0.08);
		box-shadow: 0 10rpx 28rpx rgba(76, 49, 35, 0.08);
	}

	.declare-card--disabled {
		opacity: 0.72;
	}

	.card-top {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: 16rpx;
	}

	.card-main {
		flex: 1;
		min-width: 0;
	}

	.card-title {
		font-size: 31rpx;
		font-weight: 700;
		line-height: 1.45;
		color: #1f2329;
	}

	.card-subtitle {
		margin-top: 8rpx;
		font-size: 22rpx;
		line-height: 1.6;
		color: #5f6b7a;
	}

	.card-status {
		flex-shrink: 0;
		padding: 10rpx 16rpx;
		border-radius: 999rpx;
		font-size: 20rpx;
		font-weight: 600;
	}

	.card-status--active {
		background: #edf5ff;
		color: #1554ad;
	}

	.card-status--disabled {
		background: #f5f1ee;
		color: #8f837d;
	}

	.card-year {
		display: inline-flex;
		align-items: center;
		padding: 10rpx 18rpx;
		margin-top: 18rpx;
		border-radius: 999rpx;
		background: #eef5ff;
		color: #1554ad;
		font-size: 22rpx;
		font-weight: 600;
	}

	.card-desc {
		margin-top: 16rpx;
		font-size: 24rpx;
		line-height: 1.7;
		color: #716863;
	}

	.card-meta {
		display: flex;
		flex-direction: column;
		gap: 12rpx;
		margin-top: 18rpx;
	}

	.meta-row {
		padding: 18rpx 20rpx;
		border-radius: 22rpx;
		background: rgba(246, 248, 250, 0.92);
	}

	.meta-row-label {
		font-size: 20rpx;
		color: #8b827d;
	}

	.meta-row-value {
		margin-top: 8rpx;
		font-size: 24rpx;
		line-height: 1.6;
		color: #1f2329;
		word-break: break-all;
	}

	.card-footer {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16rpx;
		margin-top: 22rpx;
	}

	.card-tag {
		padding: 10rpx 18rpx;
		border-radius: 999rpx;
		background: #f8f1ea;
		color: #8a5a22;
		font-size: 22rpx;
	}

	.card-action {
		font-size: 24rpx;
		font-weight: 600;
		color: #1496f2;
	}
</style>
