<template>
	<view class="detail_container">
		<uni-card>
			<template v-slot:title>
				<view class="message_title">
					未读公告3未读公告3未读公告3未读公告3未读公告3未读公告3
				</view>
			</template>
			<view class="message_container">
				<uni-card :border="false" :is-shadow="false" spacing="0px" margin="0px">
					<template v-slot:title>
						<view class="message_info">
							<uni-row :gutter="20">
								<uni-col :xs="{span: 20}" :sm="{span: 16, offset: 1}">
									<view class="user">
										<text class="user_pre">发布者:</text>
										账户3
									</view>
								</uni-col>
								<uni-col :xs="{span: 20}" :sm="6">
									<view class="time">
										2024/10/10
									</view>
								</uni-col>
							</uni-row>
						</view>
					</template>
					<view class="message_contant">
						<u-parse :content="message" :selectable="true" @navigate="parseNavigate">
						</u-parse>
					</view>
				</uni-card>
			</view>
		</uni-card>
	</view>
</template>

<script setup lang="ts">
	import { onLoad } from '@dcloudio/uni-app';
	import { onMounted, ref } from 'vue';
	import $tab from '@/plugins/tab';
	import uParse from '@/components/gaoyia-parse/parse.vue'
	onLoad((option) => {
		console.log('option', option);
	})
	const message = ref('');
	onMounted(() => {
		message.value = "<p>正文<br><br></p><h1>H1内容</h1><h2>H2内容</h2><h3>H3内容</h3><h4>H4内容</h4><h5>H5内容</h5><a href=\"https://www.douyin.com/user/MS4wLjABAAAAoT36HajHfEPMCVKeiukoxGkYU0k0s0NA5khixKqH5Pk\" target=\"_blank\">链接地址</a><p style=\"text-align: left;\">链接图片<img src=\"https://50006360.s21i.huaweicloudsite.cn/4/ABUIABAEGAAg6PTOtwYohbu8vAIw8AM4gAI.png\" alt=\"链接图片\" data-href=\"\" style=\"\"></p><blockquote>引用</blockquote><p><strong>加粗</strong></p><p><u>下划线</u></p><p><em>倾斜</em></p><p><u><strong>加粗+下划线</strong></u></p><p><em><strong>加粗+倾斜</strong></em></p><p><u><em>下划线+倾斜</em></u></p><p><s>删除线</s></p><p><code>行内代码</code></p><p><sup>上标</sup></p><p><sub>下标</sub></p><p><s><code>行内代码+删除线</code></s></p><p><s><u><em><code><strong>加粗+下划线+倾斜+删除线+行内代码</strong></code></em></u></s></p><p><span style=\"color: rgb(225, 60, 57);\">红色文字</span></p><p><span style=\"color: rgb(255, 236, 61);\">黄色文字</span></p><p><span style=\"color: rgb(66, 144, 247);\"><s><u><em><code><strong>蓝色文字+加粗+下划线+倾斜+删除线+行内代码</strong></code></em></u></s></span></p><p><span style=\"color: rgb(0, 0, 0); background-color: rgb(255,255,0);\">黄色背景</span></p><p><span style=\"color: rgb(9, 109, 217); background-color: rgb(255,0,0);\"><s><u><em><code><strong>红色背景+蓝色文字+加粗+下划线+倾斜+删除线+行内代码</strong></code></em></u></s></span></p><p><span style=\"font-size: 12px;\">12px字号</span><span style=\"font-size: 32px;\">32px字号</span></p><p><span style=\"font-size: 14px;\">14px字号</span><span style=\"font-size: 48px;\">48px字号</span></p><p><span style=\"font-family: 仿宋;\">仿宋 </span><span style=\"font-family: 宋体;\">宋体</span></p><p style=\"line-height: 3;\"><span style=\"font-family: 宋体;\">3行高 </span></p><p style=\"line-height: 2;\"><span style=\"font-family: 宋体;\">2行高</span></p><ul><li><span style=\"font-family: 宋体;\">无序列表</span></li><li><span style=\"font-family: 宋体;\">无序列表</span></li></ul><ol><li><span style=\"font-family: 宋体;\">有序列表</span></li><li><span style=\"font-family: 宋体;\">有序列表</span></li></ol><div data-w-e-type=\"todo\"><input type=\"checkbox\" disabled ><span style=\"font-family: 宋体;\">待办</span></div><div data-w-e-type=\"todo\"><input type=\"checkbox\" disabled ><span style=\"font-family: 宋体;\">待办</span></div><p style=\"text-align: left;\"><span style=\"font-family: 宋体;\">左对齐</span></p><p style=\"text-align: right;\"><span style=\"font-family: 宋体;\">右对齐</span></p><p style=\"text-align: center;\"><span style=\"font-family: 宋体;\">居中</span></p><p style=\"text-align: justify;\"><span style=\"font-family: 宋体;\">两侧对齐</span></p><p style=\"text-indent: 2em; text-align: left;\"><span style=\"font-family: 宋体;\">增加缩进</span></p><p style=\"text-align: left;\"><span style=\"font-family: 宋体;\">\uD83D\uDE00表情</span></p><p style=\"text-align: left;\"><span style=\"font-family: 宋体;\"> </span> </p><p style=\"text-align: left;\">100图片<img src=\"https://50006360.s21i.huaweicloudsite.cn/4/ABUIABAEGAAg6PTOtwYohbu8vAIw8AM4gAI.png\" alt=\"图片描述\" data-href=\"\" style=\"\"></p><p style=\"text-align: left;\">50图片<img src=\"https://50006360.s21i.huaweicloudsite.cn/4/ABUIABAEGAAg6PTOtwYohbu8vAIw8AM4gAI.png\" alt=\"\" data-href=\"\" style=\"width: 50%;\"></p><p style=\"text-align: left;\">30图片<img src=\"https://50006360.s21i.huaweicloudsite.cn/4/ABUIABAEGAAg6PTOtwYohbu8vAIw8AM4gAI.png\" alt=\"\" data-href=\"\" style=\"width: 30%;\"></p><table style=\"width: auto;\"><tbody><tr><th colSpan=\"1\" rowSpan=\"1\" width=\"auto\">表格</th><th colSpan=\"1\" rowSpan=\"1\" width=\"auto\">表格</th></tr><tr><td colSpan=\"1\" rowSpan=\"1\" width=\"auto\">表格</td><td colSpan=\"1\" rowSpan=\"1\" width=\"auto\">表格</td></tr><tr><td colSpan=\"1\" rowSpan=\"1\" width=\"auto\">表格</td><td colSpan=\"1\" rowSpan=\"1\" width=\"auto\"><img src=\"https://50006360.s21i.huaweicloudsite.cn/4/ABUIABAEGAAg6PTOtwYohbu8vAIw8AM4gAI.png\" alt=\"\" data-href=\"\" style=\"width: 30%;\"/>表格30图片</td></tr></tbody></table><pre><code class=\"language-css\">代码块 css语言\n代码块</code></pre><p>分割线</p><hr/><p>分割线</p>"

	})
	// 超链接 跳转
	function parseNavigate(href, e) {
		$tab.navigateTo('./URLView?url=' + encodeURIComponent(href));
	}
</script>

<style lang="scss">
	.detail_container {
		.message_title {
			font-size: 1.3rem;
			font-weight: bold;
			margin-top: 5px;
		}

		.message_container {
			.message_info {
				margin-bottom: 10px;
				.user {
					font-size: 1.2rem;

					.user_pre {
						font-weight: bold;
					}
				}

				.time {
					font-size: 1rem;
				}
			}
			.message_contant_container {
			}
		}
	}
</style>