<template>
	<view>
		<view style="padding-bottom: 100rpx;">
			<view class="padding-x-four d-flex flex-wrap j-sb flex-content">
				<view v-for="item in 5">
					<image class="evaluateListImgItem"
						src="https://img2.baidu.com/it/u=955956276,3392954639&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
						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="https://img1.baidu.com/it/u=3486651663,3991438881&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
								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">
				<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'
					})
				}
				
			}
		}
	}
</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>