<template>
	<div>
		<div class="crumbs">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item><i class="el-icon-lx-punch"></i> 数据库</el-breadcrumb-item>
				<el-breadcrumb-item>数据库讨论区 - 详情</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="container">
			<div class="title_header">
				<span>{{title_header}}</span>
			</div>
			<div class="talk-text">
				<h2>111111111111111</h2>
				<p>2222222222</p>
			</div>
			<div class="handle-box">
				<el-button type="primary" icon="el-icon-lx-message" class="handle-del" @click="add_Selection">评论</el-button>
			</div>
			<div class="talk_conmt">
				<div class="comment" v-for="item in comments">
					<div class="info">
						<img class="avatar" :src="item.fromAvatar" width="36" height="36" />
						<div class="right">
							<div class="name">{{item.fromName}}</div>
							<div class="date">{{item.date}}</div>
						</div>
					</div>
					<div class="contet">{{item.content}}</div>
					<div class="control">
						<span class="like" :class="{active: item.isLike}" @click="likeClick(item)">
							<i class="iconfont icon-like"></i>
							<span class="like-num">{{item.likeNum > 0 ? item.likeNum + '人赞' : '赞'}}</span>
						</span>
						<span class="comment-reply" @click="showCommentInput(item)">
							<i class="iconfont icon-comment"></i>
							<span>回复</span>
						</span>
					</div>
					<div class="reply">
						<div class="item" v-for="reply in item.reply">
							<div class="reply-content">
								<span class="from-name">{{reply.fromName}}</span><span>: </span>
								<span class="to-name">@{{reply.toName}}</span>
								<span>{{reply.content}}</span>
							</div>
							<div class="reply-bottom">
								<span>{{reply.date}}</span>
								<span class="reply-text" @click="showCommentInput(item, reply)">
									<i class="iconfont icon-comment"></i>
									<span>回复</span>
								</span>
							</div>
						</div>
						<div class="write-reply" v-if="item.reply.length > 0" @click="showCommentInput(item)">
							<i class="el-icon-edit"></i>
							<span class="add-comment">添加新评论</span>
						</div>
						<transition name="fade">
							<div class="input-wrapper" v-if="showItemId === item.id">
								<el-input class="gray-bg-input" v-model="inputComment" type="textarea" :rows="3" autofocus placeholder="写下你的评论">
								</el-input>
								<div class="btn-control">
									<span class="cancel" @click="cancel">取消</span>
									<el-button class="btn" type="success" round @click="commitComment">确定</el-button>
								</div>
							</div>
						</transition>
					</div>
				</div>
			</div>
			<div class="pagination">
				<el-pagination background layout="total, prev, pager, next" :current-page="query.pageIndex" :page-size="query.pageSize"
				 :total="link_Total" @current-change="handlePageChange"></el-pagination>
			</div>
		</div>

		<!-- 添加弹出框 -->
		<el-dialog title="添加" :visible.sync="addVisible" width="30%">
			<el-form ref="add_Form" :model="addForm" :rules="rules" label-width="85px">
				<el-form-item label="标题" prop="name">
					<el-input v-model="addForm.name"></el-input>
				</el-form-item>
				<el-form-item label="内容" prop="name">
					<el-input v-model="addForm.name" type="textarea" rows="4"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="addVisible = false">取 消</el-button>
				<el-button type="primary" @click="saveAdd(addForm)">确 定</el-button>
			</span>
		</el-dialog>

	</div>
</template>

<script>
	export default {
		props: {
			type: Array,
			required: true
		},
		data() {
			return {
				query: {
					db_id: this.$route.query.db_num,
					pageIndex: 1,
					pageSize: 20
				},
				addForm: {
					db_id: this.$route.query.db_num,
				},
				role_pd: localStorage.getItem('admin_role'), //身份判断
				comments: [],
				commentData: [],
				inputComment: '',
				showItemId: '',
				multipleSelection: [],
				addVisible: false,
				link_Total: 0,
				aid: -1,
				title_header: "",
				id: -1,
				rules: {
					name: [{
						required: true,
						message: '请输入标题',
						trigger: 'blur'
					}]
				},
				data: [{
						id: 'comment0001', //主键id
						date: '2018-07-05 08:30', //评论时间
						ownerId: 'talents100020', //文章的id
						fromId: 'errhefe232213', //评论者id
						fromName: '犀利的评论家', //评论者昵称
						fromAvatar: 'http://ww4.sinaimg.cn/bmiddle/006DLFVFgy1ft0j2pddjuj30v90uvagf.jpg', //评论者头像
						likeNum: 3, //点赞人数
						content: '非常靠谱的程序员', //评论内容
						reply: [ //回复，或子评论
							{
								id: '34523244545', //主键id
								commentId: 'comment0001', //父评论id，即父亲的id
								fromId: 'observer223432', //评论者id
								fromName: '夕阳红', //评论者昵称
								fromAvatar: 'https://wx4.sinaimg.cn/mw690/69e273f8gy1ft1541dmb7j215o0qv7wh.jpg', //评论者头像
								toId: 'errhefe232213', //被评论者id
								toName: '犀利的评论家', //被评论者昵称
								toAvatar: 'http://ww4.sinaimg.cn/bmiddle/006DLFVFgy1ft0j2pddjuj30v90uvagf.jpg', //被评论者头像
								content: '赞同，很靠谱，水平很高', //评论内容
								date: '2018-07-05 08:35' //评论时间
							},
							{
								id: '34523244545',
								commentId: 'comment0001',
								fromId: 'observer567422',
								fromName: '清晨一缕阳光',
								fromAvatar: 'http://imgsrc.baidu.com/imgad/pic/item/c2fdfc039245d688fcba1b80aec27d1ed21b245d.jpg',
								toId: 'observer223432',
								toName: '夕阳红',
								toAvatar: 'https://wx4.sinaimg.cn/mw690/69e273f8gy1ft1541dmb7j215o0qv7wh.jpg',
								content: '大神一个！',
								date: '2018-07-05 08:50'
							}
						]
					},
					{
						id: 'comment0002',
						date: '2018-07-05 08:30',
						ownerId: 'talents100020',
						fromId: 'errhefe232213',
						fromName: '毒蛇郭德纲',
						fromAvatar: 'http://ww1.sinaimg.cn/bmiddle/006DLFVFgy1ft0j2q2p8pj30v90uzmzz.jpg',
						likeNum: 0,
						content: '从没见过这么优秀的人',
						reply: []
					}
				]
			};
		},
		created() {
			this.getData();
			console.log(this.comments)
		},
		methods: {
			// 获取资料库列表数据
			getData() {
				this.$api
					.post('master/Datebase/getDatas', this.query)
					.then(res => {
						if (res.code == 0) {
							// this.title_header = res.data.journal.title;
							for (let i = 0; i < res.data.dataList.length; i++) {
								let date = new Date(parseInt(res.data.dataList[i].ctime) * 1000);
								let Y = date.getFullYear() + '-';
								let M = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) + '-' : date.getMonth() + 1 + '-';
								let D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
								res.data.dataList[i].ctime = Y + M + D;
							}
							// this.listData = res.data.dataList;
							// this.link_Total = res.data.dataList.length || 0;

						} else {
							this.$message.error(res.msg);
						}
					})
					.catch(err => {
						this.$message.error(err);
					});

				this.comments = this.data;
			},

			// 删除
			deletfile(item, event) {
				this.$confirm('确定要删除吗？', '提示', {
						type: 'warning'
					})
					.then(() => {
						this.$api
							.post('master/Datebase/delData', item)
							.then(res => {
								if (res.code == 0) {
									this.$message.success('删除成功');
									this.getData();
								} else {
									this.$message.error(res.msg);
								}
							})
							.catch(err => {
								this.$message.error(err);
							});
					})
					.catch(() => {});
			},
			// 添加操作
			add_Selection(index, row) {
				this.aid = index;
				this.addVisible = true;
			},
			// 保存添加
			saveAdd(addForm) {
				this.$refs.add_Form.validate((valid) => {
					if (valid) {
						this.$api
							.post('master/Datebase/addData', this.addForm)
							.then(res => {
								if (res.code == 0) {
									this.addVisible = false;
									this.$refs.add_Form.resetFields();
									this.$message.success(`添加成功`);
									this.getData();
								} else {
									this.$message.error(res.msg);
								}
							})
							.catch(err => {
								this.$message.error(err);
							});

					} else {
						this.$message.error('error submit!!');
						return false;
					}
				});

			},

			// 删除操作
			handleDelete(index, row) {
				// 二次确认删除
				this.$confirm('确定要删除吗？', '提示', {
						type: 'warning'
					})
					.then(() => {
						this.$api
							.post('master/Journal/delJournalAbs', row)
							.then(res => {
								if (res.code == 0) {
									this.$message.success('删除成功');
									this.getData();
								} else {
									this.$message.error(res.msg);
								}
							})
							.catch(err => {
								this.$message.error(err);
							});
					})
					.catch(() => {});
			},

			// 分页导航
			handlePageChange(val) {
				this.$set(this.query, 'pageIndex', val);
				this.getData();
			},

			/**
			 * 点赞
			 */
			likeClick(item) {
				if (item.isLike === null) {
					Vue.$set(item, "isLike", true);
					item.likeNum++
				} else {
					if (item.isLike) {
						item.likeNum--
					} else {
						item.likeNum++
					}
					item.isLike = !item.isLike;
				}
			},

			/**
			 * 点击取消按钮
			 */
			cancel() {
				this.showItemId = ''
			},

			/**
			 * 提交评论
			 */
			commitComment() {
				console.log(this.inputComment);
			},

			/**
			 * 点击评论按钮显示输入框
			 * item: 当前大评论
			 * reply: 当前回复的评论
			 */
			showCommentInput(item, reply) {
				if (reply) {
					this.inputComment = "@" + reply.fromName + " "
				} else {
					this.inputComment = ''
				}
				this.showItemId = item.id
			}
		}
	};
</script>

<style>
	.handle-box {
		margin-bottom: 20px;
	}

	.upload-demo .el-upload {
		text-align: left;
		width: 200px;
		height: 35px;
	}

	.el-upload-list__item:first-child {
		margin-top: 0;
	}

	.el-upload--text {
		border: 0;
	}

	.talk_conmt {
		/* padding: 0 10px; */
		box-sizing: border-box;
	}

	.talk_conmt .comment {
		display: flex;
		flex-direction: column;
		padding: 10px 0;
		border-bottom: 1px solid #F2F6FC;
	}

	.talk_conmt .comment .info {
		display: flex;
		align-items: center;
	}

	.talk_conmt .comment .info .avatar {
		border-radius: 50%;
	}

	.talk_conmt .comment .info .right {
		display: flex;
		flex-direction: column;
		margin-left: 10px;
	}

	.talk_conmt .comment .info .right .name {
		font-size: 14px;
		color: #303133;
		margin-bottom: 5px;
		font-weight: 500;
	}

	.talk_conmt .comment .info .right .date {
		font-size: 12px;
		color: #909399;
	}

	.contet {
		font-size: 14px;
		color: #303133;
		line-height: 20px;
		padding: 10px 0;
	}

	.control {
		display: flex;
		align-items: center;
		font-size: 14px;
		color: #909399;
	}

	.control .like {
		display: flex;
		align-items: center;
		margin-right: 20px;
		cursor: pointer;
	}

	.control .like.active,
	.control .like:hover {
		color: #409EFF;
	}

	.control .like .iconfont {
		font-size: 14px;
		margin-right: 5px;
	}

	.comment-reply {
		display: flex;
		align-items: center;
		cursor: pointer;
	}

	.comment-reply:hover {
		color: #333;
	}

	.comment-reply .iconfont {
		font-size: 14px;
		margin-right: 5px;
	}


	.reply {
		margin: 10px 0;
		border-left: 2px solid #DCDFE6;
	}

	.reply .item {
		margin: 0 10px;
		padding: 10px 0;
		border-bottom: 1px dashed #EBEEF5;
	}

	.reply .item .reply-content {
		display: flex;
		align-items: center;
		font-size: 14px;
		color: #303133;
	}

	.reply .item .reply-content .from-name {
		color: #409EFF;
	}

	.reply .item .reply-content .to-name {
		color: #409EFF;
		margin-left: 5px;
		margin-right: 5px;
	}

	.reply .item .reply-bottom {
		display: flex;
		align-items: center;
		margin-top: 6px;
		font-size: 12px;
		color: #909399;
	}

	.reply .item .reply-bottom .reply-text {
		display: flex;
		align-items: center;
		margin-left: 10px;
		cursor: pointer;
	}

	.reply .item .reply-bottom .reply-text:hover {
		color: #333
	}

	.reply .item .reply-bottom .reply-text .icon-comment {
		margin-right: 5px;
	}


	.reply .write-reply {
		display: flex;
		align-items: center;
		font-size: 14px;
		color: #909399;
		padding: 10px;
		cursor: pointer;
	}

	.reply .item .write-reply:hover {
		color: #303133;
	}

	.reply .item .el-icon-edit {
		margin-right: 5px;
	}


	.reply .fade-enter-active,
	.reply .fade-leave-active {
		transition: opacity 0.5s;
	}

	.reply .fade-enter,
	.reply .fade-leave-to {
		opacity: 0;
	}

	.reply .input-wrapper {
		padding: 10px;
	}

	.reply .input-wrapper .gray-bg-input,
	.reply .input-wrapper .el-input__inner {
		/*background-color: #67C23A;*/
	}

	.reply .input-wrapper .btn-control {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		padding-top: 10px;
	}

	.reply .input-wrapper .btn-control .cancel {
		font-size: 14px;
		color: #606266;
		margin-right: 20px;
		cursor: pointer;
	}

	.reply .input-wrapper .btn-control:hover {
		color: #333;
	}


	.reply .input-wrapper .btn-control .confirm {
		font-size: 16px;
	}
</style>
