<template>
	<!-- 热门板块 -->
	<div class="echarts-header">
		<span>排名</span>
		<span>景区</span>
		<span>预约数量</span>
	</div>
	<div id="HotPlateChart" class="echarts"></div>
</template>

<script setup lang="ts">
import { ECharts, EChartsOption, init } from "echarts";
import { ranking1, ranking2, ranking3, ranking4 } from "../assets/ranking-icon";
interface ChartProp {
	name: string;
	value: number;
	percentage: string;
	maxValue: number;
}
const initChart = (data: any = {}): ECharts => {
	const charEle = document.getElementById("HotPlateChart") as HTMLElement;
	const charEch: ECharts = init(charEle);
	const option: EChartsOption = {
		grid: {
			top: "5%",
			left: "7%",
			right: "4%",
			bottom: "1%",
			containLabel: true
		},
		xAxis: {
			type: "value",
			axisLine: {
				show: false,
				lineStyle: {
					color: "white"
				}
			},
			nameGap: 1,
			splitLine: {
				show: false
			},
			axisTick: {
				show: false
			},
			axisLabel: {
				show: false,
				fontSize: 16
			},
			// boundaryGap: ["3%", "2%"],
			// splitNumber: 4,
			triggerEvent: false
		},
		yAxis: [
			{
				show: true,
				data: data.data.map((val: ChartProp) => val.name),
				inverse: true,
				axisLine: {
					show: false
				},
				splitLine: {
					show: false
				},
				axisTick: {
					show: false
				},
				axisLabel: {
					color: "#fff",
					formatter: function (value: any) {
						let str = value.length > 6 ? value.slice(0, 6) + "..." : value;
						let index = data.data.map((item: ChartProp) => item.name).indexOf(value) + 1;
						return ["{" + (index > 3 ? "lg" : "lg" + index) + "|NO." + index + "}", "{title|" + str + "}"].join(" ");
					},
					rich: {
						lg1: {
							width: 60,
							backgroundColor: {
								image: ranking1
							},
							color: "#fff",
							align: "center",
							height: 20,
							fontSize: 13
						},
						lg2: {
							width: 60,
							backgroundColor: {
								image: ranking2
							},
							color: "#fff",
							align: "center",

							height: 20,
							fontSize: 13
						},
						lg3: {
							width: 60,
							backgroundColor: {
								image: ranking3
							},
							color: "#fff",
							align: "center",
							height: 20,
							fontSize: 13
						},
						lg: {
							width: 60,
							backgroundColor: {
								image: ranking4
							},
							color: "#fff",
							align: "center",

							height: 20,
							fontSize: 13
						},
						title: {
							width: 60,
							fontSize: 13,
							align: "center",
							padding: [0, 10, 0, 15]
						}
					}
				},
				triggerEvent: false
			},
			{
				show: true,
				inverse: true,
				data: data.data,
				axisLabel: {
					fontSize: 14,
					color: "#fff",
					// align: "right",
					margin: 20,
					formatter: (value: any) => {
						return value >= 10000 ? (value / 10000).toFixed(2) + "w" : value;
					}
				},
				axisLine: {
					show: false
				},
				splitLine: {
					show: false
				},
				axisTick: {
					show: false
				},
				triggerEvent: false
			}
		],
		series: [
			{
				name: "条",
				type: "bar",
				yAxisIndex: 0,
				data: data.data,
				barWidth: 12,
				itemStyle: {
					borderRadius: 30,
					color: function (params) {
						let num = data.colors.length;
						return data.colors[params.dataIndex % num];
					}
				},
				label: {
					show: true,
					position: [12, 0],
					lineHeight: 14,
					color: "#fff",
					formatter: (params: any) => {
						return params.data.percentage;
					}
				}
			},
			{
				name: "框",
				type: "bar",
				yAxisIndex: 1,
				data: data.data.map((val: ChartProp) => {
					if (!val.maxValue) {
						return 5;
					}
					return val.maxValue;
				}),
				barWidth: 18,
				itemStyle: {
					color: "none",
					borderColor: "#00c1de",
					borderWidth: 1,
					borderRadius: 15
				},
				silent: true
			}
		]
	};
	charEch.setOption(option);
	return charEch;
};
defineExpose({
	initChart
});
</script>
<style lang="less" scoped>
.echarts {
	width: 100%;
	height: calc(100% - 56px);
}
.echarts-header {
	box-sizing: border-box;
	display: flex;
	height: 36px;
	margin: 10px 10px 0;
	line-height: 36px;
	background: url("../images/rankingChart-bg.png") no-repeat;
	background-size: 100% 100%;
	span {
		width: 18%;
		margin-left: 4px;
		font-size: 14px;
		font-weight: bold;
		color: #fdbc52;
		text-align: center;
		&:nth-child(2) {
			margin-left: 4px;
		}
		&:last-child {
			width: 20%;
			margin-left: 60px;
		}
	}
}
</style>
