<template>
	<view class="page">

		<Head></Head>
		<!-- 内容区 -->
		<view class="content">
			<!-- 动态区域 -->
			<view class="moment">
				<!-- 用户栏 -->
				<view class="userbar">
					<image :src="post.userImg" mode="aspectFill" class="userimg" alt="用户头像" />
					<text class="username">{{ post.userName }}</text>
					<button class="follow" @tap="common.openapp">
						<uni-icons v-if="post.isfollow" type="checkmarkempty" size="20" color="#333"></uni-icons>
						<text v-else>关注</text>
					</button>
				</view>

				<!-- 轮播图 -->
				<swiper v-if="post.imgs && post.imgs.length" :indicator-dots="false" :autoplay="false" :interval="3000"
					:duration="1000" :circular="true" class="swiper-banner" @change="onChange">
					<swiper-item v-for="(item, i) in post.imgs" :key="i">
						<view class="swiper-center">
							<image v-if="item.type === 'img'" :src="item.src" class="swiper-item" mode="aspectFit" alt="动态图片内容" />
							<video v-else :src="item.src" class="swiper-item" object-fit="contain" muted style="pointer-events:none;"
								alt="动态视频内容" />
							<cover-view class="swiper-mask" @tap="common.openapp">
							</cover-view>
						</view>
					</swiper-item>
				</swiper>

				<!-- 外部指示点 -->
				<view v-if="post.imgs && post.imgs.length" class="dots-bar">
					<view v-for="(dot, i) in post.imgs" :key="i" class="dot" :class="{ active: i === current }" />
				</view>

				<!-- 底部文案 -->
				<view v-if="post.copywriting && post.date" class="momentbottom">
					<text class="copywriting">{{ post.copywriting }}</text>
					<uni-dateformat :date="Date.parse(post.date.replace(/-/g, '/'))" :threshold="[0, 0]" format="yyyy-MM-dd"
						class="date-text" />
				</view>

			</view>

		</view>

		<!-- 评论区域 + 互动区域 -->
		<Comments 
			:comments="post.comments" 
			:showInteraction="true"
			:collectsum="post.collectsum"
			:likesum="post.likesum"
		/>


	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useCommonStore } from '@/stores/common.js'
import Head from '@/pages/components/head/head.vue'
import Comments from '@/pages/components/comments/comments.vue'
const common = useCommonStore()

// 当前 dot
const current = ref(0)
const onChange = e => current.value = e.detail.current

// 动态数据
const post = ref({})

// 模拟获取数据函数
const fetchPostData = async () => {
	try {
		// 使用uni.request替代axios
		const response = await new Promise((resolve, reject) => {
			uni.request({
				url: '', // 这里可以填写实际API地址
				method: 'GET',
				timeout: 1000,
				success: resolve,
				fail: reject
			})
		})

		// 处理数据...
		const mockData = {
			userId: 1000011,
			userName: 'Kun Chang-Min',
			userImg: '/static/logo.png',
			date: '2024-12-03',
			copywriting: '智能体是人类智慧的延伸，它们将成为我们最强大的工具，也是最亲密的朋友。',
			current: 0,
			isfollow: false,
			collectsum: 114514,
			likesum: 114514,
			imgs: [
				{ type: 'img', src: '/static/logo.png' },
				{ type: 'video', src: '/static/videos/啊米诺斯.mp4' },
				{ type: 'img', src: '/static/imgs/comment.webp' },
				{ type: 'img', src: '/static/imgs/image-138.webp' }
			],
			comments: [
				{
					id: 101,
					userName: 'Brad Lewin',
					atUsers: ['JackyLove'],
					content: '今天天气真不错~',
					date: '2024-12-01',
					likeCount: 99999,
					showChild: false,
					children: [
						{ id: 201, userName: 'Alice', content: '快智能体是人类智慧的延伸，它们将成为我们最强大的工具，也是最亲密的朋友。智能体是人类智慧的延伸', atUsers: ['Brad Lewin', 'JackyLove'], date: '2024-12-01', likeCount: 2 },
						{ id: 202, userName: 'Bob', content: '我同意你的观点。我记得喜欢这个版本。这个新版本对我来说Nothing好处', atUsers: [], date: '2024-12-01', likeCount: 1 }
					]
				},
				{
					id: 102,
					userName: 'Leanne Simpson',
					atUsers: ['Theshy'],
					content: '有人一起开黑吗？',
					date: '2024-12-02',
					likeCount: 1145140,
					showChild: false,
					children: [
						{ id: 203, userName: 'Carol', content: '带我一个', atUsers: [], date: '2024-12-02', likeCount: 3 }
					]
				},
				{
					id: 103,
					userName: 'Tom Hardy',
					atUsers: [],
					content: '主评论3：分享一张今晚的月亮。',
					date: '2024-12-03',
					likeCount: 999,
					showChild: false,
					children: []
				}
			]
		}

		// 将模拟数据赋值给post
		post.value = mockData

	} catch (error) {
		console.error('获取数据失败:', error)
		// 如果获取失败，使用默认数据
		post.value = {
			userId: 1000011,
			userName: 'Kun Chang-Min',
			userImg: '/static/logo.png',
			date: '2024-12-03',
			copywriting: '智能体是人类智慧的延伸，它们将成为我们最强大的工具，也是最亲密的朋友。',
			current: 0,
			isfollow: false,
			collectsum: 114514,
			likesum: 114514,
			imgs: [
				{ type: 'img', src: '/static/logo.png' }
			],
			comments: []
		}
	}
}

// 组件挂载时获取数据
onMounted(() => {
	fetchPostData()
})

</script>

<style scoped>
page,
.page {
	display: flex;
	position: relative;
	flex-direction: column;
	margin: 0;
	height: 100vh;
}

.spacerview {
	flex: 1;
	height: 0;
	pointer-events: none
}

.content {
	flex-shrink: 0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.moment {
	width: 100%;
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
}

.userbar {
	width: 100%;
	padding: 16px 16px 8px;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	gap: 10px
}

.userimg {
	width: 34px;
	height: 34px;
	border-radius: 50%;
}

.username {
	flex: 1;
	font-family: PingFangSC;
	font-size: 17px;
	font-weight: 600;
	color: #333
}

.follow {
	width: 60px;
	height: 32px;
	flex-shrink: 0;
	font-size: 14px;
	font-weight: 600;
	line-height: 32px;
	font-family: PingFangSC;
	border-radius: 8px;
	background-color: rgba(51, 51, 51, .05);
	display: flex;
	align-items: center;
	justify-content: center;
}

.follow::after {
	border: none;
}

.swiper-banner {
	width: 100%;
	height: 357px
}

swiper-item {
	display: flex;
	align-items: center;
	justify-content: center
}

.swiper-center {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center
}

.swiper-item {
	width: 100%;
	height: 100%
}

.swiper-center {
	position: relative;
}

.swiper-mask {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	background: transparent;
}

.dots-bar {
	display: flex;
	justify-content: center;
	gap: 6px;
	padding: 8px 0 0;
}

.dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: rgba(0, 0, 0, .2);
	transition: background .3s
}

.dot.active {
	background: #333
}

.momentbottom {
	padding: 16px 16px 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.copywriting {
	font-family: PingFangSC;
	font-size: 15px;
	font-weight: normal;
	font-stretch: normal;
	font-style: normal;
	line-height: normal;
	letter-spacing: normal;
	text-align: left;
	color: #000;
}

.date-text {
	color: #b1aeb2;
}

.comment {
	padding: 16px;
}

.commenthead {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	height: 29px;
	margin-bottom: 28px;
}

.commentcount {
	width: fit-content;
	height: 100%;
	font-family: PingFangSC;
	font-size: 14px;
	font-weight: 500;
	font-stretch: normal;
	font-style: normal;
	line-height: normal;
	letter-spacing: normal;
	text-align: left;
	color: #333;
}

.headswitch {
	width: 102px;
	height: 100%;
	flex-grow: 0;
	display: flex;
	align-items: center;
	justify-content: space-around;
	border-radius: 24px;
	padding: 2px;
	box-sizing: border-box;
	background-color: #f0eef1;
}

.headswitch .inact,
.act {
	width: 48px;
	height: 23px;
	font-size: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: PingFangSC;
	font-weight: normal;
	font-stretch: normal;
	font-style: normal;
	line-height: normal;
	letter-spacing: normal;
	color: #110c13;
}

.headswitch .inact {
	border-radius: 24px;
	background-color: #fff;
}

.commentdetail {
	width: 100%;
	margin-bottom: 12px;
	display: flex;
}

.commentdetailleft {
	width: 31.7px;
	height: 31.7px;
	margin-right: 12.2px;
}

.commentdetailleft image {
	width: 100%;
	height: 100%;
	border-radius: 50%;
}

.commentdetailright {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.maincomment {
	display: flex;
	flex: 1;
	flex-direction: row;
}

.commentdetailcontent {
	display: flex;
	flex-direction: column;
}

.commentusername {
	width: fit-content;
	height: 18px;
	font-family: PingFangSC;
	font-size: 13px;
	font-weight: normal;
	font-stretch: normal;
	font-style: normal;
	line-height: normal;
	letter-spacing: normal;
	text-align: left;
	color: #b1aeb2;
}

.commentusercontent {
	font-family: PingFangSC;
	font-size: 13px;
	font-weight: normal;
	font-stretch: normal;
	font-style: normal;
	line-height: normal;
	letter-spacing: normal;
	text-align: left;
	margin: 4px 0 10px;
	color: #000;
}

.date-reply {
	height: 17px;
	display: flex;
	align-items: center;
	gap: 8px;
}

.date-text,
.replytext {
	display: flex;
	align-items: center;
	height: 17px;
	line-height: 17px;
	font-size: 12px;
}

.date-text {
	color: #b1aeb2;
}

.replytext {
	color: #918e93;
}

.commentlike {
	height: 43px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6.7px;
	padding: 2px 0;
	box-sizing: border-box;
}

.commentlikecount {
	min-width: 40px;
	height: 17px;
	font-family: PingFangSC;
	font-size: 12px;
	font-weight: normal;
	font-stretch: normal;
	font-style: normal;
	line-height: 17px;
	letter-spacing: normal;
	text-align: center;
	padding: 0 4px;
	color: #918e93;
}

.commentchildcontainer {
	width: 100%;
	display: flex;
	flex-direction: column;
	margin: 14px 0 0;
}

.commentchild {
	display: flex;
	flex-direction: row;
	margin-bottom: 8px;
}

.commentchildleft {
	width: 23.5px;
	height: 23.5px;
	margin-right: 8.2px;
}

.commentchildleft image {
	width: 100%;
	height: 100%;
	border-radius: 50%;
}

.commentchildright {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.expandcomment {
	width: 96px;
	height: 17px;
	display: flex;
	align-items: center;
	flex-direction: row;
	gap: 8px;
}

.expandcommenttext {
	flex: 1;
	font-family: PingFangSC;
	font-size: 12px;
	font-weight: normal;
	font-stretch: normal;
	font-style: normal;
	line-height: normal;
	letter-spacing: normal;
	text-align: left;
	color: #110c13;
}

.interaction {
	width: 100%;
	border: solid 1px #faf9fb;
	background-color: #faf9fb;
	display: flex;
	align-items: center;
	padding: 11.5px 16px;
	flex-direction: row;
	box-sizing: border-box;
}

.editarea {
	flex: 1;
	height: 40px;
	background-color: #fff;
	border-radius: 24px;
	gap: 12px;
	padding: 0 20px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
}

.editicon {
	width: 13.3px;
	height: 14.6px;
	flex-shrink: 0;
	align-self: center;
}

.edittext {
	flex: 1;
	flex-grow: 0;
	font-family: PingFangSC;
	font-size: 14px;
	font-weight: normal;
	font-stretch: normal;
	font-style: normal;
	line-height: 40px;
	letter-spacing: normal;
	text-align: left;
	color: #918e93;
	white-space: nowrap;
}

.collection,
.like {
	height: 40px;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 5px;
}

.collectionicon,
.likeicon {
	width: 24px;
	height: 24px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.collectioncount,
.likecount {
	height: 17px;
	font-family: SFPro;
	font-size: 17px;
	font-weight: 500;
	font-stretch: normal;
	font-style: normal;
	line-height: normal;
	letter-spacing: normal;
	text-align: left;
	color: #000;
}
</style>
