<template>
	<view>
		<view style="padding-bottom: 100rpx;">
			<view class="padding-x-four d-flex flex-wrap j-sb flex-content">
				<view v-for="(item,index) in articleData.fileVos" @click="handlePreview(item,index)">
					<image class="evaluateListImgItem" :src="item.url" mode="scaleToFill"></image>
				</view>
			</view>
			<view class="paddding-x-two">
				<view class="eval-box">
					<view class="evaluate-title">{{articleData.title}}</view>
					<view class="d-flex a-center j-sb margin-top-two">
						<view class="d-flex a-center">
							<image class="img" src="../../static/logoLogin.png" mode="widthFix"></image>
							<view class="evaluate-name">{{articleData.createUser ? articleData.createUser : '官方发布'}}
							</view>
						</view>

						<view class="eval-time">发布于{{ articleData.createTime | formatDate}}</view>
					</view>
					<view class="evaluateText text-indent" v-html="articleData.content"></view>
				</view>
			</view>
			<view class="bgWhite" v-if="userEvalList.length">
				<view class="padding-aval">
					<comment-list :personEvalList="userEvalList"></comment-list>
				</view>
			</view>
		</view>
		<view class="comment-box">
			<view class="paddding-x-two comment-box-height d-flex a-center j-sb">
				<input v-model="evalQuery.content" class="send-input" type="text" placeholder="评论一下吧">
				<view class="send-btn-box" @click="handleSend">发送</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		articleDetail,
		userEvaluateGet,
		addUserEvaluate
	} from '../../api/order/index.js'
	export default {
		data() {
			return {
				articleData: {},
				userQuery: {
					pageNum: 1,
					pageSize: 10,
					articleId: null
				},
				userEvalList: [],
				evalQuery: {
					content: '', //评论的内容
					articleId: '', //文章id
					deleteStatus: 0
				}
			}
		},
		onLoad(option) {
			this.getDetail(option.id)
			this.getUserEvalList(option.id)
		},
		methods: {
			getDetail(id) {
				let that = this
				articleDetail(id).then(res => {
					if (res.code == 200) {
						that.articleData = res.data
					}
				})
			},
			getUserEvalList(id) {
				let that = this
				that.userQuery.articleId = id
				userEvaluateGet(that.userQuery).then(res => {
					if (res.code == 200) {
						if (res.total > 0) {
							this.userEvalList = res.rows
						}
					}
				})
			},
			async handleSend() {
				let that = this
				if (that.evalQuery.content) {
					that.$set(that.evalQuery, 'content', that.evalQuery.content.trim())
					that.$set(that.evalQuery, 'articleId', that.articleData.id)
					const data_back = await addUserEvaluate(that.evalQuery)
					const {
						code
					} = data_back
					if (code === 200) {
						that.evalQuery.content = ''
						uni.showToast({
							title: '评论成功!',
							icon: 'none',
							duration: 2000,
							success() {
								let clearTime = setTimeout(() => {
									clearTimeout(clearTime)
									that.$uniGo.navigateBack({
										delta: 1
									})
								}, 1000)
							}
						})
					}
				} else {
					return uni.showToast({
						title: '不可发布空白内容',
						icon: 'none'
					})
				}

			},
			//图片预览
			handlePreview(item, index) {
				let that = this
				var photoList = that.articleData.fileVos.map(item => { // item 获取到的图片地址
					return item.url;
				});
				uni.previewImage({
					current: index,
					urls: photoList,
					loop: true
				})
			}
		}
	}
</script>

<style>
	page {
		background: #F7F8F9;
	}

	.padding-aval {
		padding: 30rpx 40rpx;
	}

	.eval-box {
		width: 710rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		margin: 20rpx auto;
	}

	.evaluate-title {
		font-size: 28rpx;
		font-weight: bold;
		margin-top: 10rpx;
	}

	/* 头像 */
	.img {
		width: 60rpx;
		height: 60rpx;
		display: table;
		border-radius: 50%;
	}

	.evaluate-name {
		font-size: 28rpx;
		margin-left: 10rpx;
	}

	.flex-content:after {
		content: '';
		width: 210rpx;
	}

	.evaluateListImgItem {
		width: 210rpx;
		height: 210rpx;
		margin-top: 10rpx;
		/* margin-right: 10rpx;
		margin-top: 10rpx; */
	}

	/* 内容样式 */
	.evaluateText {
		margin-top: 10rpx;
		font-size: 24rpx;
		letter-spacing: 0.5px;
		line-height: 40rpx;
	}

	.text-indent {
		text-indent: 2rem;
	}

	.eval-time {
		color: #666666;
		font-size: 24rpx;
	}

	.comment-box {
		width: 100%;
		height: 98rpx;
		background: #F8F8F8;
		position: fixed;
		bottom: 0;
	}

	.comment-box-height {
		height: 98rpx;
	}

	.send-input {
		width: 550rpx;
		height: 60rpx;
		background: #FFFFFF;
		border-radius: 6rpx;
		color: #999999;
		font-size: 22rpx;
		padding-left: 26rpx;
		box-sizing: border-box;
	}

	.send-btn-box {
		width: 140rpx;
		height: 60rpx;
		background: #2C66FF;
		border-radius: 6rpx;
		text-align: center;
		line-height: 60rpx;
		color: #FFFFFF;
		font-size: 22rpx;
	}
</style>
