<template>
	<div class="wrap">
		<div class="top">
			<div class="box1 box">
				<div class="box-header">
					<div class="header-left"></div>
					<div class="title">对华301调查年度数量趋势</div>
					<div class="warning-text">
						{{ "3项调查仍在进行中" }}
					</div>
					<div class="header-right">
						<div class="icon">
							<img src="@/assets/icons/box-header-icon1.png" alt="" />
						</div>
						<div class="icon">
							<img src="@/assets/icons/box-header-icon2.png" alt="" />
						</div>
						<div class="icon">
							<img src="@/assets/icons/box-header-icon3.png" alt="" />
						</div>
					</div>
				</div>
				<div class="box1-main" id="box1Chart"></div>
				<div class="box-footer">
					<div class="box-footer-left">
						<img src="@/assets/icons/box-footer-left-icon.png" alt="" />
					</div>
					<div class="box-footer-center">
						{{ "近年来美对华301调查呈现案件频发、聚焦专利壁垒、力图阻断产业链升级的特点。" }}
					</div>
					<div class="box-footer-right">
						<img src="@/assets/icons/box-footer-right-icon.png" alt="" />
					</div>
				</div>
			</div>
			<div class="box2 box">
				<div class="box-header">
					<div class="header-left"></div>
					<div class="title">301调查国家分布</div>
					<div class="header-right">
						<div class="icon">
							<img src="@/assets/icons/box-header-icon1.png" alt="" />
						</div>
						<div class="icon">
							<img src="@/assets/icons/box-header-icon2.png" alt="" />
						</div>
						<div class="icon">
							<img src="@/assets/icons/box-header-icon3.png" alt="" />
						</div>
					</div>
				</div>
				<div class="box2-main" id="box2Chart"></div>
				<div class="box-footer">
					<div class="box-footer-left">
						<img src="@/assets/icons/box-footer-left-icon.png" alt="" />
					</div>
					<div class="box-footer-center">
						{{ "现有调查以先进制造、半导体产业为主。" }}
					</div>
					<div class="box-footer-right">
						<img src="@/assets/icons/box-footer-right-icon.png" alt="" />
					</div>
				</div>
			</div>
		</div>
		<div class="bottom">
			<div class="box3 box">
				<div class="box-header">
					<div class="header-left"></div>
					<div class="title">301调查方向及结果分布</div>
					<div class="header-right">
						<div class="icon">
							<img src="@/assets/icons/box-header-icon1.png" alt="" />
						</div>
						<div class="icon">
							<img src="@/assets/icons/box-header-icon2.png" alt="" />
						</div>
						<div class="icon">
							<img src="@/assets/icons/box-header-icon3.png" alt="" />
						</div>
					</div>
				</div>
				<div class="box3-main" id="box3Chart"></div>
				<div class="box-footer">
					<div class="box-footer-left">
						<img src="@/assets/icons/box-footer-left-icon.png" alt="" />
					</div>
					<div class="box-footer-center">
						{{ "近年来美对华301调查呈现案件频发、聚焦专利壁垒、力图阻断产业链升级的特点。" }}
					</div>
					<div class="box-footer-right">
						<img src="@/assets/icons/box-footer-right-icon.png" alt="" />
					</div>
				</div>
			</div>
			<div class="box4 box">
				<div class="box-header">
					<div class="header-left"></div>
					<div class="title">301调查领域分布</div>
					<div class="header-select-box">
						<el-select v-model="selectYear" @change="handleSelectYear" placeholder="选择时间" style="width: 120px">
							<el-option v-for="item in yearList" :key="item.value" :label="item.label" :value="item.value" />
						</el-select>
					</div>
					<div class="header-right">
						<div class="icon">
							<img src="@/assets/icons/box-header-icon1.png" alt="" />
						</div>
						<div class="icon">
							<img src="@/assets/icons/box-header-icon2.png" alt="" />
						</div>
						<div class="icon">
							<img src="@/assets/icons/box-header-icon3.png" alt="" />
						</div>
					</div>
				</div>
				<div class="box4-main" id="box4Chart"></div>
				<div class="box-footer">
					<div class="box-footer-left">
						<img src="@/assets/icons/box-footer-left-icon.png" alt="" />
					</div>
					<div class="box-footer-center">
						{{ "主要集中在存储、芯片设计及通信领域，如长江存储、长鑫存储、华为、中兴等" }}
					</div>
					<div class="box-footer-right">
						<img src="@/assets/icons/box-footer-right-icon.png" alt="" />
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import setChart from "@/utils/setChart";
import getLineChart from "./utils/lineChart";
import getBarChart from "./utils/barChart";
import getSankeyChart from "./utils/sankey";
import getPieChart from "./utils/piechart";
import Img1 from "./assets/images/1.png";
import Img2 from "./assets/images/2.png";
import Img3 from "./assets/images/3.png";
import Img4 from "./assets/images/4.png";
import Img5 from "./assets/images/5.png";
import Img6 from "./assets/images/6.png";
import Img7 from "./assets/images/7.png";
import getbarChart from "@/views/bill/utils/barchart";

const selectYear = ref("近五年");

const yearList = ref([
	{
		label: "近五年",
		value: "近五年"
	},
	{
		label: "近三年",
		value: "近三年"
	},
	{
		label: "近一年",
		value: "近一年"
	}
]);

const box1ChartData = ref({
	title: ["2014", "2015", "2016", "2017", "2018", "2019", "2020", "2021", "2022", "2023", "2024", "2025"],
	data: [3, 1, 2, 3, 4, 5, 2, 4, 3, 5, 6, 4]
});

const box2ChartData = ref({
	title: [
		{
			img: Img1,
			name: "中国"
		},
		{
			img: Img2,
			name: "俄罗斯"
		},
		{
			img: Img3,
			name: "巴西"
		},
		{
			img: Img4,
			name: "巴基斯坦"
		},
		{
			img: Img5,
			name: "印度"
		},
		{
			img: Img6,
			name: "日本"
		},
		{
			img: Img7,
			name: "德国"
		}
	],
	data: [23, 24, 14, 13, 12, 7, 5]
});

const box3ChartData = ref({
	nodes: [
		{
			name: "市场准入"
		},
		{
			name: "知识产权"
		},
		{
			name: "政府采购"
		},
		{
			name: "技术转让"
		},
		{
			name: "其他"
		},
		{
			name: "产业补贴"
		},
		{
			name: "WTO争端"
		},
		{
			name: "协商解决"
		},
		{
			name: "终止调查"
		},
		{
			name: "仍在调查"
		},
		{
			name: "实施解决"
		}
	],
	links: [
		{
			source: "市场准入",
			target: "WTO争端",
			value: 100
		},
		{
			source: "市场准入",
			target: "协商解决",
			value: 15
		},
		{
			source: "市场准入",
			target: "终止调查",
			value: 12
		},
		{
			source: "市场准入",
			target: "仍在调查",
			value: 11
		},
		{
			source: "知识产权",
			target: "WTO争端",
			value: 68
		},
		{
			source: "知识产权",
			target: "协商解决",
			value: 32
		},
		{
			source: "知识产权",
			target: "终止调查",
			value: 26
		},
		{
			source: "知识产权",
			target: "仍在调查",
			value: 24
		},
		{
			source: "知识产权",
			target: "实施解决",
			value: 22
		},

		{
			source: "政府采购",
			target: "WTO争端",
			value: 61
		},
		{
			source: "政府采购",
			target: "协商解决",
			value: 42
		},
		{
			source: "政府采购",
			target: "终止调查",
			value: 21
		},
		{
			source: "政府采购",
			target: "仍在调查",
			value: 28
		},
		{
			source: "政府采购",
			target: "实施解决",
			value: 20
		},

		{
			source: "技术转让",
			target: "WTO争端",
			value: 55
		},
		{
			source: "技术转让",
			target: "协商解决",
			value: 41
		},
		{
			source: "技术转让",
			target: "终止调查",
			value: 12
		},
		{
			source: "技术转让",
			target: "仍在调查",
			value: 35
		},
		{
			source: "技术转让",
			target: "实施解决",
			value: 32
		},

		{
			source: "其他",
			target: "终止调查",
			value: 11
		},
		{
			source: "产业补贴",
			target: "协商解决",
			value: 22
		},
		{
			source: "产业补贴",
			target: "仍在调查",
			value: 11
		},
		{
			source: "产业补贴",
			target: "实施解决",
			value: 15
		}
	]
});

const box4ChartData = ref([
	{
		name: "集成电路",
		value: 50
	},
	{
		name: "人工智能",
		value: 46
	},
	{
		name: "通信网络",
		value: 40
	},
	{
		name: "能源",
		value: 32
	},
	{
		name: "先进制造",
		value: 31
	},
	{
		name: "生物科技",
		value: 31
	},
	{
		name: "航空航天",
		value: 30
	},
	{
		name: "新材料",
		value: 24
	}
]);

// 切换年份
const handleSelectYear = val => {
	selectYear.value = val;
	if (val === "近一年") {
		box4ChartData.value = [
			{
				name: "集成电路",
				value: 42
			},
			{
				name: "人工智能",
				value: 38
			},
			{
				name: "通信网络",
				value: 32
			},
			{
				name: "能源",
				value: 28
			},
			{
				name: "先进制造",
				value: 29
			},
			{
				name: "生物科技",
				value: 22
			},
			{
				name: "航空航天",
				value: 26
			},
			{
				name: "新材料",
				value: 18
			}
		];
	} else if (val === "近三年") {
		box4ChartData.value = [
			{
				name: "集成电路",
				value: 38
			},
			{
				name: "人工智能",
				value: 26
			},
			{
				name: "通信网络",
				value: 44
			},
			{
				name: "能源",
				value: 48
			},
			{
				name: "先进制造",
				value: 25
			},
			{
				name: "生物科技",
				value: 16
			},
			{
				name: "航空航天",
				value: 16
			},
			{
				name: "新材料",
				value: 19
			}
		];
	} else {
		box4ChartData.value = [
			{
				name: "集成电路",
				value: 50
			},
			{
				name: "人工智能",
				value: 46
			},
			{
				name: "通信网络",
				value: 40
			},
			{
				name: "能源",
				value: 32
			},
			{
				name: "先进制造",
				value: 31
			},
			{
				name: "生物科技",
				value: 31
			},
			{
				name: "航空航天",
				value: 30
			},
			{
				name: "新材料",
				value: 24
			}
		];
	}
	const box4Chart = getPieChart(box4ChartData.value);
	setChart(box4Chart, "box4Chart");
};

onMounted(() => {
	const box1Chart = getLineChart(box1ChartData.value.title, box1ChartData.value.data);
	setChart(box1Chart, "box1Chart");

	const box2Chart = getBarChart(box2ChartData.value.title, box2ChartData.value.data);
	setChart(box2Chart, "box2Chart");

	const box3Chart = getSankeyChart(box3ChartData.value.nodes, box3ChartData.value.links);
	setChart(box3Chart, "box3Chart");

	const box4Chart = getPieChart(box4ChartData.value);
	setChart(box4Chart, "box4Chart");
});
</script>

<style lang="scss" scoped>
.wrap {
	overflow: hidden;
	.box {
		width: 792px;
		height: 410px;
		border: 1px solid rgba(234, 236, 238, 1);
		border-radius: 10px;
		box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
		background: rgba(255, 255, 255, 1);
	}
	.box-header {
		height: 46px;
		display: flex;
		position: relative;
		.header-left {
			margin-top: 18px;
			width: 8px;
			height: 20px;
			border-radius: 0 4px 4px 0;
			background: var(--color-main-active);
		}
		.title {
			margin-left: 14px;
			margin-top: 14px;
			height: 26px;
			color: var(--color-main-active);
			font-family: Microsoft YaHei;
			font-size: 20px;
			font-weight: 700;
			line-height: 26px;
		}
		.warning-text {
			position: absolute;
			top: 16px;
			right: 124px;
			height: 24px;
			color: rgba(206, 79, 81, 1);
			font-family: Microsoft YaHei;
			font-size: 18px;
			font-weight: 700;
			line-height: 24px;
			letter-spacing: 0px;
			text-align: center;
		}
		.header-select-box {
			position: absolute;
			top: 13px;
			right: 121px;
		}
		.header-right {
			position: absolute;
			top: 14px;
			right: 12px;
			display: flex;
			justify-content: flex-end;
			gap: 4px;
			.icon {
				width: 28px;
				height: 28px;
				img {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
	.box-footer {
		margin: 5px auto;
		width: 759px;
		height: 40px;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		gap: 10px;
		padding: 6px 12px 6px 12px;
		box-sizing: border-box;
		border: 1px solid rgba(231, 243, 255, 1);
		border-radius: 4px;
		background: rgba(246, 250, 255, 1);
		.box-footer-left {
			width: 19px;
			height: 20px;
			img {
				width: 100%;
				height: 100%;
			}
		}
		.box-footer-center {
			width: 666px;
			height: 24px;
			color: rgba(5, 95, 194, 1);
			font-family: Microsoft YaHei;
			font-size: 16px;
			font-weight: 400;
			line-height: 24px;
			letter-spacing: 0px;
			text-align: justify;
		}
		.box-footer-right {
			width: 24px;
			height: 24px;
			img {
				width: 100%;
				height: 100%;
			}
		}
	}
	.top {
		display: flex;
		justify-content: center;
		gap: 16px;
		margin: 16px auto;
		.box1 {
			.box1-main {
				height: 304px;
				// background: orange;
			}
		}
		.box2 {
			.box2-main {
				height: 304px;
				// background: orange;
			}
		}
	}
	.bottom {
		display: flex;
		justify-content: center;
		gap: 16px;
		margin: 0 auto;
		margin-bottom: 16px;
		.box3 {
			.box3-main {
				height: 304px;
				// background: orange;
			}
		}
		.box4 {
			.box4-main {
				height: 304px;
				// background: orange;
			}
		}
	}
}
</style>