<template>
	<div class="pieChartsWrap">
		<div class="item">
			<Echarts :option="pie1Option"></Echarts>
		</div>
		<div class="item">
			<Echarts :option="pie2Option"></Echarts>
		</div>
	</div>
</template>

<script setup>
import Echarts from "@/components/Chart/index.vue";
import { getPieOption } from "../../utils/charts";
import { ref, onMounted, shallowRef } from "vue";
import { getCountByDomain, getCountByType, getDomainDistribution } from "@/api/exportControl";
import _ from "lodash";
import { useRoute } from "vue-router";
const route = useRoute();
const pie1Option = shallowRef({});
const pie2Option = shallowRef({});
onMounted(async () => {
	try {
		const [countByDomainData, countByTypeData] = await Promise.all([
			getDomainDistribution(route.query.startTime),
			getCountByType(route.query.startTime)
		]);
		pie1Option.value = getPieOption(
			_.chain(countByDomainData)
				.filter(item => item.count > 0)
				.map(item => {
					return {
						name: item?.name,
						value: item?.count
					};
				})
				.value(),
			"领域分布"
		);
		pie2Option.value = getPieOption(
			_.chain(countByTypeData)
				.filter(item => item.count > 0)
				.map(item => {
					return {
						name: item?.name,
						value: item?.count
					};
				})
				.value(),
			"类型分布"
		);
	} catch (err) {
		console.log(err);
	}
});

onMounted(() => {
	// pie1Option.value = getPieOption(
	// 	[
	// 		{ name: "能源领域", value: 30 },
	// 		{ name: "集成电路领域", value: 20 },
	// 		{ name: "人工智能领域", value: 12 },
	// 		{ name: "通信网络领域", value: 18 },
	// 		{ name: "量子科技领域", value: 10 },
	// 		{ name: "生物科技领域", value: 10 }
	// 	],
	// 	"领域分布"
	// );
	// pie2Option.value = getPieOption(
	// 	[
	// 		{ name: "能源领域", value: 30 },
	// 		{ name: "集成电路领域", value: 20 },
	// 		{ name: "人工智能领域", value: 12 },
	// 		{ name: "通信网络领域", value: 18 },
	// 		{ name: "量子科技领域", value: 10 },
	// 		{ name: "生物科技领域", value: 10 }
	// 	],
	// 	"类别分布"
	// );
});
</script>

<style lang="scss" scoped>
.pieChartsWrap {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 16px;
	padding-top: 6px;
	.item {
		width: 460px;
		height: 388px;
		background-color: rgba(231, 243, 255, 0.5);
	}
}
</style>
