<template>
	<view class="page">
		<scroll-view scroll-y class="page-scroll">
			<common-hero title="跨校活动情报看板" :use-image-bg="true"></common-hero>
			<view class="hero-panel">
				<view class="hero-copy">
					<view class="hero-kicker">跨校活动情报看板</view>
					<view class="hero-title">把兄弟高校的活动打法，整理成一眼可读的案例板</view>
					<view class="hero-desc">
						以信息流和案例卡片形式集中展示同类活动的公开线索，方便快速判断选题趋势、包装方式和传播动作。
					</view>
					<view class="hero-actions">
						<view class="hero-btn hero-btn--primary" @tap="quickFilter('高热')">本周热点</view>
						<view class="hero-btn" @tap="quickMatchPlanning">拟办活动对标</view>
					</view>
				</view>

				<view class="hero-stats">
					<view class="hero-stat hero-stat--primary">
						<view class="stat-label">案例总量</view>
						<view class="stat-value">{{ totalCount }}</view>
						<view class="stat-desc">当前静态示例数据</view>
					</view>
					<view class="hero-stat">
						<view class="stat-label">高热案例</view>
						<view class="stat-value">{{ highHeatCount }}</view>
						<view class="stat-desc">适合优先拆解传播路径</view>
					</view>
					<view class="hero-stat">
						<view class="stat-label">覆盖类型</view>
						<view class="stat-value">{{ categoryCount }}</view>
						<view class="stat-desc">品牌活动 / 实践 / 科创 / 文体</view>
					</view>
					<view class="hero-stat">
						<view class="stat-label">来源院校</view>
						<view class="stat-value">{{ schoolCount }}</view>
						<view class="stat-desc">按院校公开渠道聚合</view>
					</view>
				</view>
			</view>

			<view class="filter-panel">
				<view class="filter-group">
					<view class="filter-label">活动类型</view>
					<scroll-view scroll-x class="chip-scroll" show-scrollbar="false">
						<view class="chip-row">
							<view
								v-for="item in categoryOptions"
								:key="item"
								class="filter-chip"
								:class="{ 'filter-chip--active': selectedCategory === item }"
								@tap="selectedCategory = item"
							>
								{{ item }}
							</view>
						</view>
					</scroll-view>
				</view>

				<view class="filter-group">
					<view class="filter-label">热度等级</view>
					<scroll-view scroll-x class="chip-scroll" show-scrollbar="false">
						<view class="chip-row">
							<view
								v-for="item in heatOptions"
								:key="item"
								class="filter-chip"
								:class="{ 'filter-chip--active': selectedHeat === item }"
								@tap="selectedHeat = item"
							>
								{{ item }}
							</view>
						</view>
					</scroll-view>
				</view>

				<view class="search-box">
					<uv-input
						v-model.trim="keyword"
						class="search-input"
						placeholder="搜索标题、院校、标签"
						confirm-type="search"
						:maxlength="-1"
						border="none"
					/>
					<view v-if="keyword" class="search-clear" @tap="keyword = ''">清空</view>
				</view>
			</view>

			<view class="section-grid">
				<view class="stream-card">
					<view class="section-title">情报信息流</view>
					<view class="stream-list">
						<view
							v-for="item in streamItems"
							:key="item.id"
							class="stream-item"
						>
							<view class="stream-cover" :class="coverClassMap[item.id % coverClassMap.length]">
								<view class="stream-cover-category">{{ item.category }}</view>
								<view class="stream-cover-school">{{ item.school }}</view>
							</view>
							<view class="stream-content">
								<view class="stream-top">
									<view class="stream-title">{{ item.title }}</view>
									<view class="heat-tag" :class="heatClassMap[item.heat]">{{ item.heat }}</view>
								</view>
								<view class="stream-meta">{{ item.school }} · {{ item.source }} · {{ item.publishAt }}</view>
								<view class="stream-summary">{{ item.summary }}</view>
								<view class="tag-list">
									<view v-for="tag in item.tags" :key="tag" class="tag-chip">{{ tag }}</view>
								</view>
							</view>
						</view>
					</view>
				</view>

				<view class="signal-card">
					<view class="section-title">策略信号</view>
					<view class="signal-list">
						<view v-for="item in insightSignals" :key="item.title" class="signal-item">
							<view class="signal-title">{{ item.title }}</view>
							<view class="signal-desc">{{ item.desc }}</view>
						</view>
					</view>
					<view class="signal-divider"></view>
					<view class="section-title section-title--small">建议关注</view>
					<view class="watch-list">
						<view v-for="item in watchList" :key="item" class="watch-item">{{ item }}</view>
					</view>
				</view>
			</view>

			<view id="cases-section" class="cases-card">
				<view class="cases-head">
					<view class="section-title">案例卡片墙</view>
					<view class="case-count">共 {{ filteredCases.length }} 条</view>
				</view>

				<view v-if="filteredCases.length" class="cases-list">
					<view
						v-for="item in filteredCases"
						:key="item.id"
						class="case-card"
					>
						<view class="case-cover" :class="coverClassMap[item.id % coverClassMap.length]">
							<view class="case-school">{{ item.school }}</view>
							<view class="case-cover-badge">{{ item.highlight }}</view>
						</view>

						<view class="case-body">
							<view class="case-head">
								<view class="case-tag">{{ item.category }}</view>
								<view class="heat-tag" :class="heatClassMap[item.heat]">{{ item.heat }}</view>
							</view>
							<view class="case-title">{{ item.title }}</view>
							<view class="case-summary">{{ item.summary }}</view>
							<view class="case-info">来源：{{ item.source }}</view>
							<view class="case-info">发布时间：{{ item.publishAt }}</view>
							<view class="tag-list">
								<view v-for="tag in item.tags" :key="tag" class="tag-chip"># {{ tag }}</view>
							</view>
							<view class="case-footer">
								<view class="signal-badge">
									<view class="signal-badge-label">可借鉴动作</view>
									<view class="signal-badge-value">{{ item.highlight }}</view>
								</view>
								<view class="origin-link" @tap="handleOpenLink(item)">查看原文</view>
							</view>
						</view>
					</view>
				</view>

				<view v-else class="empty-card">暂无匹配的案例</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import CommonHero from '../../components/common-hero/common-hero.vue'
	const CASES = [
		{
			id: 1,
			title: '青年宣讲训练营联合短视频挑战赛',
			school: '华东某高校团委',
			category: '品牌活动',
			heat: '高热',
			source: '校团委公众号',
			publishAt: '03-26 18:20',
			summary:
				'以“训练营 + 路演 + 短视频共创”三段式推进，先做骨干培训，再通过挑战赛扩散校园参与度，适合复制到主题教育和品牌宣讲场景。',
			tags: ['宣讲', '短视频', '路演', '骨干培训'],
			link: 'https://example.com/cross-school/case-01',
			highlight: '训练营 + 二创传播'
		},
		{
			id: 2,
			title: '劳动教育月采用主会场直播联动分会场打卡',
			school: '华南某高校学生会',
			category: '实践活动',
			heat: '跟进',
			source: '青春校园网',
			publishAt: '03-25 09:40',
			summary:
				'通过主会场直播统一调性，再让各学院自带话题完成线下打卡，既保留主视觉控制力，也扩大二级学院参与面。',
			tags: ['劳动教育', '直播', '学院联动'],
			link: 'https://example.com/cross-school/case-02',
			highlight: '直播总控 + 分会场扩散'
		},
		{
			id: 3,
			title: '科创竞赛经验周报做成案例地图与备赛清单',
			school: '华中某高校创新中心',
			category: '科创竞赛',
			heat: '高热',
			source: '双创平台',
			publishAt: '03-24 21:15',
			summary:
				'不只发布赛事通知，而是补充往届项目地图、导师方向、材料清单和时间线，显著降低学生获取备赛信息的门槛。',
			tags: ['挑战杯', '项目库', '备赛', '知识沉淀'],
			link: 'https://example.com/cross-school/case-03',
			highlight: '赛事通知升级为攻略型内容'
		},
		{
			id: 4,
			title: '校园歌会从报名表单升级为城市主题内容企划',
			school: '西南某高校团委',
			category: '文体活动',
			heat: '观察',
			source: '学校新闻网',
			publishAt: '03-23 16:05',
			summary:
				'围绕城市记忆与青年表达设置主题分场，通过海报、话题征集和观众投票提前积累内容资产，活动尚未开始就形成讨论度。',
			tags: ['歌会', '主题策划', '投票互动'],
			link: 'https://example.com/cross-school/case-04',
			highlight: '先做内容议题再做活动报名'
		},
		{
			id: 5,
			title: '社会实践出征仪式叠加成果展和队伍名片墙',
			school: '西北某高校实践中心',
			category: '实践活动',
			heat: '跟进',
			source: '实践育人专栏',
			publishAt: '03-22 11:30',
			summary:
				'将传统仪式升级为“成果展 + 队伍画像 + 媒体素材包”组合，便于后续持续发布实践过程稿和回访报道。',
			tags: ['社会实践', '成果展', '队伍画像'],
			link: 'https://example.com/cross-school/case-05',
			highlight: '出征现场即完成素材采集'
		},
		{
			id: 6,
			title: '青马工程读书班采用任务制和周主题海报并行',
			school: '东北某高校马克思主义学院',
			category: '品牌活动',
			heat: '高热',
			source: '学院团学平台',
			publishAt: '03-21 20:10',
			summary:
				'将阅读、研讨、海报共创和阶段展示拆成清晰任务包，持续释放可视化成果，比单次讲座更容易维持项目关注度。',
			tags: ['青马工程', '阅读打卡', '任务制'],
			link: 'https://example.com/cross-school/case-06',
			highlight: '过程任务化，成果可视化'
		}
	]

	const INSIGHT_SIGNALS = [
		{
			title: '“活动报名”正在转向“内容预热”',
			desc: '高热案例普遍会在报名期前先释放主题海报、人物故事或任务线索，先做认知再做转化。'
		},
		{
			title: '学院联动成为扩大参与面的主流方式',
			desc: '不少活动不再单点发通知，而是设计统一主视觉和话题标签，把执行动作分发给二级学院。'
		},
		{
			title: '成果展示正在前置',
			desc: '从出征仪式到训练营，多数案例会在启动阶段同步准备成果墙、名片墙或可转发素材。'
		}
	]

	const WATCH_LIST = [
		'活动是否配置统一 hashtag 与二创任务',
		'是否提供报名后自动领取的素材包',
		'是否能把案例沉淀为往届经验库',
		'是否区分预热、爆发、回顾三个传播阶段'
	]

	export default {
		components: {
			CommonHero
		},
		data() {
			return {
				categoryOptions: ['全部', '品牌活动', '实践活动', '科创竞赛', '文体活动'],
				heatOptions: ['全部', '高热', '跟进', '观察'],
				selectedCategory: '全部',
				selectedHeat: '全部',
				keyword: '',
				cases: CASES,
				insightSignals: INSIGHT_SIGNALS,
				watchList: WATCH_LIST,
				coverClassMap: ['cover-a', 'cover-b', 'cover-c', 'cover-d'],
				heatClassMap: {
					高热: 'heat-tag--hot',
					跟进: 'heat-tag--follow',
					观察: 'heat-tag--watch'
				}
			}
		},
		computed: {
			filteredCases() {
				const text = String(this.keyword || '').trim().toLowerCase()
				return this.cases.filter((item) => {
					const matchCategory = this.selectedCategory === '全部' || item.category === this.selectedCategory
					const matchHeat = this.selectedHeat === '全部' || item.heat === this.selectedHeat
					const searchText = [item.title, item.school, item.summary, item.tags.join(' ')].join(' ').toLowerCase()
					return matchCategory && matchHeat && (!text || searchText.includes(text))
				})
			},
			totalCount() {
				return this.cases.length
			},
			highHeatCount() {
				return this.cases.filter((item) => item.heat === '高热').length
			},
			categoryCount() {
				return new Set(this.cases.map((item) => item.category)).size
			},
			schoolCount() {
				return new Set(this.cases.map((item) => item.school)).size
			},
			streamItems() {
				return this.filteredCases.slice(0, 4)
			}
		},
		methods: {
			quickFilter(heat) {
				this.selectedHeat = heat
			},
			quickMatchPlanning() {
				this.selectedCategory = '品牌活动'
				this.selectedHeat = '高热'
				uni.showToast({
					title: '已切换到高热品牌活动案例',
					icon: 'none'
				})
			},
			handleOpenLink(item) {
				if (!item || !item.link) {
					uni.showToast({
						title: '原文链接待接入',
						icon: 'none'
					})
					return
				}
				uni.setClipboardData({
					data: item.link,
					success: () => {
						uni.showToast({
							title: '原文链接已复制',
							icon: 'none'
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		min-height: 100vh;
		background:
			radial-gradient(circle at top left, rgba(80, 180, 255, 0.18), transparent 28%),
			linear-gradient(180deg, #f5fbff 0%, #f5fbff 36%, #fff 100%);
	}

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

	.hero-panel {
		padding: 30rpx;
		border-radius: 30rpx;
		background:
			linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(245, 251, 255, 0.94)),
			repeating-linear-gradient(
				90deg,
				rgba(21, 144, 255, 0.04) 0,
				rgba(21, 144, 255, 0.04) 2rpx,
				transparent 2rpx,
				transparent 30rpx
			);
		box-shadow: 0 16rpx 48rpx rgba(21, 144, 255, 0.1);
		border: 1rpx solid rgba(21, 144, 255, 0.14);
	}

	.hero-kicker {
		display: inline-flex;
		align-items: center;
		padding: 10rpx 18rpx;
		border-radius: 999rpx;
		background: rgba(21, 144, 255, 0.08);
		color: #1496f2;
		font-size: 22rpx;
		font-weight: 600;
		letter-spacing: 1rpx;
	}

	.hero-title {
		margin-top: 22rpx;
		color: #1f2d3d;
		font-size: 44rpx;
		line-height: 1.3;
		font-weight: 700;
	}

	.hero-desc {
		margin-top: 16rpx;
		color: #5f7f9f;
		font-size: 25rpx;
		line-height: 1.8;
	}

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

	.hero-btn {
		padding: 16rpx 24rpx;
		border-radius: 999rpx;
		background: #f3f9ff;
		border: 1rpx solid rgba(21, 144, 255, 0.16);
		color: #1496f2;
		font-size: 24rpx;
		font-weight: 600;
	}

	.hero-btn--primary {
		background: linear-gradient(135deg, #32bfff, #1496f2);
		color: #fff;
		border-color: transparent;
		box-shadow: 0 10rpx 26rpx rgba(21, 144, 255, 0.22);
	}

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

	.hero-stat {
		padding: 22rpx;
		border-radius: 24rpx;
		background: rgba(255, 255, 255, 0.92);
		border: 1rpx solid rgba(21, 144, 255, 0.12);
		box-shadow: 0 10rpx 28rpx rgba(21, 144, 255, 0.07);
	}

	.hero-stat--primary {
		background: linear-gradient(160deg, #32bfff 0%, #1496f2 100%);
		color: #fff;
	}

	.hero-stat--primary .stat-label,
	.hero-stat--primary .stat-desc {
		color: rgba(255, 255, 255, 0.84);
	}

	.stat-label {
		color: #5f7f9f;
		font-size: 22rpx;
	}

	.stat-value {
		margin: 10rpx 0 8rpx;
		font-size: 48rpx;
		line-height: 1;
		font-weight: 700;
	}

	.stat-desc {
		color: #5f7f9f;
		font-size: 21rpx;
		line-height: 1.6;
	}

	.demo-alert,
	.filter-panel,
	.stream-card,
	.signal-card,
	.cases-card {
		margin-top: 20rpx;
		padding: 24rpx;
		border-radius: 28rpx;
		background: rgba(255, 255, 255, 0.92);
		box-shadow: 0 16rpx 40rpx rgba(21, 144, 255, 0.08);
	}

	.demo-alert {
		border: 1rpx solid rgba(21, 144, 255, 0.18);
		background: rgba(255, 251, 248, 0.95);
	}

	.demo-alert-title {
		font-size: 26rpx;
		font-weight: 700;
		color: #1f2d3d;
	}

	.demo-alert-desc {
		margin-top: 10rpx;
		font-size: 23rpx;
		line-height: 1.7;
		color: #5f7f9f;
	}

	.filter-group + .filter-group {
		margin-top: 18rpx;
	}

	.filter-label {
		color: #5f7f9f;
		font-size: 22rpx;
		font-weight: 600;
	}

	.chip-scroll {
		width: 100%;
		margin-top: 14rpx;
		white-space: nowrap;
	}

	.chip-row {
		display: inline-flex;
		gap: 12rpx;
		padding-right: 8rpx;
	}

	.filter-chip {
		display: inline-flex;
		align-items: center;
		padding: 10rpx 20rpx;
		border: 1rpx solid rgba(21, 144, 255, 0.16);
		border-radius: 999rpx;
		background: #f5fbff;
		color: #1496f2;
		font-size: 22rpx;
	}

	.filter-chip--active {
		color: #fff;
		border-color: transparent;
		background: linear-gradient(135deg, #32bfff, #1496f2);
		box-shadow: 0 8rpx 20rpx rgba(21, 144, 255, 0.22);
	}

	.search-box {
		display: flex;
		align-items: center;
		gap: 14rpx;
		margin-top: 18rpx;
		padding: 0 18rpx;
		height: 80rpx;
		border-radius: 999rpx;
		background: #f8fbff;
		border: 1rpx solid rgba(21, 144, 255, 0.12);
	}

	:deep(.search-input.uv-input) {
		flex: 1;
		height: 100%;
		padding: 0 !important;
		background: transparent !important;
		border: 0 !important;
	}

	:deep(.search-input.uv-input .uv-input__content__field-wrapper__field) {
		font-size: 24rpx;
		color: #1f2d3d;
	}

	.search-clear {
		flex-shrink: 0;
		font-size: 22rpx;
		color: #1496f2;
	}

	.section-grid {
		margin-top: 20rpx;
	}

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

	.section-title--small {
		font-size: 26rpx;
	}

	.stream-list,
	.signal-list,
	.watch-list,
	.cases-list {
		margin-top: 18rpx;
	}

	.stream-item,
	.signal-item,
	.case-card,
	.watch-item {
		border: 1rpx solid rgba(21, 144, 255, 0.1);
		background: linear-gradient(180deg, #f5fbff, #fff);
	}

	.stream-item {
		padding: 18rpx;
		border-radius: 24rpx;
	}

	.stream-item + .stream-item,
	.signal-item + .signal-item,
	.watch-item + .watch-item,
	.case-card + .case-card {
		margin-top: 16rpx;
	}

	.stream-cover,
	.case-cover {
		position: relative;
		overflow: hidden;
		border-radius: 20rpx;
	}

	.stream-cover {
		height: 180rpx;
		padding: 18rpx;
	}

	.case-cover {
		height: 220rpx;
		padding: 20rpx;
	}

	.cover-a {
		background: linear-gradient(135deg, #9be7ff 0%, #32bfff 52%, #1496f2 100%);
	}

	.cover-b {
		background: linear-gradient(135deg, #c7f9cc 0%, #57cc99 52%, #38a3a5 100%);
	}

	.cover-c {
		background: linear-gradient(135deg, #ffd6a5 0%, #ffadad 50%, #ff7b7b 100%);
	}

	.cover-d {
		background: linear-gradient(135deg, #cdb4db 0%, #a2d2ff 52%, #8ecae6 100%);
	}

	.stream-cover::after,
	.case-cover::after {
		content: '';
		position: absolute;
		right: -40rpx;
		top: -40rpx;
		width: 180rpx;
		height: 180rpx;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.18);
	}

	.stream-cover-category,
	.stream-cover-school,
	.case-school,
	.case-cover-badge {
		position: relative;
		z-index: 1;
		color: #fff;
	}

	.stream-cover-category,
	.case-cover-badge {
		display: inline-flex;
		padding: 8rpx 14rpx;
		border-radius: 999rpx;
		background: rgba(255, 255, 255, 0.18);
		font-size: 20rpx;
		font-weight: 600;
	}

	.stream-cover-school,
	.case-school {
		margin-top: 18rpx;
		font-size: 30rpx;
		font-weight: 700;
		line-height: 1.4;
	}

	.stream-content,
	.case-body {
		margin-top: 16rpx;
	}

	.stream-top,
	.case-head,
	.cases-head,
	.case-footer {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: 16rpx;
	}

	.stream-title,
	.case-title,
	.signal-title {
		color: #1f2d3d;
		font-weight: 700;
		line-height: 1.5;
	}

	.stream-title,
	.case-title {
		font-size: 29rpx;
	}

	.stream-meta,
	.case-info,
	.signal-desc,
	.watch-item,
	.stream-summary,
	.case-summary {
		color: #5f7f9f;
		font-size: 23rpx;
		line-height: 1.75;
	}

	.stream-meta {
		margin-top: 8rpx;
	}

	.stream-summary,
	.case-summary {
		margin-top: 12rpx;
		color: #1f2d3d;
	}

	.tag-list {
		display: flex;
		flex-wrap: wrap;
		gap: 10rpx;
		margin-top: 14rpx;
	}

	.tag-chip,
	.case-tag,
	.heat-tag {
		display: inline-flex;
		align-items: center;
		padding: 6rpx 14rpx;
		border-radius: 999rpx;
		font-size: 20rpx;
	}

	.tag-chip,
	.case-tag {
		background: #e8f4ff;
		color: #1496f2;
	}

	.heat-tag {
		flex-shrink: 0;
		font-weight: 600;
	}

	.heat-tag--hot {
		background: #fff1f0;
		color: #e34d59;
	}

	.heat-tag--follow {
		background: #eef6ff;
		color: #2563eb;
	}

	.heat-tag--watch {
		background: #f3f4f6;
		color: #6b7280;
	}

	.signal-item,
	.watch-item {
		padding: 18rpx;
		border-radius: 22rpx;
	}

	.signal-desc {
		margin-top: 8rpx;
	}

	.signal-divider {
		height: 1rpx;
		margin: 20rpx 0;
		background: rgba(21, 144, 255, 0.1);
	}

	.case-count {
		flex-shrink: 0;
		font-size: 22rpx;
		color: #5f7f9f;
	}

	.case-card {
		border-radius: 26rpx;
		overflow: hidden;
	}

	.case-cover-badge {
		position: absolute;
		left: 20rpx;
		bottom: 20rpx;
	}

	.case-body {
		padding: 0 20rpx 20rpx;
	}

	.case-title {
		margin-top: 14rpx;
	}

	.case-info {
		margin-top: 10rpx;
	}

	.signal-badge {
		flex: 1;
		min-width: 0;
		padding: 14rpx 18rpx;
		border-radius: 20rpx;
		background: #f7fbff;
	}

	.signal-badge-label {
		font-size: 20rpx;
		color: #7b8794;
	}

	.signal-badge-value {
		margin-top: 8rpx;
		font-size: 24rpx;
		font-weight: 700;
		color: #1f2d3d;
		line-height: 1.5;
	}

	.origin-link {
		flex-shrink: 0;
		padding-top: 18rpx;
		font-size: 24rpx;
		font-weight: 600;
		color: #1496f2;
	}

	.empty-card {
		margin-top: 18rpx;
		padding: 30rpx 24rpx;
		border-radius: 24rpx;
		background: #f8fbff;
		font-size: 24rpx;
		color: #90a0b7;
		text-align: center;
	}
</style>
