<template>
	<div :id="'chart-rank' + id" style="width: 100%; height: 100%"></div>
</template>

<script setup name="chartRank">
	import * as echarts from 'echarts'

	const props = defineProps({
		id: {
			type: Number,
			default: 0
		},
		list: {
			type: Array,
			default: () => []
		}
	})

	let myChart = null

	const init = () => {
		let data = []
		var total = 0

		if (props.list.length > 0) {
			data = props.list.sort((a, b) => b.rank - a.rank)
			data.forEach(function (item) {
				total += item.value
			})
		}
		let options = {
			grid: {
				top: '10%',
				left: '10%',
				right: '10%',
				bottom: '10%',
				containLabel: true
			},
			yAxis: {
				type: 'category',
				data: data.map(function (item) {
					return item.name
				}),
				axisLabel: {
					show: true, // 显示标签
					formatter: function (value, index) {
						var rank = data[index].rank
						if (rank === 1) {
							// 排名为1、2、3的圆形背景
							return '{rank1|' + rank + '}   ' + value;
						} else if(rank === 2) {
							return '{rank2|' + rank + '}   ' + value;
						} else if(rank === 3) {
							return '{rank3|' + rank + '}   ' + value;
						} else {
							// 其他排名的背景
							return '{otherRank|' + rank + '}   ' + value;
						}
					},
					rich: {
						rank1: {
							backgroundColor: '#FFB400',
							width: 30,
							height: 30,
							align: 'center',
							borderRadius: 15,
							color: '#fff',
							fontSize: 12,
							lineHeight: 30
						},
						rank2: {
							backgroundColor: '#92D4DA',
							width: 30,
							height: 30,
							align: 'center',
							borderRadius: 15,
							color: '#fff',
							fontSize: 12,
							lineHeight: 30
						},
						rank3: {
							backgroundColor: '#78D26F',
							width: 30,
							height: 30,
							align: 'center',
							borderRadius: 15,
							color: '#fff',
							fontSize: 12,
							lineHeight: 30
						},
						otherRank: {
							backgroundColor: '#F2F2F2',
							width: 30,
							height: 30,
							align: 'center',
							borderRadius: 15,
							color: '#fff',
							fontSize: 12,
							lineHeight: 30
						}
					}
				},
				splitLine: {
					show: false // 不显示Y轴网格线
				},
				axisTick: {
					show: false // 不显示刻度
				}
			},
			xAxis: {
				type: 'value',
				name: '',
				axisLabel: {
					show: false,
					formatter: '{value}'
				},
				axisTick: {
					show: false // 不显示刻度
				},
				splitLine: {
					show: false // 不显示Y轴网格线
				}
			},
			series: [
				{
					name: '占比',
					type: 'bar',
					barWidth: 30,
					data: data.map(function (item) {
						return item.value;
					}),
					label: {
						show: true,
						position: 'right',
						formatter: function (params) {
							var dataIndex = params.dataIndex;
							var percentage = ((data[dataIndex].value / total) * 100).toFixed(2) + '%';
							return percentage
						},
						fontSize: 12
					}
				}
			]
		}
		myChart.setOption(options)
	}

	onMounted(() => {
		myChart = echarts.init(document.getElementById('chart-rank' + props.id))
		init()
		window.addEventListener('resize', () => {
			myChart.resize()
		})
	})

	watch(() => props.list, () => {
		myChart.clear()
		init()
	})

	onBeforeUnmount(() => {
		window.removeEventListener('resize', () => {
			myChart.resize()
		})

	})
</script>

<style scoped>

</style>
