<template>
	<Card title="趋势图">
		<div class="box">
			<div class="selectRight">
			<!-- <el-date-picker
				style="width:100%"
				v-model="value1"
				type="daterange"
				range-separator="至"
				start-placeholder="开始日期"
				end-placeholder="结束日期"
			>
			</el-date-picker> -->
			<el-select class="m-2" placeholder="Select" size="small" v-model="selectValue">
				<el-option
					v-for="(item, index) in noiseList"
					:key="index"
					:label="item.label"
					:value="item.label"
					@click="checkChange(item.label)"
				/>
			</el-select>
		</div>

		<div id="myEcharts" ref="myEcharts" style="width: 100%; height: 100%"></div>
		</div>
		
	</Card>
</template>

<script lang="ts" setup>
import { GlobalStore } from "@/stores";
import { selectDustNoiseDataApi } from "@/api/modules/headNoise";
import { onMounted, reactive, ref, onBeforeUnmount, computed } from "vue";
import * as echarts from "echarts";
import Card from "@/components/card.vue";
import mitts from "@/utils/bus"; //兄弟组件传值
const store = GlobalStore();
let dustData_24 = ref([]);
let xData = ref([]);
let yData = ref([]);
let chart = ref();
const noiseList = [
	{
		value: 0,
		label: "PM2.5",
		unit: "μg/m³"
	},
	{
		value: 1,
		label: "PM10",
		unit: "μg/m³"
	},
	{
		value: 2,
		label: "噪声",
		unit: "dB"
	},
	// {
	// 	value: 3,
	// 	label: "夜晚噪音"
	// },
	{
		value: 4,
		label: "风速",
		unit: "m/s"
	},
	{
		value: 5,
		label: "TSP",
		unit: "μg/m³"
	},
	{
		value: 6,
		label: "温度",
		unit: "℃"
	},
	{
		value: 7,
		label: "湿度",
		unit: "%"
	}
];
let receive = ref("" as any);
const selectValue = ref("PM2.5" as any);
const selectUnit = computed(() => {
	let item = noiseList.find((item:any) => {
		return item.label === selectValue.value
	})
	return item?.unit
})
function drawChart() {
	let myEchart = echarts.init(document.getElementById("myEcharts"));
	let option = {
		// backgroundColor: '#071c3a',
		title: {
			// text: '日用气量分析',
			textStyle: {
				align: "center",
				color: "#fff",
				fontSize: 20
			},
			top: "2%",
			left: "center"
		},
		//  legend: {
		//     color: ["#17B4FA", "#47D8BE", "#F9A589"],
		//     // data: ['日用气量分析'],
		//     left: 'center',
		//      top: "8%",
		//      textStyle: {
		//         color: "#ffffff"
		//     }
		// },
		tooltip: {
			trigger: "axis",
			axisPointer: {
				lineStyle: {
					color: {
						type: "linear",
						x: 0,
						y: 0,
						x2: 0,
						y2: 1,
						colorStops: [
							{
								offset: 0,
								color: "rgba(0, 255, 233,0)"
							},
							{
								offset: 0.5,
								color: "rgba(255, 255, 255,1)"
							},
							{
								offset: 1,
								color: "rgba(0, 255, 233,0)"
							}
						],
						global: false
					}
				}
			}
		},
		grid: {
			top: "30%",
			left: "12%",
			right: "5%",
			bottom: "15%"
			// containLabel: true
		},
		xAxis: [
			{
				type: "category",
				axisLine: {
					show: true,
					lineStyle: {
						color: "#14346C"
					}
				},
				splitArea: {
					// show: true,
					color: "#f00",
					lineStyle: {
						color: "#f00"
					}
				},
				axisLabel: {
					color: "#fff"
				},
				splitLine: {
					show: false
				},
				boundaryGap: false,
				data: xData.value
			}
		],

		yAxis: [
			{
				type: "value",
				name: "单位:" + selectUnit.value,
				nameTextStyle: {
					color: "#fff",
					nameLocation: "start"
				},
				min: 0,
				// max: 140,
				splitNumber: 3,
				splitLine: {
					show: true,
					lineStyle: {
						color: "#14346C"
					}
				},
				axisLine: {
					show: true,
					lineStyle: {
						color: "#14346C"
					}
				},
				axisLabel: {
					show: true,
					margin: 20,
					textStyle: {
						color: "#fff"
					}
				},
				axisTick: {
					show: true
				}
			}
		],
		series: [
			{
				type: "line",
				// smooth: true, //是否平滑
				showAllSymbol: true,
				// symbol: 'image://./static/images/guang-circle.png',
				symbol: "circle",
				symbolSize: 5,
				lineStyle: {
					normal: {
						color: "#fff",
						shadowBlur: 0
					}
				},
				label: {
					show: false,
					position: "top",
					textStyle: {
						color: "#fff"
					}
				},
				itemStyle: {
					color: "#A3EAFF",
					borderColor: "#82FBEA",
					borderWidth: 5,
					shadowColor: "rgba(0, 0, 0, .6)",
					shadowBlur: 0
				},
				lineStyle: {
					normal: {
						width: 1
					}
				},
				tooltip: {
					show: true
				},
				areaStyle: {
					normal: {
						color: new echarts.graphic.LinearGradient(
							0,
							0,
							0,
							1,
							[
								{
									offset: 0,
									color: "rgba(130, 251, 234,0.5)"
								},
								{
									offset: 1,
									color: "rgba(130, 251, 234,0.1)"
								}
							],
							false
						),
						shadowColor: "rgba(130, 251, 234, 0.2",
						shadowBlur: 20
					}
				},
				data: yData.value
			}
		]
	};
	myEchart.setOption(option);
	// window.onresize = function () {
	//   myEchart.resize();
	// }
}
//获取趋势图数据
const getList = async type => {
	//当前日期
	// let now = new Date();
	// let yy = now.getFullYear(); //年
	// let mm = now.getMonth() + 1; //月
	// let dd = now.getDate(); //日
	// let time = yy + "-";
	// if (mm < 10) time += "0";
	// time += mm + "-";
	// if (dd < 10) time += "0";
	// time += dd;
	const res = await selectDustNoiseDataApi({
		// searchDate: time,
		deviceId: type,
		projectSn: store.sn
	});
	console.log("左下角趋势图", res.result);
	dustData_24.value = res.result;
	xData.value = [];
	yData.value = [];
	res.result.forEach(item => {
		xData.value.push(item.time);
		yData.value.push(item.pm25);
	});
	drawChart();
};
const checkChange = (val: any) => {
	yData.value = [];
	dustData_24.value.forEach(item => {
		if (val == "PM2.5") {
			yData.value.push(item.pm25);
		} else if (val == "PM10") {
			yData.value.push(item.pm10);
		} else if (val == "白天噪音") {
			yData.value.push(item.noise);
		} else if (val == "夜晚噪音") {
			yData.value.push(item.nightNoise);
		} else if (val == "风速") {
			yData.value.push(item.windspeed);
		} else if (val == "TSP") {
			yData.value.push(item.tsp);
		} else if (val == "温度") {
			yData.value.push(item.temperature);
		} else if (val == "湿度") {
			yData.value.push(item.humidity);
		}
	});
	drawChart();
};

onMounted(async () => {
	// const myChart = echarts.init(chart.vaule);

	// window.addEventListener(
	// 	"resize",
	// 	() => {
	// 		myChart.resize();
	// 	},
	// 	false
	// );
	checkChange(selectValue.value);
	mitts.on("currentDevDetail", e => {
		receive.value = e.deviceId;
		getList(e.deviceId);
	});
	
});
// 即时销毁事件总线派发，否则会执行两次miits.on造成不必要的内存浪费 7.14 by CJP
onBeforeUnmount(async () => {
	mitts.off("currentDevDetail");
	echarts.dispose;
});
</script>

<style lang="scss" scoped>
  .box{
		width: 100%;
		height: 100%;
		position: relative;
	}
.selectRight {
	position: absolute;
    left: 75%;
    width: 20%;
    top: 6%;
    z-index: 9;
}

::v-deep .el-input__wrapper {
	background: #112d59;
}

::v-deep .el-input__inner {
	color: #fff;
}

::v-deep .el-select .el-input .el-select__caret {
	color: #fff;
}
</style>
