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

		<!-- 未选择状态 -->
		<div class="xingmalabpublishpagenosel" v-if="currentState === config.states.NOSEL">
			<span class="xingmalabpublishpagenoseltextplaceholder">{{ config.texts.noSel.placeholder }}</span>
			<div class="xingmalabpublishpagenoselbottomcon">
				<span class="xingmalabpublishpagenoselbottomconbg"
					:style="{ backgroundImage: `url(${$baseUrl}${getImageUrl(config.images.noSel.bottomConBg)})` }"></span>
				<span class="xingmalabpublishpagenoselbottomconbtn"
					:style="{ backgroundImage: `url(${$baseUrl}${getImageUrl(config.images.noSel.bottomConBtn)})` }"
					@click="handleNoSelBtnClick"></span>
			</div>
			<span class="xingmalabpublishpagenoselbtn"
				:style="{ backgroundImage: `url(${$baseUrl}${getImageUrl(config.images.noSel.btn)})` }"
				@click="handleNoSelBtnClick"></span>
		</div>

		<!-- 选择状态 -->
		<div class="xingmalabpublishpagesel" v-if="currentState === config.states.SEL">
			<span class="xingmalabpublishpagenoseltext">{{ config.texts.sel.title }}</span>
			<div class="xingmalabpublishpageselbottomcon">
				<span class="xingmalabpublishpageselbottomconpublishbtnbg"
					:style="{ backgroundImage: `url(${$baseUrl}${getImageUrl(config.images.sel.bottomConPublishBtnBg)})` }"></span>
				<span class="xingmalabpublishpageselbottomconpublishbtn"
					:style="{ backgroundImage: `url(${$baseUrl}${getImageUrl(config.images.sel.bottomConPublishBtn)})` }"
					@click="handlePublishBtnClick"></span>
			</div>
			<span class="xingmalabpublishpageselpic"
				:style="{ backgroundImage: `url(${$baseUrl}${getImageUrl(config.images.sel.pic)})` }"></span>
			<span class="xingmalabpublishpageselcpver"
				:style="{ backgroundImage: `url(${$baseUrl}${getImageUrl(config.images.sel.cpver)})` }"></span>
			<span class="xingmalabpublishpageselretry"
				:style="{ backgroundImage: `url(${$baseUrl}${getImageUrl(config.images.sel.retry)})` }"
				@click="handleRetryClick"></span>
		</div>

		<!-- 成功状态 -->
		<div class="xingmalabpublishpagesuc" v-if="currentState === config.states.SUC">
			<span class="xingmalabpublishpagesucbottomconicon"
				:style="{ backgroundImage: `url(${$baseUrl}${getImageUrl(config.images.suc.bottomConIcon)})` }"></span>
			<div class="xingmalabpublishpagesucbottomcon">
				<span class="xingmalabpublishpagesucbottomconbg"
					:style="{ backgroundImage: `url(${$baseUrl}${getImageUrl(config.images.suc.bottomConBg)})` }"></span>
				<span class="xingmalabpublishpagesucbottomconbtn"
					:style="{ backgroundImage: `url(${$baseUrl}${getImageUrl(config.images.suc.bottomConBtn)})` }"
					@click="handleSuccessBtnClick"></span>
			</div>
			<span class="xingmalabpublishpagesucdesc">
				{{ config.texts.suc.desc }}
			</span>
			<span class="xingmalabpublishpagesucpicbg"
				:style="{ backgroundImage: `url(${$baseUrl}${getImageUrl(config.images.suc.picBg)})` }"></span>
			<span class="xingmalabpublishpagesucpic"
				:style="{ backgroundImage: `url(${$baseUrl}${getImageUrl(config.images.suc.pic)})` }"></span>
			<span class="xingmalabpublishpagesucnum">{{ config.texts.suc.numberPrefix }}{{ publishNumber }}</span>
		</div>
	</view>
</template>

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

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

// 响应式数据
const currentState = ref(xingmaLabConfig.states.NOSEL) // nosel, sel, suc
const publishNumber = ref('123456789')

// 配置对象
const config = xingmaLabConfig

// 方法
const handleNoSelBtnClick = () => {
	console.log('点击未选择状态按钮')
	// 这里可以添加跳转逻辑或状态切换
	// 例如：跳转到选择页面
	// currentState.value = config.states.SEL
}

const handlePublishBtnClick = () => {
	console.log('点击发布按钮')
	// 模拟发布过程
	setTimeout(() => {
		currentState.value = config.states.SUC
		// 生成随机发布编号
		publishNumber.value = Math.random().toString().slice(2, 11)
	}, 1000)
}

const handleRetryClick = () => {
	console.log('点击重试按钮')
	// 重置状态
	currentState.value = config.states.NOSEL
}

const handleSuccessBtnClick = () => {
	console.log('点击成功状态按钮')
	// 这里可以添加完成后的跳转逻辑
	uni.navigateBack()
}

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

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