<template>
	<view>
		<view class="dynamic-item" @click="toDynamicDetailPage">
			<view class="user-info-box">
				<image class="avatar" src="/static/images/default-avatar.png"></image>
				<view class="user-name">{{form.nickName}}</view>
				<image class="more-icon" src="/static/images/more-icon.png"></image>
			</view>
			<view class="topics-box" v-if="form.topicNames && form.topicNames.length >0">
				<template v-for="(name,index) in form.topicNames">
					<view class="topic-box-common" @click.stop="toTopicDetailPage(name,index)"># {{name}}</view>
				</template>
			</view>
			<view class="dynamic-content-box">
				<view class="text">{{form.content}}</view>
				<view class="imgs" v-if="form.type=='IMAGE'&&form.attachments && form.attachments.length > 0">
					<template v-for="(item,index) in form.attachments">
						<image class="item" :src="item.url"></image>
					</template>
				</view>
				<view class="imgs" v-if="form.type=='VIDEO'&&form.attachments && form.attachments.length > 0">
					<template v-for="(item,index) in form.attachments">
						<video class="item" :src="item.url"></video>
					</template>
				</view>
			</view>
			<view class="datetime-box">{{form.createTime}}</view>
			<view class="operation-box">
				<view class="favorite-box">
					<image src="/static/images/favorite.png" v-if="form.isLike==0" class="icon"
						@click.stop="handleUpdateLikeStatus(1)"></image>
					<image src="/static/images/favorite-active.png" v-if="form.isLike==1"
						@click.stop="handleUpdateLikeStatus(0)" class="icon"></image>
					<view class="num">{{form.likeCount}}</view>
				</view>
				<view class="comment-box" @click.stop="handleOpenComment">
					<image class="icon" src="/static/images/comment-icon.png"></image>
					<view class="text">评论</view>
				</view>
			</view>
			<!-- pk -->
			<view class="pk-box" v-if="form.isEnableVote==1">
				<view class="pk-title-box">
					<image src="/static/images/pk-icon.png" class="pk-icon"></image>
					<view class="pk-title-text">{{form.voteTitle}}</view>
				</view>
				<view class="pk-imgs" v-if="form.voteOptionType=='IMAGE' && form.voteOptions.length>0 ">
					<template v-for="(item,index) in form.voteOptions">
						<image :src="item.imageUrl" class="img"></image>
					</template>
				</view>
				<!-- 未投票 -->
				<view v-if="form.isVote==0">
					<view class="pk-btns" v-if="form.voteOptions.length>0 ">
						<view class="btns red-btn" @click.stop="handleVote(form.voteOptions[0])">
							{{form.voteOptions[0].name}}</view>
						<image src="/static/images/pk-img.png" class="img"></image>
						<view class="btns blue-btn" @click.stop="handleVote(form.voteOptions[1])">
							{{form.voteOptions[1].name}}</view>
					</view>
					<view class="pk-tips">点击上方按钮，选择你的观点</view>
				</view>
				<!-- 已投票，显示投票结果 -->
				<view v-if="form.isVote==1" >
					<view class="pk-results" >
						<view class="left" @click.stop="toPKDetailPage(0)">
							<view class="left-num">{{form.voteOptions[0].name}} {{form.voteOptions[0].voteCount}}</view>
						    <view class="results-item left-item"></view>
						</view>
						<view class="right" @click.stop="toPKDetailPage(1)">
							<view class="right-num" >{{form.voteOptions[1].name}} {{form.voteOptions[1].voteCount}}</view>
							<view class="results-item right-item"></view>
						</view>
					</view>

					<view class="results-sum" @click.stop="toPKDetailPage(0)">
						<view>{{form.voteCount}}人参与</view>
						<image src="/static/images/detail-icon.png" class="icon"></image>
					</view>
				</view>
			</view>
			<!-- 评论区 -->
			<view class="comment-box" v-if="form.isEnableComment==1">
				<view class="comment-display-box" v-if="form.comments&& form.comments.length>0">
					<view class="comment-item" v-for="(item,index) in form.comments">
						<view class="user-info">
							<view class="username">{{item.nickName}}：</view>
							<view class="datetime">2025-07-01 04:21:21</view>
						</view>
						<view class="content" v-if="!item.replyNickName" @click.stop="handleReplayComment(item)">{{item.content}}</view>
						<view class="content" v-else @click.stop="handleReplayComment(item)">
							回复<span style="color: #0058B6;">{{item.replyNickName}}：</span>:{{item.content}}
						</view>
						<!-- <view class="tips">未精选，仅自己可见</view> -->
					</view>
				</view>
			</view>
		</view>
		<!-- 发布评论区 -->
		<publish-comment :form="form" ref="publishCommentRef" @refresh="$emit('refresh')"></publish-comment>
	</view>
</template>

<script>
	import {
		dynamicLikeUnlike,

		dynamicVote
	} from '@/api/api.js'
	import PublishComment from './PublishComment.vue';
	export default {
		name: "Dynamic-Item",
		data() {
			return {
				commentList: [{}, {}],
				showComment: false,
				commentContent: '',
			};
		},
		components:{
			PublishComment
		},
		props: {
			form: {
				type: Object,
				default: {}
			}
		},
		methods: {
			// 点赞/取消点赞
			handleUpdateLikeStatus(likeStatus) {
				let data = {
					momentId: this.form.id,
					likeStatus
				}
				dynamicLikeUnlike(data).then(res => {
					if (res.code == 200) {
						this.$emit('refresh')
					}
				})

			},
			// 打开评论区
			handleOpenComment() {
				// this.showComment = true
				this.$refs.publishCommentRef.openModal()
			},
			// 回复评论
			handleReplayComment(item){
				console.log(item)
				this.$refs.publishCommentRef.openModal(item)
			},

			// 投票
			handleVote(item) {
				let data = {
					momentId: this.form.id,
					optionCode: item.code
				}
				dynamicVote(data).then(res => {
					console.log(res)
					if (res.code == 200) {
						uni.showToast({
							title: '投票成功'
						})
						this.$emit('refresh')
					}
				})
			},
			toDynamicDetailPage() {
				let pathName = window.location.pathname
				if(pathName.indexOf('/pages/dynamic-detail/dynamic-detail') > -1){
					return;
				}
				uni.navigateTo({
					url: '/pages/dynamic-detail/dynamic-detail?momentId=' + this.form.id
				})
			},
			toTopicDetailPage(name, index) {
				let topicId = this.form.topicIds[index]
				uni.navigateTo({
					url: `/pages/topic-detail/topic-detail?topicId=${topicId}&topicName=${name}`
				})
			},
			toPKDetailPage(index) {
				let item = this.form.voteOptions[index];
				let options = JSON.stringify(this.form.voteOptions)
				uni.navigateTo({
					url: `/pages/pk-detail/pk-detail?momentId=${this.form.id}&index=${index}&voteOptions=${options}`
				})
			}
		}
	}
</script>

<style lang="scss">
	@import '@/static/styles/index.scss';
</style>
