<template>
	<major-search @searchData="searchData" @clearData="clearData" :search_params="commomParams.search"></major-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="holidayPie" style="width: 100%; height: 400px;"></div>
		</a-col>
		<a-col :span="12">
			<div ref="accommodationPie" style="width: 100%; height: 400px;"></div>
		</a-col>
	</a-row>
</template>

<script setup lang="ts">
	import { ref, onMounted } from 'vue';
	import MajorSearch from '@/views/statistics/resume/holidaysAccommodation/search/index.vue';
	import { GetStatsHa } 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 holidayPie = ref(null);
	const accommodationPie = ref(null);
	
	// 设置环形图的数据
	const holidayData = ref([
		{ name: '提供食宿', value: 20 },
		{ name: '包住', value: 30 },
		{ name: '31-45岁', value: 40 },
		{ name: '46岁以上', value: 10 },
	])
	
	const accommodationData = ref([
		{ name: '月休4日', value: 20 },
		{ name: '三班倒', value: 30 }
	])
	
	
	onMounted(() => {
		getData(commomParams.value.search);
		getHolidayPieInit()
		getAccommodationPieInit()
	})
	
	const getHolidayPieInit = () => {
		const holidayPieOption = init(holidayPie.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: holidayData.value,
					emphasis: {
						itemStyle: {
							shadowBlur: 10,
							shadowOffsetX: 0,
							shadowColor: 'rgba(0, 0, 0, 0.5)',
						},
					},
				},
			],
		};
		holidayPieOption.setOption(option)
	}
	
	const getAccommodationPieInit = () => {
		const accommodationPieOption = init(accommodationPie.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: accommodationData.value,
					emphasis: {
						itemStyle: {
							shadowBlur: 10,
							shadowOffsetX: 0,
							shadowColor: 'rgba(0, 0, 0, 0.5)',
						},
					},
				},
			],
		};
		accommodationPieOption.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 GetStatsHa(commomParams.value.search);
			loading.value = false;
			holidayData.value = res.data.holiday_rest_list.map(item => {
				return {name: item.holiday_rest, value: item.total} 
			})
			getHolidayPieInit()
			accommodationData.value = res.data.accommodation_list.map(item => {
				return {name: item.AccommodationRequirement, value: item.Total} 
			})
			getAccommodationPieInit()
			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>