<template>
	<view class="page-container">
		<!-- 背景图片 -->
		<image class="bg-image" src="/static/square/beijingban.png" mode="aspectFill"></image>

		<!-- 顶部导航 -->
		<view class="nav-bar">
			<view class="nav-back" @tap="goBack">
				<image class="nav-back-icon" src="/static/icon/back.png" mode="aspectFit"></image>
			</view>
			<!-- <text class="nav-title">我的作品</text> -->
			<view class="nav-placeholder"></view>
		</view>

		<view class="scroll-content">

			<!-- 我的在展作品 -->
			<view class="section-block section-1">
				<view class="section-label">
					<image class="section-label-bg" src="/static/nft/dingbutubiao_liang.png" mode="aspectFill"></image>
					<text class="section-label-text">我的在展作品</text>
				</view>

				<view class="exhibition-grid">
					<view
						v-for="(item, index) in exhibitionWorks"
						:key="item.id"
						class="exhibition-card"
						:class="index % 2 === 0 ? 'card-tilt-left' : 'card-tilt-right'"
						@tap="goToAssetDetail(item.id)"
					>
						<image class="card-image" :src="item.cover_url || '/static/nft/placeholder.png'" mode="aspectFill"></image>
						<image class="card-frame" src="/static/square/gerenzhongxincangpinkuang.png" mode="aspectFill"></image>
						<!-- 点赞数 -->
						<view class="card-rate-badge">
							<image class="heart-icon" src="/static/icon/heart-icon.png" mode="aspectFit"></image>
							<view class="card-rate-text-wrap">
								<text class="card-rate-text">{{ item.like_count || 0 }}</text>
							</view>
						</view>
						<!-- 图片下方收益 -->
						<view class="card-income-row" :class="index % 2 === 0 ? 'income-tilt-right' : 'income-tilt-left'">
							<image class="topfans-icon" src="/static/icon/crystal.png" mode="aspectFit"></image>
							<view class="card-income-text-wrap">
								<text class="card-income-text">{{ item.rate || '0' }}/H</text>
							</view>
						</view>
					</view>

					<!-- 空状态占位 -->
					<view v-if="exhibitionWorks.length === 0" class="empty-exhibition">
						<text class="empty-text">暂无在展作品</text>
					</view>
				</view>
			</view>

			<!-- 今日点赞作品 -->
			<view class="section-block">
				<view class="section-label">
					<image class="section-label-bg" src="/static/nft/dingbutubiao_liang.png" mode="aspectFill"></image>
					<text class="section-label-text">今日点赞作品</text>
				</view>

				<scroll-view class="liked-list" scroll-y="true" :show-scrollbar="false">
					<view
						v-for="(item, index) in likedWorks"
						:key="item.id"
						class="liked-row"
						@tap="goToAssetDetail(item.id)"
					>
						<!-- 排名图标，绝对定位在卡片左侧 -->
						<image
							v-if="index < 3"
							:src="rankIcons[index]"
							class="rank-icon-img"
							mode="aspectFit"
						></image>

						<!-- 卡片主体 -->
						<view class="liked-item" :class="index === 0 ? 'liked-item-first' : ''">
							<!-- 作品封面 -->
							<view class="liked-cover-wrap" :class="index === 0 ? 'liked-cover-wrap-first' : ''">
								<image class="liked-cover" :src="item.cover_url || '/static/nft/placeholder.png'" mode="aspectFill"></image>
								<image class="liked-cover-frame" src="/static/square/cangpinkuang1.png" mode="aspectFill"></image>
							</view>

							<!-- 作品信息 -->
							<view class="liked-info">
								<text class="liked-status">{{ item.status_text }}</text>
								<view class="liked-score-row">
									<text class="liked-score">{{ formatScore(item.score) }}</text>
									<image class="fire-icon" src="/static/square/rementubiao.png" mode="aspectFit"></image>
								</view>
							</view>

							<!-- 右侧奖励 -->
							<view class="liked-reward">
								<image class="reward-token-icon" src="/static/icon/crystal.png" mode="aspectFit"></image>
								<text class="reward-amount">+{{ item.reward }}</text>
							</view>
						</view>
					</view>

					<!-- 空状态 -->
					<view v-if="likedWorks.length === 0" class="empty-liked">
						<text class="empty-text">今日暂无点赞作品</text>
					</view>
				</scroll-view>
			</view>

			<!-- <view style="height: 60rpx;"></view> -->
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const goBack = () => {
	uni.navigateBack();
};

const goToAssetDetail = (id) => {
	if (!id) return;
	uni.navigateTo({ url: `/pages/asset-detail/asset-detail?id=${id}` });
};

const rankIcons = [
	'/static/rank/rank-icon1.png',
	'/static/rank/rank-icon2.png',
	'/static/rank/rank-icon3.png',
];

const formatScore = (score) => {
	if (!score && score !== 0) return '0';
	return Number(score).toLocaleString();
};

// 在展作品列表
const exhibitionWorks = ref([]);

// 今日点赞作品列表
const likedWorks = ref([]);

// 模拟数据（实际接入API时替换）
const loadMockData = () => {
	exhibitionWorks.value = [
		{ id: '1', cover_url: '/static/sucai/image-08.png', owner_name: 'u585', like_count: 1234, rate: '0.7' },
		{ id: '2', cover_url: '/static/sucai/image-11.png', owner_name: 'u585', like_count: 856, rate: '0.6' },
	];

	likedWorks.value = [
		{ id: '1', cover_url: '/static/sucai/image-03.png', status_text: '排名破100', score: 1354321, reward: 20 },
		{ id: '2', cover_url: '/static/sucai/image-04.png', status_text: '排名破300', score: 354321, reward: 17 },
		{ id: '3', cover_url: '/static/sucai/image-05.png', status_text: '热度飙升中', score: 14321, reward: 15 },
		{ id: '4', cover_url: '/static/sucai/image-06.png', status_text: '潜力待挖中', score: 321, reward: 8 },
		{ id: '5', cover_url: '/static/sucai/image-07.png', status_text: '潜力待挖中', score: 89, reward: 3 },
	];
};

onMounted(() => {
	loadMockData();
});
</script>

<style scoped>
.page-container {
	min-height: 100vh;
	position: relative;
}

/* 背景图片 */
.bg-image {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
}

/* 导航栏 */
.nav-bar {
	position: relative;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 80rpx 32rpx 16rpx;
}

.nav-back {
	width: 80rpx;
	height: 80rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	/* background: rgba(255,255,255,0.5);
	border-radius: 50%; */
}

.nav-back-icon {
	width: 80rpx;
	height: 80rpx;
}

.nav-title {
	font-size: 36rpx;
	font-weight: 700;
	color: #5a2d82;
	letter-spacing: 2rpx;
}

.nav-placeholder {
	width: 64rpx;
}

/* 内容区域 */
.scroll-content {
	position: relative;
	z-index: 1;
	/* padding: 0 32rpx; */
}

/* 区块 */
.section-1 {
	margin-bottom: 8rpx;
	background: rgb(249 159 192 / 45%);
	border-radius: 48rpx;
	padding: 16rpx;
}

/* 区块标签 */
.section-label {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 16rpx;
	height: 80rpx;
	min-width: 232rpx;
}

.section-label-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.section-label-text {
	position: relative;
	z-index: 1;
	font-size: 26rpx;
	color: #fff;
	font-weight: 600;
	padding: 0 28rpx;
}

/* 在展作品网格 */
.exhibition-grid {
	display: flex;
	flex-direction: row;
	/* gap: 24rpx; */
	padding: 10rpx 10rpx 80rpx;
	justify-content: center;
}

.exhibition-card {
	width: 248rpx;
	height: 380rpx;
	border-radius: 20rpx;
	overflow: visible;
	position: relative;
}

.card-tilt-left {
	transform: rotate(-4deg) translateY(10rpx);
	margin-right: 32rpx;
}

.card-tilt-right {
	transform: rotate(4deg) translateY(10rpx);
}

.card-income-row.income-tilt-right {
	transform: translateX(-50%) rotate(4deg);
}

.card-income-row.income-tilt-left {
	transform: translateX(-50%) rotate(-4deg);
}

.card-image {
	width: 88%;
	height: 92%;
	border-radius: 80rpx;
	transform-origin: center center;
	position: relative;
	z-index: 3;
	padding: 16rpx;
	overflow: hidden;
}

.card-frame {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
}

.card-user-tag {
	position: absolute;
	bottom: 56rpx;
	left: 0;
	right: 0;
	display: flex;
	justify-content: center;
}

.card-user-text {
	font-size: 20rpx;
	color: #fff;
	background: rgba(0,0,0,0.45);
	padding: 4rpx 14rpx;
	border-radius: 20rpx;
}

.card-rate-badge {
	position: absolute;
	bottom: 16rpx;
	left: 40%;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	gap: 6rpx;
	padding: 6rpx 16rpx;
	z-index: 9;
}

/* 图片下方收益 */
.card-income-row {
	position: absolute;
	bottom: -52rpx;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	white-space: nowrap;
	overflow: visible;
}

.topfans-icon {
	width: 52rpx;
	height: 52rpx;
	position: relative;
	z-index: 2;
	margin-right: -16rpx;
	left: 20rpx;
	top: 8rpx
}

.card-income-text-wrap {
	background: linear-gradient(to bottom right,
		#F0E4B1 0%,
		#F08399 50%,
		#B94E73 100%
	);
	border-radius: 999rpx;
	padding: 8rpx 20rpx 8rpx 40rpx;
	box-shadow:
		0 4rpx 12rpx rgba(255, 143, 158, 0.2),
		inset 0 2rpx 4rpx rgba(255, 255, 255, 0.4);
	display: flex;
	align-items: center;
	justify-content: center;
}

.card-income-text {
	font-size: 16rpx;
	color: #fff;
	font-weight: 700;
	text-align: center;
}
	

.heart-icon {
	width: 28rpx;
	height: 28rpx;
}

.card-rate-text-wrap {
	background: linear-gradient(to bottom right,
		#F0E4B1 0%,
		#F08399 50%,
		#B94E73 100%
	);
	border-radius: 999rpx;
	padding: 2rpx 12rpx;
	box-shadow:
		0 4rpx 12rpx rgba(255, 143, 158, 0.2),
		inset 0 2rpx 4rpx rgba(255, 255, 255, 0.4);
}

.card-rate-text {
	font-size: 22rpx;
	color: #fff;
	font-weight: 700;
}

/* 空状态 */
.empty-exhibition {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 60rpx 0;
}

.empty-text {
	font-size: 28rpx;
	color: #b09cc0;
}

/* 今日点赞列表 */
.liked-list {
	max-height: 732rpx;
}

.liked-row {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	margin-bottom: 16rpx;
}

.liked-item {
	display: flex;
	align-items: center;
	background: #ffffff50;
	border-radius: 32rpx;
	padding: 16rpx 20rpx;
	gap: 16rpx;
	overflow: hidden;
	box-sizing: border-box;
	width: 80%;
	padding-left: 10%;
}

.liked-item-first {
	padding: 28rpx 20rpx;
	width: 90%;
	padding-left: 20%;
}

/* 排名徽章 */
.rank-icon-img {
	width: 56rpx;
	height: 68rpx;
	flex-shrink: 0;
	margin-right: 8rpx;
}

.rank-number-badge {
	width: 48rpx;
	height: 48rpx;
	border-radius: 50%;
	background: rgba(180,140,220,0.3);
	display: flex;
	align-items: center;
	justify-content: center;
}

.rank-number-text {
	font-size: 24rpx;
	color: #fff;
	font-weight: 700;
}

/* 作品封面 */
.liked-cover-wrap {
	width: 88rpx;
	height: 88rpx;
	flex-shrink: 0;
	margin-left: -18rpx;
	margin-right: 48rpx;
	position: relative;
}

/* .liked-cover-wrap-first {
	width: 88rpx;
	height: 110rpx;
} */

.liked-cover {
	width: 90%;
	height: 90%;
	border-radius: 24rpx;
	transform: rotate(-22deg);
	transform-origin: center center;
	position: relative;
    z-index: 3;
    padding: 0.25rem;
}

.liked-cover-frame {
	position: absolute;
	top: 0;
	left: 0;
	width: 110%;
	height: 110%;
	z-index: 2;
	transform: rotate(-22deg);
	transform-origin: center center;
}


/* 作品信息 */
.liked-info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	/* gap: 8rpx; */
	overflow: hidden;
}

.liked-status {
	font-size: 28rpx;
	color: #fff;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-bottom: 16rpx;
}

.liked-score-row {
	display: flex;
	align-items: center;
	/* gap: 6rpx; */
}

.liked-score {
	font-size: 26rpx;
	color: #fff;
	font-weight: 700;
	margin-right: 8rpx;
}

.fire-icon {
	width: 32rpx;
	height: 32rpx;
	align-self: flex-end;
	margin-top: 4rpx;
}

/* 右侧奖励 */
.liked-reward {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 8rpx;
	flex-shrink: 0;
}

.reward-token-icon {
	width: 56rpx;
	height: 56rpx;
}

.reward-amount {
	font-size: 28rpx;
	color: #c060e0;
	font-weight: 700;
}

/* 空状态 */
.empty-liked {
	padding: 60rpx 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
</style>
