<template>
	<age-sex-search @searchData="searchData" @clearData="clearData" :search_params="commomParams.search"></age-sex-search>
	<a-c-operation @refresh="clearData" :need_add="false"></a-c-operation>
	<a-row>
		<a-col :span="12">
			<div ref="agePie" style="width: 100%; height: 480px;"></div>
		</a-col>
		<a-col :span="12">
			<div ref="sexPie" style="width: 100%; height: 480px;"></div>
		</a-col>
	</a-row>
	<!-- 
	<a-c-table :data="commomParams.table.data" :columns="commomParams.table.columns" :pagination="commomParams.page"
		@page="getPage" :loading="loading">
	</a-c-table> -->

</template>

<script setup lang="ts">
	import { ref, onMounted } from 'vue';
	import AgeSexSearch from '@/views/statistics/resume/ageSex/search/index.vue';
	import { GetStatsAgeandgender } from '@/apis/models';
	import { init } from 'echarts';
	import { cols } from '@/views/statistics/resume/ageSex/columns';
	import { useCommon } from '@/hooks/useCommon';
	let { commomParams } = useCommon();
	let loading = ref<Boolean>(true);
	const agePie = ref(null);
	const sexPie = ref(null);
	
	// 设置环形图的数据
	const ageData = ref([
		{ name: '0-18岁', value: 20 },
		{ name: '19-30岁', value: 30 },
		{ name: '31-45岁', value: 40 },
		{ name: '46岁以上', value: 10 },
	])
	
	const sexData = ref([
		{ name: '男', value: 20 },
		{ name: '女', value: 30 }
	])
	

	onMounted(() => {
		getData(commomParams.value.search);
		getAgePieInit()
		getSexPieInit()
	})
	
	const getAgePieInit = () => {
		const agePieOption = init(agePie.value)
		const option = {
			legend: {
				orient: 'vertical',
				top: '10%',
				left: 'left'
			},
			tooltip: {
				trigger: 'item',
				formatter: '{a} <br/>{b} : {c} ({d}%)',
			},
			series: [
				{
					name: '年龄分布',
					type: 'pie',
					radius: ['40%', '70%'],
					center: ['50%', '50%'],
					data: ageData.value,
					emphasis: {
						itemStyle: {
							shadowBlur: 10,
							shadowOffsetX: 0,
							shadowColor: 'rgba(0, 0, 0, 0.5)',
						},
					},
				},
			],
		};
		agePieOption.setOption(option)
	}
	
	const getSexPieInit = () => {
		const sexPieOption = init(sexPie.value)
		const option = {
			legend: {
				orient: 'vertical',
				top: '10%',
				left: 'left'
			},
			tooltip: {
				trigger: 'item',
				formatter: '{a} <br/>{b} : {c} ({d}%)',
			},
			series: [
				{
					name: '性别分布',
					type: 'pie',
					radius: ['40%', '70%'],
					center: ['50%', '50%'],
					data: sexData.value,
					emphasis: {
						itemStyle: {
							shadowBlur: 10,
							shadowOffsetX: 0,
							shadowColor: 'rgba(0, 0, 0, 0.5)',
						},
					},
				},
			],
		};
		sexPieOption.setOption(option)
	}

	const searchData = (data : object) => {
		commomParams.value.search = data
		getData();
	}

	const clearData = (data : object) => {
		commomParams.value.search = data
		getData();
	}

	const getPage = (data : object) => {
		commomParams.value.search.page = data.current;
		commomParams.value.search.pagesize = data.pageSize;
		getData();
	}

	const getData = async () => {
		try {
			loading.value = true;
			let res = await GetStatsAgeandgender(commomParams.value.search);
			loading.value = false;
			ageData.value = res.data.age_group_list.map(item => {
				return {name: item.age_group, value: item.total} 
			})
			getAgePieInit()
			sexData.value = res.data.gender_list.map(item => {
				return {name: item.gender, value: item.total} 
			})
			getSexPieInit()
			commomParams.value.page = {
				current: commomParams.value.search.page,
				pageSize: commomParams.value.search.pagesize,
				total: res.data.total,
				pageSizeOptions: ['10', '20', '30', '40'],
				hideOnSinglePage: false,
				showSizeChanger: true
			};
		} catch {
			loading.value = false;
		}
	}
</script>

<style>
</style>