<template>
	<view class="publishre">
		<view class="publishreItem">
			<view style="color: #333333;">{{optionItems.title}}</view>
			<view class="publishreindex">发布时间：{{optionItems.timestamp}}</view>
			<view class="publishreindex">作者：{{optionItems.creator}}</view>
			<view class="publishreindex">单位：{{optionItems.borough}}{{ '--'+optionItems.station}}</view>
		</view>
		<view class="imagetext">
			<view>
				<view v-for="(item,index) in optionItems.imageUrls" :key="index" style="text-align: center;">
					<image :lazy-load="true" 　show-menu-by-longpress='1' style="height: 460rpx;width: 95%;"
						:src="'https://www.lonsungsh.com:8083' + item" @click="srcIndex(item,index)"></image>
				</view>
				<view class="Text" style="padding: 0 0 40rpx 30rpx">
					<p class="TextITem">
						{{optionItems.comment?optionItems.comment:'无'}}
					</p>
					</br>
				</view>
			</view>
		</view>
		<u-overlay :show="showUrl" @click="showUrl = false">
			<view class="warp">
				<movable-area :scale-area="true" style="width: 100vh;">
					<movable-view direction="all" style="width: 348px; height: 300px;" @scale="onScale" scale="true"
						scale-min="1" scale-max="4" :scale-value="scale" :x="1" :y="10">
						<image　class="rect" :src="showUrlList" mode="widthFix"></image>
					</movable-view>
				</movable-area>
			</view>
		</u-overlay>


		<view>
			<u-popup :show="popupshow" mode="bottom" @close="popupshow = false" @open="open" v-if="popupshow">
				<view class="flex justify-between ai-end padding-sm mb-1 mt-1">
					<view class="com-textarea-box">
						<u--textarea :height="190" :cursorSpacing="100" class="com-textarea" :focus="focus"
							:showConfirmBar="false" placeholder="请留下您的感想" maxlength="300"></u--textarea>
						<span>回复</span>
					</view>
				</view>
			</u-popup>
		</view>

		<!-- 评论点赞 -->
		<view class="review">
			<view style="display: flex;">
				<!-- @tap.stop="showComments()" -->
				<view class="reviewItem">
					<image style="width: 100%;height: 100%;" src="../../static/campus/评论.png"></image>
				</view>
				<span style="color: #818181;font-size: 12px;margin-right: 10rpx;">{{this.reviewdataList.length}}</span>
				<!-- <view style="width: 30rpx;height: 30rpx;">
					<u-icon name="heart" color="#818181" size="32"></u-icon>
				</view>
				<span style="color: #818181;font-size: 12px;">1134</span> -->
			</view>
			<view style="display: flex;">
				<!-- <view style="width: 30rpx;height: 30rpx;">
					<u-icon name="heart" color="#818181" size="32"></u-icon>
				</view>
				<span style="color: #489dea;font-size: 12px;">赞一个</span> -->
			</view>
		</view>

		<!-- 评论 -->
		<view style="padding: 20rpx  0  0 30rpx;display: flex;width: 93%;">
			<view style="width: 50rpx; height: 47rpx;">
				<image style="width: 100%;height: 100%;" src="../../static/campus/评论区头像.png"></image>
			</view>
			<view :class="[!titleFocus?'reviewnumber':'reviewn']">
				<view :class="[!titleFocus?'textareaItem':'textareaIndex']">
					<textarea @focus="onfocus" class="textarea" auto-height v-model="titleFocus"
						:placeholder="titleFocus || '请留下您的感想'　" />
				</view>
			</view>
			<view v-if="titleFocus">
				<view style="color: ivory">1</view>
				<view class="publish" @click="onSend">发送</view>
			</view>
		</view>

		<!-- 评论数据展示  1-->
		<view v-if="reviewdataList.length" style="padding-bottom: 50px">
			<view v-for="(item,index) in reviewdataList" :key="item.id">
				<view style="padding: 20rpx  0  0 30rpx;display: flex;width: 93%;">
					<view style="width: 50rpx; height: 47rpx;">
						<image style="width: 100%;height: 100%;" :src="item.url"></image>
					</view>
					<view class="reviewList">
						<view>
							<span
								style="color: #333333;font-size: 13px;display: inline-block;width: 160rpx;">{{item.personName}}</span>
							<span style="color: #818282; font-size: 12px;">{{item.timestamp}}</span>
						</view>
						<view style="color: #818282; font-size: 12px;margin: 10rpx 0  30rpx 0;">{{item.data}}</view>
					</view>
				</view>
			</view>
		</view>
		<view v-else style="padding: 0 22px">
			<u-divider text="暂无评论" textSize="24"></u-divider>
		</view>
	</view>
</template>

<script>
	import urlTile from '../../static/campus/评论区头像.png'
	import {
		watch
	} from 'vue'
	import {
		getremarkAdd,
		getremarkgetlist
	} from '@/api/login.js'
	import {
		mapGetters,
		mapMutations
	} from 'vuex';
	import {
		getTime
	} from '@/utils/index.js'
	export default {
		data() {
			return {
				scale: 1,
				showUrl: false,
				showUrlList: '',
				show: false,
				title: '发布评论',
				titleFocus: '',
				reviewdataList: [],
				optionItems: undefined,
				popupshow: false
			}
		},
		created() {},
		onLoad: function(options) {
			const that = this
			// uni.$on('value', (data) => {
			// 	data.imageUrls = JSON.parse(data.imageUrls)
			// 	that.optionItems = data
			// 	this.getremarkget()
			// 	console.log(data);
			// })			
		},
		onShow() {
			const that = this
			const dataList = uni.getStorageSync('valueList')
			const data = JSON.parse(dataList)
			data.imageUrls = JSON.parse(data.imageUrls)
			that.optionItems = data
			this.getremarkget()
		},
		onUnload() {
			// 移除监听事件
			uni.$off('value');
		},
		beforeDestroy() {
			uni.removeStorage({key:'valueList'})
		},
		computed: {
			// 拿取vuex数据
			...mapGetters({
				userInfo: 'users/getLoginInfo',
			})
		},
		methods: {
			showComments() {
				this.popupshow = true;
			},
			open() {
				this.popupshow = true;
				console.log('open');
			},
			onfocus(e) {},
			cancel() {
				this.titleFocus = ''
				this.show = false
			},
			async getremarkget() {
				const that = this
				const resp = await getremarkgetlist({
					newsId: that.optionItems.newsId,
					personId: that.userInfo.id,
				})
				resp.data.map((item) => {
					return item['url'] = require('../../static/campus/评论区头像.png')
				})
				// resp.data.map((item) => {
				// 	return item['time'] = getTime(item.timestamp)
				// })
				that.reviewdataList = resp.data
			},
			// 发送评论
			async onSend() {
				const that = this
				const listremark = {
					newsId: that.optionItems.newsId,
					personId: that.userInfo.id,
					personName: that.userInfo.name,
					data: that.titleFocus
				}
				const resp = await getremarkAdd(listremark)
				uni.showLoading({
					title: '正在评论中...'
				});
				setTimeout(() => {
					uni.hideLoading();
					uni.showToast({
						title: '评论成功',
						icon: 'success',
						mask: true,
						success() {
							that.titleFocus = ''
							that.getremarkget()
						}
					});
				}, 800);
			},
			srcIndex(item, index) {
				console.log(item, index);
				this.showUrl = true
				this.showUrlList = 'https://www.lonsungsh.com:8083' + item
			},
			// 缩放
			onScale(e) {
				console.log(e, '22');
			}
		}
	}
</script>

<style lang="scss" scoped>
	.publishre {
		.publishreItem {
			padding: 30rpx;

			.publishreindex {
				font-size: 12px;
				margin-top: 18rpx;
				color: #989898;
			}

		}

		.imagetext {
			.Text {
				// height: 200rpx;
				width: 97%;
				font-size: 12px;
				// border: 1px solid #989898;

				.TextITem {
					text-indent: 24px;
					letter-spacing: 6rpx
				}
			}
		}

		.review {
			padding: 30rpx 0 15rpx 0;
			display: flex;
			justify-content: space-between;
			border-bottom: solid 1px #d6d6d6;
			margin: 0 28rpx;
			overflow: hidden;

			.reviewItem {
				width: 30rpx;
				height: 30rpx;
			}
		}

		.reviewnumber {
			background-color: #f0f0f0;
			// height: 60rpx;
			margin-left: 15rpx;
			width: 100%;
			// width: 310px;
			line-height: 50rpx;
			border-radius: 18rpx;
			transition: all 0.5s ease-out;
			overflow: hidden;
		}

		.reviewn {
			background-color: #f0f0f0;
			// height: 60rpx;
			margin-left: 15rpx;
			width: 70%;
			line-height: 50rpx;
			border-radius: 18rpx;
			transition: all 0.3s ease-out;
			overflow: hidden;
		}

		.textareaItem {
			margin-left: 20rpx;
			font-size: 11px;
			margin-top: 4rpx;
			height: 38rpx
		}

		.textareaIndex {
			margin-left: 20rpx;
			font-size: 11px;
			margin-top: 4rpx;
			height: 38rpx
		}

		.publish {
			width: 72rpx;
			height: 35rpx;
			border-radius: 23rpx;
			background-color: #fc2b55;
			color: #fff;
			line-height: 35rpx;
			font-size: 12px;
			margin-top: 8rpx;
			text-align: center;
			margin-left: 10rpx;
		}

		.reviewList {
			width: 100%;
			margin-left: 15rpx;
			border-bottom: solid 1px #d6d6d6;
		}

		.textarea {
			width: 97%;
			line-height: normal;
			margin-top: 13rpx;
		}

		.warp {
			display: flex;
			align-items: center;
			justify-content: center;
			// width: 93%;
			height: 258rpx;
			transform: translate(15px, 86%); // height: 100%;

			.rect {
				width: 100%;
				height: 100%;
				// background-color: #fff;
			}
		}



		.swiper {
			height: 500rpx;
		}

		.swiper-item {
			display: block;
			height: 300rpx;
			line-height: 300rpx;
			text-align: center;
		}

		.swiper-list {
			margin-top: 40rpx;
			margin-bottom: 0;
		}



	}
</style>

<style lang="scss">
	.justify-between {
		height: 128px;
		.com-textarea-box {
			width: 85%;
			display: flex;
			align-items: baseline;
			.com-textarea {
				textarea {
					min-height: 200rpx;
					padding: 20rpx;
					background: rgba(51, 51, 51, 0.02);
					color: #000 !important;
				}
			}
		}
	}
</style>