<template>
	<el-row :gutter="20">
		<el-col :span="6">
			<custom-container title="新增科研机构列表" height="1040px">
				<template #header-top>
					<div class="content-top">
						<el-radio-group v-model="impactType" size="small">
							<el-radio-button label="产业影响" value="cy" />
							<el-radio-button label="科研机构影响" value="ky" />
						</el-radio-group>
					</div>
				</template>
				<!-- 顶部右侧自定义内容 -->
				<template #header-right>
					<div style="display: flex; gap: 8px">
						<!-- <el-input placeholder="搜索项目..." clearable style="width: 200px">
							<template #prefix>
								<el-icon><Search /></el-icon>
							</template>
						</el-input>
						<el-button type="primary">涉华背景</el-button>
						<el-button>全部背景</el-button> -->
						<el-select v-model="orgType" :options="orgTypeOptions" :props="props" placeholder="Select" style="width: 80px" />
					</div>
				</template>

				<template #default>
					<div class="content-box-header">
						<div class="content-box-header-title">名称</div>
						<div class="content-box-header-title">进口仪器数</div>
					</div>
					<div class="content-box-centent-list">
						<div class="content-box-list-item" v-for="item in entityList" :key="item.entity">
							<div class="content-box-list-item-title">{{ item.entity }}</div>
							<div class="content-box-list-item-num">{{ item.num }}</div>
						</div>
					</div>
				</template>
			</custom-container>
		</el-col>
		<el-col :span="18">
			<el-row :gutter="20">
				<el-col :span="12">
					<custom-container title="各类别仪器对美依赖情况" height="500px">
						<template #default>
							<div class="content-box">
								<!-- <div ref="barRef" style="height: 340px; width: 100%"></div> -->
								<ECharts :option="barOption" autoresize :style="{ height: '340px' }" />
								<div class="content-box-footer">
									<img class="footer-img-small" src="@/assets/images/icon-guanzhu.png" alt="" />
									<span class="content-box-footer-text">
										受制裁实体中，医学科研仪器对美依赖程度最高，达到50%。此外，电子策略仪器、物理性能测试仪器、激光器、核仪器、计量仪器、分析仪器等也有较高的对美依赖度，本次制裁可能会对相关企业产生较大的影响。
									</span>
									<img class="footer-img-large" src="@/assets/images/icon-right-circle.png" alt="" />
								</div>
							</div>
						</template>
					</custom-container>
				</el-col>
				<el-col :span="12">
					<custom-container title="仪器进口国可替代性分析" height="500px">
						<template #default>
							<div class="content-box">
								<!-- <div ref="pieRef" style="height: 340px; width: 100%"></div> -->
								<ECharts :option="pieOption" autoresize :style="{ height: '340px' }" />
								<div class="content-box-footer">
									<img class="footer-img-small" src="@/assets/images/icon-guanzhu.png" alt="" />
									<span class="content-box-footer-text">
										近些年,受制裁实体的国产仪器数量整体上呈增加趋势,但是2023年,各类国产仪器的新增数量均有显著降低,需要加以关注。
									</span>
									<img class="footer-img-large" src="@/assets/images/icon-right-circle.png" alt="" />
								</div>
							</div>
						</template>
					</custom-container>
				</el-col>
			</el-row>
			<el-row :gutter="20">
				<el-col :span="12">
					<custom-container title="仪器对美依赖度升高风险分析" height="500px">
						<template #default>
							<div class="content-box">
								<ECharts :option="frequenceOption" autoresize :style="{ height: '340px' }" />
								<div class="content-box-footer">
									<img class="footer-img-small" src="@/assets/images/icon-guanzhu.png" alt="" />
									<span class="content-box-footer-text">
										近些年,受制裁实体的国产仪器数量整体上呈增加趋势,但是2023年,各类国产仪器的新增数量均有显著降低,需要加以关注。
									</span>
									<img class="footer-img-large" src="@/assets/images/icon-right-circle.png" alt="" />
								</div>
							</div>
						</template>
					</custom-container>
				</el-col>
				<el-col :span="12">
					<custom-container title="仪器国产化降低风险分析" height="500px">
						<template #default>
							<div class="content-box">
								<ECharts :option="chartOption" autoresize :style="{ height: '340px' }" />
								<div class="content-box-footer">
									<img class="footer-img-small" src="@/assets/images/icon-guanzhu.png" alt="" />
									<span class="content-box-footer-text">
										近些年,受制裁实体的国产仪器数量整体上呈增加趋势,但是2023年,各类国产仪器的新增数量均有显著降低,需要加以关注。
									</span>
									<img class="footer-img-large" src="@/assets/images/icon-right-circle.png" alt="" />
								</div>
							</div>
						</template>
					</custom-container>
				</el-col>
			</el-row>
		</el-col>
	</el-row>
</template>

<script setup>
import { onMounted, reactive, ref } from "vue";
// import * as echarts from "echarts";
import ECharts from "@/components/Chart/index.vue";
import { useEcharts } from "@/hooks/useEcharts";
import echarts from "@/plugins/echarts";
import { Search } from "@element-plus/icons-vue";
import CustomContainer from "@/components/Container/index.vue";
import { TAGTYPE } from "@/common/constant.js";

const impactType = ref("ky");
const orgTypeOptions = ref([
	{
		value: "1",
		label: "对外依赖"
	}
]);
const orgType = ref("1");
const tableData = ref([
	{
		date: "2024年5月14日",
		entity: "37/24",
		entityCN: "37/4",
		proportion: "100%/1"
	},
	{
		date: "2024年4月11日",
		entity: "37/24",
		entityCN: "37/4",
		proportion: "100%/1"
	},
	{
		date: "2024年2月27日",
		entity: "37/24",
		entityCN: "37/4",
		proportion: "100%/1"
	},
	{
		date: "2023年12月7日",
		entity: "37/24",
		entityCN: "37/4",
		proportion: "100%/1"
	},
	{
		date: "2023年11月15日",
		entity: "37/24",
		entityCN: "37/4",
		proportion: "100%/1"
	},

	{
		date: " 2024年3月5日",
		entity: "37/24",
		entityCN: "37/4",
		proportion: "100%/1"
	}
]);

// 重点实体列表
const entityList = ref([
	{
		img: "",
		num: 1556,
		entity: "中国科学技术大学",
		tags: ["双一流", "985", "关税政策"]
	},
	{
		img: "",
		num: 313,
		entity: "合肥量子信息科学国家实验室",
		tags: ["中国上市企业"]
	},
	{
		img: "",
		num: 270,
		entity: "中国科学院物理研究所",
		tags: ["科研院所"]
	}
]);

const frequenceRef = ref(null);
const echartsRef = ref(null);
const pieRef = ref(null);
const barRef = ref(null);
const barOption = ref({
	title: {
		text: ""
	},
	tooltip: {
		trigger: "axis",
		axisPointer: {
			type: "shadow"
		}
	},
	legend: {},
	grid: {
		left: "3%",
		right: "4%",
		bottom: "3%",
		containLabel: true
	},
	xAxis: {
		type: "value",
		boundaryGap: [0, 0.01]
	},
	yAxis: {
		type: "category",
		data: ["医学科学仪器", "电子策略仪器", "物理性能测试仪器", "激光器", "核仪器", "计量仪器", "分析仪器"]
	},
	series: [
		{
			name: "2011",
			type: "bar",
			data: [50, 47.8, 46.9, 45.0, 40.8, 35.0, 34.8]
		}
	]
});
const pieOption = {
	tooltip: {
		trigger: "item"
	},
	legend: {
		top: "5%",
		left: "center"
	},
	series: [
		{
			name: "Access From",
			type: "pie",
			radius: ["40%", "70%"],
			avoidLabelOverlap: false,
			label: {
				show: false,
				position: "center"
			},
			emphasis: {
				label: {
					show: true,
					fontSize: 40,
					fontWeight: "bold"
				}
			},
			labelLine: {
				show: false
			},
			data: [
				{ value: 1048, name: "Search Engine" },
				{ value: 735, name: "Direct" },
				{ value: 580, name: "Email" },
				{ value: 484, name: "Union Ads" },
				{ value: 300, name: "Video Ads" }
			]
		}
	]
};
const frequenceOption = {
	tooltip: {
		trigger: "axis",
		axisPointer: {
			type: "shadow"
		}
	},
	grid: {
		top: 20,
		right: 3,
		bottom: 0,
		left: 3,
		containLabel: true
	},
	legend: {
		data: [],
		bottom: 0,
		icon: "circle",
		itemWidth: 10,
		itemHeight: 10,
		itemGap: 15,
		textStyle: {
			fontSize: 12,
			color: "#222B45"
		}
	},
	xAxis: {
		type: "category",
		data: [
			"202301",
			"202302",
			"202303",
			"202304",
			"202305",
			"202306",
			"202307",
			"202308",
			"202309",
			"202310",
			"202311",
			"202312"
		],
		axisLine: {
			show: false
		},
		axisTick: {
			show: false
		},
		axisLabel: {
			color: "#889fcc"
		}
	},
	yAxis: {
		type: "value",
		axisLine: { show: false },
		axisTick: { show: false },
		splitLine: {
			lineStyle: {
				color: "#EFF1F3",
				width: 0.8
			}
		},
		axisLabel: { color: "#889fcc" }
	},
	series: [
		{
			name: "aa",
			type: "bar",
			data: [3, 2, 3, 0, 2, 1, 3, 1, 0, 2, 3, 2],
			barWidth: "15",
			itemStyle: {
				color: "#639dfa",
				borderRadius: [4, 4, 0, 0]
			}
		}
		// {
		// 	name: "bbb",
		// 	type: "bar",
		// 	data: [6, 13, 10, 5, 12, 5],
		// 	barWidth: "15",
		// 	itemStyle: {
		// 		color: "#639dfa",
		// 		borderRadius: [4, 4, 0, 0]
		// 	}
		// }
	]
};
const chartOption = {
	title: {
		text: ""
	},
	tooltip: {
		trigger: "axis"
	},
	legend: {
		data: ["Email", "Union Ads", "Video Ads", "Direct", "Search Engine"]
	},
	grid: {
		left: "3%",
		right: "4%",
		bottom: "3%",
		containLabel: true
	},
	toolbox: {
		feature: {
			saveAsImage: {}
		}
	},
	xAxis: {
		type: "category",
		boundaryGap: false,
		data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
	},
	yAxis: {
		type: "value"
	},
	series: [
		{
			name: "Email",
			type: "line",
			stack: "Total",
			data: [120, 132, 101, 134, 90, 230, 210]
		},
		{
			name: "Union Ads",
			type: "line",
			stack: "Total",
			data: [220, 182, 191, 234, 290, 330, 310]
		},
		{
			name: "Video Ads",
			type: "line",
			stack: "Total",
			data: [150, 232, 201, 154, 190, 330, 410]
		},
		{
			name: "Direct",
			type: "line",
			stack: "Total",
			data: [320, 332, 301, 334, 390, 330, 320]
		},
		{
			name: "Search Engine",
			type: "line",
			stack: "Total",
			data: [820, 932, 901, 934, 1290, 1330, 1320]
		}
	]
};
onMounted(() => {
	// let frequenceChart = echarts.init(frequenceRef.value);
	// let chart = echarts.init(echartsRef.value);
	// let pie = echarts.init(pieRef.value);
	// let bar = echarts.init(barRef.value);
	// useEcharts(frequenceChart, frequenceOption);
	// useEcharts(chart, chartOption);
	// useEcharts(pie, pieOption);
	// useEcharts(bar, barOption);
});
</script>

<style scoped>
.content-top {
	width: 100%;
	display: flex;
	justify-content: center;
	margin-top: 20px;
}
.content-box {
	/* height: 90vh; */
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.content-box-header {
	height: 40px;
	background-color: rgba(59, 65, 75, 1);
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-left: 20px;
	padding-right: 20px;
}
.content-box-list {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.content-box-list-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
	padding-bottom: 5px;
	padding-left: 10px;
	padding-right: 20px;
	height: 35px;
	line-height: 35px;
}
.content-box-list-item-title {
	font-size: 16px;
	/* font-weight: 700; */
	color: rgba(10, 18, 30, 1);
}
.content-box-list-item-tag {
	display: flex;
	gap: 8px;
}
.content-box-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	background-color: rgba(246, 251, 255, 1);
	padding: 5px 15px;
}
.content-box-footer-text {
	font-size: 16px;
	font-weight: 400;
	color: rgba(10, 87, 166, 1);
}
.footer-img-small {
	width: 20px;
	height: 20px;
}
.footer-img-large {
	width: 24px;
	height: 24px;
}
</style>
