<template>
	<view>
		<view class="dynamic-item" @click="toDynamicDetailPage">
			<view class="user-info-box" style="position: relative;">
				<image class="avatar" src="/static/images/default-avatar.png"></image>
				<view class="user-name">{{form.nickName}}</view>
				<image v-if="!deleteable" class="more-icon" src="/static/images/more-icon.png"></image>
				<image v-if="deleteable" class="more-icon" @click.stop="handleDelDynamics"
					src="/static/images/more-icon.png"></image>
				<!-- 删除按钮 -->
				<view class="del-btn" v-if="showDelBtn" @click.stop="handleDel" :style="'left:' + clientX + 'rpx;' +'top:' + clientY + 'rpx'">
					删除动态</view>
			</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" @click.stop="preview(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" @click.stop="preview(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>
						<view class="right" @click.stop="toPKDetailPage(1)">
							<view class="right-num">{{form.voteOptions[1].name}} {{form.voteOptions[1].voteCount}}
							</view>
						</view>
					</view>
					<view class="pk-results">
						<view class="left" :style="'flex:' + form.voteOptions[0].voteCount" @click.stop="toPKDetailPage(0)">
							<view class="results-item left-item"></view>
						</view>
						<view class="right" :style="'flex:' + form.voteOptions[1].voteCount" @click.stop="toPKDetailPage(1)">
							<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,
		delMonment,
		dynamicVote
	} from '@/api/api.js'
	import PublishComment from './PublishComment.vue';
	export default {
		name: "Dynamic-Item",
		data() {
			return {
				commentList: [{}, {}],
				showComment: false,
				commentContent: '',
				clientX: 0,
				clientY: 0,
				showDelBtn: false
			};
		},
		components: {
			PublishComment
		},
		props: {
			form: {
				type: Object,
				default: {}
			},
			deleteable: {
				type: Boolean,
				default: false
			}
		},
		methods: {
			// 点赞/取消点赞
			handleUpdateLikeStatus(likeStatus) {
				let data = {
					momentId: this.form.id,
					likeStatus
				}
				if(likeStatus == '1'){
					this.form.likeCount = this.form.likeCount + 1
					this.form.isLike = 1
				}
				if(likeStatus == '0'){
					this.form.likeCount = this.form.likeCount - 1
					this.form.isLike = 0
				}
				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)
			},
			// 展示删除动态按钮
			handleDelDynamics(e) {
				this.showDelBtn = !this.showDelBtn
				this.clientX = (e.target.offsetLeft * 2 - 148);
				this.clientY = ((e.target.offsetTop * 2) + 34);
			},
			// 删除动态
			handleDel(){
				let _this = this;
				uni.showModal({
					title: '提示',
					content: '是否确认删除动态？',
					success: function (res) {
						if (res.confirm) {
							delMonment(_this.form.id).then(res=>{
								if(res.code == 200){
									uni.showToast({
										title:'删除成功',
									})
									_this.$emit('refresh');
									uni.$emit('hanldeDynamicRefresh')
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			// 投票
			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')
					}
				})
			},
			// 预览
			preview(url) {
				uni.previewImage({
					urls: [url]
				});
			},
			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';

	.del-btn {
		position: absolute;
		width: 168rpx;
		height: 68rpx;
		line-height: 68rpx;
		border-radius: 6rpx;
		background-color: rgba(255, 255, 255, 1);
		color: rgba(102, 102, 102, 1);
		font-size: 26rpx;
		text-align: center;
		box-shadow: 0px 2px 12rpx 0px rgba(0, 0, 0, 0.2);
	}
</style>