<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="16" :lg="18" :xl="18">
				<el-card class="box-card leftBox">
					<div class="hint">
						<i class="el-icon-s-custom"></i>
						由中科感知提供大数据服务与算法支持
					</div>
					<el-tabs v-model="activeName" @tab-click="checkType">
						<el-tab-pane label="虫害数据（368）例" name="0">
							<div class="list" style="">
								<div
									class="item"
									v-for="(item, index) in this.redataList"
									:key="index"
									@click="showData(item.id)"
								>
									<!-- 图片 -->
									<div class="item_img">
										<img
											:src="'https://images.weserv.nl/?url=' + item.img_urls"
											@error="errImg"
											alt
											class="expertDiagnosis_library_units_liImg"
										/>
										<!-- <el-image></el-image> -->
									</div>

									<!-- 名称 -->
									<div class="item_txt">{{ item.name }}</div>
								</div>
							</div>
							<!-- 分页 -->
							<el-pagination
								v-if="insectShow"
								background
								@current-change="pageData($event)"
								layout="prev, pager, next"
								:total="this.nums"
								:current-page.sync="page"
								:page-size="12"
							></el-pagination>
						</el-tab-pane>
						<el-tab-pane label="病害数据（368）例" name="1">
							<div class="list" style="">
								<div
									class="item"
									v-for="(item, index) in this.redataList"
									:key="index"
									@click="showData(item.id)"
								>
									<!-- 图片 -->
									<div class="item_img">
										<img
											:src="'https://images.weserv.nl/?url=' + item.img_urls"
											@error="errImg"
											alt
											class="expertDiagnosis_library_units_liImg"
										/>
										<!-- <el-image></el-image> -->
									</div>

									<!-- 名称 -->
									<div class="item_txt">{{ item.name }}</div>
								</div>
							</div>
							<!-- 分页 -->
							<el-pagination
								v-if="plantShow"
								background
								@current-change="pageData($event)"
								layout="prev, pager, next"
								:total="this.nums"
								:page-size="12"
							></el-pagination>
						</el-tab-pane>
					</el-tabs>
				</el-card>
			</el-col>
			<el-col :xs="24" :sm="24" :md="8" :lg="6" :xl="6">
				<el-card class="box-card rightBox">
					<!-- 搜索 -->
					<div class="lineUp">
						<!-- 搜索 -->
						<div class="title" style="border-bottom: 2px solid #e4e7ed">
							<div>
								<i
									style="color: red; font-size: 14px"
									class="el-icon-s-custom"
								></i>
								识别排名
							</div>
							<div>
								<el-button
									type="success"
									size="mini"
									@click="dialogDiscernVisible = true"
									>我要识别</el-button
								>
							</div>
						</div>

						<!-- 排名 -->
						<ul class="content" v-if="searchShow">
							<li
								class="item"
								v-for="(itemA, index) in this.searchList"
								:key="index"
							>
								<div
									class="number"
									:class="{ greentxt: index + 1 < 4 }"
									style="margin: 0 0 0 10%"
								>
									{{ index + 1 }}
								</div>
								<div class style="margin: 0 0 0 12%">
									<div class="">
										<img
											:src="itemA.img_urls"
											@error="errImg"
											class="expertDiagnosis_library_main_right_li_imgBox_img"
										/>
									</div>
								</div>
								<div style="flex: 1; text-align: right" class="">
									{{ itemA.name }}
								</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>

						<!-- 标签云 -->
						<div class="expertDiagnosis_library_main_right_label" ref="ciyun">
							<svg
								:width="width"
								:height="height"
								@mousemove="listener($event)"
							>
								<a
									href="#"
									v-for="tag in tags"
									@click="labelData(tag.id)"
									:key="tag.id"
								>
									<text
										:x="tag.x"
										:y="tag.y"
										:font-size="20 * (600 / (600 - tag.z))"
										:fill-opacity="(400 + tag.z) / 600"
										fill="#17bb88"
									>
										{{ tag.text }}
									</text>
								</a>
							</svg>
						</div>
					</div>
				</el-card>
			</el-col>
		</el-row>

		<!-- 病虫害档案弹框 -->
		<el-dialog
			title="病虫害档案"
			:close-on-click-modal="false"
			:visible.sync="dialogFormVisible"
		>
			<ul class="expertDiagnosis_library_main_popUp">
				<li class="expertDiagnosis_library_main_popUp_li">
					<div class="expertDiagnosis_library_main_popUp_li_name">
						害虫名称：
					</div>
					<div class="expertDiagnosis_library_main_popUp_li_nameVal">
						{{ this.popUpData.name }}
					</div>
				</li>

				<li class="expertDiagnosis_library_main_popUp_li">
					<div class="expertDiagnosis_library_main_popUp_li_img">
						害虫图片：
					</div>
					<div class id="viewerDom" v-viewer>
						<img
							:src="this.popUpData.img_urls"
							@error="errImg"
							alt
							class="expertDiagnosis_library_main_popUp_li_imgVal"
						/>
					</div>
				</li>

				<li class="expertDiagnosis_library_main_popUp_li">
					<div class="expertDiagnosis_library_main_popUp_li_details">
						详细信息：
					</div>
					<div class="expertDiagnosis_library_main_popUp_li_detailsVal">
						{{ this.popUpData.prevention }}
					</div>
				</li>
			</ul>
		</el-dialog>
		<!-- 识别弹框 -->
		<el-dialog
			title="病虫害识别"
			:close-on-click-modal="false"
			:visible.sync="dialogDiscernVisible"
			width="600px"
			@close="clearUploadBox"
		>
			<div class="expertDiagnosis_recognition_main" v-loading="loading">
				<!-- 标题 -->
				<div class="">病虫害识别：</div>
				<!-- 上传 -->
				<el-upload
					class="avatar-uploader"
					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="discernBtns" 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>
		</el-dialog>
		<!-- vueCropper 剪裁图片实现-->
		<el-dialog
			title="图片剪裁"
			:close-on-click-modal="false"
			:visible.sync="cropperVisible"
			width="500px"
		>
			<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"
						:high="option.high"
						mode="cover"
						:max-img-size="option.max"
					></vue-cropper>
				</div>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button @click="cropperVisible = false">取 消</el-button>
				<el-button type="primary" @click="cropperFinish">确认</el-button>
			</div>
		</el-dialog>
		<!-- 识别结果弹框 -->
		<el-dialog
			title="识别结果"
			:close-on-click-modal="false"
			:visible.sync="DiscernResultVisible"
		>
			<ul class="expertDiagnosis_library_main_popUp">
				<li class="expertDiagnosis_library_main_popUp_li">
					<div class="expertDiagnosis_library_main_popUp_li_name">名称：</div>
					<div class="expertDiagnosis_library_main_popUp_li_nameVal">
						{{ discernResult.name }}
					</div>
				</li>
				<li class="expertDiagnosis_library_main_popUp_li">
					<div class="expertDiagnosis_library_main_popUp_li_name">科目：</div>
					<div class="expertDiagnosis_library_main_popUp_li_nameVal">
						{{ discernResult.course || '--' }}
					</div>
				</li>
				<li class="expertDiagnosis_library_main_popUp_li">
					<div class="expertDiagnosis_library_main_popUp_li_img">图片：</div>
					<div class id="viewerDom" v-viewer>
						<img
							:src="discernResult.img_urls"
							@error="errImg"
							alt
							class="expertDiagnosis_library_main_popUp_li_imgVal"
						/>
					</div>
				</li>
				<li class="expertDiagnosis_library_main_popUp_li">
					<div class="expertDiagnosis_library_main_popUp_li_details">
						防止方法：
					</div>
					<div class="expertDiagnosis_library_main_popUp_li_detailsVal">
						{{ discernResult.prevention }}
					</div>
				</li>
				<li class="expertDiagnosis_library_main_popUp_li">
					<div class="expertDiagnosis_library_main_popUp_li_details">
						用户补充：
					</div>
					<div class="expertDiagnosis_library_main_popUp_li_detailsVal">
						<p v-for="item in discernResult.content" :key="item">
							{{ item }}
						</p>
					</div>
				</li>
				<li style="text-align: right">
					<el-button
						type="success"
						size="small"
						@click="dialogReplenishVisible = true"
						>我要补充</el-button
					>
					<el-button
						type="warning"
						size="small"
						@click="dialogQuestionsVisible = true"
						>我要提问</el-button
					>
				</li>
			</ul>
		</el-dialog>
		<!-- 补充弹框 -->
		<el-dialog
			title="我要补充"
			:close-on-click-modal="false"
			:visible.sync="dialogReplenishVisible"
			width="500px"
			@close="clearReplenishform"
		>
			<el-form :model="form">
				<input type="hidden" v-model="discernResult.id" />
				<el-form-item label="我要补充">
					<el-input
						v-model="form.major"
						type="textarea"
						show-word-limit
						:rows="12"
						auto-complete="off"
						maxlength="300"
					></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogReplenishVisible = false">取 消</el-button>
				<el-button type="primary" @click="supplement()">确 定</el-button>
			</div>
		</el-dialog>
		<!-- 提问弹框 -->
		<el-dialog
			title="我要提问"
			:close-on-click-modal="false"
			:visible.sync="dialogQuestionsVisible"
			width="600px"
			@close="clearquestionsform"
		>
			<el-form
				ref="questionsform"
				:model="questionsform"
				label-width="80px"
				:rules="questionsRules"
			>
				<input type="hidden" v-model="discernResult.id" />
				<el-form-item label="标题" prop="title">
					<el-input
						v-model="questionsform.title"
						type="text"
						show-word-limit
						:rows="2"
						auto-complete="off"
						minlength="1"
						maxlength="30"
					></el-input>
				</el-form-item>
				<el-form-item label="正文" prop="content">
					<el-input
						v-model="questionsform.content"
						type="textarea"
						show-word-limit
						:rows="12"
						auto-complete="off"
						minlength="1"
						maxlength="300"
					></el-input>
				</el-form-item>
				<el-form-item label="图片">
					<!-- 上传 -->
					<el-upload
						class="avatar-uploader"
						ref="upload2"
						: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="questionsform.imageUrl"
							:src="$host+questionsform.imageUrl"
							class="avatar"
						/>
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
				</el-form-item>
				<el-form-item>
					<el-button @click="dialogQuestionsVisible = false">取 消</el-button>
					<el-button type="primary" @click="feedback('questionsform')"
						>提交</el-button
					>
				</el-form-item>
			</el-form>
		</el-dialog>
	</div>
</template>

<script>
export default {
	data() {
		return {
			form: {
				major: ''
			},
			questionsform: {
				title: '',
				content: '',
				imageUrl: ''
			},
			fileList: [],
			saleAfterForm: {
				imageUrl: ''
			},
			activeName: '0',
			displayType: 0,
			navigationList: [
				{
					img: './static/images/expertDiagnosis/ku/1.png',
					title: '虫害数据',
					details: '由中科感知提供大数据服务与算法支持',
					unit: '例'
				},
				{
					img: './static/images/expertDiagnosis/ku/2.png',
					title: '病害数据',
					details: '由中科感知提供大数据服务与算法支持',
					unit: '例'
				}
			],
			input1: '', //搜索
			//标签云
			width: 340,
			height: 260,
			tagsNum: 0,
			RADIUS: 120,
			speedX: Math.PI / 360,
			speedY: Math.PI / 360,
			tags: [],
			dialogFormVisible: false,
			dialogDiscernVisible: false,
			cropperVisible: false,
			DiscernResultVisible: false,
			dialogReplenishVisible: false,
			dialogQuestionsVisible: false,
			nums: 1, //总数
			redataList: [], //病害虫害数组
			searchList: [], //病虫害搜索排行数据
			searchNums: 0, //搜索总数分页
			popUpData: {}, //弹框中的数据
			discernResult: {},
			searchShow: true, //搜索列表显示
			plantShow: true, //病害数据列表显示
			insectShow: true, //虫害数据列表显示
			page: 1,
			pageA: 1,
			loading: false,
			// 裁剪组件的基础配置option
			option: {
				img: null,
				size: 1,
				full: false,
				outputType: 'png',
				canMove: true,
				fixed: false,
				// fixedNumber: [16, 9],
				// fixedNumber: [7, 6],
				fixedBox: false,
				original: false,
				canMoveBox: true,
				autoCrop: true,
				// 只有自动截图开启 宽度高度才生效
				autoCropWidth: 160,
				autoCropHeight: 150,
				centerBox: false,
				high: true,
				max: 99999
			},
			btnShow: false, //区别病虫害按钮
			questionsRules: {
				title: [
					{ required: true, message: '请输入标题', trigger: 'blur' },
					{ min: 1, max: 30, message: '长度在 1 到 30 个字符', trigger: 'blur' }
				],
				content: [
					{ required: true, message: '请输入问题', trigger: 'blur' },
					{
						min: 1,
						max: 300,
						message: '长度在 1 到 300 个字符',
						trigger: 'blur'
					}
				]
			}
		}
	},
	computed: {
		CX() {
			return this.width / 2.3
		},
		CY() {
			return this.height / 2
		}
	},

	watch: {
		displayType(val) {
			if (val == 0) {
				//虫害数据
				this.axiosList(2)
				this.searchData(2, this.pageA, this.input1)
				this.cloudData()
			} else if (val == 1) {
				// 病害数据
				this.axiosList(1)
				this.searchData(1, this.pageA, this.input1)
				this.cloudData()
			}
		}
	},
	methods: {
		//我要补充接口调用
		supplement() {
			if (!this.form.major) {
				this.$message({
					message: '请先填写补充文案',
					type: 'error'
				})
				return false
			}
			var postData = this.qs.stringify({
				pest_id: this.discernResult.id,
				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
						})
						this.dialogReplenishVisible = false
					} 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)
		},
		//我要提问接口调用
		feedback(formName) {
			this.$refs[formName].validate((valid) => {
				if (valid) {
					var postData = this.qs.stringify({
						pest_id: this.discernResult.id,
						title: this.questionsform.title,
						content: this.questionsform.content,
						img_urls: this.questionsform.imageUrl
					})
					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
								})
								this.clearquestionsform()
								this.dialogQuestionsVisible = false
							} else {
								this.$message({
									showClose: true,
									message: '上传失败',
									type: 'error',
									duration: 1500
								})
							}
						})
						.catch((err) => {
							this.$message({
								showClose: true,
								message: '上传失败',
								type: 'error',
								duration: 1500
							})
						})
				} else {
					console.log('error submit!!')
					return false
				}
			})
		},
		// 清除提问表单
		clearquestionsform() {
			this.questionsform = {
				title: '',
				content: '',
				imageUrl: ''
			}
			this.clearUploadBox()
		},
		clearReplenishform() {
			this.form.major = ''
		},
		//点击触发上传-虫害
		submitUploadInsect() {
			this.identifying = '1' //虫害
			this.$refs.upload.submit()
		},
		// 点击触发上传-病害
		submitUploadPlant() {
			this.identifying = '0' //病害
			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)
		},
		//图片上传
		ImgUploadSectionFile(param) {
			this.loading = true
			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('img_file', param.file)
				that
					.$axios({
						method: 'post',
						url: '/api/api_gateway?method=pest.pests.plant_discern',
						data: formData
					})
					.then((res) => {
						if (res.data.message != '') {
							that.loading = false
							that.$message({
								type: 'error',
								message: res.data.message,
								duration: 1000
							})
							that.clearUploadBox()
						} else {
							that.loading = false
							that.dialogDiscernVisible = false
							that.discernResult = res.data.data
							that.DiscernResultVisible = true
							this.btnShow = false

							// 判断传来的数据中文字详情是否有数据
							if (!(that.discernResult.prevention !== '[防治方法] null')) {
								that.discernResult.prevention = '暂无此类病害资料,努力更新中...'
							}
						}
						that.$refs.upload.clearFiles() //清空
					})
					.catch((err) => {
						that.loading = false
						that.$message({
							type: 'error',
							message: '识别失败!',
							duration: 1000
						})
						that.clearUploadBox()
					})
			} 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.insect_discern',
						data: formData
					})
					.then((res) => {
						if (res.data.message != '') {
							that.loading = false
							that.$message({
								type: 'error',
								message: res.data.message,
								duration: 1000
							})
							that.clearUploadBox()
						} else {
							that.loading = false
							that.dialogDiscernVisible = false
							that.discernResult = res.data.data
							that.DiscernResultVisible = true
							this.btnShow = false
							if (!(that.discernResult.prevention !== '[防治方法] null')) {
								that.discernResult.prevention = '暂无此类病害资料,努力更新中...'
							}
						}

						that.$refs.upload.clearFiles() //清空
					})
					.catch((err) => {
						that.loading = false
						that.$message({
							type: 'error',
							message: '识别失败!',
							duration: 1000
						})
						that.clearUploadBox()
					})
			}
		},
		clearUploadBox() {
			this.saleAfterForm.imageUrl = ''
			this.btnShow = false
		},
		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
		},
		//转成blob
		blobToFile(Blob, fileName) {
			Blob.lastModifiedDate = new Date()
			Blob.name = fileName
			return Blob
		},
		cropperFinish() {
			this.$refs.cropper.getCropData((data) => {
				this.saleAfterForm.imageUrl = data
				this.cropperVisible = false
				this.btnShow = true
			})
			if (this.dialogQuestionsVisible) {
				this.$refs.cropper.getCropBlob((data) => {
					var form = new FormData()
					let resFile = this.blobToFile(data, 'filename.jpg')
					form.append('img_file', resFile)
					this.cropperVisible = false
					this.$axios({
						method: 'POST',
						url: '/api/api_gateway?method=pest.pests.pests_img',
						data: form
					}).then((res) => {
						if (res.data.message == '') {
							this.questionsform.imageUrl = res.data.data.src
						}
					})
				})
			}
		},
		// 列表图片加载失败
		errImg(e) {
			e.target.src = require('@/assets/images/expertDiagnosis/ku/noData.jpg')
		},

		checkType(tab, event) {
			this.page = 1
			this.displayType = tab.name
		},
		// 标签云
		rotateX(speedX) {
			var cos = Math.cos(speedX)
			var sin = Math.sin(speedX)
			for (let tag of this.tags) {
				var y1 = (tag.y - this.CY) * cos - tag.z * sin + this.CY
				var z1 = tag.z * cos + (tag.y - this.CY) * sin
				tag.y = y1
				tag.z = z1
			}
		},
		rotateY(speedY) {
			var cos = Math.cos(speedY)
			var sin = Math.sin(speedY)
			for (let tag of this.tags) {
				var x1 = (tag.x - this.CX) * cos - tag.z * sin + this.CX
				var z1 = tag.z * cos + (tag.x - this.CX) * sin
				tag.x = x1
				tag.z = z1
			}
		},
		listener(event) {
			//响应鼠标移动
			var x = event.clientX - this.CX
			var y = event.clientY - this.CY
			this.speedX =
				x * 0.0001 > 0
					? Math.min(this.RADIUS * 0.00002, x * 0.0001)
					: Math.max(-this.RADIUS * 0.00002, x * 0.0001)
			this.speedY =
				y * 0.0001 > 0
					? Math.min(this.RADIUS * 0.00002, y * 0.0001)
					: Math.max(-this.RADIUS * 0.00002, y * 0.0001)
		},
		labelData(id) {
			this.showData(id)
			// this.dialogFormVisible = true
		},
		cloudData() {
			let that = this
			if (that.displayType == 0) {
				// 虫害数据
				var num = 2
			} else if (that.displayType == 1) {
				// 病害数据
				var num = 1
			}
			let postData = that.qs.stringify({
				code: num,
				page: that.page
			})
			that
				.$axios({
					method: 'post',
					url: 'api/api_gateway?method=pest.pests.pests_info',
					data: postData
				})
				.then((res) => {
					// var num = parseInt(res.data.data.nums)
					var num = parseInt(res.data.data.data.length)
					var data = res.data.data.data
					that.tagsNum = num
					this.nums = res.data.data.nums
					// console.log(that.tagsNum)
					// console.log(typeof that.tagsNum)
					// //初始化标签位置
					let tags = []
					for (let i = 0; i < data.length; i++) {
						let tag = {}
						let k = -1 + (2 * (i + 1) - 1) / this.tagsNum
						let a = Math.acos(k)
						let b = a * Math.sqrt(this.tagsNum * Math.PI)
						tag.text = data[i].name
						tag.x = this.CX + this.RADIUS * Math.sin(a) * Math.cos(b)
						tag.y = this.CY + this.RADIUS * Math.sin(a) * Math.sin(b)
						tag.z = this.RADIUS * Math.cos(a)
						tag.id = data[i].id
						tags.push(tag)
					}
					this.tags = tags
				})
				.catch((err) => {
					console.log(err)
				})
		},

		// 病虫害数据列表接口
		axiosList(num) {
			let that = this
			let postData = that.qs.stringify({
				code: num,
				page: that.page
			})
			that
				.$axios({
					method: 'post',
					url: 'api/api_gateway?method=pest.pests.pests_info',
					data: postData
				})
				.then((res) => {
					if (res.data.data.nums == 0) {
						// 判断当前是虫害还是病害
						if (num == 1) {
							//病害
							that.plantShow = false
						} else if (num == 2) {
							// 虫害
							that.insectShow = false
						}
					} else if (res.data.data.nums !== 0) {
						var num = parseInt(res.data.data.nums)
						that.nums = num
						that.redataList = res.data.data.data
						var dat = res.data.data.data
						for (var i = 0; i < dat.length; i++) {
							// console.log(dat[i].img_urls)
						}
					}
				})
				.catch((err) => {
					console.log(err)
				})
		},

		//分页点击
		pageData(e) {
			var that = this
			// 判断当前是意见反馈还是补充审核
			if (this.displayType == 0) {
				var num = 2
			} else if (this.displayType == 1) {
				var num = 1
			}
			this.opinionArr = [] //意见反馈列表
			this.supplementArr = [] //用户补充列表
			let postData = this.qs.stringify({
				page: e,
				code: num
			})
			this.$axios({
				method: 'post',
				url: 'api/api_gateway?method=pest.pests.pests_info',
				data: postData
			})
				.then((res) => {
					var num = parseInt(res.data.data.nums)
					that.nums = num
					that.redataList = res.data.data.data
				})
				.catch((err) => {
					console.log(err)
				})
		},

		// 病害虫害总条数
		numsData() {
			let that = this
			that
				.$axios({
					method: 'post',
					url: 'api/api_gateway?method=pest.pests.pests_total'
				})
				.then((res) => {
					var list = this.navigationList
					var num = res.data.data
					let arr = Object.entries(num)
					// for (let i = 0; i < list.length; i++) {
					// 	list[i].num = arr[i][1]
					// 	console.log(arr[i][1])
					// }
					list[0].num = arr[1][1]
					list[1].num = arr[0][1]
					this.navigationList = []
					this.navigationList = list
				})
				.catch((err) => {
					console.log(err)
				})
		},

		//病虫害名称搜索接口
		searchData(code, page, name) {
			let that = this
			// code
			if (that.displayType == 0) {
				// 虫害数据
				var code = 2
			} else if (that.displayType == 1) {
				// 病害数据
				var code = 1
			}
			if (name !== '') {
				that.pageA = 1
			}

			// name
			var name = that.input1
			let postData = that.qs.stringify({
				code: code,
				page: page,
				name: name
			})
			that
				.$axios({
					method: 'post',
					url: 'api/api_gateway?method=pest.pests.pests_search',
					data: postData
				})
				.then((res) => {
					if (res.data.data.nums == 0) {
						that.searchShow = false
					} else if (res.data.data.nums !== 0) {
						that.searchShow = true
						var data = res.data.data.data
						var num = parseInt(res.data.data.nums)
						that.searchNums = num
						that.searchList = data
					}
				})
				.catch((err) => {
					console.log(err)
				})
		},

		//病虫害搜索分页
		pageDataA(e) {
			this.searchData('', e, '')
		},

		//弹框中的数据
		showData(id) {
			let that = this
			if (that.displayType == 0) {
				var num = 2
			} else if (that.displayType == 1) {
				var num = 1
			}
			let postData = that.qs.stringify({
				code: num,
				page: that.page,
				pest_id: id
			})
			that
				.$axios({
					method: 'post',
					url: 'api/api_gateway?method=pest.pests.pests_info',
					data: postData
				})
				.then((res) => {
					that.popUpData = res.data.data
					that.dialogFormVisible = true
				})
				.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)
				}
			})
		}
	},
	created() {
		this.cloudData()
	},
	mounted() {
		//使球开始旋转
		setInterval(() => {
			this.rotateX(this.speedX)
			this.rotateY(this.speedY)
		}, 17)

		this.axiosList(2) //请求病虫害数据
		this.numsData() //请求病虫害数据的总条数
		this.searchData(2, this.pageA, '') //病虫害名称搜索接口

		window.onresize = () => {
			console.log(this.$refs.ciyun.offsetWidth)
			return (() => {
				console.log(this.width)
				this.width = this.$refs.ciyun.offsetWidth
			})()
		}
	}
}
</script>

<style lang='less' scoped>
.expertDiagnosis_recognition_main {
	display: flex;
	div {
		margin: 0 10px;
	}
	.discernBtns {
		button {
			margin-bottom: 15px;
		}
	}
}
.expertDiagnosis_library {
	display: flex;
}
.leftBox {
	position: relative;
	.hint {
		position: absolute;
		right: 22px;
		font-size: 12px;
		color: #999;
		i {
			color: red;
			font-size: 14px;
		}
	}
	.list {
		display: flex;
		/* 默认是水平的 */
		flex-direction: row; /*设置子元素的排列方向*/
		flex-wrap: wrap; /*溢出则换行*/
		align-content: flex-start;
		justify-content: space-between;
		.item {
			width: 260px;
			text-align: center;
			border-radius: 6px 6px 0 0;
			overflow: hidden;
			box-shadow: 1px 1px 8px 0px #dddddd;
			margin-bottom: 23px;
			img {
				width: 100%;
				height: 220px;
			}
			.item_txt {
				line-height: 32px;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				padding: 0 20px;
			}
		}
	}
}
.rightBox {
	.lineUp {
		.title {
			display: flex;
			justify-content: space-between;
			height: 38px;
			button {
				margin-top: -3px;
			}
		}
		.content {
			.item {
				display: flex;
				justify-content: space-between;
				height: 62px;
				line-height: 62px;
				border-bottom: 1px solid rgb(228, 231, 237);
				.number {
					font-size: 16px;
				}
				.greentxt {
					color: #00aa00;
				}
				img {
					width: 50px;
					height: 50px;
					border-radius: 50%;
					margin-top: 6px;
				}
			}
		}
	}
}

// 切换
.expertDiagnosis_library_mainBtn_Box {
	display: flex;
	height: 85px;
	.expertDiagnosis_library_mainBtn {
		border-radius: 5px;
		// width: 32%;
		width: 47%;
		display: flex;
		justify-content: space-between;
		padding: 15px 0 15px 0;
		background: #fff;
		margin: 0 25px 0 0;

		.expertDiagnosis_library_mainBtnBox {
			display: flex;
			margin: 0 0 0 35px;
			.expertDiagnosis_library_mainBtn_centreBox {
				margin: 0 0 0 12px;
				line-height: 22px;

				.expertDiagnosis_library_mainBtn_centreBox_tlt {
					font-size: 15px;
					font-weight: 550;
				}
				.expertDiagnosis_library_mainBtn_centreBox_introduce {
					font-size: 14px;
					font-weight: 550;
					color: #adadad;
				}
			}
		}

		.expertDiagnosis_library_mainBtn_right {
			margin: 0 35px 0 0;
			.expertDiagnosis_library_mainBtn_rightNum {
				font-size: 42px;
				color: #9a9a9a;
				.expertDiagnosis_library_mainBtn_rightNum_unit {
					font-size: 15px;
				}
			}
		}
	}
}

.primary {
	box-shadow: 0px 1px 12px 3px #7df1e1,
		50px 0 48px 34px rgba(255, 255, 255, 0.5);
}

// 病虫害数据列表-左边
.expertDiagnosis_library_mainBtn_box {
	margin: 20px auto;
	.expertDiagnosis_library_units {
		.expertDiagnosis_library_units_tlt {
			display: flex;
			justify-content: space-between;
			.expertDiagnosis_library_units_img {
				width: 18px;
				height: 19px;
			}
			.expertDiagnosis_library_units_tltTxt {
				color: #6b6b6b;
				font-size: 17px;
				font-weight: 550;
				vertical-align: top;
				margin-left: 5px;
			}

			.expertDiagnosis_library_units_search {
				width: 15%;
			}
		}
	}

	// 数据列表
	.expertDiagnosis_library_units_ul {
		display: flex;
		flex-wrap: wrap;
		.expertDiagnosis_library_units_li {
			border: 1px solid #fff;
			width: 30%;
			margin: 15px 0 0 25px;
			display: flex;
			justify-content: space-between;
			border-radius: 10px;
			background: #fff;
			// 图片
			.expertDiagnosis_library_units_liImgBox {
				padding: 10px;
				.expertDiagnosis_library_units_liImg {
					width: 80px;
					height: 80px;
					border-radius: 50px;
				}
			}
			// 名称
			.expertDiagnosis_library_units_liRight_H1 {
				padding: 10px;
				line-height: 76px;
				font-size: 14px;
				font-weight: 550;
			}
			//图标
			.expertDiagnosis_library_units_liImgBox2 {
				margin: 21px 0 0 0;
				padding: 10px;
				.expertDiagnosis_library_units_liImg2 {
				}
			}
		}
	}
}

// 搜索-右边
.expertDiagnosis_library_main_right {
	border: 1px solid #fff;
	width: 30%;
	border-radius: 15px;
	background: #fff;
	// 搜索
	.expertDiagnosis_library_main_right_searchBox {
		// border: 1px solid #000;
		display: flex;
		justify-content: space-between;
		width: 90%;
		margin: 15px auto;
		.expertDiagnosis_library_main_right_searchBox_tlt {
			// border: 1px solid #000;
			line-height: 40px;
			font-size: 18px;
			font-weight: 550;
			color: #d0cfcf;
		}
		.expertDiagnosis_library_units_search {
			width: 40%;
			.input-with-select {
				height: 30px;
				color: #d0cfcf;
			}
		}
	}

	// 排名
	.expertDiagnosis_library_main_right_ul {
		.expertDiagnosis_library_main_right_li {
			border-bottom: 1px solid #d0cfcf;
			padding: 0 0 10px 0;
			margin: 15px auto;
			width: 95%;
			display: flex;
			justify-content: space-between;
			.expertDiagnosis_library_main_right_li_num {
				color: #61cba5;
				font-size: 20px;
				font-weight: 550;
				line-height: 85px;
				margin: 0 30px 0 0;
			}
			.expertDiagnosis_library_main_right_li_imgBox {
				.expertDiagnosis_library_main_right_li_imgBox_img {
					width: 100px;
					height: 90px;
				}
			}
			.expertDiagnosis_library_main_right_li_nameBox {
				margin: 30px 15px 0 0;
				.expertDiagnosis_library_main_right_li_nameBox_name {
					text-align: left;
					width: 36px;
					margin-bottom: 5px;
				}

				.expertDiagnosis_library_main_right_li_nameBox_num {
					width: 67px;
				}
			}
		}
	}
}

// 弹框
.expertDiagnosis_library_main_popUp {
	.expertDiagnosis_library_main_popUp_li {
		display: flex;
		margin: 0 0 30px 0;
		// 害虫名称
		.expertDiagnosis_library_main_popUp_li_name {
			color: #000;
			font-size: 16px;
			font-weight: 550;
		}
		.expertDiagnosis_library_main_popUp_li_nameVal {
			font-weight: 550;
		}
		// 害虫图片
		.expertDiagnosis_library_main_popUp_li_img {
			font-size: 16px;
			font-weight: 550;
			color: #000;
		}
		.expertDiagnosis_library_main_popUp_li_imgVal {
			width: 160px;
			height: 160px;
			border-radius: 10px;
		}
		// 详细信息
		.expertDiagnosis_library_main_popUp_li_details {
			// width: 188px;
			width: 80px;
			font-size: 16px;
			font-weight: 550;
			color: #000;
		}
		.expertDiagnosis_library_main_popUp_li_detailsVal {
			line-height: 30px;
			font-weight: 550;
			width: 800px;
			text-align: left;
		}
	}
}

// 暂无数据
.expertDiagnosis_referral_units_not {
	width: 272px;
	margin: 0 auto;
	.expertDiagnosis_referral_units_notImg {
	}
}
.expertDiagnosis_library_main_right_label {
	margin-top: 87px;
}

// 暂无数据列表
.pagingLi {
	margin: 0 0 0 0;
}
</style>