<!--   国家科技博弈支撑资源分析   -->
<template>
	<div class="thematic-box">
		<div style="width:100%;text-align:center;">
			<div class="thematic-title" style="display:inline-block;">
				国家科技战略博弈手段分析
			</div>
		</div>
		<div class="divider"></div>
		<div class="chart-content" style="margin-top: 32px;">
			<div class="chart-box">
				<div class="item-header">
					<img class="item-header-icon" src="@/assets/images/icon/thematic-card-header-time.png"></img>
					<div class="item-header-text">科技人才对比分析</div>
					<div class="item-header-btn">
						<img class="item-header-btn-icon" src="@/assets/images/icon/header-btn.png"></img>
						<div style="">
							数据来源：美国某某发展基金会
						</div>
					</div>
				</div>
				<div class="divider"></div>
				<div style="display: flex;height: 320px;width: calc(100% - 40px) ;margin: 20px;" id="char4">
				</div>
				<div style="width: 100%;">
					<div class="comparison-btn">
						R&D人员总数对比
					</div>
				</div>
			</div>
			<div class="chart-box">
				<div class="item-header">
					<img class="item-header-icon" src="@/assets/images/icon/thematic-card-header-time.png"></img>
					<div class="item-header-text">科研投入对比分析</div>
					<div class="item-header-btn">
						<img class="item-header-btn-icon" src="@/assets/images/icon/header-btn.png"></img>
						<div style="">
							数据来源：美国某某发展基金会
						</div>
					</div>

				</div>
				<div class="divider"></div>
				<div style="display: flex;height: 320px;width: calc(100% - 40px) ;margin: 20px;" id="char5">
				</div>
				<div style="width: 100%;">
					<div class="comparison-btn">
						R&D支出总额对比
					</div>
				</div>

			</div>


		</div>
		<div class="chart-content" style="margin-top: 24px;">
			<div class="chart-box">
				<div class="item-header">
					<img class="item-header-icon" src="@/assets/images/icon/thematic-card-header-time.png"></img>
					<div class="item-header-text">创新主体对比分析</div>
					<div class="item-header-btn">
						<img class="item-header-btn-icon" src="@/assets/images/icon/header-btn.png"></img>
						<div style="">
							数据来源：美国某某发展基金会
						</div>
					</div>
				</div>
				<div class="divider"></div>
				<div style="display: flex;height: 320px;width: calc(100% - 40px) ;margin: 20px;" id="char6">
				</div>
				<div style="width: 100%;">
					<div class="comparison-btn">
						R&全球顶尖创新主体数量对比
					</div>
				</div>
			</div>
			<div class="chart-box">
				<div class="item-header">
					<img class="item-header-icon" src="@/assets/images/icon/thematic-card-header-time.png"></img>
					<div class="item-header-text">科学数据对比分析</div>
					<div class="item-header-btn">
						<img class="item-header-btn-icon" src="@/assets/images/icon/header-btn.png"></img>
						<div style="">
							数据来源：美国某某发展基金会
						</div>
					</div>

				</div>
				<div class="divider"></div>
				<div style="display: flex;">
					<div style="display: flex;height: 360px;width: 433px ; " id="char7">
					</div>
					<div style="width: 50%;padding-top: 34px;">
						<div v-for="value in radar2Data" class="radar2Data-line">
							<div class="radar2Data-circle" :style="{ backgroundColor: value.color }"></div>
							<div style=" margin: 0 5px;font-size: 16px;">{{ value.name }}</div>
							<div style="width: 168px ; "> <el-progress :percentage="value.percent" :color="value.color"
									:show-text="false" /></div>
							<div style="    width: 70px;text-align: right;">{{ value.percent < 50 ? '低依赖' : value.percent < 80
								? '中度依赖' : '高度依赖' }} </div>
							</div>
						</div>
					</div>

					<div style="width: 100%;">
						<div class="comparison-btn">
							科学数据外部依赖情况对比
						</div>
					</div>
				</div>


			</div>
		</div>

</template>

<script setup>
import { onMounted, ref, computed } from "vue";
import router from '@/router/index'
import * as echarts from "echarts";
import DivideHeader from "@/components/DivideHeader.vue";
import Timeline from "../component/Timeline.vue";
import getBarChart from '../js/barChart.js'
import getBarChart2 from '../js/barChart2.js'
import radarChart2 from '../js/radarChart2.js'

//科技人才对比分析
const char4Data = ref({
	name: ['中国', '日本', '欧盟', '韩国', '加拿大', '澳大利亚'],
	value: [83.76, 76.72, 73.89, 72.16, 66.24, 65.47, 63.98, 62.12, 44.38, 24.79],
});

//科研投入对比分析
const char5Data = ref({
	name: ['中国', '日本', '欧盟', '韩国', '加拿大', '澳大利亚'],
	value: [83.76, 76.72, 73.89, 72.16, 66.24, 65.47, 63.98, 62.12, 44.38, 24.79],
});


const names = ['中国', '日本', '欧盟', '韩国', '加拿大', '澳大利亚']
const data1 = [120, 200, 150, 80, 70, 100]
const data2 = [90, 230, 180, 110, 100, 30]
const data3 = [20, 130, 120, 160, 80, 11]
// 绘制echarts图表
const setChart = (option, chartId) => {
	let chartDom = document.getElementById(chartId);
	chartDom.removeAttribute("_echarts_instance_");
	let chart = echarts.init(chartDom);
	chart.setOption(option);
	return chart;
};


const radar2Data = ref([
	{
		name: '中国',
		percent: 20,
		color: '#CF4F51',
		text: ''
	}, {
		name: '美国', color: '#0560C3',
		percent: 30,
		text: ''
	}, {
		name: '欧盟', color: '#14A8A8',
		percent: 40,
		text: ''
	}, {
		name: '英国', color: '#722FD1',
		percent: 70,
		text: ''
	}, {
		name: '日本', color: '#FA8C15',
		percent: 80,
		text: ''
	}, {
		name: '韩国', color: '#69B2FF',
		percent: 90,
		text: ''
	}
])
onMounted(() => {
	//科技人才对比分析
	let char4 = getBarChart(char4Data.value.name, char4Data.value.value, true);
	setChart(char4, "char4");
	//科研投入对比分析
	let char5 = getBarChart(char5Data.value.name, char5Data.value.value, true);
	setChart(char5, "char5");

	let char6 = getBarChart2(names, data1, data2, data3, false);
	setChart(char6, "char6");

	let char7 = radarChart2()
	setChart(char7, "char7");

});
</script>

<style lang="scss" scoped>
.thematic-box {
	margin-top: 36px;
	height: 1050px;

	box-sizing: border-box;
	border: 1px solid rgba(255, 255, 255, 1);
	border-radius: var(---, 10px);
	/* 业务系统/模块阴影 */
	box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
	background: linear-gradient(180.00deg, rgba(246, 250, 255, 1), rgba(246, 250, 255, 0) 100%);


	.divide {
		width: 100%;
		margin: 0 auto;
		margin-top: 52px;
		margin-bottom: 36px;
	}
}

.thematic-title {
	/* Common/导航按钮 */
	width: 284px;
	height: 48px;
	/* 自动布局 */
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	gap: 4;
	padding: 9px 16px 9px 16px;
	background: rgba(5, 95, 194, 1);
	color: rgba(255, 255, 255, 1);

	font-size: 20px;
	font-weight: 700;
	line-height: 26px;
	letter-spacing: 0px;
	text-align: left;
}

.thematic-content {
	/* 容器 480 */
	width: calc(100% - 40px);

	height: 640px;

	margin: 35px 20px 20px 20px;
	box-sizing: border-box;
	border: 1px solid rgba(234, 236, 238, 1);
	border-radius: var(---, 10px);
	/* 业务系统/模块阴影 */
	box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
	background: rgba(255, 255, 255, 1);


	.timeLine-box {
		height: 100%;
		width: calc(100% - 50px);

		.time-item-box {
			width: 30%;
			height: 165px;
		}
	}

	.item-header-divider {
		/* 矩形 249 */
		width: 100%;
		height: 1px;
		background: rgba(231, 243, 255, 1);
	}

	.thematic-btn-left {
		height: 100%;
		width: 24px;
		padding-top: 130px;
	}

	.thematic-btn-right {
		height: 100%;
		width: 24px;
		padding-top: 130px;
	}

	.thematic-btn-icon {
		height: 48px;
		width: 100%;
		margin-top: calc(50% - 24px);
	}
}

.item-header {
	height: 48px;
	line-height: 48px;
	width: 100%;
	display: flex;
	align-items: center;

	.item-header-icon {
		width: 20px;
		height: 20px;
		margin: 15px;
	}

	.item-header-text {
		width: 165px;
		font-size: 20px;
		font-weight: 700;
		line-height: 26px;
		background: rgba(255, 255, 255, 0.65);
		color: #055fc2;
		font-family: Microsoft YaHei;
		font-size: 20px;
		line-height: 48px;
		text-align: left;
	}

	.item-header-btn {
		display: flex;
		color: rgba(132, 136, 142, 1);


		font-family: Microsoft YaHei;
		font-size: 16px;
		font-weight: 400;

		letter-spacing: 0px;
		text-align: right;
	}

	.item-header-btn-icon {
		width: 14px;
		height: 16px;
		margin-top: 15px;
		margin-left: 270px;
		margin-right: 4px;
	}

	.item-header-btn-text {
		color: rgba(132, 136, 142, 1);

		font-family: Microsoft YaHei;
		font-size: 16px;
		font-weight: 400;
		line-height: 24px;
		letter-spacing: 0px;
		text-align: left;
	}

}

.divider {
	width: 100%;
	height: 1px;
	background: rgba(231, 243, 255, 1);
}

.comparison-btn {
	/* 容器 648 */
	width: calc(100% - 70px);
	margin-left: 35px;
	height: 30px;
	/* 自动布局 */
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	gap: 10;
	padding: 0px 24px 0px 24px;
	border-radius: 15px;
	background: rgba(231, 243, 255, 1);

	color: rgba(5, 95, 194, 1);

	font-size: 16px;
	font-weight: 700;
	line-height: 30px;
	letter-spacing: 0px;
	text-align: center;

}

.chart-content {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	width: 100%;
	height: 452px;
	padding: 0 20px;
}

.chart-box {

	height: 452px;
	box-sizing: border-box;
	border: 1px solid rgba(234, 236, 238, 1);
	border-radius: var(---, 10px);
	background: rgba(255, 255, 255, 1);
}

.radar2Data-line {
	display: flex;
	width: 100%;
	height: 30px;
	margin-top: 18px;

	align-items: center;
	/* 垂直居中 */
	color: rgba(95, 101, 108, 1);

	font-family: Microsoft YaHei;
	font-size: 14px;
	font-weight: 400;
	line-height: 22px;
	letter-spacing: 0px;
	text-align: right;

}

.radar2Data-circle {
	/* 椭圆 79 */
	width: 12px;
	height: 12px;
	border-radius: 50%;
}

:deep(.el-progress-bar__outer) {
	height: 8px !important;

}
</style>
