<template>
	<div class="panel4Wrap">
		<div class="row">
			<CardCustom title="新增实体领域分布情况" :style="{ width: '798px', height: '422px' }">
				<div class="subPanel1">
					<div class="chartsWrap" :style="{ paddingBottom: '10px' }">
						<Echarts :option="pie1Option" height="100%"></Echarts>
					</div>
					<Hint text="美国对中国的制裁领域以企业、科研院所为主。"></Hint>
				</div>
			</CardCustom>
			<CardCustom title="科研院所类实体历史制裁情况" :style="{ width: '798px', height: '422px' }">
				<div class="subPanel2">
					<div class="chartsWrap" :style="{ paddingBottom: '10px' }">
						<Echarts :option="line1Option" height="100%"></Echarts>
					</div>
					<Hint text="美国对中国科研院所制裁逐年增加，对华制裁日益严峻。"></Hint>
				</div>
			</CardCustom>
		</div>
		<div class="row">
			<CardCustom title="历次制裁涉及实体数" :style="{ width: '798px', height: '422px' }">
				<div class="subPanel3">
					<div class="chartsWrap" :style="{ paddingBottom: '10px' }">
						<Echarts :option="bar2Option" height="100%"></Echarts>
					</div>
					<Hint text="美国对中国制裁涉及领域数逐年增加，对华制裁日益严峻。"></Hint>
				</div>
			</CardCustom>
			<CardCustom title="企业类实体历史制裁情况" :style="{ width: '798px', height: '422px' }">
				<div class="subPanel4">
					<div class="chartsWrap" :style="{ paddingBottom: '10px' }">
						<Echarts :option="line2Option" height="100%"></Echarts>
					</div>
					<Hint text="美国对中国企业制裁逐年增加，对华制裁日益严峻。"></Hint>
				</div>
			</CardCustom>
		</div>
	</div>
</template>

<script setup>
import { ref, shallowRef, onMounted } from "vue";
import CardCustom from "../../components/CardCustom.vue";
import { Search } from "@element-plus/icons-vue";
import Echarts from "@/components/Chart/index.vue";
import { getBarChart, getLineChart, getPieOption1 } from "../../utils/charts";
import Hint from "./hint.vue";
const pie1Option = shallowRef({});
const bar2Option = shallowRef({});
const line1Option = shallowRef({});
const line2Option = shallowRef({});
onMounted(() => {
	pie1Option.value = getPieOption1(
		[
			{ name: "企业", value: 50 },
			{ name: "科研院所", value: 40 },
			{ name: "高校", value: 32 },
			{ name: "政府官员", value: 30 },
			{ name: "个人", value: 24},
		]
	);
	bar2Option.value = getBarChart(
		["2016", "2017", "2018", "2019", "2020", "2021", "2022", "2023", "2024", "2025"],
		[39, 28, 49, 19, 22, 25, 78, 34, 56, 28],
		["rgba(19, 188, 196, 1)", "rgba(19, 188, 196, 0)"],
		"更新频率"
	);
	line1Option.value = getLineChart("rgba(255, 149, 77, 1)");
	line2Option.value = getLineChart("rgba(146, 84, 222, 1)");
});
</script>

<style lang="scss" scoped>
.panel4Wrap {
	width: 1600px;
	margin: 0px auto 0 auto;
	padding-bottom: 20px;
}
.row {
	display: flex;
	flex-direction: row;
	gap: 16px;
	margin-top: 15px;
}
.subPanel1,
.subPanel2,
.subPanel3,
.subPanel4 {
	height: 100%;
	display: flex;
	flex-direction: column;
	padding: 2px 18px 12px 18px;
	.chartsWrap {
		flex: 1;
	}
}
</style>
