<template>
	<div class="table-box">
		<div class="card table-search" style="overflow: hidden;display: flex;justify-content: space-between;">
			<el-form ref="formRef" :model="searchParam" :inline="true" label-width="auto">
				<el-form-item label="自动站：" prop="base">
					<el-select v-model="searchParam.base" placeholder="请选择" style="width: 200px">
						<el-option v-for="item in baseOptions" :key="item.value" :label="item.label"
							:value="item.value" />
					</el-select>
				</el-form-item>
				<el-form-item label="自动站：" prop="base">
					<div><el-switch v-model="searchParam.switch" class="ml-2" inline-prompt active-text="正点"
							inactive-text="分钟" style="margin-right: 10px;" />
						<el-date-picker v-model="searchParam.date" type="daterange" range-separator="至"
							start-placeholder="开始时间" end-placeholder="结束时间" style="width: 300px" />
					</div>
				</el-form-item>
				<el-form-item>
					<div>
						<el-button plain>查询</el-button>
						<el-button plain @click="resetForm(formRef)">重置</el-button>
					</div>
				</el-form-item>
			</el-form>
			<div class="header-button-ri">
				<slot name="toolButton">
					<img class="setting" style="margin-top: 5px;" src="@/assets/images/setting2.png" />
				</slot>
			</div>
		</div>
		<div class="main_list">
			<el-row :gutter="15">
				<el-col :xs="24" :sm="12" :md="8" :lg="8">
					<div class="chart_item">
						<div style="font-weight: bold;" class="item_title">
							<span>2分钟平均风向 ( ° )/2分钟平均风速 ( m/s )</span>
						</div>
						<div class="mt5">
							<div ref="wind" class="ve-ring" style="height: 330px"></div>
						</div>
					</div>
				</el-col>
				<el-col :xs="24" :sm="12" :md="8" :lg="8">
					<div class="chart_item">
						<div style="font-weight: bold;" class="item_title">
							<span>总辐射曝辐量 ( MJ/㎡ )</span>
						</div>
						<div class="mt5">
							<div ref="radio" class="ve-ring" style="height: 330px"></div>
						</div>
					</div>
				</el-col>
				<el-col :xs="24" :sm="12" :md="8" :lg="8">
					<div class="chart_item">
						<div style="font-weight: bold;" class="item_title">
							<span>本站气压 ( hPa )</span>
						</div>
						<div class="mt5">
							<div ref="pressureLine" class="ve-ring" style="height: 330px"></div>
						</div>
					</div>
				</el-col>
			</el-row>
			<el-row :gutter="15">
				<el-col :span="24">
					<div class="chart_item">
						<div style="font-weight: bold;" class="item_title">
							<span>总辐射辐照度 ( W/㎡ )</span>
						</div>
						<div class="mt5">
							<div ref="radio2" class="ve-ring" style="height: 340px"></div>
						</div>
					</div>
				</el-col>
			</el-row>
		</div>
	</div>
</template>

<script setup lang="ts" name="dataSynthesis">
import * as echarts from 'echarts';

import { ref, reactive, onMounted } from "vue";
import { useRouter } from "vue-router";

const formRef = ref()
const wind = ref()
const pressureLine = ref()
const radio = ref()
const radio2 = ref()


const router = useRouter();
const searchParam = reactive({
	base: undefined,
	date: '',
	switch: true

})
const baseOptions = ref([{
	value: 0,
	label: 'M1986',
},
{
	value: 1,
	label: 'M1987',
}])

// resetForm
const resetForm = (formEl) => {
	if (!formEl) return;
	formEl.resetFields();
};

const showWind = () => {
	// 数据格式
	let winArr = [{
		value: 4.1, //风速--数值大小--变量名不可变
		symbolRotate: -45, //风向---旋转角度--变量名不可变
		symbolRotateStr: '西南风' //风向中文--变量名可变（tooltip 提示随之修改）

	}, {
		value: 4.5,
		symbolRotate: 45,
		symbolRotateStr: '东南风'
	}, {
		value: 4.5,
		symbolRotate: 90,
		symbolRotateStr: '东风'
	}, {
		value: 5.0,
		symbolRotate: -180,
		symbolRotateStr: '南风'
	}, {
		value: 4.3,
		symbolRotate: -45,
		symbolRotateStr: '西南风'
	}, {
		value: 4.5,
		symbolRotate: -90,
		symbolRotateStr: '西风'
	}, {
		value: 4.5,
		symbolRotate: -45,
		symbolRotateStr: '西南风'
	}, {
		value: 4.5,
		symbolRotate: -90,
		symbolRotateStr: '西风'
	}, {
		value: 4.1, //风速--数值大小--变量名不可变
		symbolRotate: -45, //风向---旋转角度--变量名不可变
		symbolRotateStr: '西南风' //风向中文--变量名可变（tooltip 提示随之修改）

	}, {
		value: 4.5,
		symbolRotate: 45,
		symbolRotateStr: '东南风'
	}, {
		value: 4.5,
		symbolRotate: 90,
		symbolRotateStr: '东风'
	}, {
		value: 5.0,
		symbolRotate: -180,
		symbolRotateStr: '南风'
	}, {
		value: 4.3,
		symbolRotate: -45,
		symbolRotateStr: '西南风'
	}, {
		value: 4.5,
		symbolRotate: -90,
		symbolRotateStr: '西风'
	}, {
		value: 4.5,
		symbolRotate: -45,
		symbolRotateStr: '西南风'
	}, {
		value: 4.5,
		symbolRotate: -90,
		symbolRotateStr: '西风'
	}, {
		value: 4.1, //风速--数值大小--变量名不可变
		symbolRotate: -45, //风向---旋转角度--变量名不可变
		symbolRotateStr: '西南风' //风向中文--变量名可变（tooltip 提示随之修改）

	}, {
		value: 4.5,
		symbolRotate: 45,
		symbolRotateStr: '东南风'
	}, {
		value: 4.5,
		symbolRotate: 90,
		symbolRotateStr: '东风'
	}, {
		value: 5.0,
		symbolRotate: -180,
		symbolRotateStr: '南风'
	}, {
		value: 4.3,
		symbolRotate: -45,
		symbolRotateStr: '西南风'
	}, {
		value: 4.5,
		symbolRotate: -90,
		symbolRotateStr: '西风'
	}, {
		value: 4.5,
		symbolRotate: -45,
		symbolRotateStr: '西南风'
	}, {
		value: 4.5,
		symbolRotate: -90,
		symbolRotateStr: '西风'
	},]
	let mychart = echarts.init(wind.value);
	let option = {

		grid: {
			left: '10',
			right: '10',
			bottom: '3%',
			top: 20,
			containLabel: true
		},
		// X轴
		xAxis: {
			type: 'category',
			splitLine: {
				show: false
			},
			boundaryGap: true,
			axisTick: {
				alignWithLabel: true, // true：标签位于刻度线正下方；false：标签位于2个刻度线中间
			},
			data: ['06/12 08:00', '06/12 09:00', '06/12 10:00', '06/12 11:00', '06/12 12:00', '06/12 13:00', '06/12 14:00', '06/12 15:00', '06/12 16:00', '06/12 17:00', '06/12 18:00', '06/12 19:00', '06/12 20:00', '06/12 21:00', '06/12 22:00', '06/12 23:00', '06/13 00:00', '06/13 01:00', '06/13 02:00', '06/13 03:00', '06/13 04:00', '06/13 05:00', '06/13 06:00', '06/13 07:00',],
			axisLabel: {
				interval: 4,
				formatter: function (value) {
					// if (value.index % 4 === 0) {
					// 	return value.replace(/ /g, '\n');
					// } else {
					// 	return '';
					// }
					return value.replace(/ /g, '\n');
				},

			},
		},
		// Y轴
		// yAxis: {
		// 	type: 'value',
		// 	// name: "风速(m/s)",
		// },
		yAxis: {
			min: 0,
			max: 10,
			type: 'value'
		},
		// 鼠标悬浮提示
		tooltip: {
			trigger: "axis",
			formatter(params) {
				let tip =
					"时间:" +
					params[0].axisValue +
					"<br/>风速:" +
					(params[0].value ? params[0].value : "--") +
					"m/s<br/>风向:" +
					(params[0].data ? params[0].data.symbolRotateStr : "--")
				return tip;
			},
		},
		// 数据
		series: [{
			data: winArr,
			type: 'line',
			smooth: true, //这句就是让曲线变平滑的
			// symbol: "image://" + require("../../../assets/img/weather/wind.png"),
			symbol: 'path://M4.866,0,0,15.193l4.866-4.449L9.738,15.2Z',
			symbolSize: 11,
			//折线样式
			lineStyle: {
				color: '#a5cfff',
				width: 1,
			},
			// label: {
			// 	normal: {
			// 		formatter: '{c}',
			// 		show: false,
			// 		position: 'top',
			// 		distance: 15
			// 	}
			// },
			itemStyle: {
				normal: {

				},
			},
		}]
	};

	mychart.setOption(option)
	window.addEventListener("resize", function () {
		mychart.resize();
	});
}

const data3 = ref([1004, 1004, 1004, 1004, 1004, 1005, 1005, 1005, 1005, 1004.5, 1004.6, 1004.8]);
const showPressureLine = () => {
	// 获取最大值方法
	function calMax(arr) {
		let max = Math.max.apply(null, arr); // 获取最大值方法
		let maxint = Math.ceil(max / 5); // 向上以5的倍数取整
		let maxval = maxint * 5 + 5; // 最终设置的最大值
		return maxval; // 输出最大值
	}
	// 获取最小值方法
	function calMin(arr) {
		let min = Math.min.apply(null, arr); // 获取最小值方法
		let minint = Math.floor(min / 1); // 向下以1的倍数取整
		let minval = minint * 1 - 5; // 最终设置的最小值
		return minval; // 输出最小值
	}
	// 调用方法，获取数据的最大值&最小值
	let maxData1 = calMax(data3.value);
	let minData1 = calMin(data3.value);


	let mychart = echarts.init(pressureLine.value);
	let option = {

		grid: {
			left: '10',
			right: '10',
			bottom: '3%',
			top: 20,
			containLabel: true
		},

		// X轴
		xAxis: {
			type: 'category',
			splitLine: {
				show: false
			},
			// boundaryGap: false,
			axisTick: {
				alignWithLabel: true, // true：标签位于刻度线正下方；false：标签位于2个刻度线中间
			},
			data: ['06/12 08:00', '06/12 09:00', '06/12 10:00', '06/12 11:00', '06/12 12:00', '06/12 13:00', '06/12 14:00', '06/12 15:00', '06/12 16:00', '06/12 17:00', '06/12 18:00', '06/12 19:00'],
			axisLabel: {
				interval: 1,
				formatter: function (value) {
					return value.replace(/ /g, '\n');
				},
			},
		},
		yAxis: {
			min: minData1,
			max: maxData1,
			type: 'value'
		},

		// 鼠标悬浮提示
		tooltip: {
			trigger: "axis",
		},
		// 数据
		series: [
			{
				data: data3.value,

				name: "气压",
				type: "line",
				smooth: true,
				lineStyle: {
					color: '#157aea',
					width: 1,
				},
				itemStyle: {
					normal: {
						color: '#157aea'

					},

				}
			},

		]
	};

	mychart.setOption(option)
	window.addEventListener("resize", function () {
		mychart.resize();
	});
}
const data4 = ref([0.4, 0.5, 0.45, 0.5, 0.4, 0.5, 0.6, 0.55, 0.5, 0.5, 0.6, 0.55]);
const showRadio = () => {
	let mychart = echarts.init(radio.value);
	let option = {
		grid: {
			left: '10',
			right: '10',
			bottom: '3%',
			top: 20,
			containLabel: true
		},

		// X轴
		xAxis: {
			type: 'category',
			splitLine: {
				show: false
			},
			// boundaryGap: false,
			axisTick: {
				alignWithLabel: true, // true：标签位于刻度线正下方；false：标签位于2个刻度线中间
			},
			data: ['06/12 08:00', '06/12 09:00', '06/12 10:00', '06/12 11:00', '06/12 12:00', '06/12 13:00', '06/12 14:00', '06/12 15:00', '06/12 16:00', '06/12 17:00', '06/12 18:00', '06/12 19:00'],
			axisLabel: {
				interval: 1,
				formatter: function (value) {
					return value.replace(/ /g, '\n');
				},
			},
		},
		yAxis: {
			min: 0,
			max: 1,
			interval: 0.2,
			type: 'value'
		},

		// 鼠标悬浮提示
		tooltip: {
			trigger: "axis",
		},
		// 数据
		series: [
			{
				name: "曝辐量",
				type: "line",
				smooth: true,
				data: data4.value,
				lineStyle: {
					color: '#157aea',
					width: 1,
				},
				itemStyle: {
					normal: {
						color: '#157aea'

					},

				}
			},

		]
	};

	mychart.setOption(option)
	window.addEventListener("resize", function () {
		mychart.resize();
	});
}
const data5 = ref([800, 810, 800, 820, 800, 850, 800, 830, 800, 850, 800, 820]);
const showRadio2 = () => {
	let mychart = echarts.init(radio2.value);
	let option = {
		grid: {
			left: '10',
			right: '10',
			bottom: '3%',
			top: 20,
			containLabel: true
		},

		// X轴
		xAxis: {
			type: 'category',
			splitLine: {
				show: false
			},
			// boundaryGap: false,
			axisTick: {
				alignWithLabel: true, // true：标签位于刻度线正下方；false：标签位于2个刻度线中间
			},
			data: ['06/12 08:00', '06/12 09:00', '06/12 10:00', '06/12 11:00', '06/12 12:00', '06/12 13:00', '06/12 14:00', '06/12 15:00', '06/12 16:00', '06/12 17:00', '06/12 18:00', '06/12 19:00'],
			axisLabel: {
				interval: 0,
				formatter: function (value) {
					return value.replace(/ /g, '\n');
				},
			},
		},
		yAxis: {
			min: 0,
			max: 1200,
			interval: 200,
			type: 'value'
		},

		// 鼠标悬浮提示
		tooltip: {
			trigger: "axis",
		},
		// 数据
		series: [
			{
				name: "辐照度",
				type: "line",
				smooth: true,
				data: data5.value,
				lineStyle: {
					color: '#157aea',
					width: 1,
				},
				itemStyle: {
					normal: {
						color: '#157aea'

					},

				}
			},

		]
	};

	mychart.setOption(option)
	window.addEventListener("resize", function () {
		mychart.resize();
	});
}

onMounted(() => {
	showWind()
	showPressureLine()
	showRadio()
	showRadio2()

})

</script>
<style scoped lang="scss">
.el-row .el-col {
	margin-bottom: 15px;
}


.main_list {
	background: transparent !important;
	box-shadow: none !important;
	padding: 0 !important;
	height: calc(100vh - 150px);
	margin-bottom: 10px;
	overflow-y: scroll;
	overflow-x: hidden;


	.chart_item {
		border-radius: 10px;
		padding: 10px;
		background-color: #fff;
		// height: 100%;
		// margin-bottom: 15px;


		.item_title {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
	}

	.info_box {
		.info_title {
			color: #999999;
			font-size: 16px;
		}

		.info_content {
			height: 40px;
			font-weight: bold;
			color: #000;
			font-size: 26px;
		}
	}

}

.el-button.is-link {
	height: 32px;
}
</style>