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

<script setup lang="ts">
	import { ref, onMounted } from 'vue';
	import TitleSkillSearch from '@/views/statistics/resume/titleSkill/search/index.vue';
	import { GetStatsTitleAndSkill } from '@/apis/models';
	import { init } from 'echarts';
	import { cols } from '@/views/statistics/resume/holidaysAccommodation/columns';
	import { useCommon } from '@/hooks/useCommon';
	let { commomParams } = useCommon();
	let loading = ref<Boolean>(true);
	const titlePie = ref(null);
	const skillPie = ref(null);
	
	// 设置环形图的数据
	const titleData = ref([
		{ name: '初级', value: 20 },
		{ name: '中级', value: 30 }
	])
	
	const skillData = ref([
		{ name: '初级工', value: 20 },
		{ name: '中级工', value: 30 }
	])
	
	
	onMounted(() => {
		getData(commomParams.value.search);
		getTitlePieInit()
		getSkillPieInit()
	})
	
	const getTitlePieInit = () => {
		const titlePieOption = init(titlePie.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: titleData.value,
					emphasis: {
						itemStyle: {
							shadowBlur: 10,
							shadowOffsetX: 0,
							shadowColor: 'rgba(0, 0, 0, 0.5)',
						},
					},
				},
			],
		};
		titlePieOption.setOption(option)
	}
	
	const getSkillPieInit = () => {
		const skillPieOption = init(skillPie.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: skillData.value,
					emphasis: {
						itemStyle: {
							shadowBlur: 10,
							shadowOffsetX: 0,
							shadowColor: 'rgba(0, 0, 0, 0.5)',
						},
					},
				},
			],
		};
		skillPieOption.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 GetStatsTitleAndSkill(commomParams.value.search);
			loading.value = false;
			skillData.value = res.data.skill_cert_list.map(item => {
				return {name: item.skill_cert, value: item.total} 
			})
			getSkillPieInit()
			titleData.value = res.data.title_stat_list.map(item => {
				return {name: item.title, value: item.total} 
			})
			getTitlePieInit()
			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>