<template>
	<div>
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item>专家诊断系统</el-breadcrumb-item>
			<el-breadcrumb-item>帖子列表</el-breadcrumb-item>
		</el-breadcrumb>
		<el-row :gutter="10">
			<el-col :xs="24" :sm="24" :md="18" :lg="18" :xl="18">
				<el-card class="box-card">
					<div slot="header" class="clearfix">
						<span
							><i
								class="tit_icon"
								:style="{ backgroundImage: 'url(' + icon01 + ')' }"
							></i
							>交流圈</span
						>
						<el-button
							style="float: right"
							size="mini"
							type="warning"
							@click="checkPost"
							>{{ tit }}</el-button
						>
						<el-button
							@click="postFun"
							style="float: right; margin-right: 10px"
							size="mini"
							type="primary"
							>我要发帖</el-button
						>
					</div>
					<!-- 帖子 -->
					<template v-if="postList.length > 0">
						<div
							class="item"
							v-for="item in postList"
							:key="item.lower"
							@click="goDetail(item)"
						>
							<div class="img-box">
								<template v-if="item.img_urls">
									<img :src="$host + item.img_urls"/>
								</template>
								<template v-else>
									<img src="@/assets/images/expertDiagnosis/img01.png" />
								</template>
							</div>
							<div class="txt">
								<!-- heat   1 精帖 0 普通帖 -->
								<p class="tit">
									<i
										v-if="item.heat == 1"
										class="tit_icon"
										:style="{ backgroundImage: 'url(' + icon02 + ')' }"
									></i
									>{{ item.title }}
								</p>
								<div
									class="con"
									v-html="$options.filters.tinymceHtml(item.content)"
								></div>
							</div>
							<div class="date">
								<span>{{ item.num }}个回答</span> |
								<span>{{ (item.adtime * 1000) | formatTime }}</span
								><br />
								<span
									v-if="post == 1"
									class="del"
									@click.stop="delPost(item.lower)"
									>删除</span
								>
							</div>
						</div>
						<el-pagination
							background
							layout="prev, pager, next"
							:page-size="5"
							:total="totalNum"
							:current-page="page"
							@current-change="changePage"
						></el-pagination>
					</template>
					<template v-else>
						<div style="width: 272px; margin: 0 auto">
							<img src="@/assets/images/expertDiagnosis/zanwu.png" alt="" />
						</div>
					</template>
				</el-card>
			</el-col>
			<el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6">
				<el-card class="box-card">
					<div slot="header" class="clearfix">
						<span
							><i
								class="tit_icon"
								:style="{ backgroundImage: 'url(' + icon02 + ')' }"
							></i
							>精帖</span
						>
					</div>
					<div
						@click="goDetail(item)"
						class="topPost_item"
						v-for="item in topPostList"
						:key="item.lower"
					>
						<div class="img-box">
							<template v-if="item.img_urls">
								<img :src="$host + item.img_urls" @error="errImg"/>
							</template>
							<template v-else>
								<img src="@/assets/images/expertDiagnosis/img01.png" />
							</template>
						</div>
						<div class="content">
							<p class="tit"><i class="el-icon-star-on"></i>{{ item.title }}</p>
							<p
								class="con"
								v-html="$options.filters.tinymceHtml(item.content)"
							></p>
							<div class="date">
								<span><i class="el-icon-chat-dot-round"></i>{{ item.num }}</span
								><span
									><i class="el-icon-time"></i
									>{{ (item.adtime * 1000) | formatTime }}</span
								>
							</div>
						</div>
					</div>
				</el-card>
			</el-col>
		</el-row>
		<!-- 我要发帖弹框 -->
		<el-dialog
			title="发帖"
			:visible.sync="postDialogVisible"
			@close="AddDialogClosed"
			width="50%"
		>
			<el-form
				ref="postRef"
				:model="postForm"
				label-position="right"
				label-width="80px"
				:rules="postFormRules"
			>
				<el-form-item label="标题：" prop="tit">
					<el-input v-model="postForm.tit"></el-input>
				</el-form-item>
				<el-form-item label="正文：" prop="content">
					<editor :tinymceHtml="postForm.content" @inp="inp($event)"></editor>
				</el-form-item>
				<el-form-item class="handAddFormBtn">
					<el-button type="primary" size="mini" @click="postSubm()"
						>发布</el-button
					>
					<el-button size="mini" @click="postDialogVisible = false"
						>取消</el-button
					>
				</el-form-item>
			</el-form>
		</el-dialog>
	</div>
</template>

<script>
// 引入tinymce富文本编辑器组件
import Editor from '@/components/editor/Editor'
export default {
	data() {
		return {
			icon01: require('@/assets/images/expertDiagnosis/1.png'),
			icon02: require('@/assets/images/expertDiagnosis/6.png'),
			post: 0, //0代表所有帖子，1代表我的帖子
			totalNum: null,
			tit: '我的发帖',
			page: 1,
			postList: [],
			postDialogVisible: false,
			postForm: {
				tit: '',
				content: '',
				img_urls: ''
			},
			topPostList: [], //精帖
			postFormRules: {
				tit: [{ required: true, message: '请输入标题', trigger: 'blur' }],
				content: [
					{ required: true, message: '请输入发帖内容', trigger: 'blur' }
				]
			}
		}
	},
	created() {
		this.getList('') //全部发帖
		this.topPost() //精帖排行
	},
	filters: {
		tinymceHtml(value) {
			let str = value.replace(/<[^>]+>/g, '')
			return str
		}
	},
	methods: {
		changePage(val) {
			this.page = val
			if (this.post == 0) {
				this.getList('') //全部发帖
			} else {
				this.getList('my') //全部发帖
			}
		},
		checkPost() {
			this.post = this.post == 1 ? '0' : '1'
			this.tit = this.tit == '我的发帖' ? '全部帖子' : '我的发帖'
			if (this.post == 0) {
				//所有帖子
				this.getList('')
			} else {
				//我的帖子
				this.getList('my')
			}
		},
		inp(el) {
			this.postForm.content = el.sunHtml
			this.postForm.img_urls = el.imgSrc
		},
		postFun() {
			this.postDialogVisible = true
		},
		postSubm() {
			this.$refs.postRef.validate((valid) => {
				if (!valid) {
					return false
				}
				this.$axios({
					method: 'POST',
					url: '/api/api_gateway?method=pest.pests.pests_new_idea',
					data: this.qs.stringify({
						title: this.postForm.tit,
						content: this.postForm.content,
						img_urls: this.postForm.img_urls
					})
				}).then((res) => {
					if (res.data.message == '') {
						this.postDialogVisible = false
						this.getList('') //全部发帖
					}
				})
			})
		},
		goDetail(item) {
			this.$router.push({
				path: 'expertPostDetail',
				query: { item: JSON.stringify(item) }
			})
		},
		getList(screen) {
			this.$axios({
				method: 'POST',
				url: '/api/api_gateway?method=pest.pests.pests_answers_list',
				data: this.qs.stringify({
					page_size: 5,
					page: this.page,
					screen //传screen有值，我的发帖，不传全部发帖
				})
			}).then((res) => {
				if (res.data.message == '') {
					let data = res.data.data.data
					this.postList = data
					this.totalNum = res.data.data.nums
				}
			})
		},
		// 列表图片加载失败
		errImg(e) {
			e.target.src = require('@/assets/images/expertDiagnosis/ku/noData.jpg')
		},
		delPost(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: 1 //1 帖子   2  评论
						})
					}).then((res) => {
						if (res.data.message == '') {
							this.$message({
								type: 'success',
								message: '删除成功!'
							})
							this.getList('my') //我的发帖
							this.topPost()
						} else {
							this.$message({
								type: 'error',
								message: '删除失败!'
							})
						}
					})
				})
				.catch(() => {
					this.$message({
						type: 'info',
						message: '取消删除！'
					})
				})
		},
		topPost() {
			this.$axios({
				method: 'POST',
				url: '/api/api_gateway?method=pest.pests.pests_heat_rank'
			}).then((res) => {
				if (res.data.message == '') {
					this.topPostList = res.data.data.data
				}
			})
		},
		AddDialogClosed() {
			this.postForm.tit = ''
			this.postForm.content = ''
		}
	},
	components: {
		Editor
	}
}
</script>

<style lang='less' scoped>
.item {
	cursor: pointer;
	padding-bottom: 20px;
	display: flex;
	justify-content: space-between;
	.img-box {
		width: 150px;
		height: 120px;
		overflow: hidden;
		img {
			width: 100%;
			height: 100%;
		}
	}
	.txt {
		flex: 1;
		padding: 0 20px;
		.tit {
			font-size: 16px;
			color: #14a478;
			padding: 5px 0;
		}
		.con {
			font-size: 14px;
			margin: 5px 0;
			color: #666;
			line-height: 20px;
			height: 60px;
			overflow: hidden;
			// /deep/img {
			// 	width: 50px !important;
			// 	height: 50px !important;
			// }
		}
	}
	.date {
		flex-grow: 0;
		flex-shrink: 0;
		padding-top: 5px;
		font-size: 12px;
		color: #888;
		.del {
			float: right;
			color: red;
			padding: 10px 0;
			cursor: pointer;
		}
		.del:hover {
			text-decoration: underline;
		}
	}
}
.topPost_item {
	display: flex;
	padding: 15px 0;
	border-bottom: 1px solid #eee;
	.img-box {
		width: 30%;
		img {
			width: 100%;
		}
	}
	.content {
		flex: 1;
		padding-left: 15px;
		.tit {
			font-size: 14px;
			color: #333;
			i {
				font-size: 20px;
				color: #ffd202;
				margin-right: 10px;
			}
		}
		.con {
			padding: 5px 0;
			color: #666;
			line-height: 20px;
			text-overflow: -o-ellipsis-lastline;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			line-clamp: 2;
			-webkit-box-orient: vertical;
			/deep/img {
				width: 50px !important;
				height: 50px !important;
			}
		}
		.date {
			text-align: right;
			font-size: 12px;
			color: #888;
			span {
				margin-left: 10px;
				i {
					margin-right: 2px;
				}
			}
		}
	}
}
.tit_icon {
	display: inline-block;
	width: 20px;
	height: 16px;
	background-size: auto 100%;
	background-repeat: no-repeat;
}
</style>