<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_library">
			<!-- 病虫害数据列表 -->
			<div style="width: 70%">
				<div class="expertDiagnosis_library_mainBtn_Box">
					<div
						v-for="(item, index) in this.navigationList"
						:key="index"
						:class="[displayType === index ? 'primary' : '']"
						size="mini"
						@click="checkType(index)"
						class="expertDiagnosis_library_mainBtn"
					>
						<!-- 左 -->
						<div class="expertDiagnosis_library_mainBtnBox">
							<img :src="item.img" class="expertDiagnosis_library_mainBtn_img" />
							<div class="expertDiagnosis_library_mainBtn_centreBox">
								<div class="expertDiagnosis_library_mainBtn_centreBox_tlt">{{item.title}}</div>
								<div class="expertDiagnosis_library_mainBtn_centreBox_introduce">{{item.details}}</div>
							</div>
						</div>

						<!-- 右 -->
						<div class="expertDiagnosis_library_mainBtn_right">
							<div class="expertDiagnosis_library_mainBtn_rightNum">
								{{item.num}}
								<span class="expertDiagnosis_library_mainBtn_rightNum_unit">{{item.unit}}</span>
							</div>
						</div>
					</div>
				</div>

				<!-- 列表虫害数据 -->
				<div v-show="displayType == '0'" class="expertDiagnosis_library_mainBtn_box">
					<div class="expertDiagnosis_library_units">
						<div class="expertDiagnosis_library_units_tlt">
							<div class>
								<img
									src="@/assets/images/expertDiagnosis/ku/4.png"
									alt
									class="expertDiagnosis_library_units_img"
								/>
								<span class="expertDiagnosis_library_units_tltTxt">虫害数据</span>
							</div>
						</div>
					</div>

					<!-- 列表数据 -->
					<ul class="expertDiagnosis_library_units_ul" v-if="insectShow">
						<li
							class="expertDiagnosis_library_units_li"
							v-for="(item, index) in this.redataList"
							:key="index"
							@click="showData(item.id)"
						>
							<!-- 图片 -->
							<div class="expertDiagnosis_library_units_liImgBox">
								<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="expertDiagnosis_library_units_liRight_H1">{{item.name}}</div>

							<!-- 图标 -->
							<div class="expertDiagnosis_library_units_liImgBox2">
								<img
									src="@/assets/images/expertDiagnosis/ku/3.png"
									alt
									class="expertDiagnosis_library_units_liImg2"
								/>
							</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="insectShow"
						background
						@current-change="pageData($event)"
						layout="prev, pager, next"
						:total="this.nums"
						:current-page.sync="page"
						:page-size="12"
					></el-pagination>
				</div>

				<!-- 列表病害数据 -->
				<div v-show="displayType == '1'" class="expertDiagnosis_library_mainBtn_box">
					<div class="expertDiagnosis_library_units">
						<div class="expertDiagnosis_library_units_tlt">
							<div class>
								<img
									src="@/assets/images/expertDiagnosis/ku/5.png"
									alt
									class="expertDiagnosis_library_units_img"
								/>
								<span class="expertDiagnosis_library_units_tltTxt">病害数据</span>
							</div>
						</div>
					</div>

					<!-- 列表数据 -->
					<ul class="expertDiagnosis_library_units_ul" v-if="plantShow">
						<li
							class="expertDiagnosis_library_units_li"
							v-for="(item, index) in this.redataList"
							:key="index"
							@click="showData(item.id)"
						>
							<!-- 图片 -->
							<div class="expertDiagnosis_library_units_liImgBox">
								<img :src=" 'https://images.weserv.nl/?url=' + item.img_urls" alt class="expertDiagnosis_library_units_liImg" />
							</div>

							<!-- 名称 -->
							<div class="expertDiagnosis_library_units_liRight_H1">{{item.name}}</div>

							<!-- 图标 -->
							<div class="expertDiagnosis_library_units_liImgBox2">
								<img
									src="@/assets/images/expertDiagnosis/ku/3.png"
									alt
									class="expertDiagnosis_library_units_liImg2"
								/>
							</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="plantShow"
						background
						@current-change="pageData($event)"
						layout="prev, pager, next"
						:total="this.nums"
						:page-size="12"
					></el-pagination>
				</div>
			</div>

			<!-- 搜索 -->
			<div class="expertDiagnosis_library_main_right" v-loading="loading">
				<!-- 搜索 -->
				<div style="border-bottom: 1px solid #efefef">
					<div class="expertDiagnosis_library_main_right_searchBox">
						<div class="expertDiagnosis_library_main_right_searchBox_tlt">搜索排名</div>

						<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_library_main_right_ul" v-if="searchShow">
					<li
						class="expertDiagnosis_library_main_right_li"
						v-for="(itemA, index) in this.searchList"
						:key="index"
					>
						<div class style="display: flex; margin: 0 0 0 20px;">
							<div class="expertDiagnosis_library_main_right_li_num">{{itemA.codes}}</div>
							<div class="expertDiagnosis_library_main_right_li_imgBox">
								<img
									:src="itemA.img_urls"
									@error="errImg"
									class="expertDiagnosis_library_main_right_li_imgBox_img"
								/>
							</div>
						</div>

						<div class="expertDiagnosis_library_main_right_li_nameBox">
							<div class="expertDiagnosis_library_main_right_li_nameBox_name">{{itemA.name}}</div>
							<div class="expertDiagnosis_library_main_right_li_nameBox_num">编号:{{itemA.search}}</div>
						</div>
					</li>

					<li class>
						<!-- 分页 -->
						<el-pagination
							background
							@current-change="pageDataA($event)"
							layout="prev, pager, next"
							:total="this.searchNums"
							:current-page.sync="pageA"
							:page-size="3"
						></el-pagination>
					</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">
					<svg :width="width" :height="height" @mousemove="listener($event)">
						<a href="#" v-for="tag in tags" @click="labelData(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>
		</div>

		<!-- 弹框 -->
		<el-dialog title="病虫害档案" :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>
	</div>
</template>

<script>
import t from '../../../assets/ezuikit'
export default {
	data() {
		return {
			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: 460,
			height: 260,
			tagsNum: 0,
			RADIUS: 120,
			speedX: Math.PI / 360,
			speedY: Math.PI / 360,
			tags: [],
			dialogFormVisible: false,
			nums: 1, //总数
			redataList: [], //病害虫害数组
			searchList: [], //病虫害搜索排行数据
			searchNums: 0, //搜索总数分页
			popUpData: {}, //弹框中的数据
			searchShow: true, //搜索列表显示
			plantShow: true, //病害数据列表显示
			insectShow: true, //虫害数据列表显示
			page: 1,
			pageA: 1,
			loading: true
		}
	},
	computed: {
		CX() {
			return this.width / 2
		},
		CY() {
			return this.height / 2
		}
	},
	watch: {
		displayType(val) {
			this.loading = true
			if (val == 0) {
				//虫害数据
				this.axiosList(2)
				this.searchData(2, this.pageA, this.input1)
				this.cloudData()
				console.log(111)
			} else if (val == 1) {
				// 病害数据
				this.axiosList(1)
				this.searchData(1, this.pageA, this.input1)
				this.cloudData()
				console.log(222)
			}
		}
	},
	methods: {
		// 列表图片加载失败
		errImg(e) {
			e.target.src = require('@/assets/images/expertDiagnosis/ku/noData.jpg')
		},

		checkType(i) {
			this.page = 1
			this.displayType = i
		},
		// 标签云
		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
						}
						this.loading = 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)
						}
						this.loading = false
					}
				})
				.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, '') //病虫害名称搜索接口
	}
}
</script>

<style lang='less' scoped>
.expertDiagnosis_library {
	display: flex;
}

// 切换
.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 {
	}
}

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