<template>
	<Card title="生产质量统计">
		<div class="load-top-right">
			<div>
				<div class="select-right">
					<div class="day selected" @click="getNowData(1)" :class="checked == 1 ? 'active' : ''">今日</div>
					<div class="week selected" @click="getWeekData(2)" :class="checked == 2 ? 'active' : ''">近7天</div>
					<div class="month selected" @click="getMonthData(3)" :class="checked == 3 ? 'active' : ''">近30日</div>
				</div>
			</div>
			<div id="materialStatisticsBottomRight" style="width: 100%; height: 100%"></div>
			<div class="notoDta" v-if="dataList.length == 0">
				<img src="@/assets/images/noData.png" alt="" />
				<p>暂无数据</p>
			</div>
		</div>
	</Card>
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue";
import * as echarts from "echarts";
import Card from "@/components/card.vue";
import { countUseStatus } from "@/api/modules/largeMachinery";

import { GlobalStore } from "@/stores";
import { noop } from "@vueuse/core";
const store = GlobalStore();
const airType = ref(1);
// 选中
let checked = ref(1);
function getNowData(type: any) {
	checked.value = type;
	// 初始化option
	getMemberCareList();
}
function getWeekData(type: any) {
	checked.value = type;
	// 初始化option
	getMemberCareList();
}
function getMonthData(type: any) {
	checked.value = type;
	// 初始化option
	getMemberCareList();
}
let rangeTime = ref("" as any);
let dataList = ref([]) as any;
function Pie() {
	let dataArr = [];
	for (var i = 0; i < 150; i++) {
		if (i % 2 === 0) {
			dataArr.push({
				name: (i + 1).toString(),
				value: 10,
				itemStyle: {
					normal: {
						color: "#7cf4f1",
						borderWidth: 0,
						borderColor: "#7f6546"
					}
				}
			});
		} else {
			dataArr.push({
				name: (i + 1).toString(),
				value: 10,
				itemStyle: {
					normal: {
						color: "rgba(0,0,0,0)",
						borderWidth: 0,
						borderColor: "rgba(0,0,0,0)"
					}
				}
			});
		}
	}
	return dataArr;
}

function drawEchart() {
	let max = 0;
	dataList.value.map(item => {
		max = max + Number(item.value);
	});
	let chartDom = document.getElementById("materialStatisticsBottomRight");
	if (chartDom) {
		chartDom.removeAttribute("_echarts_instance_");
	}
	let echartsTest = echarts.init(document.getElementById("materialStatisticsBottomRight"));
	let option = {
		tooltip: {
			trigger: "item"
		},
		title: {
			text: max,
			subtext: "总盘数",
			x: "27%",
			y: "42%",
			textAlign: "center",
			textStyle: {
				color: "#fff",
				fontSize: 24,
				fontWeight: "normal",
				fontFamily: "sadigitalNumber"
			},
			subtextStyle: {
				color: "#ccc",
				fontSize: 14,
				lineHeight: 40,
				fontWeight: "normal",
			}
		},
		legend: {
			selectedMode: true, // 取消图例上的点击事件
			icon: "rect",
			type: "scroll",
			scrollDataIndex: 0, // 设置滚动的起始位置
			orient: "vertical",
			left: "55%",
			bottom: "15%",
			top: "20%",
			itemGap: 20,
			itemWidth: 10, // 设置宽度
			itemHeight: 10, // 设置高度
			symbolKeepAspect: false,
			textStyle: {
				color: "#000",
				rich: {
					name: {
						width: 100,
						verticalAlign: "left",
						fontSize: 14,
						color: "#FFFFFF"
					},
					value: {
						width: 70,
						fontSize: 14,
						color: "#FFFFFF"
					}
				}
			},
			data: dataList.value.map(item => {
				if (item.show) {
					return item.name;
				}
			}),
			formatter: function (data: any) {
				if (dataList.value && dataList.value.length) {
					for (let i = 0; i < dataList.value.length; i++) {
						if (data === dataList.value[i].name) {
							let value = dataList.value[i].value;
							return "{name| " + data + "}" + "{value|     " + value + "}" + " ";
						}
					}
				}
			}
		},
		series: [
			// 外侧光线
			{
				name: "",
				type: "gauge",
				center: ["28%", "50%"],
				radius: "55%",
				startAngle: 235,
				endAngle: -50,
				min: 0,
				max: 100,
				axisLine: {
					show: true,
					lineStyle: {
						width: 2,
						color: [
							[
								100 / 100,
								new echarts.graphic.LinearGradient(0, 0, 1, 0, [
									{
										offset: 0,
										color: "#526277"
									},
									{
										offset: 0.25,
										color: "rgba(4, 14, 54,0.4)"
									},
									{
										offset: 0.7,
										color: "rgba(4, 14, 54,0.4)"
									},
									{
										offset: 1,
										color: "#526277"
									}
								])
							],
							[1, "rgba(255,255,255,0)"]
						]
					}
				},

				axisTick: {
					show: 0
				},
				splitLine: {
					show: 0
				},
				axisLabel: {
					show: 0
				},
				pointer: {
					show: 0
				},
				detail: {
					show: 0
				}
			},
			{
				name: "",
				type: "gauge",
				center: ["28%", "50%"],
				radius: "47%",
				startAngle: 245,
				endAngle: -115,
				min: 0,
				max: 100,
				axisLine: {
					show: true,
					lineStyle: {
						width: 2,
						color: [
							[
								200 / 100,
								new echarts.graphic.LinearGradient(0, 0, 1, 0, [
									{
										offset: 0.8,
										color: "#52bef0"
									},
									{
										offset: 0.5,
										color: "#13356b"
									}
								])
							],
							[1, "rgba(255,255,255,0)"]
						]
					}
				},

				axisTick: {
					show: 0
				},
				splitLine: {
					show: 0
				},
				axisLabel: {
					show: 0
				},
				pointer: {
					show: 0
				},
				detail: {
					show: 0
				}
			},
			{
				name: "",
				type: "pie",
				radius: ["37%", "40%"],
				center: ["28%", "50%"],
				hoverAnimation: true,
				itemStyle: {
					borderRadius: 10,
					borderWidth: 10
				},
				label: {
					show: false,
					position: "center"
				},
				emphasis: {
					label: {
						show: false
					}
				},
				labelLine: {
					show: false
				},
				data: dataList.value
			},
			{
				type: "pie",
				radius: ["32%", "33%"],
				center: ["28%", "50%"],
				label: {
					show: false
				},

				data: Pie()
			}
		]
	};
	echartsTest.setOption(option, true);
}
// let noData = ref(false as any);
const getMemberCareList = async () => {
	const res: any = await countUseStatus({ projectSn: store.sn, type: checked.value });
	console.log("原材料用量统计", res);
	if (res.result.data.length > 0) {
		let dataArr = res.result.data;
		let picArr = [];
		for (let i = 0; i < dataArr.length; i++) {
			let currentPic = {
				value: dataArr[i].count,
				show: true,
				name: dataArr[i].name,
				itemStyle: {
					normal: {
						borderWidth: 20
					}
				}
			};
			picArr.push(currentPic);
		}
		dataList.value = picArr;
		drawEchart();
	} else {
		// noData.value = true;
		dataList.value = [];
		let chartDom = document.getElementById("materialStatisticsBottomRight");
		if (chartDom) {
			chartDom.removeAttribute("_echarts_instance_");
		}
		let echartsTest = echarts.init(document.getElementById("materialStatisticsBottomRight"));
		echartsTest.clear();
	}
};

onMounted(async () => {
	getMemberCareList();
});
</script>

<style lang="scss" scoped>
.notoDta {
	top: 35%;
	width: 45%;
	left: 35%;
	position: absolute;
	text-align: center;
	img {
		width: 40%;
		margin: 5% 30%;
	}
	p {
		color: #fff;
		font-size: calc(100vw * 14 / 1920);
		margin: -6% 37%;
	}
}
.load-top-right {
	width: 100%;
	height: 100%;
	position: relative;
}
.num {
	width: 66px;
	text-align: center;
	font-family: sadigitalNumber;
	font-size: calc(100vw * 24 / 1920);
	color: #fff;
	position: absolute;
	top: 45%;
	left: 18%;
	z-index: 9;
}
// .styleImg {
// 	left: 6%;
// 	top: 17%;
// 	width: 40%;
// 	position: absolute;
// 	height: 60%;
// 	background: url("@/assets/images/dustNoise/motionEffect.webp") no-repeat;
// 	background-size: cover;
// }
.select-right {
	width: 40%;
	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%;
	}
}
.time {
	position: absolute;
	z-index: 999;
	left: 37%;
	margin-top: -18%;
}
::v-deep .el-input__wrapper {
	width: 85%;
	height: 0%;
	background: #0d2956;
}
::v-deep .el-range-separator {
	color: #ccc;
	font-size: 10px;
}
::v-deep .el-range-input {
	color: #ccc;
	font-size: 10px;
}
</style>
