<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">张三</view>
						</view>

						<view class="eval-time">发布于{{ articleData.createTime | formatDate}}</view>
					</view>
					<view class="evaluateText text-indent">
						{{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="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 {
				personEvalList: [{
						avatar: 'https://img2.baidu.com/it/u=955956276,3392954639&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
						nickname: '李哈哈',
						date: '2022-01-31',
						content: '评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容'
					},
					{
						avatar: 'https://img1.baidu.com/it/u=3486651663,3991438881&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
						nickname: '李小乖',
						date: '2022-05-11',
						content: '评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容'
					},
					{
						avatar: 'https://img1.baidu.com/it/u=3486651663,3991438881&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
						nickname: '李晓扎',
						date: '2022-05-11',
						content: '评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容'
					},
					{
						avatar: 'https://img1.baidu.com/it/u=3486651663,3991438881&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
						nickname: '李小乖',
						date: '2022-05-11',
						content: '评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容'
					},
					{
						avatar: 'https://img1.baidu.com/it/u=3486651663,3991438881&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
						nickname: '李晓扎',
						date: '2022-05-11',
						content: '评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容'
					},
				],
				articleData:{},
				userQuery:{
					pageNum:1,
					pageSize:10,
					articleId:null
				},
				userEvalList:[],
				content:'',//评论的内容
			}
		},
		onLoad(option) {
			console.log(option.id,'接受的')
			this.getDetail(option.id)
			this.getUserEvalList(option.id)
		},
		methods: {
			getDetail(id){
				let that = this
				articleDetail(id).then(res=>{
					console.log(res,'文章详情')
					if(res.code == 200){
						that.articleData = res.data
					}
				})
			},
			getUserEvalList(id){
				let that = this
				that.userQuery.articleId = id
				userEvaluateGet(that.userQuery).then(res=>{
					console.log(res,'用户评论列表')
					if(res.code == 200){
						if(res.total > 0){
							this.userEvalList = res.rows
						}
					}
				})
			},
			handleSend(){
				let that = this
				that.content = that.content.trim()
				if(that.content){
					addUserEvaluate({content:this.content.trim()}).then(res=>{
						console.log('发送',res)
					})
				}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>
