<template>
	<view class="ie-page">
		<view class="nav" :style="{ paddingTop: menuButtonInfo.top + 'px' }">
			<view class="back" @tap="back">‹</view>
			<view class="nav-title">i/e 浏览器</view>
			<view class="nav-pill" @tap="goFriends">好友</view>
		</view>

		<view class="hero-card">
			<view class="hero-top">
				<view>
					<view class="eyebrow">Campus Social Lab</view>
					<view class="hero-title">今天想做哪种人？</view>
					<view class="hero-desc">找饭搭子、学习搭子、散步搭子，也可以随机遇见一个有趣灵魂。</view>
				</view>
				<view class="orbit">
					<view class="orbit-dot i-dot">I</view>
					<view class="orbit-dot e-dot">E</view>
				</view>
			</view>
			<view class="mode-switch">
				<view class="mode-card i-mode" :class="{ active: activeType === 'i' }" @tap="activeType = 'i'">
					<view class="mode-label">i 人频道</view>
					<view class="mode-text">安静同频，慢热聊天</view>
				</view>
				<view class="mode-card e-mode" :class="{ active: activeType === 'e' }" @tap="activeType = 'e'">
					<view class="mode-label">e 人频道</view>
					<view class="mode-text">快速组局，即刻开聊</view>
				</view>
			</view>
		</view>

		<view class="action-grid">
			<view class="action-card primary" @tap="openMatch">
				<view class="action-icon">匹</view>
				<view class="action-title">90 秒匹配</view>
				<view class="action-sub">随机遇见同校新朋友</view>
			</view>
			<view class="action-card" @tap="goChatList">
				<view class="action-icon">聊</view>
				<view class="action-title">聊天记录</view>
				<view class="action-sub">继续上次的话题</view>
			</view>
		</view>

		<view class="section">
			<view class="section-head">
				<view>
					<view class="section-title">找搭子</view>
					<view class="section-sub">按今天的心情，挑一个局</view>
				</view>
				<view class="fresh">新鲜局</view>
			</view>
			<scroll-view scroll-x class="buddy-scroll" show-scrollbar="false">
				<view class="buddy-row">
					<view class="buddy-card" v-for="item in buddyTypes" :key="item.name" @tap="chooseBuddy(item)">
						<view class="buddy-icon">{{ item.icon }}</view>
						<view class="buddy-name">{{ item.name }}</view>
						<view class="buddy-count">{{ item.count }} 人在线</view>
					</view>
				</view>
			</scroll-view>
		</view>

		<view class="section">
			<view class="section-head">
				<view>
					<view class="section-title">可能同频的人</view>
					<view class="section-sub">根据校园、兴趣和作息推荐</view>
				</view>
				<view class="link" @tap="goFriends">好友列表</view>
			</view>
			<view class="person-card" v-for="person in recommendList" :key="person.name" @tap="goChat(person)">
				<view class="avatar" :class="person.type">{{ person.type.toUpperCase() }}</view>
				<view class="person-main">
					<view class="person-line">
						<text class="person-name">{{ person.name }}</text>
						<text class="match">{{ person.match }}% 匹配</text>
					</view>
					<view class="person-tags">
						<text v-for="tag in person.tags" :key="tag">{{ tag }}</text>
					</view>
					<view class="person-bio">{{ person.bio }}</view>
				</view>
				<view class="say-hi">打招呼</view>
			</view>
		</view>

		<view class="match-mask" v-if="showMatch" @tap="showMatch = false">
			<view class="match-panel" @tap.stop>
				<view class="close" @tap="showMatch = false">×</view>
				<view class="match-title">有新朋友想和你打招呼！</view>
				<view class="match-avatar">E</view>
				<view class="match-name">奶茶研究员</view>
				<view class="match-info">90%匹配 · 距离200m · 想找晚饭搭子</view>
				<view class="match-btn" @tap="goChat()">现在开聊</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				menuButtonInfo: {
					top: 24
				},
				activeType: 'i',
				showMatch: false,
				buddyTypes: [{
					name: '饭搭子',
					icon: '饭',
					count: 36
				}, {
					name: '自习搭子',
					icon: '习',
					count: 18
				}, {
					name: '夜跑搭子',
					icon: '跑',
					count: 12
				}, {
					name: '拍照搭子',
					icon: '拍',
					count: 9
				}],
				recommendList: [{
					name: 'DChuo',
					type: 'i',
					match: 94,
					tags: ['图书馆', '慢热', '周三有空'],
					bio: '想找一个不尬聊的自习搭子，互相监督就好。'
				}, {
					name: '橘子汽水',
					type: 'e',
					match: 91,
					tags: ['饭搭子', '新店探索', '话多'],
					bio: '今晚想试北门新开的米线，缺一个大胆试吃员。'
				}, {
					name: '凌晨两点半',
					type: 'i',
					match: 88,
					tags: ['电影', '散步', '同频'],
					bio: '喜欢听别人讲奇怪的小事，也会认真回复。'
				}]
			}
		},
		onLoad() {
			if (uni.getMenuButtonBoundingClientRect) {
				this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			}
		},
		methods: {
			back() {
				uni.navigateBack()
			},
			openMatch() {
				this.showMatch = true
			},
			chooseBuddy(item) {
				uni.showToast({
					title: `已进入${item.name}`,
					icon: 'none'
				})
			},
			goChat() {
				uni.navigateTo({
					url: '/package1/ieBrowser/chat'
				})
			},
			goChatList() {
				uni.navigateTo({
					url: '/package1/ieBrowser/chatList'
				})
			},
			goFriends() {
				uni.navigateTo({
					url: '/package1/ieBrowser/friends'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #f5f7ff;
	}

	.ie-page {
		min-height: 100vh;
		padding: 0 28rpx 48rpx;
		box-sizing: border-box;
		background:
			radial-gradient(circle at 18% 8%, rgba(131, 255, 216, 0.36), rgba(131, 255, 216, 0) 260rpx),
			radial-gradient(circle at 92% 18%, rgba(159, 133, 255, 0.28), rgba(159, 133, 255, 0) 280rpx),
			linear-gradient(180deg, #fbfdff 0%, #eef6ff 54%, #f8f3ff 100%);
		color: #14231f;
	}

	.nav {
		height: 88rpx;
		display: flex;
		align-items: center;
	}

	.back {
		width: 58rpx;
		font-size: 56rpx;
		line-height: 56rpx;
		color: #18241f;
	}

	.nav-title {
		flex: 1;
		font-size: 32rpx;
		font-weight: 900;
	}

	.nav-pill {
		height: 56rpx;
		line-height: 56rpx;
		padding: 0 24rpx;
		border-radius: 999rpx;
		background: #111;
		color: #fff;
		font-size: 24rpx;
		font-weight: 800;
	}

	.hero-card {
		padding: 34rpx;
		border-radius: 42rpx;
		background: rgba(255, 255, 255, 0.86);
		box-shadow: 0 24rpx 60rpx rgba(33, 45, 72, 0.1);
		overflow: hidden;
		position: relative;
	}

	.hero-card::after {
		content: '';
		width: 320rpx;
		height: 320rpx;
		border-radius: 50%;
		background: linear-gradient(135deg, rgba(131, 255, 216, 0.34), rgba(159, 133, 255, 0.2));
		position: absolute;
		right: -130rpx;
		top: -130rpx;
	}

	.hero-top {
		display: flex;
		position: relative;
		z-index: 1;
	}

	.eyebrow {
		color: #7f6cff;
		font-size: 22rpx;
		font-weight: 900;
		letter-spacing: 2rpx;
	}

	.hero-title {
		margin-top: 12rpx;
		font-size: 46rpx;
		font-weight: 900;
	}

	.hero-desc {
		width: 420rpx;
		margin-top: 16rpx;
		color: #6d7b76;
		font-size: 25rpx;
		line-height: 40rpx;
	}

	.orbit {
		width: 140rpx;
		height: 140rpx;
		margin-left: auto;
		border-radius: 50%;
		border: 2rpx dashed rgba(127, 108, 255, 0.35);
		position: relative;
		animation: orbitRotate 8s linear infinite;
	}

	.orbit-dot {
		width: 62rpx;
		height: 62rpx;
		border-radius: 50%;
		text-align: center;
		line-height: 62rpx;
		font-size: 28rpx;
		font-weight: 900;
		position: absolute;
	}

	.i-dot {
		background: #bdfce9;
		left: -12rpx;
		top: 34rpx;
	}

	.e-dot {
		background: #ffdf75;
		right: -12rpx;
		top: 34rpx;
	}

	.mode-switch {
		display: flex;
		margin-top: 30rpx;
		position: relative;
		z-index: 1;
	}

	.mode-card {
		flex: 1;
		padding: 24rpx;
		border-radius: 30rpx;
		background: rgba(245, 247, 255, 0.9);
		border: 2rpx solid transparent;
	}

	.mode-card + .mode-card {
		margin-left: 18rpx;
	}

	.mode-card.active {
		border-color: rgba(127, 108, 255, 0.38);
		box-shadow: 0 16rpx 28rpx rgba(127, 108, 255, 0.12);
	}

	.mode-label {
		font-size: 28rpx;
		font-weight: 900;
	}

	.mode-text {
		margin-top: 8rpx;
		color: #73817c;
		font-size: 22rpx;
	}

	.action-grid {
		display: flex;
		margin-top: 26rpx;
	}

	.action-card {
		flex: 1;
		padding: 26rpx;
		border-radius: 34rpx;
		background: rgba(255, 255, 255, 0.86);
		box-shadow: 0 18rpx 40rpx rgba(33, 45, 72, 0.08);
	}

	.action-card + .action-card {
		margin-left: 18rpx;
	}

	.action-card.primary {
		background: linear-gradient(135deg, #111 0%, #36413f 100%);
		color: #fff;
	}

	.action-icon {
		width: 62rpx;
		height: 62rpx;
		border-radius: 22rpx;
		background: rgba(131, 255, 216, 0.38);
		text-align: center;
		line-height: 62rpx;
		font-weight: 900;
	}

	.action-title {
		margin-top: 18rpx;
		font-size: 30rpx;
		font-weight: 900;
	}

	.action-sub {
		margin-top: 8rpx;
		color: #7c8985;
		font-size: 22rpx;
	}

	.primary .action-sub {
		color: rgba(255, 255, 255, 0.72);
	}

	.section {
		margin-top: 34rpx;
	}

	.section-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 20rpx;
	}

	.section-title {
		font-size: 34rpx;
		font-weight: 900;
	}

	.section-sub {
		margin-top: 6rpx;
		color: #74817d;
		font-size: 23rpx;
	}

	.fresh,
	.link {
		color: #7f6cff;
		font-size: 24rpx;
		font-weight: 900;
	}

	.buddy-scroll {
		white-space: nowrap;
	}

	.buddy-row {
		display: flex;
	}

	.buddy-card {
		width: 190rpx;
		margin-right: 18rpx;
		padding: 24rpx 20rpx;
		border-radius: 34rpx;
		background: linear-gradient(180deg, #fff 0%, #f7fffc 100%);
		box-shadow: 0 18rpx 34rpx rgba(33, 45, 72, 0.07);
		display: inline-block;
	}

	.buddy-icon {
		width: 66rpx;
		height: 66rpx;
		border-radius: 22rpx;
		background: linear-gradient(135deg, #bdfce9, #ffdf75);
		text-align: center;
		line-height: 66rpx;
		font-weight: 900;
	}

	.buddy-name {
		margin-top: 18rpx;
		font-size: 28rpx;
		font-weight: 900;
	}

	.buddy-count {
		margin-top: 8rpx;
		color: #7f8b87;
		font-size: 22rpx;
	}

	.person-card {
		display: flex;
		align-items: center;
		padding: 24rpx;
		margin-bottom: 18rpx;
		border-radius: 34rpx;
		background: rgba(255, 255, 255, 0.9);
		box-shadow: 0 18rpx 36rpx rgba(33, 45, 72, 0.07);
	}

	.avatar {
		width: 86rpx;
		height: 86rpx;
		border-radius: 50%;
		text-align: center;
		line-height: 86rpx;
		font-size: 32rpx;
		font-weight: 900;
	}

	.avatar.i {
		background: #c9fff0;
		color: #08705c;
	}

	.avatar.e {
		background: #ffe69a;
		color: #a45c00;
	}

	.person-main {
		flex: 1;
		margin-left: 20rpx;
		min-width: 0;
	}

	.person-line {
		display: flex;
		align-items: center;
	}

	.person-name {
		font-size: 30rpx;
		font-weight: 900;
	}

	.match {
		margin-left: 12rpx;
		padding: 4rpx 10rpx;
		border-radius: 999rpx;
		background: rgba(127, 108, 255, 0.1);
		color: #7f6cff;
		font-size: 20rpx;
		font-weight: 900;
	}

	.person-tags {
		margin-top: 10rpx;
	}

	.person-tags text {
		margin-right: 8rpx;
		color: #73817c;
		font-size: 21rpx;
	}

	.person-bio {
		margin-top: 8rpx;
		color: #4f5b57;
		font-size: 23rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.say-hi {
		height: 58rpx;
		line-height: 58rpx;
		padding: 0 18rpx;
		border-radius: 999rpx;
		background: #111;
		color: #fff;
		font-size: 22rpx;
		font-weight: 900;
	}

	.match-mask {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.58);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 99;
	}

	.match-panel {
		width: 590rpx;
		padding: 44rpx 36rpx 36rpx;
		border-radius: 40rpx;
		background: #fff;
		text-align: center;
		position: relative;
	}

	.close {
		position: absolute;
		top: 22rpx;
		right: 28rpx;
		font-size: 34rpx;
	}

	.match-title {
		font-size: 30rpx;
		font-weight: 900;
	}

	.match-avatar {
		width: 120rpx;
		height: 120rpx;
		margin: 28rpx auto 14rpx;
		border-radius: 50%;
		background: linear-gradient(135deg, #ffdf75, #ff91c8);
		line-height: 120rpx;
		font-size: 46rpx;
		font-weight: 900;
	}

	.match-name {
		font-size: 30rpx;
		font-weight: 900;
	}

	.match-info {
		margin-top: 12rpx;
		color: #73817c;
		font-size: 23rpx;
	}

	.match-btn {
		height: 82rpx;
		line-height: 82rpx;
		margin-top: 32rpx;
		border-radius: 999rpx;
		background: #111;
		color: #fff;
		font-size: 28rpx;
		font-weight: 900;
	}

	@keyframes orbitRotate {
		0% {
			transform: rotate(0);
		}

		100% {
			transform: rotate(360deg);
		}
	}
</style>
