<template>
	<view class="xingmalabdetailpage modal_center">
		<span class="xingmalabdetailpagebg"
			:style="{ backgroundImage: `url(${$baseUrl}${getImageUrl(config.images.background)})` }"></span>
		<span class="xingmalabdetailpagetext">{{ config.texts.title }}</span>
		<span class="xingmalabdetailpagepicbg"
			:style="{ backgroundImage: `url(${$baseUrl}${getImageUrl(config.images.picBg)})` }"></span>
		<span class="xingmalabdetailpagepic"
			:style="{ backgroundImage: `url(${$baseUrl}${getImageUrl(config.images.pic)})` }"></span>
		<span class="xingmalabdetailpagenum">{{ config.texts.collectionNumber }}{{ collectionNumber }}</span>
		<div class="xingmalabdetailpagebottomcon">
			<span class="xingmalabdetailpagebottomconbg"
				:style="{ backgroundImage: `url(${$baseUrl}${getImageUrl(config.images.bottomConBg)})` }"></span>
			<span class="xingmalabdetailpagebottomconlikebtn" :class="{ liked: isLiked }"
				:style="{ backgroundImage: `url(${$baseUrl}${getImageUrl(config.images.bottomConLikeBtn)})` }"
				@click="handleLikeClick"></span>
			<span class="xingmalabdetailpagebottomconsharebtn"
				:style="{ backgroundImage: `url(${$baseUrl}${getImageUrl(config.images.bottomConShareBtn)})` }"
				@click="handleShareClick"></span>
		</div>
		<span class="xingmalabdetailpagetime">{{ currentTime }}</span>
	</view>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { xingmaLabDetailConfig, getImageUrl } from './config.js'

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

// 响应式数据
const collectionNumber = ref('123456789')
const isLiked = ref(false)

// 配置对象
const config = xingmaLabDetailConfig

// 计算属性
const currentTime = computed(() => {
	const now = new Date()
	const year = now.getFullYear()
	const month = String(now.getMonth() + 1).padStart(2, '0')
	const day = String(now.getDate()).padStart(2, '0')
	return `${year}-${month}-${day} 北京`
})

// 方法
const handleLikeClick = () => {
	console.log('点击点赞按钮')
	isLiked.value = !isLiked.value
	// 这里可以添加点赞逻辑
	uni.showToast({
		title: isLiked.value ? '已点赞' : '取消点赞',
		icon: 'success'
	})
}

const handleShareClick = () => {
	console.log('点击分享按钮')
	// 这里可以添加分享逻辑
	uni.showShareMenu({
		withShareTicket: true,
		menus: ['shareAppMessage', 'shareTimeline']
	})
}

// 生命周期
onMounted(() => {
	console.log('星妈实验室详情页面已加载')
})
</script>

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