<template>
	<view class="xingmalabdetailpage modal_center">
		<span class="xingmalabdetailpagebg"
			:style="{ backgroundImage: `url(${$baseUrl}${getImageUrl(config.images.background)})` }"></span>

		<!-- 左上角头部区域 - 脱离滚动 -->
		<div class="xingmalabdetailpageheader">
			<!-- 返回按钮 -->
			<span class="xingmalabdetailpagebackbtn"
				:style="{ backgroundImage: `url(${$baseUrl}${getImageUrl(config.images.backBtn)})` }"
				@click="handleGoBack"></span>

			<!-- 用户信息 -->
			<div class="xingmalabdetailpageuserinfo">
				<image v-if="detailData.avatar" :src="detailData.avatar" class="xingmalabdetailpageavatar"
					mode="aspectFit" />
				<span class="xingmalabdetailpagenickname">{{ detailData.nickname || '星妈用户' }}</span>
			</div>
		</div>

		<span class="xingmalabdetailpagetext">{{
			detailData.content
			|| config.texts.title }}</span>
		<span class="xingmalabdetailpagetime" v-if="detailData.owner && detailData.gmtCreate">
			{{ formatTime(detailData.gmtCreate) }}
		</span>
		<span class="xingmalabdetailpagepicbg"
			:style="{ backgroundImage: `url(${$baseUrl}${getImageUrl(config.images.picBg)})` }"></span>
		<image v-if="detailData.imgUrl" :src="detailData.imgUrl" class="xingmalabdetailpagepic" mode="aspectFit" />
		<span class="xingmalabdetailpagenum">{{ config.texts.collectionNumber }}{{ detailData.bizNo || collectionNumber
		}}</span>
		<div class="xingmalabdetailpagebottomcon" v-if="detailData.state === 1">
			<span class="xingmalabdetailpagebottomconbg"
				:style="{ backgroundImage: `url(${$baseUrl}${getImageUrl(config.images.bottomConBg)})` }"></span>

			<!-- 收藏按钮 -->
			<span class="xingmalabdetailpagebottomconlikebtn" :class="{ liked: detailData.collection }"
				:style="{ backgroundImage: `url(${$baseUrl}${getImageUrl(detailData.collection ? config.images.bottomConLikeBtnSel : config.images.bottomConLikeBtn)})` }"
				@click="handleLikeClick"></span>

			<!-- 分享按钮 -->
			<button open-type="share" class="xingmalabdetailpagebottomconsharebtn"
				:style="{ backgroundImage: `url(${$baseUrl}${getImageUrl(config.images.bottomConShareBtn)})` }"
				@click="handleShareClick"></button>

			<!-- 未登录时覆盖的授权按钮层 -->
			<div v-if="homeStore && !homeStore.isLogin" class="auth-overlay">
				<!-- 收藏按钮授权覆盖 -->
				<button open-type="getPhoneNumber" @getphonenumber="(e) => onGetPhoneNumber(e, 'like')"
					class="auth-like-btn phone-auth-btn-cover"></button>

				<!-- 分享按钮授权覆盖 -->
				<button open-type="getPhoneNumber" @getphonenumber="(e) => onGetPhoneNumber(e, 'share')"
					class="auth-share-btn phone-auth-btn-cover"></button>
			</div>
		</div>
	</view>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
import { xingmaLabDetailConfig, getImageUrl } from './config.js'
import { fetchRecordDetail, fetchFavoriteAdd, fetchFavoriteRemove } from '@/api/xingmaLab.js'
import { useHomeStore } from '@/stores/home.js'
import { useUserStore } from '@/stores/user.js'

// 组件名称
defineOptions({
	name: 'XingmaLabDetailPage'
})

// 响应式数据
const collectionNumber = ref('123456789')
const detailData = ref({
	content: '',
	gmtCreate: '',
	owner: false,
	imgUrl: '',
	nickname: '',
	avatar: '',
	collection: false,
	bizNo: '',
	state: null
})

// 配置对象
const config = xingmaLabDetailConfig


// 格式化时间
const formatTime = (timeStr) => {
	if (!timeStr) return ''
	const date = new Date(timeStr)
	const year = date.getFullYear()
	const month = String(date.getMonth() + 1).padStart(2, '0')
	const day = String(date.getDate()).padStart(2, '0')
	return `${year}-${month}-${day} `
}

// 获取详情数据
const fetchDetailData = async (id) => {
	try {
		uni.showLoading({
			title: '加载中...',
			mask: true
		})

		const result = await fetchRecordDetail({ id })

		if (result.success) {
			detailData.value = result.data
			console.log('✅ 详情数据获取成功:', detailData.value)
		} else {
			throw new Error(result.message || '获取详情失败')
		}
	} catch (error) {
		console.error('❌ 获取详情失败:', error)
		uni.showToast({
			title: error.message || '获取详情失败',
			icon: 'none'
		})
	} finally {
		uni.hideLoading()
	}
}

// 获取 stores
const homeStore = useHomeStore()
const userStore = useUserStore()

// 手机号授权回调
const onGetPhoneNumber = (e, action) => {
	if (e.detail.errMsg !== 'getPhoneNumber:ok') {
		uni.showToast({
			title: '请授权使用手机号',
			icon: 'none',
		});
		return;
	}
	console.log('detail', e.detail, 'action:', action);

	// 调用手机号授权回调
	userStore.phoneCallback(e.detail).then(() => {
		// 授权成功后，根据点击的按钮执行相应功能
		if (action === 'like') {
			handleLikeClick();
		} else if (action === 'share') {
			handleShareClick();
		}
	});
}

// 方法
const handleLikeClick = async () => {
	try {
		const recordId = detailData.value.id
		if (!recordId) {
			uni.showToast({
				title: '记录ID不存在',
				icon: 'none'
			})
			return
		}

		if (detailData.value.collection) {
			// 取消收藏
			const result = await fetchFavoriteRemove({ relationId: recordId })
			if (result.success) {
				detailData.value.collection = false
				uni.showToast({
					title: '已取消收藏',
					icon: 'none'
				})
			} else {
				throw new Error(result.message || '取消收藏失败')
			}
		} else {
			// 添加收藏
			const result = await fetchFavoriteAdd({ relationId: recordId })
			if (result.success) {
				detailData.value.collection = true
				uni.showToast({
					title: '收藏成功',
					icon: 'none'
				})
			} else {
				throw new Error(result.message || '收藏失败')
			}
		}
	} catch (error) {
		console.error('收藏操作失败:', error)
		uni.showToast({
			title: error.message || '操作失败，请重试',
			icon: 'none'
		})
	}
}

const handleShareClick = () => {
	// 使用 open-type="share" 时，点击事件可以为空
	// 分享内容通过页面配置自动设置
	console.log('分享按钮被点击')
}

// 返回上一页
const handleGoBack = () => {
	// 检查是否有上一页
	const pages = getCurrentPages()
	if (pages.length > 1) {
		// 有上一页，返回上一页
		uni.navigateBack({
			delta: 1
		})
	} else {
		// 没有上一页，跳转到星妈实验室页面
		uni.redirectTo({
			url: '/pages/xingmaLab/xingmaLab'
		})
	}
}

// 生命周期
onMounted(async () => {
	// 调用 home 接口获取登录状态
	await homeStore.loadHomeInfo()

	// 获取页面跳转参数中的 id
	const pages = getCurrentPages()
	const currentPage = pages[pages.length - 1]
	const id = currentPage.options?.id || ''

	if (id) {
		console.log('🔍 获取到页面参数 id:', id)
		await fetchDetailData(id)
	} else {
		console.warn('⚠️ 未获取到页面参数 id')
		uni.showToast({
			title: '参数错误',
			icon: 'none'
		})
	}
})


// 页面分享配置
onShareAppMessage(() => {
	const shareImage = detailData.value.imgUrl || ''
	const shareContent = detailData.value.content || ''

	// 截取分享文案，超出字数显示省略号
	const maxLength = 50
	const truncatedContent = shareContent.length > maxLength
		? shareContent.substring(0, maxLength) + '...'
		: shareContent

	console.log('分享参数:', {
		title: truncatedContent,
		imageUrl: shareImage,
		path: `/pages/XingmaLabDetailPage/XingmaLabDetailPage?id=${detailData.value.id}`
	})

	return {
		title: truncatedContent,
		imageUrl: shareImage,
		path: `/pages/XingmaLabDetailPage/XingmaLabDetailPage?id=${detailData.value.id}`
	}
})

onShareTimeline(() => {
	const shareImage = detailData.value.imgUrl || ''
	const shareContent = detailData.value.content || ''

	// 截取分享文案，超出字数显示省略号
	const maxLength = 50
	const truncatedContent = shareContent.length > maxLength
		? shareContent.substring(0, maxLength) + '...'
		: shareContent

	console.log('朋友圈分享参数:', {
		title: truncatedContent,
		imageUrl: shareImage,
		path: `/pages/XingmaLabDetailPage/XingmaLabDetailPage?id=${detailData.value.id}`
	})

	return {
		title: truncatedContent,
		imageUrl: shareImage,
		path: `/pages/XingmaLabDetailPage/XingmaLabDetailPage?id=${detailData.value.id}`
	}
})



</script>

<style lang="less" scoped>
@import './XingmaLabDetailPage.less';
</style>
