<!--  -->
<template>
	<div class>
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item>专家诊断</el-breadcrumb-item>
			<el-breadcrumb-item>专家回复</el-breadcrumb-item>
		</el-breadcrumb>

		<!-- 补充审核 -->
		<div>
			<!-- <div class="expertDiagnosis_referral_mainBtn_Box" :style="'height:' + fullHeight + 'px'"> -->
			<div class="expertDiagnosis_referral_mainBtn_Box">
				<!-- 标题 -->
				<div class="expertDiagnosis_recognition_main_tlt">
					<div style="line-height: 36px">专家回复</div>
				</div>

				<!-- 内容 -->
				<ul class="expertDiagnosis_recognition_main_ul" v-if="replyShow">
					<li
						class="expertDiagnosis_recognition_main_li"
						v-for="(item, index) in this.supplementArr"
						:key="index"
					>
						<!-- 头像以及详情描述 -->
						<div class="expertDiagnosis_recognition_mainLi_box">
							<div class id="viewerDom" v-viewer>
								<img :src="'api/' + item.img_urls" alt class="expertDiagnosis_recognition_mainLi_box_img" />
							</div>

							<div class="expertDiagnosis_recognition_mainLi_box1">
								<div class="expertDiagnosis_recognition_mainLi_box1_name">
									{{item.user}}
									<span class="expertDiagnosis_recognition_mainLi_box_time">{{item.adtime}}</span>
								</div>

								<div class="expertDiagnosis_recognition_mainLi_box_details">
									<span class="expertDiagnosis_recognition_mainLi_box_detailsTxt">补充内容：</span>
									{{item.content}}
								</div>
							</div>
						</div>

						<!-- 操作按钮 -->
						<div class="expertDiagnosis_recognition_mainLi_btn">
							<el-button size="mini" style="background: #17bb88;color: #fff" @click="examine(item.id)">回复</el-button>
						</div>
					</li>
				</ul>

				<!-- 暂无数据 -->
				<div class="expertDiagnosis_referral_units_not" v-else>
					<img
						:src="$imghost + zanwu"
						alt
						class="expertDiagnosis_referral_units_notImg"
					/>
				</div>

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

				<!-- 弹框 -->
				<el-dialog title="病虫害档案" :visible.sync="dialogFormVisible">
					<el-form :model="form">
						<el-form-item label="专家回复">
							<el-input
								v-model="form.major"
								type="textarea"
								show-word-limit
								:rows="2"
								auto-complete="off"
								maxlength="300"
							></el-input>
						</el-form-item>
					</el-form>
					<div slot="footer" class="dialog-footer">
						<el-button @click="dialogFormVisible = false">取 消</el-button>
						<el-button type="primary" @click="dialogFormVisible = false, confirmData()">确 定</el-button>
					</div>
				</el-dialog>
			</div>
		</div>
	</div>
</template>

<script>
import '@/plugin/flexible.js'
export default {
	components: {},
	data() {
		//这里存放数据
		return {
			zanwu:'/images/expertDiagnosis/zanwu.png',
			fullHeight: document.documentElement.clientHeight, //自适应高度
			dialogFormVisible: false, //弹框是否显示
			supplementArr: [], //用户补充列表
			input1: '', //搜索
			dropdownData: '请选择', //下拉框
			nums: 0, //总数
			dialogVisible: false, //审核时弹出的弹框
			codeVal: '', //区别
			idVal: '', //数据id
			txtVal: '', //弹框文字提示
			form: {
				major: '',
				id: ''
			},
			replyShow: true, //回复列表显示
			page: 1
		}
	},
	//监听属性 类似于data概念
	computed: {},
	//监控data中的数据变化
	watch: {
		fullHeight(val) {
			//监控浏览器高度变化
			if (!this.timer) {
				this.fullHeight = val
				this.timer = true
				let that = this
				setTimeout(function () {
					//防止过度调用监测事件，导致卡顿
					that.timer = false
				}, 400)
			}
		},

		//切换
		displayType(val) {
			if (val == 0) {
				//意见反馈
				this.opinionArr = [] //意见反馈列表
				this.supplementArr = [] //用户补充列表
				this.axiosList(1)
			} else if (val == 1) {
				//补充审核
				this.opinionArr = [] //意见反馈列表
				this.supplementArr = [] //用户补充列表
				this.axiosList(2)
			}
		},

		// 弹框
		dialogFormVisible(val) {
			if (val == false) {
				this.form.major = ''
			}
		}
	},
	//方法集合
	methods: {
		//动态获取浏览器高度
		get_boderHeight() {
			const that = this
			window.onresize = () => {
				return (() => {
					window.fullHeight = document.documentElement.clientHeight
					that.fullHeight = window.fullHeight - 128
					// console.log(that.fullHeight)
				})()
			}
		},

		// 导航点击切换事件
		checkType(i) {
			this.displayType = i
		},

		//分页点击
		pageData(e) {
			let that = this
			let podatData = that.qs.stringify({
				page: e
			})
			this.supplementArr = []
			that
				.$axios({
					method: 'post',
					url: 'api/api_gateway?method=pest.pests.pests_answers_list',
					data: podatData
				})
				.then((res) => {
					var data = res.data.data.data
					var num = parseInt(res.data.data.nums)
					this.nums = num
					var supplementArr = that.supplementArr //用户补充

					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]
						// 判断是否存在补充数据
						if (data[i].content) {
							dataA['adtime'] = date
							supplementArr.push(dataA)
						}
					}
				})
				.catch((err) => {
					console.log(err)
				})
		},

		//查看按钮
		examine(id) {
			let that = this
			that.dialogFormVisible = true
			that.form.id = id
		},

		//回复确定
		confirmData() {
			let that = this
			let postData = that.qs.stringify({
				pest_answers_id: that.form.id,
				idea: that.form.major
			})
			that
				.$axios({
					method: 'post',
					url: 'api/api_gateway?method=pest.pests.pests_answers_reply',
					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.error({
							message: '回复失败',
							duration: 1500
						})
					}
					console.log(res.data)
				})
				.catch((err) => {
					console.log(err)
				})
		},

		//获取用户补充、意见反馈的列表数据
		axiosList(page) {
			let that = this
			let podatData = that.qs.stringify({
				page: page
			})
			that
				.$axios({
					method: 'post',
					url: 'api/api_gateway?method=pest.pests.pests_answers_list',
					data: podatData
				})
				.then((res) => {
					if (res.data.data.nums == 0) {
						that.replyShow = false
					} else if (res.data.data.nums !== 0) {
						;((res.data.data.data.nums == res.data.data.data.nums) ==
							res.data.data.data.nums) ==
							0
						var data = res.data.data.data
						var num = parseInt(res.data.data.nums)
						this.nums = num
						var supplementArr = that.supplementArr //用户补充

						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]
							// 判断是否存在补充数据
							if (data[i].content) {
								dataA['adtime'] = date
								supplementArr.push(dataA)
							}
						}
					}
				})
				.catch((err) => {
					console.log(err)
				})
		},

		//弹框确定事件
		addr() {
			let that = this
			var id = that.idVal
			let postData = that.qs.stringify({
				code: that.codeVal,
				id: id
			})
			that
				.$axios({
					method: 'post',
					url: 'api/api/api_gateway?method=pest.pests.pests_idea_review',
					data: postData
				})
				.then((res) => {
					if (res.data.data.codes == 200) {
						if (that.codeVal == '1') {
							//审核通过
							this.$message({
								message: '审核通过成功',
								type: 'success',
								duration: 1500
							})
						} else if (that.codeVal == '2') {
							//审核驳回
							this.$message({
								message: '审核驳回成功',
								type: 'success',
								duration: 1500
							})
						}
					} else if (res.data.data.codes == 400) {
						if (that.codeVal == '1') {
							//审核通过
							this.$message.error({
								message: '审核通过失败',
								duration: 1500
							})
						} else if (that.codeVal == '2') {
							//审核驳回
							this.$message.error({
								message: '审核驳回失败',
								duration: 1500
							})
						}
					}
				})
				.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)
				}
			})
		}
	},
	//生命周期 - 创建完成（可以访问当前this实例）
	created() {},
	//生命周期 - 挂载完成（可以访问DOM元素）
	mounted() {
		this.get_boderHeight() //自适应
		this.axiosList(this.page) //获取用户补充、意见反馈的列表数据
	}
}
</script>
<style lang='less' scoped>
// 切换按钮
.primary {
	background: #13a479 !important;
	color: #fff !important;
}

.expertDiagnosis_referral_mainBtn_Box {
	border-radius: 15px;
	background: white;
	border: 1px solid #fff;
	height: 100%;
	.expertDiagnosis_recognition_main_tlt {
		border-left: 6px solid #17bb88;
		padding: 0 0 0 20px;
		font-size: 18px;
		font-weight: 550;
		margin: 15px 0 0 0;
		display: flex;
		justify-content: space-between;
		.el-dropdown {
			margin: 10px 40px 0 0;
		}
	}
	// 内容
	.expertDiagnosis_recognition_main_ul {
		width: 97%;
		margin: 25px auto;
		.expertDiagnosis_recognition_main_li {
			margin: 25px 0 60px 0;

			// 头像及详情描述
			.expertDiagnosis_recognition_mainLi_box {
				display: flex;
				.expertDiagnosis_recognition_mainLi_box_img {
					width: 65px;
					height: 65px;
					border-radius: 50px;
				}
				.expertDiagnosis_recognition_mainLi_box1 {
					margin: 0 0 0 15px;
					line-height: 30px;
					.expertDiagnosis_recognition_mainLi_box1_name {
						font-size: 16px;
						font-weight: 550;
						.expertDiagnosis_recognition_mainLi_box_time {
							color: #b1b1b1;
							font-size: 13px;
							font-weight: 500;
							margin: 0 0 0 20px;
						}
					}

					.expertDiagnosis_recognition_mainLi_box_details {
						color: #9a9a9a;
						font-size: 15px;
						font-weight: 550;
						line-height: 22px;
						.expertDiagnosis_recognition_mainLi_box_detailsTxt {
						}
					}
				}
			}
		}

		// 操作按钮
		.expertDiagnosis_recognition_mainLi_btn {
			float: right;
			margin: 10px 41px 0 0;
		}
	}

	// 弹框
	.expertDiagnosis_recognition_main_popUp {
		.expertDiagnosis_recognition_main_popUp_li {
			display: flex;
			margin: 0 0 30px 0;
			// 害虫名称
			.expertDiagnosis_recognition_main_popUp_li_name {
				color: #000;
				font-size: 16px;
				font-weight: 550;
			}
			.expertDiagnosis_recognition_main_popUp_li_nameVal {
				font-weight: 550;
			}
			// 害虫图片
			.expertDiagnosis_recognition_main_popUp_li_img {
				font-size: 16px;
				font-weight: 550;
				color: #000;
			}
			.expertDiagnosis_recognition_main_popUp_li_imgVal {
				width: 160px;
				height: 160px;
				border-radius: 10px;
			}
			// 详细信息
			.expertDiagnosis_recognition_main_popUp_li_details {
				width: 188px;
				font-size: 16px;
				font-weight: 550;
				color: #000;
			}
			.expertDiagnosis_recognition_main_popUp_li_detailsVal {
				line-height: 30px;
				font-weight: 550;
			}
		}
	}
}

</style>