<template>
	<view>
		<view class="dynamic">
			<view v-if="type==1" class="imgs">
			   <image :src="item" mode="aspectFit" class="" v-for="(item,index) in itemDetail.imgs" :key="index"></image>
			</view>
			
			<image :src="itemDetail.imgs[0]" mode="aspectFit" class="bg" v-else></image>
			
			<view class="" style="padding: 20rpx;">
<!-- 			<view class="dynamic-title">{{itemDetail.forumTitle}}</view> -->
		<!-- 	<view v-if="showAuthor" class="d-flex a-center" style="margin-top: 16rpx;">
				<image class="dynamic-avatar" :src="itemDetail.avatar"
					mode="widthFix"></image>
				<view class="dynamic-name">{{itemDetail.nickName}}</view>
			</view> -->
			<view class="dynamic-content text-overflow-two" v-if="itemDetail && itemDetail.forumTitle">
				<!-- <u-parse :content="this.$utilsMethods.replaceSpecialCharFixed(itemDetail.content)"></u-parse> -->
				{{itemDetail.forumTitle}}
			</view>
			<!-- <view class="dynamic-content text-overflow-two">{{itemDetail.content}}</view>
			<view class="d-flex flex-wrap dynamic-picture">
				<image @click="previewImage(item.picUrl)" v-for="(info,ix) in 3" class="dynamic-picture-item"
					src="https://img0.baidu.com/it/u=1893171979,2260795920&fm=253&fmt=auto&app=120&f=JPEG?w=506&h=500"
					mode="widthFix"></image>
			</view> -->
			<view class="dynamic-date">{{itemDetail.createTime}}</view>
			<view class="d-flex a-center j-sb mt-two" >
				<view class="d-flex a-center " style="width: 100%; justify-content: space-between;">
					<view  class="d-flex a-center" >
						<image class="dynamic-avatar" :src="itemDetail.avatar"
							mode="aspectFit"></image>
						<view class="dynamic-name">{{itemDetail.nickName}}</view>
					</view>
					<view class="d-flex a-center dynamic-operate">
						<image @click.stop="changeLikeState(itemDetail)" :src="itemDetail.isLiked ? require('@/static/images/zan-selected.png') : require('@/static/images/zan.png')" mode=""></image>
						<view>{{itemDetail.likesCount||0}}</view>
					</view>
					<!-- <view class="d-flex a-center dynamic-operate">
						<image @click.stop="changeCollectState(itemDetail)" :src="itemDetail.isFavorites ? require('@/static/images/collect-selected.png') : require('@/static/images/collect.png')" mode=""></image>
						<view>{{itemDetail.favoritesCount}}</view>
					</view>
					<view class="d-flex a-center dynamic-operate">
						<image src="@/static/images/message.png" mode=""></image>
						<view>{{itemDetail.commentsCount}}</view>
					</view> -->
				</view>
				<view class="d-flex">
					<view v-if="isEdit" class="dynamic-delete mr-2" @click.stop="handleEdit(itemDetail.forumId)">编辑</view>
					<view v-if="isDelete" class="dynamic-delete" @click.stop="handleDelete(itemDetail.forumId)">删除</view>
				</view>
			</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	import {
		likeOrUnlike,
		collectOrUncollect
	} from '@/api/workbench/index.js'
	export default {
		props:{
			itemDetail:{
				type:Object,
				default:()=>{}
			},
			showAuthor:{
				type:Boolean,
				default:false
			},//是否显示用户信息
			showState:{
				type:Boolean,
				default:true
			},//是否显示收藏状态
			isEdit:{
				type:Boolean,
				default:false
			},
			isDelete:{
				type:Boolean,
				default:false
			},
			type:{
				type:Number,
				default:0
			}
		},
		computed: {
			...mapGetters({
				userInfot: 'userInfo'
			})
		},
		methods: {
			// 预览图片
			previewImage() {},
			handleDelete(forumId){
				this.$emit('delete',forumId)
			},
			// 编辑
			handleEdit(forumId){
				this.$emit('edit',forumId)
			},
			// 修改点赞状态
			changeLikeState(row) {
				let self = this
				console.log(row)
				likeOrUnlike({
					forumId: row.forumId,
					userId: this.userInfot.userId,
					isLikeType: 1, //论坛1评论2
				}).then(res => {
					uni.showToast({
						title:'操作成功!',
						icon:'none'
					})
					self.$emit('refersh')
				})
			},
			// 修改收藏状态
			changeCollectState(row){
				let self = this
				collectOrUncollect({
					forumId: row.forumId,
					userId: this.userInfot.userId,
					isFavoritesType: 1, // 论坛1商家2
					favoriteType:'invitation'
				}).then(res => {
					uni.showToast({
						title:'操作成功!',
						icon:'none'
					})
					self.$emit('refersh')
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	.dynamic {
		.bg{
			width: 100%;
			height: 300rpx;
			display: block;
			border-radius: 16rpx 16rpx 0 0;
		}
		.imgs{
			display: flex;
			flex-wrap: wrap;
			
			>image{
				width: 200rpx;
				height: 200rpx;
				margin-right: 20rpx;
			}
			
		}
		&-title {
			font-size: 30rpx;
			color: #303949;
			font-weight: bold;
			display: -webkit-box;
			 -webkit-box-orient: vertical;
			 -webkit-line-clamp: 2;
			 overflow: hidden;
			 text-overflow: ellipsis;
		}
		&-avatar{
			width: 50rpx;
			height: 50rpx;
			border-radius: 50%;
		}
		&-name{
			font-size: 24rpx;
			color: #666666;
			font-weight: bold;
			margin: 0 8rpx;
			flex: 1;
			display: -webkit-box;
			 -webkit-box-orient: vertical;
			 -webkit-line-clamp: 1;
			 overflow: hidden;
			 text-overflow: ellipsis;
		}

		&-content {
			font-size: 26rpx;
			color: #666666;
			margin-top: 12rpx;
			height: 66rpx;
			 display: -webkit-box;
			  -webkit-box-orient: vertical;
			  -webkit-line-clamp: 2;
			  overflow: hidden;
			  text-overflow: ellipsis;
		}

		&-picture {

			&-item {
				width: 200rpx;
				height: 200rpx;
				background: linear-gradient(180deg, #EEEEEE 0%, #D8D8D8 100%);
				border-radius: 12rpx;
				margin-top: 16rpx;
			}

			// 除了3倍数以外的元素
			&-item:not(:nth-child(3n+3)) {
				margin-right: 16rpx;
			}

		}

		&-operate {
			>image {
				width: 40rpx;
				height: 40rpx;
			}

			>view {
				font-size: 26rpx;
				color: #666666;
				margin-left: 8rpx;
			}
		}

		// &-operate:not(:first-child) {
		// 	margin-left: 40rpx;
		// }

		&-picture:after {
			content: '';
			width: 200rpx;
		}

		&-date {
			font-size: 24rpx;
			color: #999999;
			margin-top: 16rpx;
		}
		&-delete{
			font-size: 26rpx;
			color: #FF3141;
		}
	}
	.picture {
		width: 200rpx;
		height: 200rpx;
		background: linear-gradient(180deg, #EEEEEE 0%, #D8D8D8 100%);
		border-radius: 12rpx;
		margin-top: 16rpx;
	}
	
	// 除了3倍数以外的元素
	.picture:not(:nth-child(3n+3)) {
		margin-right: 16rpx;
	}
</style>