<template>
	<div class="box_main">
		<div class="box_tab">
			<div :class="['box_tab_item', pl_box1ActiveIndex == index?'box_tab_item_active':'' ]"
				v-for="(item,index) in pl_box1ListData" :key="index" @click="pl_box1Click(index)"> {{item}}
			</div>
		</div>
		<div id="W_box_Line"></div>
	</div>
</template>

<script>
	import {
		ref,
		reactive,
		toRefs,
		onMounted,
		computed,
		nextTick
	} from "vue";
	import * as echarts from "echarts";
	export default {
		setup() {
			const AllData = reactive({
				pl_box1ActiveIndex: 0,
				pl_box1ListData: ['积水点1', '积水点2', '积水点3', '积水点4'],
				box2XAxis: ['00:00', '02:00', '04:00', '06:00', '08:00', '10:00', '12:00', '14:00', '16:00',
					'18:00', '20:00'
				],
				box2YAxis: [9, 5, 15, 12, 14, 12, 9, 12, 16, 12, 8],
				box2YAxis2: [28, 15, 15, 27, 18, 30, 20, 20, 19, 18, 14],
				box2YAxis3: [18, 24, 18, 24, 21, 27, 19, 18, 19, 18, 17],
			})
			const pl_box1Click = (index) => {
				AllData.pl_box1ActiveIndex = index;
				if (AllData.pl_box1ActiveIndex == 0) {
					AllData.box2YAxis = [9, 5, 15, 12, 14, 12, 9, 12, 16, 12, 8];
					pl_line();
				} else if (AllData.pl_box1ActiveIndex == 1) {
					AllData.box2YAxis = [10, 15, 25, 12, 24, 12, 19, 2, 6, 22, 18];
					pl_line();
				} else if (AllData.pl_box1ActiveIndex == 2) {
					AllData.box2YAxis = [20, 25, 35, 22, 34, 22, 29, 12, 16, 32, 28];
					pl_line();
				} else {
					AllData.box2YAxis = [3, 12, 12, 18, 21, 16, 9, 15, 11, 12, 8];
					pl_line();
				}
			}
			const pl_line = () => {
				let chartDom = echarts.init(document.getElementById('W_box_Line'));
				var option;
				option = {
					color: ['rgb(14,192,148)', 'rgb(1,153,217)', 'rgb(240,85,33)'],
					legend: {
						show: true,
						icon: 'rect',
						left: 'center',
						top: 'bottom',
						itemWidth: 20,
						itemHeight: 5,
						textStyle: {
							fontSize: 12,
							color: '#B6B9BE',
						},
					},
					tooltip: {
						trigger: "axis",
						axisPointer: {
							type: "shadow"
						},
					},
					dataZoom: [{
						type: 'inside', // 内置在坐标系中
						xAxisIndex: 0,
						yAxisIndex: [0, 1],
						start: 0, // 数据窗口范围的起始百分比。范围是：0 ~ 100。表示 0% ~ 100%。
						end: 100, // 数据窗口范围的结束百分比。范围是：0 ~ 100。
						zoomLock: true, // 是否锁定选择区域（或叫做数据窗口）的大小。
					}],
					grid: {
						top: '15%',
						left: '3%',
						right: '3%',
						bottom: '10%',
						containLabel: true
					},
					xAxis: [{
						type: "category",
						data: AllData.box2XAxis,
						boundaryGap: false,
						axisTick: {
							show: false
						},
						axisPointer: {
							type: "shadow",
						},
						axisLabel: {
							show: true,
							fontWeight: 'bold',
							interval: 0,
							color: "rgb(94,158,186)",
						},
						splitLine: {
							show: true,
							lineStyle: {
								color: 'rgba(25,76,90,0.8)',
							}
						}
					}],
					yAxis: [{
						type: "value",
						inverse: true, //控制x轴在上方
						position: 'right',
						min: 0,
						max: 59,
						name: '降雨量 mm',
						nameLocation: 'start',
						nameTextStyle: {
							align: "left",
							color: "rgb(94,158,186)",
							fontWeight: 'bold',
							fontSize: 14,
							padding: [0, 0, -5, -40],
						},
						axisTick: {
							show: false
						},
						axisLabel: {
							show: true,
							color: "rgb(41,111,121)",
						},
						splitLine: {
							show: false
						}
					}, {
						type: "value",
						position: 'left',
						name: '水位 m',
						nameTextStyle: {
							align: "left",
							color: "rgb(94,158,186)",
							fontWeight: 'bold',
							fontSize: 14,
							padding: [0, 0, -5, -30],
						},
						min: 0,
						max: 48,
						axisLabel: {
							show: true,
							color: "rgb(41,111,121)",
						},
						splitLine: {
							lineStyle: {
								color: 'rgba(25,76,90,0.8)',
							}
						}
					}],
					series: [{
							name: "降雨量",
							type: "bar",
							barWidth: "7",
							data: AllData.box2YAxis,
							tooltip:{
								valueFormatter: (value) =>  value.toFixed(0) + 'mm'
							},
							itemStyle: {
								normal: {
									barBorderRadius: [0, 0, 10, 10]
								}
							},
						}, {
							smooth: true, //变为曲线 默认false折线
							name: '明渠水位',
							type: "line",
							symbol: 'none',
							yAxisIndex: 1,
							data: AllData.box2YAxis2,
							tooltip:{
								valueFormatter: (value) =>  value.toFixed(0) + 'm'
							}
						},
						{
							smooth: true, //变为曲线 默认false折线
							name: ' 暗涵水位',
							type: "line",
							symbol: 'none',
							yAxisIndex: 1,
							data: AllData.box2YAxis3,
							tooltip:{
								valueFormatter: (value) =>  value.toFixed(0) + 'm'
							}
						},
					]
				}
				option && chartDom.setOption(option);
			}
			onMounted(() => {
				pl_line()
			});
			return {
				...toRefs(AllData),
				pl_line,
				pl_box1Click
			};
		},
		computed: {},
		methods: {},
	};
</script>

<style lang="less" scoped>
	#W_box_Line {
		width: 455px;
		height: 200px;
	}

	.box_tab {
		width: 100%;
		display: flex;
		justify-content: space-around;
		align-items: center;
		cursor: pointer;
		padding-top: 10px;
	}

	.box_tab_item {
		width: 108px;
		display: flex;
		align-items: center;
		justify-content: space-around;
		flex-direction: column;
		font-weight: 400;
		color: #03C3C7;
		border: 1px solid #3D7790;
	}

	.box_tab_item_active {
		width: 108px;
		color: #28F7FF;
		display: flex;
		align-items: center;
		justify-content: space-around;
		flex-direction: column;
		font-weight: normal;
		border: 1px solid #3D7790;
	}
</style>