<template>
	<div class="table-box">
		<div class="card table-search" style="overflow: hidden;">
			<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" >
					<el-date-picker v-model="searchParam.date" type="daterange" range-separator="至"
						start-placeholder="开始时间" end-placeholder="结束时间"  style="width: 300px" />
				</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>
		<div class="main_list">
			<el-row :gutter="15">
				<el-col :span="24">
					<div class="chart_item">
						<div style="font-weight: bold;" class="item_title">
							<span>气温 ( ℃ ) / 相对湿度 ( % ) / 本站气压 ( hPa )</span>
						</div>
						<div class="mt5">
							<div ref="data" class="data_box"></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 data = ref()


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

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

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

const showData = () => {
	const colors = ['#5470C6', '#59A073', '#FFB652'];
	let mychart = echarts.init(data.value);
	let option = {
		color: colors,
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'cross'
			}
		},
		grid: {
			left: '80',
			right: '130',
			bottom: '40',
		},

		legend: {
			data: ['气温', '相对湿度', '本站气压']
		},
		xAxis: [
			{
				type: 'category',
				axisTick: {
					alignWithLabel: true
				},
				// prettier-ignore
				data: ['06/11 16:00', '06/11 20:00', '06/12 00:00', '06/12 04:00', '06/12 08:00', '06/12 12:00', '06/12 16:00', '06/12 20:00', '06/13 00:00', '06/13 04:00', '06/13 08:00', '06/13 12:00']
			}
		],
		yAxis: [
			{
				type: 'value',
				name: '气温',
				position: 'right',
				alignTicks: true,
				axisLine: {
					show: true,
					lineStyle: {
						color: colors[0]
					}
				},
				axisLabel: {
					formatter: '{value} °C'
				}
			},
			{
				type: 'value',
				name: '相对湿度',
				position: 'right',

				offset: 80,
				axisLine: {
					show: true,
					lineStyle: {
						color: colors[1]
					}
				},
				axisLabel: {
					formatter: '{value} %'
				}
			},
			{
				type: 'value',
				name: '本站气压',

				min: 400,
				max: 1080,
				position: 'left',
				axisLine: {
					show: true,
					lineStyle: {
						color: colors[2
						]
					}
				},
				axisLabel: {
					formatter: '{value} hPa'
				}
			}
		],
		series: [
			{
				name: '气温',
				smooth: true, // 添加此行
				type: 'line',

				data: [
					28, 29, 29, 29, 30, 31, 32, 33, 34, 33, 32, 30
				]
			},
			{
				name: '相对湿度',
				type: 'line',
				smooth: true, // 添加此行
				yAxisIndex: 1,
				data: [
					99, 79, 67, 69, 73, 75, 78, 79, 67, 69, 73, 75,
				]
			},
			{
				name: '本站气压',
				type: 'line',
				smooth: true, // 添加此行
				yAxisIndex: 2,
				data: [1001, 1003, 1002, 1001, 1004, 1005, 1001, 1003, 1002, 1001, 1004, 1005,]
			}
		]
	};
	mychart.setOption(option)
	window.addEventListener("resize", function () {
		mychart.resize();
	});
}
onMounted(() => {
	showData()


})

</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;
		}

		.FTP_box {
			padding: 0 50px;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.FTP_item {
				flex: 1;
				flex-shrink: 0;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				img {
					width: 56px;
					margin-bottom: 20px;
				}
			}

		}
	}

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

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

}

.data_box {
	height: calc(100vh - 215px);
	// height: 100%;
}
</style>