<template>
	<div class="category-ratio">
		<div class="category-ratio__header">
			<span>游戏类别占比</span>
		</div>
		<div class="category-ratio__container">
			<span>游戏总数: </span>
			<span>{{ allNum }}</span>
			<!-- default, light, dark -->
			<v-chart :option="chartOption" autoresize theme="light" />
		</div>
	</div>
</template>

<script lang="ts">
import { defineComponent, reactive, inject, onMounted, ref } from "vue";

export default defineComponent({
	setup() {
		// 请求服务
		const service = inject<any>("service");

		// 数据列表
		const list = ref<any[]>([]);
		const nameList = ref([]);
		const valueList = ref([]);
		const allNum = ref<number>(0);

		onMounted(async () => {
			list.value = await service.shuyouGameAgent.list();
			let arr = [];
			let valueArr = [];
			let sumnum = 0;
			list.value.forEach((element) => {
				arr.push(element.name);
				valueArr.push({
					value: element.game_count,
					name: element.name
				});
				sumnum += element.game_count;
			});
			nameList.value = arr;
			valueList.value = valueArr;
			allNum.value = sumnum;
		});
		const chartOption = reactive({
			tooltip: {
				trigger: "item",
				formatter: "{a} <br/>{b}: {c} ({d}%)"
			},
			legend: {
				bottom: 30,
				left: "center",
				// data: ["酷派", "360", "魅族", "腾讯", "网易"]
				data: nameList
			},
			// color: ["#3AA1FF", "#36CBCB", "#F2637B", "#975FE5", "#FBD437"],
			series: [
				{
					name: "数量占比",
					type: "pie",
					radius: ["40%", "60%"],
					center: ["50%", "40%"],
					avoidLabelOverlap: false,
					hoverAnimation: true,
					label: {
						show: false,
						position: "center"
					},
					emphasis: {
						label: {
							show: true,
							fontSize: "35",
							fontWeight: "bold"
						}
					},
					labelLine: {
						show: false
					},
					// data: [
					// 	{ value: 100, name: "酷派" },
					// 	{ value: 310, name: "360" },
					// 	{ value: 234, name: "魅族" },
					// 	{ value: 135, name: "腾讯" },
					// 	{ value: 500, name: "网易" }
					// ],
					data: valueList,
					itemStyle: {
						normal: {
							borderColor: "#fff",
							borderWidth: 4
						}
					},
					roundCap: 1
				}
			]
		});

		return {
			list,
			nameList,
			valueList,
			chartOption,
			allNum
		};
	}
});
</script>

<style lang="scss" scoped>
.category-ratio {
	&__header {
		display: flex;
		align-items: center;
		height: 50px;
		font-size: 20px;
		font-weight: bold;
		padding: 0 20px;
	}

	&__container {
		height: 390px;
		padding: 0 20px;
		font-size: 15px;
		font-weight: bold;
		box-sizing: border-box;

		.echarts {
			width: 100%;
		}
	}
}
</style>
