<template>
	<div>
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item>专家诊断</el-breadcrumb-item>
			<el-breadcrumb-item>专家解答</el-breadcrumb-item>
		</el-breadcrumb>
		<div style="display: flex; justify-content: space-between;">
			<!-- 专家解答 -->
			<!-- <div class="expertDiagnosis_answer_main" :style="'height:' + fullHeight + 'px'"> -->
			<div class="expertDiagnosis_answer_main">
				<!-- 标题 -->
				<div class="expertDiagnosis_answer_main_tlt">专家解答</div>

				<!-- 专家解答 -->
				<ul class="expertDiagnosis_answer_main_ul" v-if="answerShow">
					<li
						class="expertDiagnosis_answer_main_li"
						v-for="(item, index) in this.redataList"
						:key="index"
					>
						<!-- 图片 -->
						<div class="expertDiagnosis_answer_main_li_imgBox" id="viewerDom" v-viewer>
							<!-- <img
								src="@/assets/images/expertDiagnosis/expertAudit/1.jpg"
								alt
								class="expertDiagnosis_answer_main_li_imgBox_image"
							/>-->
							<img
								:src="'api/' + item.img_urls"
								alt
								@error="errImg"
								class="expertDiagnosis_answer_main_li_imgBox_image"
							/>
						</div>

						<!-- 详细内容 -->
						<div class="expertDiagnosis_answer_main_li_details">
							<!-- 问题 -->
							<div class="expertDiagnosis_answer_main_li_detailsBox">
								<div class="expertDiagnosis_answer_main_li_detailsBox_issueBox">
									Q：
									<span class="expertDiagnosis_answer_main_li_detailsBox_issueBox_tlt">{{item.content}}</span>
								</div>
								<div class="expertDiagnosis_answer_main_li_detailsBox_issueBox_time">{{item.adtime}}</div>
							</div>

							<!-- 回答 -->
							<div class="expertDiagnosis_answer_main_li_detailsBox_revertBox">
								A：
								<span
									class="expertDiagnosis_answer_main_li_detailsBox_issueBox_tlt"
								>{{item.idea == null ? '暂无回复' : item.idea}}</span>
							</div>
						</div>
					</li>
				</ul>

				<!-- 暂无数据 -->
				<div class="expertDiagnosis_referral_units_not" v-else>
					<img
						src="@/assets/images/expertDiagnosis/zanwu.png"
						alt
						class="expertDiagnosis_referral_units_notImg"
					/>
				</div>

				<!-- 分页 -->
				<el-pagination
					v-if="answerShow"
					background
					@current-change="pageData($event)"
					layout="prev, pager, next"
					:total="this.nums"
					:page-size="5"
					:current-page.sync="page"
				></el-pagination>
			</div>

			<!-- 我要提问 -->
			<el-form ref="form" :model="form" style="width: 610px">
				<div class="expertDiagnosis_question_main">
					<!-- 标题 -->
					<div class="expertDiagnosis_question_main_tlt">我要提问</div>

					<!-- 问题描述 -->
					<el-form-item label="问题描述：">
						<div class="expertDiagnosis_question_main_description">
							<el-input
								type="textarea"
								placeholder
								v-model="form.textarea"
								maxlength="299"
								show-word-limit
								:autosize="{ minRows: 10, maxRows: 20}"
								style="width: 410px"
							></el-input>
						</div>
					</el-form-item>

					<!-- 上传图片 -->
					<el-form-item label="上传图片：">
						<div class="expertDiagnosis_question_main_upImage">
							<el-upload
								class="upload-demo"
								ref="upload"
								:http-request="ImgUploadSectionFile"
								:with-credentials="true"
								:auto-upload="false"
								accept=".png, .jpg, .gif, .svg"
								action
								:on-change="handleChange"
								list-type="list"
								:file-list="fileList"
								multiple
							>
								<img v-if="imageUrl" :src="imageUrl" class="avatar" />
								<i v-else class="el-icon-plus avatar-uploader-icon"></i>
							</el-upload>
						</div>
					</el-form-item>

					<!-- 提交 -->
					<el-form-item class="expertDiagnosis_question_main_btnBox">
						<el-button type="primary" @click="onSubmit">提交</el-button>
						<el-button>取消</el-button>
					</el-form-item>
				</div>
			</el-form>
		</div>
	</div>
</template>

<script>
//自适应
import '@/plugin/flexible.js'
export default {
	data() {
		return {
			fullHeight: document.documentElement.clientHeight,
			imageUrl: '',
			form: {
				textarea: '' //问题描述
			},
			//表单验证
			rules: {
				// 表单验证
				file: [{ required: true, message: '请上传图片' }]
			},
			formData: new FormData(),
			fileList: [],
			redataList: [], //专家解答列表数据
			nums: 0, //总条数
			imgUrl: '', //上传返回的图片路径
			answerShow: true, //专家解答展示
			page: 1
		}
	},
	watch: {
		fullHeight(val) {
			//监控浏览器高度变化
			if (!this.timer) {
				this.fullHeight = val
				this.timer = true
				let that = this
				setTimeout(function () {
					//防止过度调用监测事件，导致卡顿
					that.timer = false
				}, 400)
			}
		},
	},
	mounted() {
		this.get_boderHeight() //自适应
		this.axiosList() //专家解答列表数据请求
	},
	methods: {
		// 列表图片加载失败
		errImg(e) {
			e.target.src = require('@/assets/images/expertDiagnosis/ku/noData.jpg')
		},

		//分页点击
		pageData(e) {
			let that = this
			let postData = that.qs.stringify({
				page: e
			})
			that
				.$axios({
					method: 'post',
					url:
						'api/api_gateway?method=pest.pests.pests_answers_list',
					data: postData
				})
				.then((res) => {
					this.redataList = []
					var data = res.data.data.data
					var num = parseInt(res.data.data.nums)
					this.nums = num
					var redataList = this.redataList
					for (let i = 0; i < data.length; i++) {
						var time = data[i].adtime
						var date = new Date(parseInt(time) * 1000)
							.toLocaleString()
							.replace(/:\d{1,2}$/, ' ')
						var dataA = data[i]
						dataA['adtime'] = date
						redataList.push(dataA)
					}
				})
				.catch((err) => {
					console.log(err)
				})
		},
		//动态获取浏览器高度
		get_boderHeight() {
			const that = this
			window.onresize = () => {
				return (() => {
					window.fullHeight = document.documentElement.clientHeight
					that.fullHeight = window.fullHeight - 128
					// console.log(that.fullHeight)
				})()
			}
		},

		//图片上传
		ImgUploadSectionFile(param) {
			this.formData.append('img_file', param.file)
			this.$axios({
				method: 'post',
				url: 'api/api_gateway?method=pest.pests.pests_img',
				data: this.formData
			})
				.then((res) => {
					console.log(res.data.data.src)
					this.imgUrl = res.data.data.src
					let postData = this.qs.stringify({
						img_urls: this.imgUrl,
						content: this.form.textarea
					})
					this.$axios({
						method: 'post',
						url:
							'api/api_gateway?method=pest.pests.pests_answers',
						data: postData
					})
						.then((res) => {
							if (res.data.data.code == 200) {
								this.$message({
									message: '发布成功',
									type: 'success',
									duration: 1500
								})
							} else if (res.data.data.code == 400) {
								this.$message({
									message: '发布失败',
									type: 'success',
									duration: 1500
								})
							}
							this.imageUrl = false
							this.$refs.upload.clearFiles() //清空
							this.redataList = []
							this.page = 1
							this.axiosList()
							this.form.textarea = ''
						})
						.catch((err) => {
							console.log(err)
						})
				})
				.catch((err) => {
					console.log(err)
				})
		},
		handleChange(file, fileList) {
			var arr = []
			var list
			for (var i = 0; i < fileList.length; i++) {
				list = fileList[i]
			}
			this.imageUrl = URL.createObjectURL(list.raw)
			arr.push(list)
			this.fileList = arr
		},

		//提交
		onSubmit() {
			let that = this
			if (that.form.textarea == '') {
				this.$message({
					message: '问题描述不能为空！',
					type: 'warning',
					duration: 1500
				})
			} else if (that.form.textarea !== '') {
				that.$refs.upload.submit()
			}
		},

		//专家解答列表数据请求
		axiosList() {
			let that = this
			let postData = that.qs.stringify({
				page: that.page
			})
			that
				.$axios({
					method: 'post',
					url:
						'api/api_gateway?method=pest.pests.pests_answers_list',
					data: postData
				})
				.then((res) => {
					var nums = res.data.data.nums
					if (nums !== 0) {
						var data = res.data.data.data
						var num = parseInt(res.data.data.nums)
						this.nums = num
						var redataList = this.redataList
						for (let i = 0; i < data.length; i++) {
							var time = data[i].adtime
							var date = new Date(parseInt(time) * 1000)
								.toLocaleString()
								.replace(/:\d{1,2}$/, ' ')
							var dataA = data[i]
							dataA['adtime'] = date
							redataList.push(dataA)
						}
						console.log(redataList)
					} else if (nums == 0) {
						that.answerShow = false
					}
				})
				.catch((err) => {
					console.log(err)
				})
		},

		// 图片放大
		magnifyPhoto() {
			//具体需要哪些配置可参照下表
			const ViewerDom = document.querySelector('#viewerDom')
			this.viewer = new Viewer(ViewerDom, {
				initialViewIndex: 0,
				button: true, //右上角关闭按钮
				navbar: 2,
				title: 0,
				toolbar: 0,
				keyboard: false,
				ready: function (e) {
					console.log(e.type)
				},
				show: function (e) {
					console.log(e.type)
				},
				shown: function (e) {
					console.log(e.type)
				},
				hide: function (e) {
					console.log(e.type)
				},
				hidden: function (e) {
					console.log(e.type)
				},
				view: function (e) {
					console.log(e.type)
				},
				viewed: function (e) {
					console.log(e.type)
				},
				zoom: function (e) {
					console.log(e.type)
				},
				zoomed: function (e) {
					console.log(e.type)
				}
			})
		}
	}
}
</script>

<style lang='less' scoped>
// 专家解答
.expertDiagnosis_answer_main {
	border-radius: 15px;
	background: #fff;
	width: 60%;
	height: 100%;
	.expertDiagnosis_answer_main_tlt {
		border-left: 6px solid #17bb88;
		padding: 0 0 0 20px;
		font-size: 18px;
		font-weight: 550;
		margin: 15px 0 0 0;
	}
	//列表数据
	.expertDiagnosis_answer_main_ul {
		.expertDiagnosis_answer_main_li {
			width: 95%;
			margin: 25px auto;
			display: flex;
			// 图片
			.expertDiagnosis_answer_main_li_imgBox {
				width: 100px;
				.expertDiagnosis_answer_main_li_imgBox_image {
					width: 100px;
					height: 100px;
				}
			}
			// 详细内容
			.expertDiagnosis_answer_main_li_details {
				width: 85%;
				margin: 0 auto;
				.expertDiagnosis_answer_main_li_detailsBox {
					display: flex;
					justify-content: space-between;
					margin: 25px 0 0 0;

					.expertDiagnosis_answer_main_li_detailsBox_issueBox {
						color: #000;
						font-size: 15px;
						font-weight: 550;
						width: 670px;
					}
				}

				.expertDiagnosis_answer_main_li_detailsBox_revertBox {
					color: #808080;
					font-size: 14px;
					font-weight: 550;
					margin: 10px 0 0 0;
					.expertDiagnosis_answer_main_li_detailsBox_issueBox_tlt {
					}
					.expertDiagnosis_answer_main_li_detailsBox_issueBox_time {
						color: #b1b1b1;
					}
				}
			}
		}
	}
}

// 我要提问
.expertDiagnosis_question_main {
	border-radius: 15px;
	background: #fff;
	border: 1px solid #fff;
	.expertDiagnosis_question_main_tlt {
		border-left: 6px solid #17bb88;
		padding: 0 0 0 20px;
		font-size: 18px;
		font-weight: 550;
		margin: 15px 0 0 0;
	}

	// 问题描述
	.expertDiagnosis_question_main_description {
		width: 90%;
		margin: 15px auto;
		display: flex;
		.expertDiagnosis_question_main_description_tlt {
			width: 19%;
			font-size: 14px;
		}
	}

	// 上传图片
	.expertDiagnosis_question_main_upImage {
		width: 90%;
		margin: 15px auto;
		display: flex;
		.expertDiagnosis_question_main_upImage_tlt {
			width: 19%;
			font-size: 14px;
		}
	}
}
// 修改elementui样式
.custom-ffffff .el-form-item {
	margin: 0 auto;
	width: 90%;
}
.custom-ffffff .el-form-item {
	display: flex;
}
.expertDiagnosis_question_main_btnBox {
	width: 183px !important;
	// margin: 300px 0 155px 410px !important;
	margin: 140px 0 155px 410px !important;
}

// 暂无数据
.expertDiagnosis_referral_units_not {
	width: 272px;
	margin: 0 auto;
	.expertDiagnosis_referral_units_notImg {
	}
}
</style>