<template>
	<view class="detail-page">
		<view class="nav" :style="{ paddingTop: statusBarTop + 'px' }">
			<view class="nav-btn" @tap="back"><uni-icons type="left" size="24" color="#18372f"></uni-icons></view>
			<view class="nav-title">{{isWant ? '求购详情' : '闲置详情'}}</view>
			<view class="nav-btn"></view>
		</view>

		<scroll-view scroll-y class="content-scroll" :style="{ paddingTop: navHeight + 'px' }">
			<view class="detail-loading" v-if="loading">加载中...</view>
			<swiper
				v-if="goods && imageList.length"
				class="image-swiper"
				circular
				indicator-dots
				:style="{ height: currentImageHeight + 'rpx' }"
				@change="changeImage"
			>
				<swiper-item v-for="(item,index) in imageList" :key="index">
					<image
						:src="item"
						mode="aspectFit"
						:data-index="index"
						@load="onImageLoad"
					></image>
				</swiper-item>
			</swiper>

			<view class="card goods-card" v-if="goods">
				<view class="price-row">
					<view class="price">{{isWant ? '预算 ¥' : '¥'}}{{displayPrice}}</view>
					<view class="origin" v-if="!isWant && goods.originPrice">¥{{goods.originPrice}}</view>
					<view class="sale-status">{{saleStatusText}}</view>
					<button class="card-share-btn" open-type="share">
						<uni-icons type="redo" size="18" color="#21b886"></uni-icons>
					</button>
				</view>
				<view class="title">{{goods.title}}</view>
				<view class="meta">
					<text>{{goods.createTime || ''}}</text>
					<text>{{goods.browseCount || 0}}浏览</text>
					<text>{{goods.regionName || '本校'}}</text>
				</view>
				<view class="tag-list" v-if="tagList.length || isWant">
					<text v-if="isWant">求购</text>
					<text v-for="item in tagList" :key="item">{{item}}</text>
				</view>
				<rich-text class="content rich-content" :nodes="goods.content || ''"></rich-text>
			</view>

			<view class="card seller-card" v-if="goods">
				<image class="avatar" :src="goods.userAvatar || defaultAvatar" mode="aspectFill"></image>
				<view class="seller-main">
					<view class="seller-name">半径卖家<text>已实名</text></view>
					<view class="online">{{goods.sellerOnlineStatus || '3天内在线'}}</view>
				</view>
				<view class="seller-tip">线下面交</view>
			</view>

			<view class="card contact-card" v-if="hasContactInfo">
				<view class="section-head">
					<text>联系方式</text>
				</view>
				<view class="contact-row" v-if="contactInfo.wechat" @tap="copyText(contactInfo.wechat, '微信号已复制')">
					<view class="contact-label">微信</view>
					<view class="contact-value">{{contactInfo.wechat}}</view>
					<view class="contact-action">复制</view>
				</view>
				<view class="contact-row" v-if="contactInfo.phone" @tap="makeCall(contactInfo.phone)">
					<view class="contact-label">电话</view>
					<view class="contact-value">{{contactInfo.phone}}</view>
					<view class="contact-action">拨打</view>
				</view>
			</view>

			<view class="card comment-card" v-if="goods && !isWant">
				<view class="section-head">
					<text>评论 {{commentsTotal}}</text>
					<view @tap="focusComment">我要评论</view>
				</view>
				<view class="comment-item" v-for="item in comments" :key="item.id">
					<image :src="item.userAvatar || defaultAvatar" mode="aspectFill"></image>
					<view class="comment-main">
						<view class="comment-name">
							半径同学
							<text v-if="item.sellerReply">卖家</text>
						</view>
						<view class="comment-content">{{item.content}}</view>
						<view class="reply-list" v-if="item.replies && item.replies.length">
							<view class="reply-item" v-for="reply in item.replies" :key="reply.id">
								<text class="reply-name">半径同学</text>
								<text class="seller-badge" v-if="reply.sellerReply">卖家</text>
								<text class="reply-target" v-if="reply.replyToUserName"> 回复 {{reply.replyToUserName}}</text>
								<text>：{{reply.content}}</text>
								<text class="reply-action" @tap="replyComment(item, reply)">回复</text>
								<text class="reply-action reply-delete" v-if="reply.userId == currentUserId" @tap="deleteComment(reply)">删除</text>
							</view>
						</view>
						<view class="comment-actions">
							<text>{{item.createTime || ''}}</text>
							<text @tap="likeComment(item)">赞 {{item.likeCount || 0}}</text>
							<text @tap="replyComment(item, item)">回复</text>
							<text @tap="reportComment(item)">举报</text>
							<text v-if="item.userId == currentUserId" @tap="deleteComment(item)">删除</text>
						</view>
					</view>
				</view>
				<view class="empty" v-if="!comments.length">还没有评论，快来问问吧</view>
			</view>

			<view class="bottom-space"></view>
		</scroll-view>

		<uni-popup ref="commentPopup" type="center" background-color="transparent" @change="onCommentPopupChange">
			<view class="comment-popup">
				<view class="comment-popup-title">{{replyTarget.id ? '回复评论' : '发表评论'}}</view>
				<view class="comment-popup-desc" v-if="replyTarget.id">
					回复 {{replyTarget.userName || '校园同学'}}
					<text @tap="cancelReply">取消回复</text>
				</view>
				<view class="comment-popup-desc" v-else>友善交流，评论内容会进行审核</view>
				<view class="comment-popup-input">
					<textarea
						v-model.trim="commentText"
						:placeholder="commentPlaceholder"
						maxlength="200"
						cursor-spacing="120"
					/>
				</view>
				<view class="comment-popup-actions">
					<view class="comment-popup-cancel" @tap="closeCommentPopup">取消</view>
					<view class="comment-popup-confirm" :class="{ disabled: commentSubmitting }" @tap="submitComment">{{commentSubmitting ? '发送中' : '发送'}}</view>
				</view>
			</view>
		</uni-popup>

		<view class="bottom-bar" v-if="goods">
			<view class="bar-action" v-if="!isWant" @tap="focusComment">
				<uni-icons type="chat" size="22" color="#59706a"></uni-icons>
				<text>评论</text>
			</view>
			<view class="bar-action" v-if="!isWant" @tap="favorite">
				<uni-icons :type="goods && goods.favorited ? 'star-filled' : 'star'" size="22" :color="goods && goods.favorited ? '#ffb22d' : '#59706a'"></uni-icons>
				<text>收藏 {{favoriteCountText}}</text>
			</view>
			<view class="bar-action" @tap="reportGoods">
				<uni-icons type="flag" size="22" color="#59706a"></uni-icons>
				<text>举报</text>
			</view>
			<view class="consult-btn" @tap="consult">{{isWant ? '我有货' : '立即咨询'}}</view>
		</view>
		<view class="page-like-effect" v-if="pageLikeEffects.length">
			<view
				class="page-like-heart"
				:class="effect.className"
				:style="effect.style"
				v-for="effect in pageLikeEffects"
				:key="effect.id"
			>
				<view class="page-like-heart-shape"></view>
			</view>
		</view>
		<ie-auth-dialog />
	</view>
</template>

<script>
	import {
		getFishGoodsDetail,
		getFishWantDetail,
		toggleFishFavorite,
		toggleFishLike,
		addFishComment,
		pageFishComments,
		deleteFishComment,
		submitFishComplaint,
		createFishChatSession,
		createFishWantChatSession
	} from '@/common/fishMarketApi.js'
	import { getIeProfile } from '@/common/ieApi.js'
	import { ensureIeVerifiedBeforeAction } from '@/common/ieRealNameAuth.js'
	import { buildHomeSharePath } from '@/utils/sharePath.js'
	import IeAuthDialog from '@/package2/components/ie-auth-dialog/ie-auth-dialog.vue'

	export default {
		components: {
			IeAuthDialog
		},
		data() {
			return {
				id: '',
				detailType: 'goods',
				statusBarTop: 24,
				goods: null,
				loading: false,
				comments: [],
				commentsTotal: 0,
				commentText: '',
				showCommentInput: false,
				commentSubmitting: false,
				replyTarget: {},
				defaultAvatar: '',
				defaultShareImage: '/static/images/img/songshu.png',
				currentUserId: uni.getStorageSync('id') || '',
				currentImageIndex: 0,
				imageHeights: {},
				likeEffectSeq: 0,
				likeEffectTimers: {},
				pageLikeEffects: []
			}
		},
		computed: {
			imageList() {
				return this.goods && this.goods.imageList && this.goods.imageList.length ? this.goods.imageList.slice(0, 5) : []
			},
			isWant() {
				return this.detailType == 'want'
			},
			displayPrice() {
				return this.isWant ? (this.goods && this.goods.expectedPrice || 0) : (this.goods && this.goods.price || 0)
			},
			tagList() {
				return this.goods && this.goods.tagList ? this.goods.tagList : []
			},
			saleStatusText() {
				const status = this.goods ? Number(this.goods.saleStatus) : 1
				if (this.isWant) return '求购中'
				if (status == 2) return '已预定'
				if (status == 3) return '已卖出'
				return '在售'
			},
			contactInfo() {
				if (!this.goods) return {}
				const value = this.goods.contactInfo
				let info = {}
				if (typeof value === 'string') {
					try {
						info = JSON.parse(value) || {}
					} catch (e) {
						info = {}
					}
				} else if (value && typeof value === 'object') {
					info = value
				}
				return {
					wechat: info.wechat || this.goods.wechat || '',
					phone: info.phone || this.goods.phone || ''
				}
			},
			hasContactInfo() {
				return !!(this.contactInfo.wechat || this.contactInfo.phone)
			},
			navHeight() {
				return this.statusBarTop + uni.upx2px(68)
			},
			currentImageHeight() {
				return this.imageHeights[this.currentImageIndex] || 560
			},
			commentPlaceholder() {
				return this.replyTarget && this.replyTarget.id ? '回复 ' + (this.replyTarget.userName || '校园同学') : '写下你的评论'
			},
			favoriteCountText() {
				return this.goods && this.goods.favoriteCount ? this.goods.favoriteCount : 0
			}
		},
		onLoad(options) {
			this.id = options && options.id ? options.id : ''
			this.detailType = options && options.type == 'want' ? 'want' : 'goods'
			if (uni.getMenuButtonBoundingClientRect) {
				const rect = uni.getMenuButtonBoundingClientRect()
				this.statusBarTop = rect.top || this.statusBarTop
			}
			this.load()
		},
		onShareAppMessage() {
			return this.buildShareInfo()
		},
		onShareTimeline() {
			const info = this.buildShareInfo()
			return {
				title: info.title,
				query: info.path.split('?')[1] || '',
				imageUrl: info.imageUrl
			}
		},
		onUnload() {
			Object.keys(this.likeEffectTimers || {}).forEach(key => {
				clearTimeout(this.likeEffectTimers[key])
			})
			this.likeEffectTimers = {}
		},
		methods: {
			back() {
				const pages = getCurrentPages ? getCurrentPages() : []
				if (pages && pages.length > 1) {
					uni.navigateBack()
					return
				}
				uni.reLaunch({
					url: '/pages/index/index?tabIndex=3'
				})
			},
			load() {
				if (!this.id) return
				this.loading = true
				const request = this.isWant ? getFishWantDetail(this.id) : getFishGoodsDetail(this.id)
				request.then(res => {
					this.goods = res
					this.currentImageIndex = 0
					this.imageHeights = {}
				}).finally(() => {
					this.loading = false
				})
				if (!this.isWant) this.loadComments()
			},
			changeImage(e) {
				this.currentImageIndex = Number(e.detail && e.detail.current) || 0
			},
			onImageLoad(e) {
				const detail = e && e.detail ? e.detail : {}
				const dataset = e && e.currentTarget ? e.currentTarget.dataset || {} : {}
				const index = Number(dataset.index) || 0
				const width = Number(detail.width)
				const height = Number(detail.height)
				if (!width || !height) return
				const adaptedHeight = Math.max(360, Math.min(900, Math.round(750 * height / width)))
				this.$set(this.imageHeights, index, adaptedHeight)
			},
			loadComments() {
				pageFishComments(this.id, 1, 20).then(page => {
					this.comments = page && (page.records || page.content) ? (page.records || page.content) : []
					this.commentsTotal = Number(page && (page.total || page.totalElements)) || this.comments.length
					uni.$emit('fishUnreadChange')
				})
			},
			async ensureVerified(actionText) {
				const profile = await getIeProfile().catch(() => null)
				return ensureIeVerifiedBeforeAction({
					profile: profile || {},
					actionText,
					authDialog: {
						badge: '校园二手',
						title: '实名认证',
						content: '根据法律法规要求，对应流程需要调用阿里云实名认证。半径里不会存储您的实名信息。',
						steps: []
					},
					reload: getIeProfile
				})
			},
			async focusComment() {
				if (this.isWant) return
				const verified = await this.ensureVerified('在校园二手评论')
				if (!verified) return
				this.replyTarget = {}
				this.openCommentPopup()
			},
			async replyComment(parent, target) {
				if (this.isWant) return
				const verified = await this.ensureVerified('回复校园二手评论')
				if (!verified) return
				this.replyTarget = {
					id: target.id,
					parentId: parent.parentId || parent.id,
					userId: target.userId,
					userName: target.userName || '校园同学'
				}
				this.openCommentPopup()
			},
			cancelReply() {
				this.replyTarget = {}
			},
			openCommentPopup() {
				this.showCommentInput = true
				this.$refs.commentPopup.open('center')
			},
			closeCommentPopup() {
				this.showCommentInput = false
				uni.hideKeyboard()
				this.$refs.commentPopup.close()
			},
			onCommentPopupChange(e) {
				if (!e.show) {
					this.showCommentInput = false
					uni.hideKeyboard()
				}
			},
			async submitComment() {
				if (this.commentSubmitting) return
				const content = String(this.commentText || '').trim()
				if (!content) return
				const replyTarget = { ...(this.replyTarget || {}) }
				const payload = {
					goodsId: this.id,
					content
				}
				if (replyTarget && replyTarget.id) {
					payload.parentId = replyTarget.parentId
					payload.replyToUserId = replyTarget.userId
					payload.replyToUserName = replyTarget.userName
				}
				this.commentSubmitting = true
				this.closeCommentPopup()
				addFishComment(payload).then(res => {
					if (!res) {
						this.commentText = content
						this.replyTarget = replyTarget
						this.openCommentPopup()
						return
					}
					this.commentText = ''
					this.replyTarget = {}
					this.loadComments()
				}).catch(() => {
					this.commentText = content
					this.replyTarget = replyTarget
					this.openCommentPopup()
				}).finally(() => {
					this.commentSubmitting = false
				})
			},
			deleteComment(item) {
				uni.showModal({
					title: '删除评论',
					content: '确定删除这条评论吗？',
					success: (res) => {
						if (!res.confirm) return
						deleteFishComment(item.id).then(() => this.loadComments())
					}
				})
			},
			likeComment(item) {
				const shouldAnimate = !item.liked
				if (shouldAnimate) {
					this.playLikeEffect()
				}
				toggleFishLike({ commentId: item.id, likeType: 'comment' }).then(res => {
					if (!res) return
					this.$set(item, 'liked', !!res.liked)
					item.likeCount = Number(res.count) || 0
				})
			},
			favorite() {
				if (!this.goods) return
				const shouldAnimate = !this.goods.favorited
				if (shouldAnimate) {
					this.playLikeEffect()
				}
				toggleFishFavorite(this.id).then(res => {
					if (!res) return
					this.$set(this.goods, 'favorited', !!res.favorited)
					this.$set(this.goods, 'favoriteCount', Number(res.count) || 0)
				})
			},
			playLikeEffect() {
				const burstId = Date.now() + '-' + (++this.likeEffectSeq)
				const tracks = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight']
				const effects = tracks.map((name, index) => ({
					id: burstId + '-' + index,
					className: 'page-like-heart--' + name,
					style: `left:${6 + ((index * 59) % 86)}%; animation-delay:${index * 95}ms;`
				}))
				this.pageLikeEffects = effects
				const timerKey = 'page'
				if (this.likeEffectTimers[timerKey]) {
					clearTimeout(this.likeEffectTimers[timerKey])
				}
				this.likeEffectTimers[timerKey] = setTimeout(() => {
					if (this.pageLikeEffects.length && String(this.pageLikeEffects[0].id).indexOf(burstId) === 0) {
						this.pageLikeEffects = []
					}
					delete this.likeEffectTimers[timerKey]
				}, 3050)
			},
			reportGoods() {
				this.report({ complaintType: this.isWant ? 'want' : 'goods', goodsId: this.id })
			},
			reportComment(item) {
				this.report({ complaintType: 'comment', goodsId: this.id, commentId: item.id })
			},
			report(base) {
				uni.showModal({
					title: '举报原因',
					editable: true,
					placeholderText: '请描述问题（必填）',
					success: (res) => {
						if (!res.confirm) return
						const reason = String(res.content || '').trim()
						if (!reason) {
							uni.showToast({ title: '请输入举报内容', icon: 'none' })
							return
						}
						submitFishComplaint({ ...base, reason }).then(() => {
							uni.showToast({ title: '已提交举报', icon: 'none' })
						})
					}
				})
			},
			async consult() {
				if (!this.goods) return
				const verified = await this.ensureVerified(this.isWant ? '响应校园二手求购' : '咨询校园二手商品')
				if (!verified) return
				if (this.isWant) {
					createFishWantChatSession(this.id).then(session => {
						if (!session || !session.sessionId) return
						uni.navigateTo({
							url: `/package2/IdleTrad/chat?sessionId=${session.sessionId}&wantId=${this.id}`
						})
					})
					return
				}
				createFishChatSession(this.id).then(session => {
					if (!session || !session.sessionId) return
					uni.navigateTo({
						url: `/package2/IdleTrad/chat?sessionId=${session.sessionId}&goodsId=${this.id}`
					})
				})
			},
			share() {
				// #ifdef MP-WEIXIN
				uni.showShareMenu({
					withShareTicket: true,
					menus: ['shareAppMessage', 'shareTimeline']
				})
				uni.showToast({ title: '请点击右上角分享', icon: 'none' })
				// #endif
				// #ifndef MP-WEIXIN
				uni.showToast({ title: '请使用右上角分享', icon: 'none' })
				// #endif
			},
			buildShareInfo() {
				const title = this.goods && this.goods.title ? this.goods.title : (this.isWant ? '校园二手求购' : '校园二手商品')
				const prefix = this.isWant ? '同学正在求购：' : '校园二手好物：'
				const typeQuery = this.isWant ? '&type=want' : ''
				const targetPath = `/package2/IdleTrad/detail?id=${this.id || ''}${typeQuery}`
				return {
					title: prefix + title,
					path: buildHomeSharePath(targetPath),
					imageUrl: this.imageList.length ? this.imageList[0] : this.defaultShareImage
				}
			},
			copyText(text, title) {
				if (!text) return
				uni.setClipboardData({
					data: String(text),
					success: () => {
						uni.showToast({ title: title || '已复制', icon: 'none' })
					}
				})
			},
			makeCall(phone) {
				if (!phone) return
				uni.makePhoneCall({
					phoneNumber: String(phone)
				})
			}
		}
	}
</script>

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

	.detail-page {
		min-height: 100vh;
		color: #17362f;
		background: #f7f9f7;
	}

	.nav {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		z-index: 20;
		padding-left: 24rpx;
		padding-right: 24rpx;
		display: flex;
		align-items: center;
		background: rgba(255, 255, 255, 0.94);
		box-shadow: 0 8rpx 20rpx rgba(20, 68, 52, 0.06);
	}

	.nav-btn {
		width: 68rpx;
		height: 68rpx;
		display: flex;
		align-items: center;
	}

	.nav-title {
		flex: 1;
		text-align: center;
		font-size: 30rpx;
		font-weight: 900;
	}

	.content-scroll {
		height: 100vh;
		box-sizing: border-box;
	}

	.detail-loading {
		padding: 120rpx 0;
		color: #8a9994;
		font-size: 25rpx;
		text-align: center;
	}

	.image-swiper {
		width: 100%;
		background: #edf3ef;
		transition: height 0.2s ease;
	}

	.image-swiper image {
		width: 100%;
		height: 100%;
		display: block;
	}

	.card {
		margin: 20rpx 24rpx 0;
		padding: 24rpx;
		border-radius: 28rpx;
		background: #fff;
		box-shadow: 0 10rpx 26rpx rgba(20, 60, 48, 0.05);
	}

	.price-row {
		display: flex;
		align-items: flex-end;
	}

	.price {
		color: #ef4c3f;
		font-size: 44rpx;
		font-weight: 900;
	}

	.origin {
		margin-left: 14rpx;
		color: #aab3af;
		font-size: 24rpx;
		text-decoration: line-through;
	}

	.sale-status {
		margin-left: auto;
		padding: 8rpx 16rpx;
		border-radius: 22rpx;
		background: #e8fbf3;
		color: #1aa376;
		font-size: 22rpx;
		font-weight: 800;
	}

	.card-share-btn {
		width: 48rpx;
		height: 48rpx;
		margin: 0 0 0 12rpx;
		padding: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 0;
		border-radius: 24rpx;
		background: #e8fbf3;
		line-height: 48rpx;
		flex-shrink: 0;
	}

	.card-share-btn::after {
		border: 0;
	}

	.title {
		margin-top: 16rpx;
		font-size: 34rpx;
		font-weight: 900;
		line-height: 48rpx;
	}

	.meta {
		margin-top: 14rpx;
		display: flex;
		gap: 22rpx;
		color: #8a9692;
		font-size: 22rpx;
	}

	.tag-list {
		margin-top: 18rpx;
		display: flex;
		flex-wrap: wrap;
		gap: 12rpx;
	}

	.tag-list text {
		padding: 6rpx 14rpx;
		border-radius: 16rpx;
		background: #f0faf6;
		color: #23a77b;
		font-size: 22rpx;
	}

	.content {
		margin-top: 22rpx;
		color: #31443e;
		font-size: 27rpx;
		line-height: 44rpx;
	}

	.rich-content {
		display: block;
		word-break: break-all;
	}

	.rich-content ::v-deep img,
	.rich-content ::v-deep image {
		max-width: 100%;
		border-radius: 16rpx;
	}

	.seller-card {
		display: flex;
		align-items: center;
	}

	.avatar,
	.comment-item image {
		width: 82rpx;
		height: 82rpx;
		border-radius: 50%;
		background: #edf3ef;
	}

	.seller-main {
		flex: 1;
		margin-left: 18rpx;
	}

	.seller-name {
		font-size: 28rpx;
		font-weight: 900;
	}

	.seller-name text {
		margin-left: 8rpx;
		color: #1aa376;
		font-size: 20rpx;
	}

	.online,
	.seller-tip {
		margin-top: 8rpx;
		color: #8a9692;
		font-size: 22rpx;
	}

	.contact-card {
		padding-bottom: 12rpx;
	}

	.contact-row {
		min-height: 78rpx;
		margin-top: 18rpx;
		padding: 0 20rpx;
		display: flex;
		align-items: center;
		border-radius: 18rpx;
		background: #f4f8f6;
	}

	.contact-label {
		width: 88rpx;
		color: #73827d;
		font-size: 24rpx;
	}

	.contact-value {
		flex: 1;
		min-width: 0;
		color: #223b35;
		font-size: 27rpx;
		font-weight: 800;
		word-break: break-all;
	}

	.contact-action {
		margin-left: 16rpx;
		color: #1aa376;
		font-size: 24rpx;
		font-weight: 900;
	}

	.section-head {
		display: flex;
		justify-content: space-between;
		font-size: 30rpx;
		font-weight: 900;
	}

	.section-head view {
		color: #22aa7d;
		font-size: 24rpx;
	}

	.comment-item {
		margin-top: 24rpx;
		display: flex;
	}

	.comment-main {
		flex: 1;
		margin-left: 16rpx;
	}

	.comment-name {
		color: #72827d;
		font-size: 23rpx;
	}

	.comment-name text,
	.seller-badge {
		margin-left: 8rpx;
		padding: 2rpx 8rpx;
		border-radius: 10rpx;
		background: #e8fbf3;
		color: #1aa376;
		font-size: 18rpx;
		font-weight: 900;
	}

	.comment-content {
		margin-top: 8rpx;
		font-size: 26rpx;
		line-height: 38rpx;
	}

	.reply-list {
		margin-top: 12rpx;
		padding: 14rpx 16rpx;
		border-radius: 16rpx;
		background: #f4f8f6;
	}

	.reply-item {
		margin-top: 8rpx;
		color: #40544e;
		font-size: 23rpx;
		line-height: 36rpx;
		word-break: break-all;
	}

	.reply-item:first-child {
		margin-top: 0;
	}

	.reply-name {
		color: #1d8f70;
		font-weight: 900;
	}

	.reply-target {
		color: #7f8d88;
	}

	.reply-action {
		margin-left: 14rpx;
		color: #22aa7d;
		font-weight: 900;
	}

	.reply-delete {
		color: #ef4c3f;
	}

	.comment-actions {
		margin-top: 10rpx;
		display: flex;
		gap: 18rpx;
		color: #9aa8a4;
		font-size: 21rpx;
	}

	.empty {
		padding: 50rpx 0;
		color: #9aa8a4;
		text-align: center;
	}

	.comment-popup {
		width: 620rpx;
		padding: 44rpx 36rpx 34rpx;
		box-sizing: border-box;
		border-radius: 32rpx;
		background: #fff;
		box-shadow: 0 28rpx 70rpx rgba(0, 35, 28, 0.16);
		transition: transform 0.2s ease;
	}

	.comment-popup-title {
		color: #17362f;
		font-size: 34rpx;
		font-weight: 900;
		text-align: center;
	}

	.comment-popup-desc {
		margin-top: 12rpx;
		color: #7a8782;
		font-size: 24rpx;
		text-align: center;
	}

	.comment-popup-desc text {
		margin-left: 16rpx;
		color: #18a878;
		font-weight: 900;
	}

	.comment-popup-input {
		min-height: 170rpx;
		margin-top: 32rpx;
		padding: 20rpx 24rpx;
		border-radius: 24rpx;
		background: #f3f7f5;
		box-sizing: border-box;
	}

	.comment-popup-input textarea {
		width: 100%;
		height: 150rpx;
		min-height: 150rpx;
		color: #253b35;
		font-size: 28rpx;
		line-height: 42rpx;
	}

	.comment-popup-actions {
		display: flex;
		margin-top: 34rpx;
		gap: 18rpx;
	}

	.comment-popup-cancel,
	.comment-popup-confirm {
		flex: 1;
		height: 76rpx;
		border-radius: 999rpx;
		font-size: 28rpx;
		font-weight: 900;
		line-height: 76rpx;
		text-align: center;
	}

	.comment-popup-cancel {
		background: #f3f6f4;
		color: #777;
	}

	.comment-popup-confirm {
		background: linear-gradient(135deg, #37c990, #19af7e);
		color: #fff;
		box-shadow: 0 12rpx 26rpx rgba(25, 175, 126, 0.18);
	}

	.comment-popup-confirm.disabled {
		opacity: .62;
	}

	.bottom-bar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 20;
		padding: 14rpx 24rpx calc(14rpx + env(safe-area-inset-bottom));
		display: flex;
		align-items: center;
		background: #fff;
		box-shadow: 0 -8rpx 22rpx rgba(20, 60, 48, 0.06);
	}

	.bar-action {
		width: 92rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #59706a;
		font-size: 20rpx;
	}

	.consult-btn {
		flex: 1;
		height: 82rpx;
		margin-left: 20rpx;
		border-radius: 44rpx;
		background: linear-gradient(135deg, #37c990, #19af7e);
		color: #fff;
		font-size: 30rpx;
		font-weight: 900;
		text-align: center;
		line-height: 82rpx;
	}

	.page-like-effect {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		overflow: hidden;
		pointer-events: none;
		z-index: 99999;
	}

	.page-like-heart {
		position: absolute;
		bottom: -230rpx;
		width: 120rpx;
		height: 120rpx;
		opacity: 0;
		transform-origin: center;
		animation-duration: 2600ms;
		animation-timing-function: cubic-bezier(.14, .66, .22, 1);
		animation-fill-mode: forwards;
	}

	.page-like-heart-shape {
		position: absolute;
		left: 50%;
		top: 50%;
		width: 72%;
		height: 72%;
		background: linear-gradient(135deg, rgba(255, 176, 207, .72), rgba(255, 88, 148, .36));
		border-radius: 18rpx 18rpx 10rpx 18rpx;
		box-shadow:
			0 18rpx 42rpx rgba(255, 104, 164, .28),
			inset 14rpx 18rpx 28rpx rgba(255, 255, 255, .32);
		filter: blur(.2rpx);
		transform: translate(-50%, -50%) rotate(45deg);
	}

	.page-like-heart-shape::before,
	.page-like-heart-shape::after {
		content: '';
		position: absolute;
		width: 100%;
		height: 100%;
		border-radius: 50%;
		background: inherit;
		box-shadow: inherit;
	}

	.page-like-heart-shape::before {
		left: -50%;
		top: 0;
	}

	.page-like-heart-shape::after {
		left: 0;
		top: -50%;
	}

	.page-like-heart--one { width: 154rpx; height: 154rpx; animation-name: pageHeartFloatOne; }
	.page-like-heart--two { width: 112rpx; height: 112rpx; animation-name: pageHeartFloatTwo; }
	.page-like-heart--three { width: 188rpx; height: 188rpx; animation-name: pageHeartFloatThree; }
	.page-like-heart--four { width: 92rpx; height: 92rpx; animation-name: pageHeartFloatFour; }
	.page-like-heart--five { width: 136rpx; height: 136rpx; animation-name: pageHeartFloatFive; }
	.page-like-heart--six { width: 82rpx; height: 82rpx; animation-name: pageHeartFloatSix; }
	.page-like-heart--seven { width: 166rpx; height: 166rpx; animation-name: pageHeartFloatSeven; }
	.page-like-heart--eight { width: 104rpx; height: 104rpx; animation-name: pageHeartFloatEight; }

	.page-like-heart--three .page-like-heart-shape,
	.page-like-heart--seven .page-like-heart-shape {
		background: linear-gradient(135deg, rgba(255, 198, 220, .66), rgba(255, 103, 158, .28));
		filter: blur(1rpx);
	}

	.page-like-heart--four .page-like-heart-shape,
	.page-like-heart--six .page-like-heart-shape,
	.page-like-heart--eight .page-like-heart-shape {
		background: linear-gradient(135deg, rgba(255, 211, 226, .74), rgba(255, 126, 174, .32));
	}

	@keyframes pageHeartFloatOne {
		0% { opacity: 0; transform: translate3d(0, 0, 0) scale(.68) rotate(-8deg); }
		14% { opacity: .82; transform: translate3d(-18rpx, -92rpx, 0) scale(1) rotate(5deg); }
		62% { opacity: .52; transform: translate3d(-72rpx, -370rpx, 0) scale(.94) rotate(-12deg); }
		100% { opacity: 0; transform: translate3d(-112rpx, -650rpx, 0) scale(.72) rotate(-22deg); }
	}

	@keyframes pageHeartFloatTwo {
		0% { opacity: 0; transform: translate3d(0, 0, 0) scale(.62) rotate(6deg); }
		16% { opacity: .7; transform: translate3d(28rpx, -112rpx, 0) scale(.92) rotate(-6deg); }
		64% { opacity: .44; transform: translate3d(96rpx, -350rpx, 0) scale(.82) rotate(12deg); }
		100% { opacity: 0; transform: translate3d(146rpx, -600rpx, 0) scale(.62) rotate(22deg); }
	}

	@keyframes pageHeartFloatThree {
		0% { opacity: 0; transform: translate3d(0, 0, 0) scale(.64) rotate(-4deg); }
		12% { opacity: .64; transform: translate3d(8rpx, -86rpx, 0) scale(.94) rotate(7deg); }
		60% { opacity: .38; transform: translate3d(-36rpx, -420rpx, 0) scale(.78) rotate(-12deg); }
		100% { opacity: 0; transform: translate3d(-68rpx, -710rpx, 0) scale(.58) rotate(-24deg); }
	}

	@keyframes pageHeartFloatFour {
		0% { opacity: 0; transform: translate3d(0, 0, 0) scale(.58) rotate(12deg); }
		18% { opacity: .68; transform: translate3d(-26rpx, -124rpx, 0) scale(.86) rotate(-6deg); }
		66% { opacity: .4; transform: translate3d(-112rpx, -320rpx, 0) scale(.72) rotate(14deg); }
		100% { opacity: 0; transform: translate3d(-166rpx, -560rpx, 0) scale(.54) rotate(26deg); }
	}

	@keyframes pageHeartFloatFive {
		0% { opacity: 0; transform: translate3d(0, 0, 0) scale(.64) rotate(-10deg); }
		14% { opacity: .72; transform: translate3d(34rpx, -96rpx, 0) scale(.96) rotate(6deg); }
		62% { opacity: .44; transform: translate3d(68rpx, -380rpx, 0) scale(.78) rotate(-10deg); }
		100% { opacity: 0; transform: translate3d(104rpx, -650rpx, 0) scale(.58) rotate(-20deg); }
	}

	@keyframes pageHeartFloatSix {
		0% { opacity: 0; transform: translate3d(0, 0, 0) scale(.52) rotate(8deg); }
		20% { opacity: .64; transform: translate3d(6rpx, -132rpx, 0) scale(.8) rotate(-8deg); }
		68% { opacity: .36; transform: translate3d(44rpx, -290rpx, 0) scale(.64) rotate(12deg); }
		100% { opacity: 0; transform: translate3d(70rpx, -500rpx, 0) scale(.48) rotate(22deg); }
	}

	@keyframes pageHeartFloatSeven {
		0% { opacity: 0; transform: translate3d(0, 0, 0) scale(.62) rotate(-8deg); }
		13% { opacity: .62; transform: translate3d(-28rpx, -82rpx, 0) scale(.88) rotate(6deg); }
		58% { opacity: .38; transform: translate3d(-86rpx, -390rpx, 0) scale(.72) rotate(-12deg); }
		100% { opacity: 0; transform: translate3d(-132rpx, -680rpx, 0) scale(.52) rotate(-22deg); }
	}

	@keyframes pageHeartFloatEight {
		0% { opacity: 0; transform: translate3d(0, 0, 0) scale(.56) rotate(10deg); }
		18% { opacity: .66; transform: translate3d(38rpx, -118rpx, 0) scale(.84) rotate(-8deg); }
		64% { opacity: .4; transform: translate3d(122rpx, -338rpx, 0) scale(.68) rotate(14deg); }
		100% { opacity: 0; transform: translate3d(178rpx, -580rpx, 0) scale(.5) rotate(26deg); }
	}

	.bottom-space {
		height: 170rpx;
	}
</style>
