<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
			class="expertDiagnosis_recognition_main"
			:style="'height:' + fullHeight + 'px'"
			v-loading="loading"
		> -->
		<div class="expertDiagnosis_recognition_main" v-loading="loading">
			<!-- 标题 -->
			<div class="expertDiagnosis_recognition_main_tlt">病虫害识别</div>

			<!-- 图片上传 -->
			<div class="expertDiagnosis_recognition_main_uploading">
				<!-- 标题 -->
				<div class="expertDiagnosis_recognition_uploading_tlt">图片上传：</div>
				<!-- 上传 -->
				<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
					:show-file-list="false"
				>
					<!-- <el-button slot="trigger" type="primary">选取图片</el-button> -->

					<img
						v-if="saleAfterForm.imageUrl"
						:src="saleAfterForm.imageUrl"
						class="avatar"
					/>
					<i v-else class="el-icon-plus avatar-uploader-icon"></i>
				</el-upload>

				<!-- 按钮 -->
				<div class="expertDiagnosis_recognition_uploading_Btn" v-show="btnShow">
					<div>
						<el-button type="success" size="small" @click="submitUploadPlant"
							>病害识别</el-button
						>
					</div>
					<div>
						<el-button type="success" size="small" @click="submitUploadInsect"
							>虫害识别</el-button
						>
					</div>
				</div>
			</div>

			<!-- 小百科 -->
			<div
				class="expertDiagnosis_recognition_main_cyclopedia"
				v-show="cyclopediaShow"
			>
				<div class="expertDiagnosis_recognition_main_cyclopedia_box">
					<!-- 标题 -->
					<div class="expertDiagnosis_recognition_cyclopedia_tlt">小百科：</div>

					<!-- 图片 -->
					<div
						class="expertDiagnosis_recognition_cyclopedia_picture"
						id="viewerDom"
						v-viewer
					>
						<img
							@error="errImg"
							:src="this.imgData"
							class="expertDiagnosis_recognition_cyclopedia_img"
						/>
					</div>

					<!-- 科目和名称 -->
					<div class="expertDiagnosis_recognition_main_courseName">
						<span class="expertDiagnosis_recognition_main_name">{{
							this.tltData
						}}</span>
						<!-- <span class="expertDiagnosis_recognition_main_course">鳞翅目 天蚕蛾</span> -->
					</div>
				</div>

				<!-- 识别后的病虫害详情 -->
				<ul class="expertDiagnosis_recognition_main_details_ul">
					<li
						class="expertDiagnosis_recognition_main_details"
						v-for="item in this.msg"
						:key="item"
					>
						{{ item }}
					</li>
				</ul>
			</div>

			<!-- 操作 -->
			<div
				class="expertDiagnosis_recognition_main_operation"
				v-show="cyclopediaShow"
			>
				<!-- 标题 -->
				<div class="expertDiagnosis_recognition_operation_tlt">操作：</div>

				<div class="expertDiagnosis_recognition_operation_Btn">
					<el-button type="primary" @click="addEquipment">意见反馈</el-button>
					<el-button type="warning" @click="handelEdit()">我要补充</el-button>
				</div>
			</div>

			<el-dialog :title="this.dialogStatus" :visible.sync="dialogFormVisible">
				<el-form :model="form">
					<el-form-item :label="this.dialogStatus">
						<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>

			<!-- vueCropper 剪裁图片实现-->
			<el-dialog title="图片剪裁" :visible.sync="cropperVisible" width="400px">
				<div class="cropper-content">
					<div style="width: 100%; height: 300px">
						<vue-cropper
							ref="cropper"
							:img="option.img"
							:output-size="option.size"
							:output-type="option.outputType"
							:info="true"
							:full="option.full"
							:fixed="option.fixed"
							:fixed-number="option.fixedNumber"
							:can-move="option.canMove"
							:can-move-box="option.canMoveBox"
							:fixed-box="option.fixedBox"
							:original="option.original"
							:auto-crop="option.autoCrop"
							:auto-crop-width="option.autoCropWidth"
							:auto-crop-height="option.autoCropHeight"
							:center-box="option.centerBox"
							@real-time="realTime"
							:high="option.high"
							@img-load="imgLoad"
							mode="cover"
							:max-img-size="option.max"
							@crop-moving="cropMoving"
						></vue-cropper>
					</div>
				</div>
				<div slot="footer" class="dialog-footer">
					<el-button @click="cropperVisible = false">取 消</el-button>
					<el-button type="primary" @click="cropperFinish" :loading="loading"
						>确认</el-button
					>
				</div>
			</el-dialog>
		</div>

		<!-- 测试上传专家数据接口 -->
		<!-- <button @click="zhuanjiaData()">上传</button> -->
		<!-- 测试上传专家数据接口 -->
	</div>
</template>

<script>
//自适应
import '@/plugin/flexible.js'

export default {
	components: {},
	data() {
		return {
			fileList: [],
			imgData: '', //识别出的图片
			articleData: '', //识别出的病虫害详情-未处理的
			msg: '', //识别出的病虫害名称-处理过的
			tltData: '', //识别出的病虫害名称-未处理的
			cyclopediaShow: false, //小百科显示
			fullHeight: document.documentElement.clientHeight,
			identifying: '', //识别的虫害还是病害标识
			dialogFormVisible: false, //弹框是否显示
			//弹框标题
			dialogStatus: '',
			form: {
				major: ''
			},
			repositoryData: '', //判断该条数据是否在知识库中ID
			// 剪裁图片
			loading: false,
			cropperVisible: false,
			// 裁剪组件的基础配置option
			option: {
				img: null,
				size: 1,
				full: false,
				outputType: 'png',
				canMove: true,
				fixed: true,
				// fixedNumber: [16, 9],
				fixedNumber: [7, 6],
				fixedBox: false,
				original: false,
				canMoveBox: true,
				autoCrop: true,
				// 只有自动截图开启 宽度高度才生效
				autoCropWidth: 160,
				autoCropHeight: 150,
				centerBox: false,
				high: true,
				max: 99999
			},
			saleAfterForm: {
				imageUrl: ''
			},
			btnShow: false, //区别病虫害按钮
			loading: false //加载
		}
	},
	computed: {},
	watch: {
		fullHeight(val) {
			//监控浏览器高度变化
			if (!this.timer) {
				this.fullHeight = val
				this.timer = true
				let that = this
				setTimeout(function () {
					//防止过度调用监测事件，导致卡顿
					that.timer = false
				}, 400)
			}
		},

		dialogFormVisible(val) {
			if (val == false) {
				this.form.major = ''
			}
		}
	},
	methods: {
		// 测试上传专家数据接口
		// zhuanjiaData() {
		// 	var that = this
		// 	var postData = that.qs.stringify({
		// 		code: '3', //专家
		// 		briefing: '河南省植保植检站研究员，河南省现代农业产业技术体系岗位专家。', //简介
		// 		name: '于思勤研究员', //名称
		// 		img_urls: 'big_photo/expert_photo/20200924110017.png', //图片路径
		// 	})
		// 	that.$axios({
		// 		method: 'post',
		// 		url: 'api/api_gateway?method=pest.pests.pests_expert_add',
		// 		data: postData,
		// 	}).then((res) => {
		// 		console.log(res.data)
		// 	}).catch((err) => {
		// 		console.log(err)
		// 	});
		// },










		// 列表图片加载失败
		errImg(e) {
			e.target.src = require('@/assets/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)
				})()
			}
		},

		// 测试上传专家介绍图片数据
		// ImgUploadSectionFile(param) {
		// 	let that = this
		// 	// let formData = new FormData() //formdata格式
		// 	// formData.append('img_file', param.file)
		// 	// 判断当前是虫害还是病害 identifying == 1 是虫害 / identifying == 0 是病害
		// 	if (that.identifying == '0') {
		// 		//病害
			
		// 	} else if (that.identifying == '1') {
		// 		//虫害
		// 		let formData = new FormData() //formdata格式
		// 		formData.append('img_file', param.file)
		// 		that
		// 			.$axios({
		// 				method: 'post',
		// 				url: 'api/api_gateway?method=pest.pests.pests_expert_img',
		// 				data: formData
		// 			})
		// 			.then((res) => {
		// 				console.log(res.data)
		// 			})
		// 			.catch((err) => {
		// 				console.log(err)
		// 			})
		// 	}
		// },

		//图片上传
		ImgUploadSectionFile(param) {
			let that = this
			// let formData = new FormData() //formdata格式
			// formData.append('img_file', param.file)
			// 判断当前是虫害还是病害 identifying == 1 是虫害 / identifying == 0 是病害
			if (that.identifying == '0') {
				//病害
				let formData = new FormData() //formdata格式
				formData.append('imageFile', param.file)
				formData.append('imageType', '2')
				formData.append('uniqueKey', '84e6eb40f3a616dd14b1fefc75425006')
				formData.append('username', 'yunfei')
				formData.append('gis', '118.279643#31.221456')
				that
					.$axios({
						method: 'post',
						url: 'ChinaSciencesGroup/recognizationSys/api/recognization',
						data: formData
					})
					.then((res) => {
						if (
							res.data.msg === '识别失败_！' ||
							res.data.msg === '' ||
							res.data.data === null
						) {
							that.$message({
								type: 'error',
								message: '识别失败!',
								duration: 1000
							})
						} else {
							// var reData = JSON.parse(res.data.data)
							var reData = res.data.data
							that.cyclopediaShow = true
							that.imgData = reData[0].img_urls //识别出的图片
							that.articleData = reData[0].prevention //识别出的病虫害详情
							that.tltData = reData[0].name //识别出的病虫害名称

							// 判断传来的数据中文字详情是否有数据
							if (reData[0].prevention !== '[防治方法] null') {
								that.articleData = reData[0].prevention //详情
								that.apply()
							} else {
								that.articleData = '暂无此类病害资料,努力更新中...'
							}

							//去判断该数据是否在知识库中
							that.repository()
						}
						this.btnShow = false
						this.loading = false
						that.$refs.upload.clearFiles() //清空
					})
					.catch((err) => {
						console.log(err)
					})
			} else if (that.identifying == '1') {
				//虫害
				let formData = new FormData() //formdata格式
				formData.append('imageFile', param.file)
				formData.append('imageType', '1')
				formData.append('uniqueKey', '84e6eb40f3a616dd14b1fefc75425006')
				formData.append('username', 'yunfei')
				formData.append('gis', '118.279643#31.221456')
				that
					.$axios({
						method: 'post',
						url: 'ChinaSciencesGroup/recognizationSys/api/recognization',
						data: formData
					})
					.then((res) => {
						if (
							res.data.msg === '识别失败_！' ||
							res.data.msg === '' ||
							res.data.data === null
						) {
							that.$message({
								type: 'error',
								message: '识别失败!',
								duration: 1000
							})
						} else {
							var reData = res.data.data
							that.cyclopediaShow = true
							that.imgData = reData[0].img_urls //识别出的图片
							that.articleData = reData[0].prevention //识别出的病虫害详情
							that.tltData = reData[0].name //识别出的病虫害名称

							// 判断传来的数据中文字详情是否有数据
							if (reData[0].prevention !== '[防治方法] null') {
								that.articleData = reData[0].prevention //详情
								that.apply()
							} else {
								that.articleData = '暂无此类病害资料,努力更新中...'
							}
							this.btnShow = false
							this.loading = false
							//去判断该数据是否在知识库中
							that.repository()
						}

						that.$refs.upload.clearFiles() //清空
					})
					.catch((err) => {
						console.log(err)
					})

				// this.$axios({
				// 	method: 'post',
				// 	url:
				// 		'api/api_gateway?method=pest.pests.insect_discern',
				// 	data: formData,
				// 	headers: {
				// 		'Content-Type': 'multipart/form-data'
				// 	}
				// })
				// 	.then((res) => {
				// 		if (
				// 			res.data.msg === '识别失败_！' ||
				// 			res.data.msg === '' ||
				// 			res.data.data === null
				// 		) {
				// 			this.$message({
				// 				type: 'error',
				// 				message: '识别失败!',
				// 				duration: 1000
				// 			})
				// 		} else {
				// 			var reData = JSON.parse(res.data.data)
				// 			this.cyclopediaShow = true
				// 			this.imgData = reData.data[0].img_urls //识别出的图片
				// 			this.articleData = reData.data[0].prevention //识别出的病虫害详情
				// 			this.tltData = reData.data[0].name //识别出的病虫害名称

				// 			// 判断传来的数据中文字详情是否有数据
				// 			if (reData.data[0].prevention !== '[防治方法] null') {
				// 				this.articleData = reData.data[0].prevention //详情
				// 				this.apply()
				// 			} else {
				// 				this.articleData = '暂无此类害虫资料,努力更新中...'
				// 			}
				// 			//去判断该数据是否在知识库中
				// 			this.repository()
				// 		}

				// 		this.$refs.upload.clearFiles() //清空
				// 	})
				// 	.catch((err) => {
				// 		console.log(err)
				// 	})
			}
		},

		handleChange(file, fileList) {
			if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(file.raw.name)) {
				alert('图片类型必须是.gif,jpeg,jpg,png,bmp中的一种')
				return false
			}
			let reader = new FileReader()
			reader.onload = (e) => {
				let data
				if (typeof e.target.result === 'object') {
					// 把Array Buffer转化为blob 如果是base64不需要
					data = window.URL.createObjectURL(new Blob([e.target.result]))
				} else {
					data = e.target.result
				}
				this.option.img = data
			}
			this.cropperVisible = true
			reader.readAsArrayBuffer(file.raw)
			this.fileList = fileList
		},
		cropperFinish() {
			this.$refs.cropper.getCropData((data) => {
				this.saleAfterForm.imageUrl = data
				this.cropperVisible = false
				this.btnShow = true
			})
		},
		imgLoad(msg) {
			// console.log('imgLoad')
			// console.log(msg)
		},
		// 实时预览函数
		realTime(data) {
			// console.log(data)
		},
		cropMoving(data) {
			// console.log(99899)
			// console.log(data, '截图框当前坐标')
		},

		//点击触发上传-虫害
		submitUploadInsect() {
			this.identifying = '1' //虫害
			this.loading = true
			this.$refs.upload.submit()
		},
		// 点击触发上传-病害
		submitUploadPlant() {
			this.identifying = '0' //病害
			this.loading = true
			this.$refs.upload.submit()
		},
		// 切割识别出的病虫害详情
		apply() {
			let Adata = this.articleData
			var a = Adata.replace(/]/g, '：')
			let Bdata = new Array()
			Bdata = a.split('[')
			this.msg = Bdata
			// console.log(this.msg)
		},
		//判断该条数据是否在知识库中
		repository() {
			var name = this.tltData //病虫害名称
			let postData = this.qs.stringify({
				pest_name: name
			})
			this.$axios({
				method: 'post',
				url: 'api/api_gateway?method=pest.pests.pests_contrast',
				data: postData
			})
				.then((res) => {
					//判断当前是否有值
					if (res.data.data.codes == '200') {
						//有值
						this.repositoryData = res.data.data.id
						console.log(res.data.data)
					} else if (res.data.data.codes == '400') {
						this.plantInsectData(res.data.data) //病虫害识别保存接口
					}
				})
				.catch((err) => {
					console.log(err)
				})
		},
		// 病虫害识别保存接口
		plantInsectData() {
			var name = this.tltData
			console.log(name)
			var code = this.identifying
			var img_urls = this.imgData
			var prevention = this.articleData
			var course = ''
			let postData = this.qs.stringify({
				name: name,
				code: code, //虫害还是病害
				course: course, //科目
				img_urls: img_urls, //识别出的病虫害图片
				prevention: prevention //防止方法
			})
			this.$axios({
				method: 'post',
				url: 'api/api_gateway?method=pest.pests.pests_save',
				data: postData
			})
				.then((res) => {
					// this.repository()
				})
				.catch((err) => {})
		},

		//意见反馈
		addEquipment() {
			//显示弹框
			this.dialogFormVisible = true
			//新增弹框标题
			this.dialogStatus = '意见反馈'
		},
		//我要补充
		handelEdit() {
			//显示弹框
			this.dialogFormVisible = true
			//编辑弹框标题
			this.dialogStatus = '我要补充'
		},
		//确定事件判断
		confirmData() {
			if (this.dialogStatus == '我要补充') {
				this.supplement()
			} else if (this.dialogStatus == '意见反馈') {
				this.feedback()
			}
		},
		//意见反馈接口调用
		feedback() {
			var postData = this.qs.stringify({
				pest_id: this.repositoryData,
				idea: this.form.major
			})
			this.$axios({
				method: 'post',
				url: 'api/api_gateway?method=pest.pests.pests_new_idea',
				data: postData
			})
				.then((res) => {
					if (res.data.data.code == '200') {
						this.$message({
							showClose: true,
							message: '上传成功',
							type: 'success',
							duration: 1500
						})
					} else {
						this.$message({
							showClose: true,
							message: '上传失败',
							type: 'error',
							duration: 1500
						})
					}
				})
				.catch((err) => {
					this.$message({
						showClose: true,
						message: '上传失败',
						type: 'error',
						duration: 1500
					})
				})
		},

		//我要补充接口调用
		supplement() {
			var postData = this.qs.stringify({
				pest_id: this.repositoryData,
				countent: this.form.major
			})
			this.$axios({
				method: 'post',
				url: 'api/api_gateway?method=pest.pests.pests_new_data',
				data: postData
			})
				.then((res) => {
					if (res.data.data.code == '200') {
						this.$message({
							showClose: true,
							message: '上传成功',
							type: 'success',
							duration: 1500
						})
					} else {
						this.$message({
							showClose: true,
							message: '上传失败',
							type: 'error',
							duration: 1500
						})
					}
				})
				.catch((err) => {
					this.$message({
						showClose: true,
						message: '上传失败',
						type: 'error',
						duration: 1500
					})
				})
			console.log(this.form)
		}
	},
	mounted() {
		this.get_boderHeight()
	}
}
</script>

<style lang='less' scoped>
.expertDiagnosis_recognition_main {
	width: 100%;
	height: 100%;
	border: 1px solid #fff;
	border-radius: 15px;
	background-color: #fff;
	.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;
	}
	//图片上传
	.expertDiagnosis_recognition_main_uploading {
		display: flex;
		width: 95%;
		margin: 20px 0 0 25px;
		.expertDiagnosis_recognition_uploading_tlt {
			color: #757575;
			font-weight: 550;
			font-size: 15px;
		}
		.expertDiagnosis_recognition_uploading_Btn {
			display: inline-table;
			margin: 35px 0 0 15px;
			padding: 30px 0 0 0;
			button {
				margin-bottom: 15px;
			}
		}
	}

	//小百科
	.expertDiagnosis_recognition_main_cyclopedia {
		width: 95%;
		margin: 20px 0 0 25px;

		.expertDiagnosis_recognition_main_cyclopedia_box {
			display: flex;
			.expertDiagnosis_recognition_cyclopedia_tlt {
				color: #757575;
				font-weight: 550;
				font-size: 15px;
			}
			//图片
			.expertDiagnosis_recognition_cyclopedia_picture {
				width: 360px;
				height: 185px;
				margin: 0 0 0 15px;
				.expertDiagnosis_recognition_cyclopedia_img {
					border-radius: 15px;
					width: 100%;
					height: 100%;
				}
			}
			//科目和名称
			.expertDiagnosis_recognition_main_courseName {
				display: inline-table;
				margin: 160px 0 0 11px;
				.expertDiagnosis_recognition_main_name {
					color: #17bb89;
					font-size: 18px;
					font-weight: 550;
					text-align: left;
				}
				.expertDiagnosis_recognition_main_course {
					font-size: 13px;
					color: #878787;
					text-align: right;
					padding-left: 15px;
				}
			}
		}

		//识别后的病虫害详情
		.expertDiagnosis_recognition_main_details_ul {
			margin: 60px 0 0 0;
			// margin: 96px 0 0 0;
			.expertDiagnosis_recognition_main_details {
				margin: 15px 0 25px 75px;
				width: 92%;
				text-indent: 20px;
				line-height: 15px;
				color: #888888;
				font-size: 13px;
			}
		}
	}

	// 操作
	.expertDiagnosis_recognition_main_operation {
		display: flex;
		width: 95%;
		margin: 10px 0 45px 26px;
		.expertDiagnosis_recognition_operation_tlt {
			color: #757575;
			font-weight: 550;
			font-size: 15px;
		}
		.expertDiagnosis_recognition_operation_Btn {
			margin: 0 0 0 28px;
		}
	}
}
</style>