<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-switch v-model="searchParam.switch" class="ml-2" inline-prompt active-text="日"
						inactive-text="小时" />
				</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 v-if="searchParam.switch">日降水量（mm）</span>
							<span v-else>小时累计降水量 (称重)(mm)</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: '',
	switch: true,


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

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

const showData = () => {
	let mychart = echarts.init(data.value);
	let option = {
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'shadow'
			}
		},
		grid: {
			left: '20',
			right: '20',
			bottom: '20',
			// top: '20',
			containLabel: true
		},

		xAxis: [
			{
				type: 'category',
				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'],
				axisTick: {
					alignWithLabel: true
				},
				axisLabel: {
					interval: 1,

				},
			}
		],
		yAxis: [
			{
				type: 'value'
			}
		],
		series: [
			{
				name: '降水量',
				type: 'bar',
				barWidth: '50%',
				color: '#88c1ff',
				data: [2, 3, 5, 3, 1, 0, 5, 2, 3, 4.5, 3.6, 2.8]
			}
		]
	};
	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>