<!--  -->
<template>
	<div style="cursor: default">
		<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; cursor: default">用户补充审核</div>

					<div style="display: flex; margin: 0 55px 0 0">
						<!-- 审核筛选 -->
						<el-dropdown style="cursor: pointer;" trigger="click" @command="handleCommand">
							<span class="el-dropdown-link">
								{{this.dropdownData}}
								<i class="el-icon-arrow-down el-icon--right"></i>
							</span>
							<el-dropdown-menu slot="dropdown">
								<el-dropdown-item command="未审核">未审核</el-dropdown-item>
								<el-dropdown-item command="审核通过">审核通过</el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>

						<!-- 搜索 -->
						<div class="expertDiagnosis_library_units_search">
							<el-input placeholder="输入需要搜索的用户名" v-model="input1" class="input-with-select">
								<el-button slot="append" icon="el-icon-search" @click="searchData()"></el-button>
							</el-input>
						</div>
					</div>
				</div>

				<!-- 内容 -->
				<ul class="expertDiagnosis_recognition_main_ul" v-if="this.supplementArr.length">
					<li
						class="expertDiagnosis_recognition_main_li"
						v-for="(item, index) in this.supplementArr"
						:key="index"
						style="cursor: default"
					>
						<!-- 头像以及详情描述 -->
						<div class="expertDiagnosis_recognition_mainLi_box">
							<div class>
								<!-- <img
									:src="$host+item.user_img"
									alt
									@error="errImg"
									class="expertDiagnosis_recognition_mainLi_box_img"
								/> -->
								<img
									:src="item.user_img"
									alt
									@error="errImg"
									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.upltime}}</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.pestbank_id)"
							>查看原文</el-button>
							<el-button
								v-if="item.review==0"
								size="mini"
								style="background: #ef7752;color: #fff; padding-right: 20px; padding-left: 20px"
								@click="reject(item.id)"
							>驳回</el-button>
							<el-button
								v-if="item.review==0"
								size="mini"
								style="background: #07a6ea;color: #fff; padding-right: 20px; padding-left: 20px"
								@click="pass(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
					background
					@current-change="pageData($event)"
					layout="prev, pager, next"
					:total="this.nums"
					:page-size="5"
					:current-page="page"
					v-if="this.supplementArr.length>0"
				></el-pagination>

				<!-- 弹框 -->
				<el-dialog title="病虫害档案" :visible.sync="dialogFormVisible">
					<ul class="expertDiagnosis_recognition_main_popUp">
						<li class="expertDiagnosis_recognition_main_popUp_li" style="cursor: default;">
							<div class="expertDiagnosis_recognition_main_popUp_li_name">害虫名称：</div>
							<div class="expertDiagnosis_recognition_main_popUp_li_nameVal">{{this.upPopData.name}}</div>
						</li>

						<li class="expertDiagnosis_recognition_main_popUp_li">
							<div class="expertDiagnosis_recognition_main_popUp_li_img">害虫图片：</div>
							<div class id="viewerDom" v-viewer>
								<img
									:src="this.upPopData.img_urls"
									style="cursor: pointer;"
									alt
									@error="errImg"
									class="expertDiagnosis_recognition_main_popUp_li_imgVal"
								/>
							</div>
						</li>

						<li class="expertDiagnosis_recognition_main_popUp_li" style="cursor: default;">
							<div class="expertDiagnosis_recognition_main_popUp_li_details">详细信息：</div>
							<div
								class="expertDiagnosis_recognition_main_popUp_li_detailsVal"
							>{{this.upPopData.prevention}}</div>
						</li>
					</ul>
				</el-dialog>

				<!-- 审核时的弹框 -->
				<el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
					<span>{{this.txtVal}}</span>
					<span slot="footer" class="dialog-footer">
						<el-button @click="dialogVisible = false">取 消</el-button>
						<el-button type="primary" @click="dialogVisible = false, addr()">确 定</el-button>
					</span>
				</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: '', //弹框文字提示
			detailsShow: true, //补充审核显示
			upPopData: {}, //弹框数据
			page: 1,
			review:''
		}
	},
	//监听属性 类似于data概念
	computed: {},
	//监控data中的数据变化
	watch: {
		fullHeight(val) {
			//监控浏览器高度变化
			if (!this.timer) {
				this.fullHeight = val
				this.timer = true
				let that = this
				setTimeout(function () {
					//防止过度调用监测事件，导致卡顿
					that.timer = false
				}, 400)
			}
		},
	},
	//方法集合
	methods: {
		// 列表图片加载失败
		errImg(e) {
			e.target.src = $imghost+'/images/expertDiagnosis/ku/noData.jpg'
		},

		//动态获取浏览器高度
		get_boderHeight() {
			const that = this
			window.onresize = () => {
				return (() => {
					window.fullHeight = document.documentElement.clientHeight
					that.fullHeight = window.fullHeight - 128
					// console.log(that.fullHeight)
				})()
			}
		},

		//分页点击
		pageData(e) {
			var that = this
			this.page = e
			var num = 2
			var show = that.detailsShow
			this.supplementArr = [] //用户补充列表
			let postData = this.qs.stringify({
				page: e,
				code: that.codeVal,
				ret: num,
				review:this.review,
				user: this.input1
			})
			this.$axios({
				method: 'post',
				url: 'api/api_gateway?method=pest.pests.pests_idea_review',
				data: postData
			})
				.then((res) => {
					if (res.data.data.nums !== 0) {
						var data = res.data.data.data
						var num = parseInt(res.data.data.nums)
						this.nums = num
						console.log(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['upltime'] = date
								supplementArr.push(dataA)
							}
						}
					} else if (res.data.data.nums == 0) {
						that.supplementArr = []
					}
				})
				.catch((err) => {
					console.log(err)
				})
		},

		//查看按钮
		examine(id) {
			let that = this
			this.dialogFormVisible = true
			let postData = that.qs.stringify({
				pest_id: id
			})
			that
				.$axios({
					method: 'post',
					url: 'api/api_gateway?method=pest.pests.pests_info',
					data: postData
				})
				.then((res) => {
					that.upPopData = res.data.data
					console.log(res.data.data)
				})
				.catch((err) => {
					console.log(err)
				})
		},

		//获取用户补充、意见反馈的列表数据
		axiosList(num) {
			let that = this
			that.codeVal = '5'
			let podatData = that.qs.stringify({
				page: that.page,
				code: '5',
				ret: num
			})
			that
				.$axios({
					method: 'post',
					url: 'api/api_gateway?method=pest.pests.pests_idea_review',
					data: podatData
				})
				.then((res) => {
					console.log(res.data.data)
					if (res.data.data.nums !== 0) {
						var data = res.data.data.data
						var num = parseInt(res.data.data.nums)
						this.nums = num
						console.log(this.nums)
						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['upltime'] = date
								supplementArr.push(dataA)
							}
						}
					} else if (res.data.data.nums == 0) {
						that.detailsShow = false
					}
				})
				.catch((err) => {
					console.log(err)
				})
		},

		// 下拉框点击事件
		handleCommand(command) {
			let that = this
			that.dropdownData = command
			that.supplementArr = []
			that.axiosListA(command) //审核页面数据请求
		},
		//审核页面数据请求
		axiosListA(command) {
			let that = this
			console.log(command)
			if (command == '审核通过') {
				this.review = '1'
			} else if (command == '未审核') {
				this.review = '0'
			}else{
				this.review = ''
			}
			that.codeVal = '3'
			that.page = 1;
			let postData = that.qs.stringify({
				code: '3', //区分审核和未审核
				review: this.review,
				page: that.page
			})
			that
				.$axios({
					method: 'post',
					url: 'api/api_gateway?method=pest.pests.pests_idea_review',
					data: postData
				})
				.then((res) => {
					console.log(res.data.data)
					if (res.data.data.nums !== 0) {
						var data = res.data.data.data
						var num = parseInt(res.data.data.nums)
						this.nums = num
						console.log(this.nums)
						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['upltime'] = date
								supplementArr.push(dataA)
							}
						}
						that.detailsShow = true
					} else if (res.data.data.nums == 0) {
						that.detailsShow = false
					}
				})
				.catch((err) => {
					console.log(err)
				})
		},

		// 用户补充搜索
		searchData() {
			let that = this
			var data = that.dropdownData
			var name = this.input1
			if (data == '请选择') {
				this.review = ''
			} else if (data == '未审核') {
				this.review = '0'
			} else if (data == '审核通过') {
				this.review = '1'
			}
			that.codeVal = '4'
			that.page = 1
			let postData = that.qs.stringify({
				code: '4', //用户进行筛选
				review: this.review,
				page: that.page,
				user: name
			})
			that
				.$axios({
					method: 'post',
					url: 'api/api_gateway?method=pest.pests.pests_idea_review',
					data: postData
				})
				.then((res) => {
					if (res.data.data.nums > 0) {
						var data = res.data.data.data
						var num = parseInt(res.data.data.nums)
						this.nums = num
						var 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['upltime'] = date
								supplementArr.push(dataA)
							}
							if(i == data.length-1){
								this.supplementArr = supplementArr
							}
						}
					} else {
						this.supplementArr = []
					}
				})
				.catch((err) => {
					console.log(err)
				})
		},

		//驳回
		reject(id) {
			let that = this
			// var data = that.dropdownData
			that.dialogVisible = true
			that.codeVal = '2'
			that.idVal = id
			that.txtVal = '是否进行审核驳回操作？'
		},
		//通过
		pass(id) {
			let that = this
			that.codeVal = '1'
			that.dialogVisible = true
			that.idVal = id
			that.txtVal = '是否进行审核通过操作？'
		},

		//弹框确定事件
		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_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
							})
							if(that.review!=''){
								that.codeVal = 3
							}else{
								that.codeVal = 5
							}
							that.page = 1
							that.pageData(1)
						} else if (that.codeVal == '2') {
							//审核驳回
							this.$message({
								message: '审核驳回成功',
								type: 'success',
								duration: 1500
							})
							if(that.review!=''){
								that.codeVal = 3
							}else{
								that.codeVal = 5
							}
							that.page = 1
							that.pageData(1)
						}
					} 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(2) //获取用户补充、意见反馈的列表数据
	}
}
</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;
				width: 80px;
				font-size: 16px;
				font-weight: 550;
				color: #000;
			}
			.expertDiagnosis_recognition_main_popUp_li_detailsVal {
				line-height: 30px;
				font-weight: 550;
				width: 800px;
			}
		}
	}
}


</style>