<template>
	<div class="depth-mine-container">
		<div class="depth-mine-left">
			<div
				@click="handleClick(index)"
				:class="['depth-mine-left-item', activeLeftTab === index ? 'depth-mine-left-item-active' : '']"
				v-for="(item, index) in data"
				:key="index"
			>
				<div class="depth-mine-left-item-title">{{ item[0] }}</div>
				<div class="depth-mine-left-item-desc">{{ item[1] }}</div>
			</div>
		</div>
		<el-row :gutter="20">
			<el-col :span="12">
				<custom-container title="实体清单历次更新中外受影响情况对比" height="580px">
					<!-- 顶部右侧自定义内容 -->
					<!-- <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>
						</div>
					</template> -->

					<template #default>
						<!-- <div ref="echartsRef" style="height: 425px; width: 100%"></div> -->
						<ECharts :option="chartOption" autoresize :style="{ height: '425px' }" />
						<div class="content-box-footer">
							<img class="footer-img-small" src="@/assets/images/icon-guanzhu.png" alt="" />
							<span class="content-box-footer-text">
								2024年以来,实体清单更新次数相对于2023年有所降低,但是本年度内呈上升趋势。
							</span>
							<img class="footer-img-large" src="@/assets/images/icon-right-circle.png" alt="" />
						</div>
					</template>
				</custom-container>
			</el-col>
			<el-col :span="12">
				<custom-container title="实体清单历次更新中外受影响情况对比" height="580px">
					<!-- 顶部右侧自定义内容 -->
					<!-- <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>
						</div>
					</template> -->

					<template #default>
						<div class="content-box">
							<el-table :data="tableData" stripe style="width: 100%">
								<el-table-column type="index" label="序号" />
								<el-table-column prop="date" label="更新日期" width="150" />
								<el-table-column prop="entity" label="实体数/历史排名" width="150" />
								<el-table-column prop="entityCN" label="中国实体数/历史排名" />
								<el-table-column prop="proportion" label="中国占比/历史排名" />
							</el-table>
							<div class="content-box-footer">
								<img class="footer-img-small" src="@/assets/images/icon-guanzhu.png" alt="" />
								<span class="content-box-footer-text"
									>相对于近几次更新，中国新增受制裁的实体数量占比的排名都显著提高，美国制裁中国实体的强度显著提升。</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="505px">
					<!-- 顶部右侧自定义内容 -->
					<!-- <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>
						</div>
					</template> -->

					<template #default>
						<div class="content-box">
							<!-- <v-charts :option="option" autoresize :style="{ height: '326px' }" /> -->
							<!-- <div ref="frequenceRef" style="height: 340px; width: 100%"></div> -->
							<ECharts :option="frequenceOption" autoresize :style="{ height: '326px' }" />
							<div class="content-box-footer">
								<img class="footer-img-small" src="@/assets/images/icon-guanzhu.png" alt="" />
								<span class="content-box-footer-text">
									2024年以来,实体清单更新次数相对于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="505px">
					<!-- 顶部右侧自定义内容 -->
					<template #header-right>
						<div style="display: flex; gap: 8px">
							<el-input
								placeholder="请输入关键词，使用(、)作为分隔符."
								:suffix-icon="Search"
								clearable
								style="width: 360px"
							>
								<!-- <template #append>
									<el-icon><Search /></el-icon>
								</template> -->
							</el-input>
							<!-- <el-button type="primary">涉华背景</el-button>
							<el-button>全部背景</el-button> -->
						</div>
					</template>

					<template #default>
						<div class="content-box">
							<div class="content-box-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-tag">
										<el-tag
											:type="TAGTYPE[Math.floor(Math.random() * 5)]"
											v-for="tag in item.tags"
											:key="tag"
											>{{ tag }}</el-tag
										>
									</div>
								</div>
							</div>
							<div class="content-box-footer">
								<img class="footer-img-small" src="@/assets/images/icon-guanzhu.png" alt="" />
								<span class="content-box-footer-text"
									>本次实体清单更新,科研院所占比相对较高。需要注意的是,中国科学技术大学、中国科学院物理研究所等国内重点科研机构被列入实体清单,此外还有中科星图以及中电科旗下的多家研究所被列入清单,可能会对相关行业产生显著影响。</span
								>
								<img class="footer-img-large" src="@/assets/images/icon-right-circle.png" alt="" />
							</div>
						</div>
					</template>
				</custom-container>
			</el-col>
		</el-row>
	</div>
</template>

<script setup>
import { onMounted, reactive, ref } from "vue";
// import * as echarts from "echarts";
import ECharts from "@/components/Chart/index.vue";
// import VCharts from "vue-echarts";
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 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([
	{
		entity: "中国科学技术大学",
		tags: ["双一流", "985", "关税政策"]
	},
	{
		entity: "合肥量子信息科学国家实验室",
		tags: ["中国上市企业"]
	},
	{
		entity: "中国科学院物理研究所",
		tags: ["科研院所"]
	}
]);

const frequenceRef = ref(null);
const echartsRef = ref(null);
const frequenceOption = ref({
	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 = ref({
	tooltip: {
		trigger: "axis",
		axisPointer: {
			type: "cross",
			crossStyle: {
				color: "#999"
			}
		}
	},
	toolbox: {
		feature: {
			dataView: { show: true, readOnly: false },
			magicType: { show: true, type: ["line", "bar"] },
			restore: { show: false },
			saveAsImage: { show: false }
		}
	},
	legend: {
		data: ["中国", "外国", "占比"]
	},
	xAxis: [
		{
			type: "category",
			data: ["2010", "2011", "2012", "2013", "2014", "2015", "2016", "2017", "2018", "2019", "2020", "2021"],
			axisPointer: {
				type: "shadow"
			}
		}
	],
	yAxis: [
		{
			type: "value",
			name: "量",
			min: 0,
			max: 250,
			interval: 50,
			axisLabel: {
				formatter: "{value}"
			}
		},
		{
			type: "value",
			name: "占比",
			min: 0,
			max: 25,
			interval: 5,
			axisLabel: {
				formatter: "{value}"
			}
		}
	],
	series: [
		{
			name: "中国",
			type: "bar",
			tooltip: {
				valueFormatter: function (value) {
					return value;
				}
			},
			data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
		},
		{
			name: "外国",
			type: "bar",
			tooltip: {
				valueFormatter: function (value) {
					return value + " ml";
				}
			},
			data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
		},
		{
			name: "占比",
			type: "line",
			yAxisIndex: 1,
			tooltip: {
				valueFormatter: function (value) {
					return value;
				}
			},
			data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
		}
	]
});
onMounted(() => {
	// let frequenceChart = echarts.init(frequenceRef.value);
	// let chart = echarts.init(echartsRef.value);
	// useEcharts(frequenceChart, frequenceOption);
	// useEcharts(chart, chartOption);
});

const data = ref([
	["新增实体37个", "较上次多31个"],
	["上市企业3家", "较上次多2家"],
	["涉及领域2个", "较上次少1个"],
	["实体类别3种", "较上次多2种"]
]);

const activeLeftTab = ref(0);
const handleClick = index => {
	activeLeftTab.value = index;
};
</script>

<style scoped>
.depth-mine-container {
	padding: 0 5% 0 150px;
	position: relative;
}
.depth-mine-left {
	position: absolute;
	left: 0;
	top: 10px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}
.depth-mine-left-item {
	display: flex;
	flex-direction: column;
	gap: 4px;
	cursor: pointer;
	color: rgba(95, 101, 108, 1);
	padding: 10px 16px;
	border-radius: 10px;
}
.depth-mine-left-item-active {
	color: #fff;
	background-color: var(--color-main-active);
}
.depth-mine-left-item-title {
	font-size: 16px;
	font-weight: 400;
}
.content-box {
	/* height: 90vh; */
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.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;
	border-bottom: 1px solid rgba(234, 236, 238, 1);
}
.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: var(--color-main-active);
}
.footer-img-small {
	width: 20px;
	height: 20px;
}
.footer-img-large {
	width: 24px;
	height: 24px;
}
</style>
