<template>
	<view class="equity-goods-page">
		<image style="width: 100%;" mode="widthFix"
			:src="showImg('/uploads/20250728/748adc244fc7db313f569a6005344950.png')"></image>
		<!-- 顶部标题区域 -->
		<view class="header-section">
			<view class="title">扬州数字资产权益产品</view>
			<view class="filter-buttons">
				<view class="filter-btn ">最新上架</view>
				<view class="filter-btn">销量</view>
			</view>
		</view>

		<!-- 商品网格 -->
		<view class="products-grid">
			<view class="product-item" :style="{'border-width':(index==productList.length-1||index==productList.length-2)?0:'0.5rpx'}" v-for="(item, index) in productList" :key="index" @click="goToDetail(item)">
				<image class="product-image" :src="item.image" mode="aspectFill"></image>
				<view class="product-info">
					<view class="product-title">{{ item.title }}</view>
					<view class="product-price-box">
						<view class="product-price">{{ item.price }}</view>
						<view class="">
							<image class="heart-icon"
								src="https://epic.js-dyyj.com/uploads/20250728/2f3ae212c01fa3b67be81abc5723cf5c.png">
							</image>
							<!-- <image
         		   v-else
         		   class="heart-icon"
         		   src="https://epic.js-dyyj.com/uploads/20250728/dd7ed269b24e84a2dd141da6ab980fd6.png"
         		   @click.stop="handleLikeClick(item, index)"
         		 ></image> -->
							<image class="shop-icon"
								src="https://epic.js-dyyj.com/uploads/20250728/195bfc195a54b93c13595a01a5d8bb3b.png">
							</image>
							<!-- 	<image
         		 	  v-else
         		 	  class="shop-icon"
         		 	  src="https://epic.js-dyyj.com/uploads/20250728/77c4546ac6415f9db69bb10888d2a975.png"
         		 	  @click.isShop="handleLikeClick(item, index)"
         		 	></image> -->
						</view>
					</view>
					<view class="product-details">
						<text class="detail-item">{{ item.limitInfo }}</text>
						<text class="detail-item">{{ item.paymentInfo }}</text>
						<text class="detail-item">{{ item.viewInfo }}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部地图区域 -->
		<view class="map-section">
			<view class="map-title">业务办理 | 预约参观</view>
			<view class="map-container">
				<map class="map-component" :latitude="mapData.latitude" :longitude="mapData.longitude"
					:scale="mapData.scale"></map>
			</view>
			<view class="map-description">
				<view class="location-info">
					<image class="location-icon"
						:src="showImg('/uploads/20250728/56804fe109efd614ba955d3110cd6750.png')"
						mode="widthFix"></image>
					<text class="location-name">国家文化大数据华东区域交易平台扬州运营中心</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'EquityGoodsList',
		data() {
			return {
				productList: [{
						id: 1,
						title: '食在扬州｜世界美食之都巡礼',
						price: '699.00',
						image: 'https://images.unsplash.com/photo-1414235077428-338989a2e8c0?auto=format&fit=crop&w=800',
						isLiked: false,
						limitInfo: '限量发售 x 1000份',
						paymentInfo: '100+付款',
						viewInfo: '浏览10W'
					},
					{
						id: 2,
						title: '二十四桥｜诗意之城',
						price: '588.00',
						image: 'https://images.unsplash.com/photo-1578662996442-48f60103fc96?auto=format&fit=crop&w=800',
						isLiked: true,
						limitInfo: '限量发售 x 1000份',
						paymentInfo: '100+付款',
						viewInfo: '浏览10W'
					},
					{
						id: 3,
						title: '以手抄心｜书法体验',
						price: '699.00',
						image: 'https://images.unsplash.com/photo-1513475382585-d06e58bcb0e0?auto=format&fit=crop&w=800',
						isLiked: false,
						limitInfo: '限量发售 x 1000份',
						paymentInfo: '100+付款',
						viewInfo: '浏览10W'
					},
					{
						id: 4,
						title: '世界花园｜诗学之旅',
						price: '588.00',
						image: 'https://images.unsplash.com/photo-1490750967868-88aa4486c946?auto=format&fit=crop&w=800',
						isLiked: false,
						limitInfo: '限量发售 x 1000份',
						paymentInfo: '100+付款',
						viewInfo: '浏览10W'
					}
				],
				heartIcon: 'https://epic.js-dyyj.com/uploads/20250728/2f3ae212c01fa3b67be81abc5723cf5c.png',
				heartFilledIcon: 'https://epic.js-dyyj.com/uploads/20250728/dd7ed269b24e84a2dd141da6ab980fd6.png',
				cartIcon: 'https://images.unsplash.com/photo-1563013544-824ae1b704d3?auto=format&fit=crop&w=100',
				mapData: {
					latitude: 31.2989,
					longitude: 120.5853,
					scale: 17,

				}
			}
		},
		methods: {
			goToDetail(item) {
				uni.navigateTo({
					url: `/subPackages/equityGoods/detail?id=${item.id}`
				})
			},
			toggleLike(item, index) {
				this.productList[index].isLiked = !this.productList[index].isLiked
				uni.showToast({
					title: this.productList[index].isLiked ? '已收藏' : '取消收藏',
					icon: 'none'
				})
			},
			addToCart(item) {
				uni.showToast({
					title: '已加入购物车',
					icon: 'success'
				})
			}
		}
	}
</script>
<style>
	page {
		background-color: #F5F5F5;
	}
</style>
<style lang="scss" scoped>
	.equity-goods-page {
		min-height: 100vh;
		background: #f5f5f5;
		padding-bottom: 40rpx;
	}

	.header-section {
		padding: 60rpx 30rpx 30rpx;

		.title {
			font-size: 36rpx;
			color: #000000;
			text-align: center;
			margin-bottom: 30rpx;
			padding-bottom: 30rpx;
			font-weight: 500;
			border-bottom: 0.5rpx solid #999999;
		}

		.filter-buttons {
			display: flex;
			justify-content: space-between;
			gap: 40rpx;

			.filter-btn {
				font-size: 28rpx;
				color: #000000;
				border-radius: 20rpx;
				transition: all 0.3s;

				&.active {
					background: #007aff;
					color: white;
				}
			}
		}
	}

	.products-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 20rpx;
		padding: 30rpx;

		.product-item {
			overflow: hidden;
			border-bottom: 0.5rpx solid #999999;
			margin-bottom: 15rpx;
			padding-bottom: 20rpx;
			&:active {
				transform: scale(0.98);
			}

			.product-image {
				width: 100%;
				height: 429rpx;
				object-fit: cover;
				border-radius: 20rpx;
			}

			.product-info {
				padding: 20rpx 0;

				.product-title {
					font-size: 22rpx;
					color: #000000;
					margin-bottom: 16rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					font-weight: 500;
				}

				.product-price {
					font-size: 36rpx;
					font-weight: 500;
					color: #000000;
				}


				.product-details {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.detail-item {
						font-size: 16rpx;
						color: #808080;
					}
				}
			}
		}
	}

	.map-section {
		border-top: 0.5rpx solid #999999;
		margin: 30rpx 30rpx 0;
		overflow: hidden;

		.map-title {
			padding: 30rpx;
			font-size: 22rpx;
			font-weight: 500;
			color: #000000;
			text-align: center;
		}

		.map-container {
			position: relative;
			height: 330rpx;
			border: 6rpx solid white;
			border-radius: 20rpx;
 transform: translateY(0); 
 overflow: hidden;
			.map-component {
				width: 100%;
				height: 100%;
				border-radius: 20rpx;
			}
		}

		.map-description {
			padding: 30rpx;

			.location-info {
				display: flex;
				align-items: center;
				justify-content: center;
				gap: 16rpx;

				.location-icon {
					width: 40rpx;
					
				}

				.location-name {
					font-size: 22rpx;
					color: #808080;
				}
			}
		}
	}

	.heart-icon {
		width: 35rpx;
		height: 30rpx;
		transition: all 0.3s ease;
		flex-shrink: 0;
		top: -2rpx;
		position: relative;
		margin-right: 6rpx;

		&.liked {
			opacity: 1;
			filter: hue-rotate(320deg) saturate(2);
		}

		&:active {
			transform: scale(1.2);
		}
	}

	.shop-icon {
		width: 39rpx;
		height: 36rpx;
		transition: all 0.3s ease;
		flex-shrink: 0;
		margin-left: 10rpx;

		&.liked {
			opacity: 1;
			filter: hue-rotate(320deg) saturate(2);
		}

		&:active {
			transform: scale(1.2);
		}
	}

	.product-price-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 10rpx;
	}
</style>