<template>
	<el-main class="pi-page">
		<el-page-header @back="onBack" :content="title" class="header">
			<template #extra>
				<div class="flex items-center">
					<el-popconfirm title="确定删除吗？" @confirm="del">
						<template #reference>
							<el-button type="danger" circle icon="el-icon-delete" :disabled="!info.mess_id"/>
						</template>
					</el-popconfirm>

				</div>
			</template>
		</el-page-header>
		<section v-if="info.mess_id" class="intro">
			<el-text>发布人：{{ info.nickname }}</el-text>
			<el-text v-time="info.create_time"></el-text>
		</section>
		<section v-if="info.mess_id" v-html="info.content"/>
		<section v-if="!info.mess_id" class="empty">
			<img src="@/assets/images/404.png">
		</section>
	</el-main>
</template>

<script setup>
import {getCurrentInstance, onMounted, ref} from "vue";
import api from "@/api"
import useTabs from "@/utils/useTabs"
import {useRoute} from "vue-router"

defineOptions({
	name: "messageDetail"
})

const {proxy} = getCurrentInstance()
const route = useRoute()
let info = ref({})
let title = ref("消息不存在")

onMounted(() => {
	loadData()
})

async function loadData() {
	const res = await api.system.message.detail({id: route.query.id})
	if (res.data) {
		info.value = res.data
		title.value = info.value.title
	}
}

function onBack() {
	useTabs.close()
}

async function del() {
	const res = await api.system.message.remove({id: route.query.id})
	proxy.$message.success(res.msg)
	onBack()
}
</script>

<style lang="scss" scoped>
.pi-page {
	background: var(--el-bg-color);
	margin: 20px auto;
	padding: 25px;
}

.header {
	margin-bottom: 15px;
}

.empty {
	text-align: center;
	padding: 80px 0;
}

.intro {
	margin-bottom: 10px;
	display: flex;
	align-items: center;
	gap: 10px;
}
</style>
