<template>
	<Card title="供应商排名">
		<div class="box">
			<!-- <div class="selectRight">
				<div class="rightHeader">
					<div class="day Selected" @click="getNowData(1)" :class="checked == 1 ? 'active' : ''">24时</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="supplierRank" ref="supplierRank" style="width: 100%; height: 100%"></div>
		</div>
	</Card>
</template>

<script lang="ts" setup>
import { GlobalStore } from "@/stores";
import { getAirQualityStatisticsApi } from "@/api/modules/headNoise";
import * as echarts from "echarts";
import { onMounted, reactive, ref } from "vue";
import Card from "@/components/card.vue";
import firstIcon from "@/assets/images/loadometerManage/first.png";
import secondIcon from "@/assets/images/loadometerManage/second.png";
import thirdIcon from "@/assets/images/loadometerManage/third.png";
import fourthIcon from "@/assets/images/loadometerManage/fourth.png";

const store = GlobalStore();
const airType = ref(1);
// 选中
let checked = ref(1);
function getNowData(type: any) {
	checked.value = type;
	// 初始化option
	// drawChart();
}
function getWeekData(type: any) {
	checked.value = type;
	// 初始化option
	// drawChart();
}
function getMonthData(type: any) {
	checked.value = type;
	// 初始化option
	// drawChart();
}
const airTypeEchart = ref([
	"某某某有限公司1",
	"某某某有限公司2",
	"某某某有限公司3",
	"某某某有限公司4",
	"某某某有限公司5",
	"某某某有限公司6",
	"某某某有限公司7",
	"某某某有限公司8",
	"某某某有限公司9"
]);
const airTypeData = ref([100, 89, 79, 69, 50, 39, 35, 25, 20]);
const option = reactive({
	grid: {
		left: "0%",
		right: "0%",
		bottom: "0%",
		top: "5%",
		containLabel: true
	},
	// backgroundColor: '#101129',
	xAxis: {
		show: false,
		type: "value",
		max: 100
	},
	yAxis: [
		{
			type: "category",
			inverse: true,
			axisLabel: {
				show: true,
				inside: true,
				verticalAlign: "bottom",
				padding: [0, 0, 8, 30],
				lineHeight: "20",
				textStyle: {
					color: "#FFFFFF",
					fontSize: "14"
				}
			},
			splitLine: {
				show: false
			},
			axisTick: {
				show: false
			},
			axisLine: {
				show: false
			},
			data: airTypeEchart.value
		},
		{
			inverse: true,
			axisTick: "none",
			axisLine: "none",
			axisLabel: {
				inside: true,
				padding: [0, 0, 20, 30],
				lineHeight: "20",
				textStyle: {
					color: "#FFFFFF",
					fontSize: "12"
				},
				formatter: function (val: any, index: any) {
					if (index < 3) {
						return `{color1|${val}}`;
					} else {
						return `{color2|${val}}`;
					}
				},
				rich: {
					color1: {
						color: "#EEA959"
					},
					color2: {
						color: "#A0B8E5"
					}
				}
			},
			data: airTypeData.value
		},
		{
			type: "category",
			inverse: true,
			axisTick: "none",
			axisLine: "none",
			show: true,
			data: airTypeData.value
		}
	],
	series: [
		{
			type: "bar",
			showBackground: true,
			backgroundStyle: {
				color: "#14346c",
				borderRadius: 30
			},
			barGap: "-100%",
			label: {
				normal: {
					color: "#FFFFFF",
					show: true,
					position: [0, "-24px"],
					textStyle: {
						fontSize: 16
					},
					formatter: function (a) {
						let num = "";
						let str = "";
						if (a.dataIndex + 1 < 10) {
							// num = "No." + (a.dataIndex + 1);
						} else {
							// num = a.dataIndex + 1;
						}
						if (a.dataIndex === 0) {
							str = `{color1|${num}}`;
						} else if (a.dataIndex === 1) {
							str = `{color2|${num}}`;
						} else if (a.dataIndex === 2) {
							str = `{color3|${num}}`;
						} else {
							str = `{color4|${a.dataIndex + 1}}`;
						}
						return str;
					},
					rich: {
						color1: {
							width: 30,
							height: 20,
							backgroundColor: {
								image: firstIcon
							}
						},
						color2: {
							width: 30,
							height: 20,
							backgroundColor: {
								image: secondIcon
							}
						},
						color3: {
							width: 30,
							height: 20,
							backgroundColor: {
								image: thirdIcon
							}
						},
						color4: {
							align: "center",
							color: "#FFFFFF",
							backgroundColor: {
								image: fourthIcon
							}
						}
					}
				}
			},
			itemStyle: {
				normal: {
					barBorderRadius: 10,
					color: (val: any) => {
						if (val.dataIndex < 3) {
							let topColor = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
								{
									offset: 0,
									color: "rgba(238, 169, 89, 0)"
								},
								{
									offset: 1,
									color: "rgba(238, 169, 89, 1)"
								}
							]);
							return topColor;
						} else {
							let nowColor = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
								{
									offset: 0,
									color: "#194077"
								},
								{
									offset: 1,
									color: "#4CC4F8"
								}
							]);
							return nowColor;
						}
					}
				}
			},
			barWidth: 2,
			data: airTypeData.value
		},
		{
			name: "内圆",
			type: "scatter",
			stack: "圆",
			yAxisIndex: 0,
			data: airTypeData.value, //小白点，数据静态
			label: false,
			symbolSize: 2,
			itemStyle: {
				normal: {
					borderColor: "#fff",
					borderWidth: 3,
					color: "#fff",
					opacity: 1
				}
			},
			z: 3
		},
		{
			name: "内圆框",
			type: "scatter",
			stack: "圆",
			yAxisIndex: 0,
			data: [0, 0, 0, 0, 0, 0, 0, 0, 0], //小白点外圈，数据静态
			label: false,
			symbolSize: 16,
			itemStyle: {
				normal: {
					borderColor: "#FFFFFF",
					borderWidth: 1,
					color: "#14346c"
				}
			},
			z: 2
		}
	]
});
function drawChart() {
	let chartDom = document.getElementById("supplierRank");
	if (chartDom) {
		chartDom.removeAttribute("_echarts_instance_");
	}
	let supplierRank = echarts.init(document.getElementById("supplierRank"));
	supplierRank.setOption(option);
	// window.onresize = function () {
	//   myEchart.resize();
	// }
}
onMounted(async () => {
	drawChart();
});
</script>

<style lang="scss" scoped>
.box {
	width: 100%;
	height: 100%;
	position: relative;
}
.rightHeader {
	width: 25%;
	display: flex;
	position: absolute;
	z-index: 99;
	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%;
	}
}
</style>
