<template>
	<div style="cursor: default">
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item>专家诊断系统</el-breadcrumb-item>
			<el-breadcrumb-item :to="{ path: '/index/expertPostList' }"
				>帖子列表</el-breadcrumb-item
			>
			<el-breadcrumb-item>帖子详情</el-breadcrumb-item>
		</el-breadcrumb>
		<el-card class="box-card">
			<div slot="header" class="clearfix" style="cursor: default">
				<span
					><i
						class="tit_icon"
						:style="{ backgroundImage: 'url(' + icon01 + ')' }"
					></i
					>帖子</span
				>
				<el-button
					style="float: right"
					size="mini"
					type="primary"
					@click="answerFun"
					>我要回答</el-button
				>
			</div>
			<div class="item" style="cursor: default">
				<div class="tit">
					<i
						class="tit_icon"
						v-if="obj.heat == 1"
						:style="{ backgroundImage: 'url(' + icon02 + ')' }"
					></i
					>{{ obj.title }}
				</div>
				<div class="con" v-html="obj.content"></div>
				<!-- 判断是否关联识别解决 -->
				<div class="detail" v-if="obj.pest_id">
					<div class="img_box">
						<img :src="pestInfo.img_urls" @error="errImg" />
					</div>
					<div class="content">
						<p>害虫害科目 : {{ pestInfo.course }}</p>
						<p>病虫害名字 : {{ pestInfo.name }}</p>
						<p>病虫害区分 : {{ pestInfo.code == 1 ? '病害' : '虫害' }}</p>
						<p>防治方法 : {{ pestInfo.prevention }}</p>
					</div>
				</div>
			</div>
			<div class="answer_item" style="cursor: default" v-for="item in commentList" :key="item.lower">
				<div class="user_info">
					<div class="img_box">
						<template v-if="item.image">
							<img :src="item.image" @error="errImg" />
						</template>
						<template v-else>
							<img :src="$imghost+defaultimg" />
						</template>
					</div>
					<div class="info">
						<p class="name">
							{{ item.username }} <span v-if="item.user_type == 1">置顶</span>
						</p>
						<p class="date">{{ (item.uptime * 1000) | formatTime }}</p>
					</div>
				</div>
				<p class="content" v-html="item.content"></p>
				<!-- 判断是否是当前用户发的评论 默认只可以删除本用户的评论-->
				<span
					class="del"
					v-if="item.username == username"
					@click="delCommont(item.lower)"
					>删除</span
				>
			</div>
			<el-pagination
				background
				layout="prev, pager, next"
				:page-size="8"
				:total="totalNum"
				:current-page="page"
				@current-change="changePage"
			></el-pagination>
		</el-card>
		<!-- 我的回答 -->
		<el-dialog
			title="我的回答"
			:visible.sync="answerDialogVisible"
			@close="AddDialogClosed"
			width="50%"
		>
			<editor :tinymceHtml="answerCon" @inp="inp($event)"></editor>
			<div style="margin-top: 10px">
				<el-button type="primary" size="mini" @click="answerSubm()"
					>发布</el-button
				>
				<el-button size="mini" @click="answerDialogVisible = false"
					>取消</el-button
				>
			</div>
		</el-dialog>
	</div>
</template>

<script>
// 引入tinymce富文本编辑器组件
import Editor from '@/components/editor/Editor'
export default {
	data() {
		return {
			defaultimg:'/images/expertDiagnosis/img01.png',
			icon01: require('@/assets/images/expertDiagnosis/1.png'),
			icon02: require('@/assets/images/expertDiagnosis/6.png'),
			answerDialogVisible: false,
			answerCon: '',
			page: 1,
			totalNum: null,
			obj: JSON.parse(this.$route.query.item), //帖子的详情
			pestInfo: {}, //识别结果信息，针对识别结果的发帖才会有
			commentList: [] //评论列表
		}
	},
	computed: {
		username() {
			return localStorage.getItem('username')
		}
	},
	mounted() {
		this.getAnswerList() //帖子回复列表
		this.getPestInfo() //识别结果
	},
	methods: {
		answerSubm() {
			this.$axios({
				method: 'POST',
				url: '/api/api_gateway?method=pest.pests.pests_new_idea',
				data: this.qs.stringify({
					lower: this.obj.lower,
					content: this.answerCon
				})
			}).then((res) => {
				if (res.data.message == '') {
					this.answerDialogVisible = false
					this.getAnswerList() //调用评论列表
				}
			})
		},
		answerFun() {
			this.answerDialogVisible = true
		},
		inp(el) {
			this.answerCon = el.sunHtml
		},
		changePage(val) {
			this.page = val
		},
		getAnswerList() {
			this.$axios({
				method: 'POST',
				url: '/api/api_gateway?method=pest.pests.pests_answers_list',
				data: this.qs.stringify({
					page_size: 5,
					page: this.page,
					lower: this.obj.lower
				})
			}).then((res) => {
				if (res.data.message == '') {
					let data = res.data.data.data
					this.commentList = data
					this.totalNum = res.data.data.nums
				}
			})
		},
		getPestInfo() {
			if (this.obj.pest_id != null) {
				this.$axios({
					method: 'POST',
					url: '/api/api_gateway?method=pest.pests.pests_info',
					data: this.qs.stringify({
						pest_id: this.obj.pest_id
					})
				}).then((res) => {
					if (res.data.message == '') {
						if (res.data.message == '') {
							this.pestInfo = res.data.data
						}
					}
				})
			}
		},
		AddDialogClosed() {
			this.answerCon = ''
		},
		// 列表图片加载失败
		errImg(e) {
			e.target.src = $imghost+'/images/expertDiagnosis/ku/noData.jpg'
		},
		delCommont(lower) {
			this.$confirm('确定删除这条评论么?', '信息', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(() => {
					this.$axios({
						method: 'POST',
						url: '/api/api_gateway?method=pest.pests.del_pests_card',
						data: this.qs.stringify({
							lower,
							card: 2 //1 帖子   2  评论
						})
					}).then((res) => {
						if (res.data.message == '') {
							this.$message({
								type: 'success',
								message: '删除成功!'
							})
							this.getAnswerList()
						} else {
							this.$message({
								type: 'error',
								message: '删除失败!'
							})
						}
					})
				})
				.catch(() => {
					this.$message({
						type: 'info',
						message: '取消删除！'
					})
				})
		}
	},
	components: {
		Editor
	}
}
</script>

<style lang='less' scoped>
.tit_icon {
	display: inline-block;
	width: 20px;
	height: 16px;
	background-size: auto 100%;
	background-repeat: no-repeat;
}
.item {
	padding: 10px 0;
	border-bottom: 1px dashed #ddd;
	.tit {
		font-size: 16px;
		color: #333;
	}
	.con {
		font-size: 14px;
		padding: 10px 0;
		line-height: 20px;
		color: #666;
		/deep/img {
			width: 80px !important;
			max-height: 80px !important;
		}
	}
	.detail {
		display: flex;
		padding: 20px 0;
		color: #666;
		.img_box {
			width: 200px;
			img {
				width: 100%;
			}
		}
		.content {
			flex: 1;
			font-size: 12px;
			padding-left: 20px;
			line-height: 20px;
		}
	}
}
.answer_item {
	padding: 15px 0;
	border-bottom: 1px solid #eee;
	&::after {
		content: '';
		display: block;
		clear: both;
	}
	.user_info {
		display: flex;
		justify-content: flex-start;
		padding: 10px 0;
		.img_box {
			width: 50px;
			height: 50px;
			border-radius: 50%;
			overflow: hidden;
			img {
				width: 100%;
				height: 100%;
			}
		}
		.info {
			padding-left: 20px;
			.name {
				color: #333;
				font-size: 14px;
				span {
					font-size: 12px;
					background: #20b6fd;
					color: #fff;
					padding: 2px 12px;
					border-radius: 4px;
					margin-left: 5px;
				}
			}
			.date {
				font-size: 12px;
				color: #666;
				padding: 5px 0;
			}
		}
	}
	.content {
		font-size: 14px;
		line-height: 22px;
		color: #666;
		/deep/img {
			width: 80px !important;
			max-height: 80px !important;
		}
	}
	.del {
		color: red;
		float: right;
		cursor: pointer;
	}
	.del:hover {
		text-decoration: underline;
	}
}
</style>