<template>
	<div class="container" style="margin: 10px;">
		<el-form :inline="true" :model="model" class="demo-form-inline">
			<el-form-item label="用户名">
				<el-input v-model="model.KeyWord" placeholder="用户名"></el-input>
			</el-form-item>
			<el-form-item label="用户ID">
				<el-input v-model="model.UserId" placeholder="用户ID"></el-input>
			</el-form-item>
			<el-form-item label="状态">
				<el-select v-model="model.Type" placeholder="状态">
					<el-option label="查所有" value="-1"></el-option>
					<el-option label="未审核" value="0"></el-option>
					<el-option label="已审核" value="1"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="onSubmit">查询</el-button>
			</el-form-item>
			<el-form-item>
				<el-button type="success" @click="dialogVisible = true">新增</el-button>
			</el-form-item>
		</el-form>
		<el-table :data="tableData" style="width: 100%">
			<el-table-column prop="date" label="ID">
				<template slot-scope="scope">
					{{scope.row.id}}
				</template>
			</el-table-column>
			<el-table-column prop="date" label="用户ID">
				<template slot-scope="scope">
					{{scope.row.UserId}}
				</template>
			</el-table-column>
			<el-table-column prop="date" label="用户名">
				<template slot-scope="scope">
					{{scope.row.UserName}}
				</template>
			</el-table-column>
			<el-table-column prop="date" label="评论内容">
				<template slot-scope="scope">
					{{scope.row.commentContent}}
				</template>
			</el-table-column>
			<el-table-column prop="UserImg" label="用户头像">
				<template slot-scope="scope">
					<img :src="scope.row.UserImg" style="width: 50px;height: 50px;" />
					<!-- {{scope.row.UserImg}} -->
				</template>
			</el-table-column>
			<el-table-column prop="date" label="评论晒图">
				<template slot-scope="scope">
					<!-- {{scope.row.commentSendImg}} -->
					<img :src="'https://shangten.yiqituancity.com'+item" v-for="(item,index) in scope.row.commentSendImg" :key="index"
						style="width: 50px; height: 50px;" />
				</template>
			</el-table-column>
			<el-table-column prop="date" label="星级">
				<template slot-scope="scope">
					{{scope.row.commetNum}}
				</template>
			</el-table-column>
			<el-table-column prop="date" label="回复评论">
				<template slot-scope="scope">
					{{scope.row.ReturnContent}}
				</template>
			</el-table-column>
			<el-table-column prop="date" label="回复人">
				<template slot-scope="scope">
					{{scope.row.ReturnName}}
				</template>
			</el-table-column>
			<el-table-column prop="date" label="状态">
				<template slot-scope="scope">
					<el-tag :type="scope.row.Status==0?'success':'warn'">
						{{scope.row.Status==0?'正常':'异常'}}
					</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="date" label="审核状态">
				<template slot-scope="scope">
					<el-tag :type="scope.row.Type==0?'warn':'success'">
						{{scope.row.Type==0?'未审核':scope.row.Type==1?'已审核':'未知'}}
					</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="add_time" label="评论时间">
				<template slot-scope="scope">
					{{scope.row.add_time}}
				</template>
			</el-table-column>
			<el-table-column prop="date" label="删除">
				<template slot-scope="scope">
					<el-button type="danger" @click="DelCommentS(scope.row.id)">删除</el-button>
				</template>
			</el-table-column>
			<el-table-column prop="date" label="回复">
				<template slot-scope="scope">
					<el-button type="success"  @click="ReturnHH(scope.row.id)">回复</el-button>
				</template>
			</el-table-column>
			<el-table-column prop="date" label="审核">
				<template slot-scope="scope">
					<el-button type="primary" @click="SH(scope.row.id)" :disabled="scope.row.Type==1">审核</el-button>
				</template>
			</el-table-column>

		</el-table>
		<el-pagination
		  background
		  layout="prev, pager, next"
		  :total="model.TotalCount" @current-change="Pages" style="text-align:center;margin-top: 10px;">
		</el-pagination>
		<el-dialog title="提示" :visible.sync="dialogVisible" width="50%">
			<el-form ref="form" :model="form" label-width="80px" :rules="formrules">
				<el-form-item label="评论人头像" prop="UserImg">
					<el-upload class="avatar-uploader" action="https://shangten.yiqituancity.com/api/Upload/upload"
						:show-file-list="false" :on-success="handleAvatarSuccess">
						<img v-if="form.UserImg" :src="'https://shangten.yiqituancity.com'+form.UserImg" class="avatar">
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
				</el-form-item>
				<el-form-item label="评论图片" prop="commentSendImg">
					<el-upload action="https://shangten.yiqituancity.com/api/Upload/upload" list-type="picture-card"
						:on-preview="handlePictureCardPreview" :on-remove="handleRemove" :on-success="UpChange"
						:limit="3">
						<i class="el-icon-plus"></i>
					</el-upload>
					<el-dialog :visible.sync="dialogVisibleX">
						<img width="100%" :src="dialogImageUrl" alt="">
					</el-dialog>
					<!-- <el-input type="text" placeholder="评论图片" v-model="form.commentSendImg"></el-input> -->
				</el-form-item>
				<el-form-item label="评论人姓名" prop="UserName">
					<el-input type="text" placeholder="请输入姓名" v-model="form.UserName"></el-input>
				</el-form-item>
				<el-form-item label="评论人ID" prop="UserId">
					<el-input type="text" placeholder="请输入ID" v-model="form.UserId" maxlength="10"></el-input>
				</el-form-item>
				<el-form-item label="评论内容" prop="commentContent">
					<textarea v-model="form.commentContent" style="width: 100%;height: 50px;" placeholder="请输入内容"></textarea>
					<!-- <el-input type="text" placeholder="评论内容" v-model="form.commentContent" maxlength="20"></el-input> -->
				</el-form-item>

				<el-form-item label="星级" prop="commetNum">
					<el-input type="text" placeholder="星级" v-model="form.commetNum" maxlength="1"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="SubmitAdd">确 定</el-button>
			</span>
		</el-dialog>


		<el-dialog title="提示" :visible.sync="dialogVisibleR" width="50%">
			<el-form ref="returnModel" :model="returnModel" label-width="80px" >
				<el-form-item label="回复内容" prop="ReturnContent">
					<el-input type="text" placeholder="请输入内容" v-model="returnModel.ReturnContent"></el-input>
				</el-form-item>
				<el-form-item label="回复商家" prop="ReturnName">
					<el-input type="text" placeholder="回复商家" v-model="returnModel.ReturnName" maxlength="10"></el-input>
				</el-form-item>

			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisibleR = false">取 消</el-button>
				<el-button type="primary" @click="SubmitHH">确 定</el-button>
			</span>
		</el-dialog>






	</div>
</template>

<script>
	import {
		ReturnComment,
		AddComment,
		DelComment,
		GetCommentList,
		audit,
	} from '../../api/comment.js'
	import utils from '../../utils/utils.js'
	export default {
		data() {
			return {
				returnModel: {
					"id": 0,
					"ReturnContent": "",
					"ReturnName": "尚腾汽车养护管家"
				},
				dialogImageUrl: '',
				dialogVisibleR:false,
				dialogVisibleX: false,
				dialogVisible: false,
				
				formrules: {
					UserImg: [{
							required: true,
							message: '请选择头像',
							trigger: 'blur'
						}
						//{ pattern:/^[a-zA-Z]w{1,4}$/, message: '以字母开头，长度在2-5之间， 只能包含字符、数字和下划线'}
					],
					UserName: [{
							required: true,
							message: '请输入姓名',
							trigger: 'blur'
						}
						//{ pattern:/^[a-zA-Z]w{1,4}$/, message: '以字母开头，长度在2-5之间， 只能包含字符、数字和下划线'}
					],
					UserId: [{
						required: true,
						message: '请输入ID',
						trigger: 'blur'
					}, {
						pattern: /^[0-9]*$/,
						message: '请输入数字'
					}],
					commentContent: [{
							required: true,
							message: '请输入评论',
							trigger: 'blur'
						}
						//{ pattern:/^[a-zA-Z]w{1,4}$/, message: '以字母开头，长度在2-5之间， 只能包含字符、数字和下划线'}
					],
					commentSendImg: [{
							required: true,
							message: '请选择评论晒图',
							trigger: 'blur'
						}
						//{ pattern:/^[a-zA-Z]w{1,4}$/, message: '以字母开头，长度在2-5之间， 只能包含字符、数字和下划线'}
					],
					commetNum: [{
							required: true,
							message: '请输入星级',
							trigger: 'blur'
						}
						//{ pattern:/^[a-zA-Z]w{1,4}$/, message: '以字母开头，长度在2-5之间， 只能包含字符、数字和下划线'}
					],
				},
				tableData: [],
				model: {
					"UserId": '0',
					"Type": '-1',
					"KeyWord": "",
					"TotalCount": 0,
					"PageIndex": 1,
					"PageSize": 10,
					"Sort": [{
						"Field": "",
						"Type": 0
					}]
				},
				form: {
					"UserImg": "",
					"UserName": "",
					"UserId": 0,
					"commentContent": "",
					"commentSendImg": "",
					"commetNum": 0
				},
				ImgSrc: [],
				// AllImg: []
			}
		},
		created() {
			this.ShowComment()
		},
		methods: {
			Pages(e){
				this.model.PageIndex=e
				this.ShowComment()
			},
			// 审核
			SH(id){
				audit(id).then(res=>{
					if(res.data.code==200){
						this.$message.success('审核成功')
						this.ShowComment()
					}else{
						this.$message.error('审核失败')
					}
				})
			},
			ReturnHH(id){
				this.dialogVisibleR=true
				this.returnModel.id=id
			},
			SubmitHH(){
				ReturnComment(this.returnModel).then(res=>{
					console.log('数据',res)
					if(res.data.code==200){
						this.$message.success('回复成功')
						this.dialogVisibleR=false
						this.ShowComment()
					}else{
						this.$message.error('回复失败')
					}
				})
			},
			DelCommentS(id) {
				DelComment(id).then(res => {
					if (res.data.code == 200) {
						this.$message.success('删除成功')
						this.ShowComment()
					} else {
						this.$message.error('删除失败')
					}
				})
			},
			handleRemove(file, fileList) {
				console.log(file, fileList);
			},
			handlePictureCardPreview(file) {
				console.log('数据啊', file)
				this.dialogImageUrl = file.url;
				this.dialogVisible = true;
			},
			// 上传change事件
			UpChange(res) {
				console.log('数据', res)
				this.ImgSrc.push(res.data.data.Uri)
				this.form.commentSendImg = this.ImgSrc.toString()
				console.log('数据', this.ImgSrc)
			},
			ShowComment() {
				GetCommentList(this.model).then(res => {
					console.log('评论数据', res)
					res.data.data.rows.forEach((item, index) => {
						if(item.commentSendImg!=null ||item.commentSendImg!=''){
							item.commentSendImg=item.commentSendImg.split(',')
						}
						if(item.UserImg.startsWith('https')==false){
							item.UserImg='https://shangten.yiqituancity.com'+item.UserImg
						}
						item.add_time=utils.formatTime(item.add_time,"yyyy-MM-dd")
					})
					this.tableData = res.data.data.rows
					console.log('整体数据',this.tableData)
					this.model.TotalCount = res.data.data.total
				})
			},
			onSubmit() {
				this.ShowComment()
			},
			handleAvatarSuccess(res, file) {
				console.log('数据', res)
				this.form.UserImg = res.data.data.Uri
				// this.imageUrl = URL.createObjectURL(file.raw);
			},
			// handleAvatarSuccessI(res,file){
			// 	this.form.commentSendImg=res.data.data.Uri
			// },
			SubmitAdd() {
				this.$refs.form.validate((valid) => {
					if (valid) {
						AddComment(this.form).then(res => {
							console.log('添加数据')
							if (res.data.code == 200) {
								this.$message.success('添加评论成功')
								this.dialogVisible = false
								this.ImgSrc = []
								this.ShowComment()
							} else {
								this.$message.error('添加评论失败')
							}
						})
					}
				})
			}


		}
	}
</script>

<style>
	
	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	.avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 178px;
		height: 178px;
		line-height: 178px;
		text-align: center;
	}

	.avatar {
		width: 178px;
		height: 178px;
		display: block;
	}
</style>
