<template>
	<Card title="近7日趋势(次)">
		<div class="top-right-box">
			<div class="history-content">
				<div id="edgeWeekTrend" ref="edgeWeekTrend" style="width: 100%; height: 100%"></div>
			</div>
		</div>
	</Card>
</template>

<script lang="ts" setup>
import Card from "@/components/card.vue";
import symbolIcon from "@/assets/images/lineSymbol.png";
import { onMounted, reactive, ref, onBeforeUnmount } from "vue";
import * as echarts from "echarts";
// import { getSelectDataListApi } from "@/api/modules/distribution";
// import Card from "@/components/card.vue";
import { GlobalStore } from "@/stores";
import mitts from "@/utils/bus"; //兄弟组件传值
const store = GlobalStore();
// x轴
let twenty_four_time = ref([
	"2023-08-24",
	"2023-08-25",
	"2023-08-26",
	"2023-08-27",
	"2023-08-28",
	"2023-08-29",
	"2023-08-30"
] as any);
// Y轴单位
let unit = ref("单位:V" as any);
// Y轴数据
let yData = ref([10, 65, 20, 25, 15, 25, 12] as any);
// 图表数据项
let option = ref(null as any);

// 选中
let checked = ref(1);
function getNowData(type: any) {
	checked.value = type;
	// 初始化option
	// initOption();
}
function getWeekData(type: any) {
	checked.value = type;
	// 初始化option
	// initOption();
}
function getMonthData(type: any) {
	checked.value = type;
	// 初始化option
	// initOption();
}

function initOption() {
	option.value = {
		// backgroundColor: '#071c3a',
		title: {
			// text: '日用气量分析',
			textStyle: {
				align: "center",
				color: "#fff",
				fontSize: 20
			},
			top: "2%",
			left: "center"
		},
		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: "10%",
			left: "10%",
			right: "10%",
			bottom: "8%"
			// containLabel: true
		},
		xAxis: [
			{
				type: "category",
				axisLine: {
					show: true,
					lineStyle: {
						color: "#14346C"
					}
				},
				splitArea: {
					// show: true,
					color: "#f00",
					lineStyle: {
						color: "#f00"
					}
				},
				axisLabel: {
					color: "#fff",
					interval: 0
				},
				splitLine: {
					show: false
				},
				boundaryGap: false,
				data: twenty_four_time.value
			}
		],

		yAxis: [
			{
				type: "value",
				// name: unit.value,
				nameTextStyle: {
					color: "#fff",
					nameLocation: "start"
				},
				min: 0,
				// max: 140,
				splitNumber: 3,
				splitLine: {
					show: true,
					lineStyle: {
						color: "#14346C"
					}
				},
				axisLine: {
					show: true,
					lineStyle: {
						color: "#14346C"
					}
				},
				interval: 10,
				axisLabel: {
					show: true,
					margin: 20,
					textStyle: {
						color: "#fff"
					}
				},
				axisTick: {
					show: true
				}
			}
		],
		series: [
			{
				type: "line",
				// smooth: true, //是否平滑
				showAllSymbol: true,
				symbol: `image://${symbolIcon}`,
				// symbol: "circle",
				smooth: 0.8,
				symbolSize: 30,
				label: {
					show: false,
					position: "top",
					textStyle: {
						color: "#fff"
					}
				},
				itemStyle: {
					color: "#4AC0F3",
					borderColor: "#4AC0F3",
					borderWidth: 5,
					shadowColor: "rgba(0, 0, 0, .6)",
					shadowBlur: 0,
					lineStyle: {
						width: 0.1,
						normal: {
							color: "#fff",
							shadowBlur: 0
						}
					}
				},
				tooltip: {
					show: true
				},
				areaStyle: {
					normal: {
						color: new echarts.graphic.LinearGradient(
							0,
							0,
							0,
							1,
							[
								{
									offset: 0,
									color: "rgba(74, 192, 243,0.5)"
								},
								{
									offset: 1,
									color: "rgba(74, 192, 243, 0.1)"
								}
							],
							false
						),
						shadowColor: "rgba(74, 192, 243, 1)",
						shadowBlur: 20
					}
				},
				data: yData.value
			}
		]
	};
}

function drawChart() {
	initOption();
	console.log("绘制前数据", yData.value);
	let edgeWeekTrend = echarts.init(document.getElementById("edgeWeekTrend"));
	edgeWeekTrend.setOption(option.value);
}

//获取当前前七天的日期
function generateWeek() {
	// 获取当前日期
	const today = new Date();
	// 存放日期
	let dateArr = [];
	// 返回最近七天的日期
	for (let i = 0; i < 7; i++) {
		// 每次循环，将日期递减一天
		const date = new Date(today);
		date.setDate(today.getDate() - i);

		// 格式化日期为yyyy-mm-dd格式
		const dateString = date.toISOString().split("T")[0];
		dateArr.unshift(dateString);
		console.log(dateArr, "周日期");
	}
	twenty_four_time.value = dateArr;
}

onMounted(async () => {
	generateWeek();
	drawChart();
});

// 即时销毁事件总线派发，否则会执行两次miits.on造成不必要的内存浪费 7.14 by CJP
onBeforeUnmount(async () => {
	mitts.off("devSn");
});
</script>

<style lang="scss" scoped>
.top-right-box {
	width: 100%;
	height: 100%;
	.title {
		height: 10%;
		line-height: 33px;
		text-align: left;
		font-size: calc(100vw * 18 / 1920);
		color: #ffffff;
		background: url("@/assets/images/titleBig.webp") no-repeat;
		background-size: 100% 100%;
		i {
			font-family: OPPOSansH;
			margin-left: 6%;
		}
	}
	.history-content {
		height: 100%;
		background: url("@/assets/images/cardImg.png") no-repeat;
		background-size: 100% 100%;
		position: relative;
		.rightHeader {
			width: 20%;
			display: flex;
			position: absolute;
			z-index: 10;
			color: #fff;
			font-size: 10px;
			text-align: center;
			line-height: 20px;
			right: -1%;
			top: 5%;
			.Selected {
				height: 5%;
				background: url("@/assets/images/dustNoise/rightImg2.png") no-repeat;
				background-size: 100% 100%;
				cursor: pointer;
			}
			.day {
				padding: 0 6%;
				margin-right: 5%;
				z-index: 99;
			}
			.week {
				padding: 0 6%;
				margin-right: 5%;
				z-index: 99;
			}
			.month {
				padding: 0 6%;
				z-index: 99;
			}
			.active {
				background: url("@/assets/images/dustNoise/rightImg.png") no-repeat;
				background-size: 100% 100%;
			}
		}
	}
}
::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>
