<template>
	<div class="base_left_feng_xian">
		<div class="base_left_box">
			<div class="title">
				<span>天气动态监测</span>
				<div class="btn_list">
					<span @click="btnListAvtive(index)" v-for="(item, index) in btn_list" :key="index" :class="{ active: item.is }">{{ item.text }}</span>
				</div>
			</div>

			<div ref="myCharts" class="charts_div"></div>

			<div class="title">
				<span>区域风险评估</span>
			</div>
			<div ref="myCharts2" class="charts_div"></div>

			<div ref="myCharts3" class="charts_div"></div>
			<div class="region-deduction">
				<div class="region-deduction-title">区域风险趋势推演</div>
				<div class="region-deduction-icon" @click="showDeduction = !showDeduction">
					<svg t="1638175396070" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2446" width="32" height="32"><path d="M832 736a128 128 0 0 0-125.28 101.824l-318.304-0.064c-8.352-5.568-13.44-43.616-16.448-69.76h92.384c14.592 19.328 37.568 32 63.648 32a80 80 0 1 0-78.4-96h-86.24c-11.616-63.136-38.336-128-122.144-128H96a32 32 0 1 0 0 64h145.248c32.32 0 47.136 19.776 56.704 64H96a32 32 0 0 0 0 64h211.552c6.72 60.064 15.584 133.824 82.24 133.824h318.176c0.8 0 1.44-0.384 2.208-0.448C726.272 953.696 774.4 992 832 992a128 128 0 0 0 0-256z m0 192a64 64 0 1 1 0.032-128.032A64 64 0 0 1 832 928zM96 512h384.512c1.344 0 2.496-0.608 3.776-0.768A127.744 127.744 0 0 0 608 608a128 128 0 0 0 0-256 127.744 127.744 0 0 0-123.712 96.768c-1.28-0.16-2.432-0.768-3.776-0.768H96a32 32 0 0 0 0 64z m512-96a64 64 0 1 1-0.032 128.032A64 64 0 0 1 608 416zM96 389.792h145.248c108.224 0 121.6-90.272 129.6-144.192 6.688-45.504 10.784-53.6 18.944-53.6h298.56c14.592 19.328 37.568 32 63.648 32a80 80 0 1 0-78.4-96h-283.808C323.52 128 313.888 193.12 307.52 236.224c-9.408 63.648-18.048 89.568-66.272 89.568H96a32 32 0 0 0 0 64z" p-id="2447" fill="#02fcfe"></path></svg>
				</div>
			</div>
		</div>
		<div v-show="showDeduction" class="deduction-wrapper">
			<div contenteditable spellcheck="false" class="deduction1" @input="deducInput1" @blur="blurDeduc1"></div>
			<div class="error-input">&nbsp;<span v-if="errorInput1" style="color: rgba(255, 0, 0, .8);">请输入正确的数字</span></div>
			<div contenteditable spellcheck="false" class="deduction2" @input="deducInput2" @blur="blurDeduc2"></div>
			<div class="error-input"><span>&nbsp;</span><span v-if="errorInput2" style="color: rgba(255, 0, 0, .8);">请输入正确的数字</span></div>
			<div contenteditable spellcheck="false" class="deduction3" @input="deducInput3" @blur="blurDeduc3"></div>
			<div class="error-input">&nbsp;<span v-if="errorInput3" style="color: rgba(255, 0, 0, .8);">请输入正确的数字</span></div>
			<div contenteditable spellcheck="false" class="deduction4" @input="deducInput4" @blur="blurDeduc4"></div>
			<div class="error-input">&nbsp;<span v-if="errorInput4" style="color: rgba(255, 0, 0, .8);">请输入0(不包含)-90(不包含)的数字</span></div>
			<div contenteditable spellcheck="false" class="deduction5" @input="deducInput5" @blur="blurDeduc5"></div>
			<div class="error-input">&nbsp;<span v-if="errorInput5" style="color: rgba(255, 0, 0, .8);">请输入正确的数字</span></div>
			<div contenteditable spellcheck="false" class="deduction6" @input="deducInput6" @blur="blurDeduc6"></div>
			<div class="error-input">&nbsp;<span v-if="errorInput6" style="color: rgba(255, 0, 0, .8);">请输入正确的数字</span></div>
			<div class="deduction-bottom">
				<div class="decuction-btn" @click="clicktoDeduction">推演</div>
				<div class="deduction-result" ref="deducresult"></div>
			</div>
		</div>
	</div>
</template>

<script>
import { randNum, timeParse } from '@/utils'
import { baseDataBigScreenWxy } from '@/api'
import mixin_index from '@/mixins'

import { getFXData } from '@/api/fengxian'

export default {
	mixins: [mixin_index],

	data() {
		return {
			btn_list: [
				{
					text: '七日气温',
					is: true,
				},
				{
					text: '24小时气温',
					is: false,
				},
			],

			dataList: [],
			showDeduction: false,
			errorInput1: false,
			errorInput2: false,
			errorInput3: false,
			errorInput4: false,
			errorInput5: false,
			errorInput6: false,
			input1: '',
			input2: '',
			input3: '',
			input4: '',
			input5: '',
			input6: ''
		}
	},

	mounted() {
		getFXData().then(res => {
			const returnList = res.returnList
			let data = []
			for (let item of returnList) {
				data.push({
					name: item[0],
					value: item[1],
				})
			}

			this.dataList = data

			this.init2(data)
		})

		this.tianqiapi('七日气温')
		
	
	},

	methods: {
		// 天气接口
		tianqiapi(e) {
			this.axios
				.get('https://tianqiapi.com/api', {
					params: {
						version: 'v1',
						appsecret: 'Ml0dXby6',
						appid: '31268663',
					},
				})
				.then(res => {
					let data = res.data.data

					let XData = []
					let YData1 = []
					let YData2 = []
					let series = []

					if (e == '七日气温') {
						data.map(item => {
							let indexOf = item.day.indexOf('日')
							let indexTem1 = item.tem1.indexOf('℃')
							let indexTem2 = item.tem2.indexOf('℃')
							XData.push(item.day.substr(0, indexOf + 1))
							YData1.push(item.tem1.substr(0, indexTem1))
							YData2.push(item.tem2.substr(0, indexTem2))
						})

						series = [
							{
								name: '最高气温',
								type: 'line',
								smooth: true,
								data: YData1,
								symbolSize: 1,
								itemStyle: {
									color: '#6c50f3',
									borderColor: '#fff',
									borderWidth: 3,
									shadowColor: 'rgba(0, 0, 0, .3)',
									shadowBlur: 0,
									shadowOffsetY: 2,
									shadowOffsetX: 2,
								},
								areaStyle: {
									normal: {
										color: new echarts.graphic.LinearGradient(
											0,
											0,
											0,
											1,
											[
												{
													offset: 0,
													color: 'rgba(108,80,243,0.3)',
												},
												{
													offset: 1,
													color: 'rgba(108,80,243,0)',
												},
											],
											false
										),
										shadowColor: 'rgba(108,80,243, 0.9)',
										shadowBlur: 20,
									},
								},
							},

							{
								name: '最低气温',
								type: 'line',
								smooth: true,
								data: YData2,
								symbolSize: 1,
								itemStyle: {
									color: '#26FDCD',
									borderColor: '#fff',
									borderWidth: 3,
									shadowColor: 'rgba(0, 0, 0, .3)',
									shadowBlur: 0,
									shadowOffsetY: 2,
									shadowOffsetX: 2,
								},
							},
						]

						this.init(XData, series)
					}

					
					if (e == '24小时气温') {

						console.log(data[0].hours)

						data[0].hours.map(item => {
							XData.push(item.hours)
							YData1.push(item.tem)
						})

						series = [
							{
								name: '气温',
								type: 'line',
								smooth: true,
								data: YData1,
								symbolSize: 1,
								itemStyle: {
									color: '#6c50f3',
									borderColor: '#fff',
									borderWidth: 3,
									shadowColor: 'rgba(0, 0, 0, .3)',
									shadowBlur: 0,
									shadowOffsetY: 2,
									shadowOffsetX: 2,
								},
								areaStyle: {
									normal: {
										color: new echarts.graphic.LinearGradient(
											0,
											0,
											0,
											1,
											[
												{
													offset: 0,
													color: 'rgba(108,80,243,0.3)',
												},
												{
													offset: 1,
													color: 'rgba(108,80,243,0)',
												},
											],
											false
										),
										shadowColor: 'rgba(108,80,243, 0.9)',
										shadowBlur: 20,
									},
								},
							},
						]

						this.init(XData, series)
					}
				})
		},

		// 切换天气类型
		btnListAvtive(index) {
			for (let i of this.btn_list) {
				i.is = false
			}

			this.btn_list[index].is = true
			this.tianqiapi(this.btn_list[index].text)
		},

		init(XData, series) {
			const myChart = echarts.init(this.$refs.myCharts)
			let option = {
				grid: {
					left: '0',
					right: '3%',
					bottom: '5%',
					top: '6%',
					containLabel: true,
				},
				tooltip: {
					trigger: 'axis',
					backgroundColor: '#FFF',
					extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3)',
					textStyle: {
						color: '#000',
					},
					axisPointer: {
						type: 'shadow',
					},
				},
				xAxis: {
					type: 'category',
					boundaryGap: false,
					data: XData,
					show: true,
					axisLabel: {
						textStyle: {
							color: '#02fcfe',
							fontSize: 10,
						},
					},
					axisLine: {
						lineStyle: {
							color: '#02fcfe',
						},
					},
					axisTick: {
						show: true,
						alignWithLabel: true,
					},
				},
				yAxis: {
					type: 'value',
					splitNumber: 5,
					axisLabel: {
						textStyle: {
							color: '#02fcfe',
							fontSize: 10,
						},
					},
					axisLine: {
						lineStyle: {
							color: '#02fcfe',
						},
					},

					splitLine: {
						show: true,
						lineStyle: {
							color: '#02fcfe',
							type: 'dashed',
						},
					},
				},
				series,
			}
			myChart.setOption(option, true)
		},

		init2(data) {
			let myChart = echarts.init(this.$refs.myCharts2)
			let option = {
				color: ['#1F73B5', '#BB4372', '#2195A7', '#8855B2', '#B85C44'],
				tooltip: {
					trigger: 'item',
					formatter: '{b} : {c} ({d}%)',
				},

				series: [
					{
						type: 'pie',
						roseType: 'radius',
						radius: ['7%', '18%'],
						hoverAnimation: false,
						labelLine: {
							normal: {
								show: false,
								length: 30,
								length2: 55,
							},
							emphasis: {
								show: false,
							},
						},
						data: [
							{
								name: '',
								value: 0,
								itemStyle: {
									normal: {
										color: '#3A496D',
									},
								},
							},
						],
					},

					{
						type: 'pie',
						radius: ['30%', '80%'],
						roseType: 'area',
						label: {
							normal: {
								show: true,
								formatter: function(params) {
									return params.name
								},
								textStyle: {
									fontSize: 12,
								},
								position: 'outside',
							},
							emphasis: {
								show: true,
							},
						},
						labelLine: {
							normal: {
								show: true,
								length: 10,
								length2: 2,
								lineStyle: {
									width: 1,
								},
							},
							emphasis: {
								show: false,
							},
						},
						data,
					},
				],
			}
			myChart.setOption(option)

			this.init3()
		},

		init3() {
			let myColor = ['#1F73B5', '#BB4372', '#2195A7', '#8855B2', '#B85C44']
			const myChart = echarts.init(this.$refs.myCharts3)
			var labelData = this.dataList.map(item => {
				return item.name
			})
			let total = [10, 10, 10, 10, 10, 10]
			let data_a = this.dataList.map(item => {
				return item.value
			})
			const option = {
				grid: {
					left: '0',
					right: '5%',
					bottom: '0',
					top: '0',
					containLabel: true,
				},
				xAxis: {
					show: false,
					type: 'value',
				},
				yAxis: [
					{
						type: 'category',
						inverse: true,
						axisLabel: {
							show: true,
							textStyle: {
								color: '#fff',
							},
						},
						splitLine: {
							show: false,
						},
						axisTick: {
							show: false,
						},
						axisLine: {
							show: false,
						},

						data: labelData,
					},
					{
						type: 'category',
						inverse: true,
						axisTick: 'none',
						axisLine: 'none',
						show: true,
						axisLabel: {
							textStyle: {
								color: '#ffffff',
								fontSize: '12',
							},
						},
						data: total,
					},
				],
				series: [
					{
						type: 'bar',
						zlevel: 1,

						label: {
							show: true,
							color: 'rgba(24,31,68,1)',
							offset: [0, 2],
							formatter: function(e) {
								return `${e.value}`
							},
						},

						itemStyle: {
							normal: {
								barBorderRadius: 20,
								color: function(params) {
									var num = myColor.length
									return myColor[params.dataIndex % num]
								},
							},
						},
						barWidth: 16,
						data: data_a,
					},
					{
						name: '背景',
						type: 'bar',
						barWidth: 16,
						barGap: '-100%',
						data: total,
						itemStyle: {
							normal: {
								color: '#035966',
								barBorderRadius: 30,
							},
						},
					},
				],
			}
			myChart.setOption(option)
		},
		deducInput1($event){
			this.input1 = $event.target.innerText
			this.$refs.deducresult.innerText = ''
			if(!isNaN(parseFloat(this.input1))) {
				this.errorInput1 = false
			}
		},
		deducInput2($event){
			this.input2 = $event.target.innerText
			this.$refs.deducresult.innerText = ''
			if(!isNaN(parseFloat(this.input2))) {
				this.errorInput2 = false
			}
		},
		deducInput3($event){
			this.input3 = $event.target.innerText
			this.$refs.deducresult.innerText = ''
			if(!isNaN(parseFloat(this.input3))) {
				this.errorInput3 = false
			}
		},
		deducInput4($event){
			this.input4 = $event.target.innerText
			this.$refs.deducresult.innerText = ''
			if (!isNaN(parseFloat(this.input4))) {
				this.errorInput4 = false
			}
		},
		deducInput5($event){
			this.input5 = $event.target.innerText
			this.$refs.deducresult.innerText = ''
			if (!isNaN(parseFloat(this.input5))) {
				this.errorInput5 = false
			}
		},
		deducInput6($event){
			this.input6 = $event.target.innerText
			this.$refs.deducresult.innerText = ''
			if (!isNaN(parseFloat(this.input6))) {
				this.errorInput6 = false
			}
		},
		blurDeduc1() {
			if (isNaN(parseFloat(this.input1))) {
				this.errorInput1 = true
			} else {
				return true
			}
			return false
		},
		blurDeduc2() {
			if (isNaN(parseFloat(this.input2))) {
				this.errorInput2 = true
			} else {
				return true
			}
			return false
		},
		blurDeduc3() {
			if (isNaN(parseFloat(this.input3))) {
				this.errorInput3 = true
			} else {
				return true
			}
			return false
		},
		blurDeduc4() {
			if (isNaN(parseFloat(this.input4))) {
				this.errorInput4 = true
			} else if (!((parseFloat(this.input4)>0) && (parseFloat(this.input4)< 90))) {
				this.errorInput4 = true
			} else {
				return true
			}
			return false
		},
		blurDeduc5() {
			if (isNaN(parseFloat(this.input5))) {
				this.errorInput5 = true
			} else {
				return true
			}
			return false
		},
		blurDeduc6() {
			if (isNaN(parseFloat(this.input6))) {
				this.errorInput6 = true
			} else {
				return true
			}
			return false
		},
		clicktoDeduction($event) {
			const isdeduc1 = this.blurDeduc1()
			const isdeduc2 = this.blurDeduc2()
			const isdeduc3 = this.blurDeduc3()
			const isdeduc4 = this.blurDeduc4()
			const isdeduc5 = this.blurDeduc5()
			const isdeduc6 = this.blurDeduc6()
			if (isdeduc1 && isdeduc2 && isdeduc3 && isdeduc4 && isdeduc5 && isdeduc6) {
				const Q = parseFloat(this.input1)
				const H2 = parseFloat(this.input2)
				const H1 = parseFloat(this.input3)
				const α = parseFloat(this.input4)
				const F1 = parseFloat(this.input5)
				const P = parseFloat(this.input6)
				const result = Math.PI * ((H1 * H1 * H1)/(Math.tan(α * Math.PI / 180) * Math.tan(α * Math.PI / 180)) - (H2 * H2 * H2)/(Math.tan(α * Math.PI / 180) * Math.tan(α * Math.PI / 180))) / 3  - 1000 * Q * (F1 * 0.1 + Math.PI * H2 * H2 / (Math.tan(α * Math.PI / 180) * Math.tan(α * Math.PI / 180))) + P
				if (result > 0) {
					this.$refs.deducresult.innerText = '坝体安全'
				} else if (result.toFixed(0) == 0) {
					this.$refs.deducresult.innerText = '坝体一小时后可能崩溃'
				} else {
					this.$refs.deducresult.innerText = '坝体崩溃'
				}
			} else {
				this.$refs.deducresult.innerText = ''
				return
			}
		}
	},
}
</script>

<style lang="scss">
.base_left_feng_xian {
	position: absolute;
	background: #040624;
	width: 18%;
	left: 0;
	top: 0;
	bottom: 5vh;
	z-index: 99;
	color: #7afffd;
	.base_left_box {
		padding: 1.2vh;
		padding-top: 5vh;
		img {
			width: 0.8vw;
			position: absolute;
			right: 1vw;
			top: 1.2vw;
			cursor: pointer;
		}

		.title {
			margin-bottom: 1vh;
			display: flex;
			align-items: center;
			justify-content: space-between;
			position: relative;
			color: #02fcfe;
			font-size: 1vw;
		}
		.btn_list {
			text-align: end;
			font-size: 1.2vh;
			color: #fff;

			span {
				border: 1px solid #02fcfe;
				padding: 3px 6px;
				border-radius: 3px;
				margin-right: 8px;
				cursor: pointer;
			}

			.active {
				background-color: #02fcfe33;
				color: #02fcfe;
			}
		}

		.charts_div {
			height: 22vh;
			margin-bottom: 2vh;
		}
		.region-deduction {
			display: flex;
			align-items: center;
			.region-deduction-title {
				color: #03FCFE;
			}
			.region-deduction-icon {
				width: 2vw;
				height: 2vw;
				display: flex;
				justify-content: center;
				align-items: center;
				cursor: pointer;
				margin-left: 1vw;
			}
		}
	}
	.deduction-wrapper {
		position: absolute;
		right: 0;
		top: 0;
		transform: translateX(100%);
		width: 220px;
		color: white;
		background: #040624;
		padding: 8px;
		.deduction1 {
			outline: none;
			border: 1px solid #02fcfe;
			&:empty::after {
				content: '请输入降雨量(mm)'
			}
		}
		.deduction2 {
			outline: none;
			border: 1px solid #02fcfe;
			&:empty::after {
				content: '请输入库水位(m)'
			}
		}
		.deduction3 {
			outline: none;
			border: 1px solid #02fcfe;
			&:empty::after {
				content: '请输入坝顶高程(m)';
			}
		}
		.deduction4 {
			outline: none;
			border: 1px solid #02fcfe;
			&:empty::after {
				content: '请输入坝体坡度(α)'
			}
		}
		.deduction5 {
			outline: none;
			border: 1px solid #02fcfe;
			&:empty::after {
				content: '请输入汇水面积内的路面面积(M^2)';
			}
		}
		.deduction6 {
			outline: none;
			border: 1px solid #02fcfe;
			&:empty::after {
				content: '排水量(M^3)';
			}
		}
		.error-input {
			font-size: 12px;
			height: 14px;
			margin: 3px 0;
		}
		.deduction-bottom {
			display: flex;
			align-items: center;
			.decuction-btn {
				background: #C8DA18;
				padding: 3px;
				cursor: pointer;
				&:hover {
					background: rgba(200, 218, 24, .6);
				}
			}
			.deduction-result {
				color: white;
				margin-left: 5px;
			}
		}
	}
}
</style>
