<template>
	<div class="influencePanel1">
		<CardCustom title="新增科研机构列表" :style="{ width: '420px', height: '860px' }">
			<template #right>
				<el-select :style="{ width: '120px', marginRight: '8px' }" size="mini" v-model="selectedId" placeholder="请选择">
					<el-option v-for="item in selectOptions" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
			</template>
			<div class="tableWrap">
				<el-table
					:data="panel5MockData"
					class="sanction-table"
					stripe
					empty-text="暂无数据"
					header-row-class-name="table-header"
					row-class-name="table-row"
				>
					<el-table-column prop="index" label="序号" width="60">
						<template #default="{ $index }">
							<div class="index">{{ $index + 1 }}</div>
						</template>
					</el-table-column>
					<el-table-column prop="name" label="名称" min-width="230">
						<template #default="{ row }">
							<div style="font-weight: 500" class="name">
								<img :src="row.img" alt="" class="img" />
								{{ row.name }}
							</div>
						</template>
					</el-table-column>
					<el-table-column prop="number" label="仪器进口数" width="110"></el-table-column>
				</el-table>
			</div>
		</CardCustom>
		<div class="right">
			<div class="row">
				<CardCustom title="各类别仪器对美依赖情况" :style="{ width: '642px', height: '422px' }">
					<div class="subPanel1">
						<div class="chartsWrap">
							<Echarts :option="horizontalBarOptions" height="100%"></Echarts>
						</div>
						<Hint
							text="受制裁实体中，医学科研仪器对美依赖程度最高，达到50%。此外，电子策略仪器、物理性能测试仪器、激光器、核仪器、计量仪器、分析仪器等也有较高的对美依赖度，本次制裁可能会对相关企业产生较大的影响。"
						></Hint>
					</div>
				</CardCustom>
				<CardCustom title="仪器进口国可替代性分析" :style="{ width: '642px', height: '422px' }">
					<div class="subPanel2">
						<div class="chartsWrap">
							<Echarts :option="pieOptions2" height="100%"></Echarts>
						</div>
						<Hint
							text="受制裁实体的仪器来源国主要为美国,但是德国、日本、英国等国也占有较大比重,后续可考虑将上述国家作为仪器进口来源替代国。"
						></Hint>
					</div>
				</CardCustom>
			</div>
			<div class="row">
				<CardCustom title="仪器对美依赖度升高风险分析" :style="{ width: '642px', height: '422px' }">
					<div class="subPanel3">
						<div class="chartsWrap">
							<Echarts :option="multipleLineOptions1" height="100%"></Echarts>
						</div>
						<Hint
							text="近年来，受制裁实体仪器的对美依赖度整体上有所降低，但工艺试验仪器和核仪器的对美依赖程度有抬头趋势，需要加以注意。"
						></Hint>
					</div>
				</CardCustom>
				<CardCustom title="仪器国产化降低风险分析" :style="{ width: '642px', height: '422px' }">
					<div class="subPanel4">
						<div class="chartsWrap">
							<Echarts :option="multipleLineOptions2" height="100%"></Echarts>
						</div>
						<Hint
							text="近些年,受制裁实体的国产仪器数量整体上呈增加趋势,但是2023年,各类国产仪器的新增数量均有显著降低,需要加以关注。"
						></Hint>
					</div>
				</CardCustom>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, onMounted, shallowReactive, shallowRef } from "vue";
import CardCustom from "../../components/CardCustom.vue";
import Echarts from "@/components/Chart/index.vue";
import Hint from "./hint.vue";
import college1 from "../../assets/images/college1.png";
import college2 from "../../assets/images/college2.png";
import college3 from "../../assets/images/college3.png";
import college4 from "../../assets/images/college4.png";
import college5 from "../../assets/images/college5.png";
import college6 from "../../assets/images/college6.png";
import college7 from "../../assets/images/college7.png";
import college8 from "../../assets/images/college8.png";
import college9 from "../../assets/images/college9.png";
import college10 from "../../assets/images/college10.png";
import college11 from "../../assets/images/college11.png";
import { getHorizontalBarChart1, getPieOption2, getMultipleLineChart } from "../../utils/charts";
const selectOptions = [
	{
		value: 1,
		label: "对外依赖"
	}
];
const selectedId = ref(selectOptions[0].value);
const indexMethod = index => {
	return index + 1;
};
const panel5MockData = [
	{
		name: "科大讯飞股份有限公司",
		number: "1556",
		img: college1
	},
	{
		name: "中国科学院物理研究所",
		number: "1245",
		img: college2
	},
	{
		name: "清华大学",
		number: "1032",
		img: college3
	},
	{
		name: "复旦大学",
		number: "965",
		img: college4
	},
	{
		name: "中国水产科学研究院",
		number: "910",
		img: college5
	},
	{
		name: "上海科技大学",
		number: "898",
		img: college6
	},
	{
		name: "合肥物质科学研究院",
		number: "823",
		img: college7
	},
	{
		name: "空天信息创新研究院",
		number: "804",
		img: college8
	},
	{
		name: "北京航空航天大学",
		number: "761",
		img: college9
	},
	{
		name: "苏州大学",
		number: "752",
		img: college10
	},
	{
		name: "电子科技大学",
		number: "703",
		img: college11
	}
];
const horizontalBarOptions = shallowRef({});
const pieOptions2 = shallowRef({});
const multipleLineOptions1 = shallowRef({});
const multipleLineOptions2 = shallowRef({});
onMounted(() => {
	horizontalBarOptions.value = getHorizontalBarChart1(
		["地球探测仪器", "计算机及其配套设备", "天文仪器", "分析仪器", "核仪器", "物理性能测试仪器", "医学科研仪器"],
		[10, 10, 21, 25, 79, 95, 109],
		false
	);
	pieOptions2.value = getPieOption2([
		{ name: "美国", value: 27 },
		{ name: "日本", value: 22 },
		{ name: "德国", value: 18 },
		{ name: "英国", value: 15 },
		{ name: "韩国", value: 12 },
		{ name: "荷兰", value: 8 },
		{ name: "其他", value: 7 }
	]);
	multipleLineOptions1.value = getMultipleLineChart({
		dates: ["2016", "2017", "2018", "2019", "2020", "2021", "2022", "2023", "2024", "2025"],
		data: [
			{ name: "电子测量仪器", value: [45, 35, 25, 20, 20, 14, 15, 15, 23, 21] },
			{ name: "分析仪器", value: [35, 33, 24, 21, 22, 18, 13, 19, 21, 31] },
			{ name: "工艺试验仪器", value: [32, 22, 12, 11, 14, 15, 17, 13, 12, 26] },
			{ name: "核仪器", value: [48, 38, 28, 28, 28, 18, 18, 18, 28, 28] }
		]
	});
	multipleLineOptions2.value = getMultipleLineChart({
		dates: ["2016", "2017", "2018", "2019", "2020", "2021", "2022", "2023", "2024", "2025"],
		data: [
			{ name: "电子测量仪器", value: [45, 35, 25, 20, 20, 14, 15, 15, 23, 21] },
			{ name: "分析仪器", value: [35, 33, 24, 21, 22, 18, 13, 19, 21, 31] },
			{ name: "工艺试验仪器", value: [32, 22, 12, 11, 14, 15, 17, 13, 12, 26] },
			{ name: "核仪器", value: [48, 38, 28, 28, 28, 18, 18, 18, 28, 28] }
		]
	});
});
</script>

<style lang="scss" scoped>
.influencePanel1 {
	display: flex;
	gap: 16px;
	.tableWrap {
		:deep(.table-header) {
			color: rgba(59, 65, 75, 1);
			font-size: 16px;
			font-weight: 700;
			height: 64px;
		}
		:deep(.table-row) {
			height: 60px;
			font-size: 16px;
			font-weight: 400;
		}
		.index {
			width: 24px;
			height: 24px;
			background-color: rgba(231, 243, 255, 1);
			color: rgb(5, 95, 194);
			font-size: 12px;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 12px;
			margin: 0 auto;
		}
		.name {
			display: flex;
			align-items: center;
			.img {
				width: 40px;
				height: 40px;
				margin-right: 8px;
			}
		}
	}
	.right {
		display: flex;
		flex-direction: column;
		gap: 16px;
	}
	.row {
		display: flex;
		gap: 16px;
	}
}
.subPanel1,
.subPanel2,
.subPanel3,
.subPanel4 {
	height: 100%;
	display: flex;
	flex-direction: column;
	padding: 2px 18px 12px 18px;
	.chartsWrap {
		flex: 1;
	}
}
</style>
