<template>
	<div class="wrap">
		<div class="top">
			<div class="item">
				<div class="item-left-box">
					<div class="item-left1">{{ "总调查案件数" }}</div>
					<div class="item-left2">{{ "1980-2025" }}</div>
				</div>
				<div class="item-right">{{ "452项" }}</div>
			</div>
			<div class="item">
				<div class="item-left">{{ "仍在调查中的案件" }}</div>
				<div class="item-right">{{ "28项" }}</div>
			</div>
			<div class="item">
				<div class="item-left">{{ "涉及中企数量" }}</div>
				<div class="item-right">{{ "326家" }}</div>
			</div>
			<div class="item">
				<div class="item-left">{{ "胜诉/和解率" }}</div>
				<div class="item-right">{{ "38%" }}</div>
			</div>
		</div>
		<div class="center">
			<div class="box1">
				<div class="box-header">
					<div class="header-left"></div>
					<div class="title">美国对华337调查年度趋势</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="chart1"></div>
			</div>
			<div class="box2">
				<div class="box-header">
					<div class="header-left"></div>
					<div class="title">调查案件领域分布</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="chart2"></div>
			</div>
		</div>
		<div class="footer">
			<div class="box3">
				<div class="box-header">
					<div class="header-left"></div>
					<div class="title">中国公司受调查情况</div>
					<div class="header-btn-box">
						<div
							class="btn"
							:class="{ btnActive: btnActiveName === '调查次数' }"
							@click="handleClickBox3Btn('调查次数')"
						>
							调查次数
						</div>
						<div
							class="btn"
							:class="{ btnActive: btnActiveName === '注册地分布' }"
							@click="handleClickBox3Btn('注册地分布')"
						>
							注册地分布
						</div>
					</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 v-show="btnActiveName === '调查次数'" class="box3-main" id="chart3"></div>
				<div v-show="btnActiveName === '注册地分布'" class="box3-main1">
					<div class="box3-main1-left">
						<div class="box3-main1-left-item" v-for="(item, index) in mapData" :key="index">
							<div class="box3-main1-left-item-left">{{ index + 1 }}</div>
							<div class="box3-main1-left-item-center">{{ item.name }}</div>
							<div class="box3-main1-left-item-right">
								{{ item.value + "次" }}
							</div>
						</div>
					</div>
					<div class="box3-main1-right" id="chartMap"></div>
				</div>
			</div>
			<div class="box4">
				<div class="box-header">
					<div class="header-left"></div>
					<div class="title">调查结果分布</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="chart4"></div>
			</div>
		</div>
	</div>
</template>
<script setup>
import { ref, onMounted, nextTick } from "vue";
import * as echarts from "echarts";

import ChinaJson from "../assets/json/China.json";

import getMultiLineChart from "./utils/multiLineChart";
import getBarChart from "./utils/barChart";
import getPieChart from "./utils/piechart";
import getMapChart from "./utils/mapChart";

// 绘制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 btnActiveName = ref("注册地分布");
const handleClickBox3Btn = name => {
	btnActiveName.value = name;
	if (name === "调查次数") {
		nextTick(() => {
			let chart3 = getBarChart(chart3Data.value.name, chart3Data.value.value);
			setChart(chart3, "chart3");
		});
	} else {
		nextTick(() => {
			let chartMap = getMapChart(mapData.value);
			setChart(chartMap, "chartMap");
		});
	}
};

const chart1Data = ref({
	title: ["2014", "2015", "2016", "2017", "2018", "2019", "2020", "2021", "2022", "2023", "2024", "2025"],
	data: [
		{
			name: "提出法案",
			value: [145, 52, 84, 99, 71, 96, 128, 144, 140, 168, 188, 172]
		}
	]
});

const chart2Data = 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 chart2ColorList = ref(["#69B1FF", "#FFC069", "#87E8DE", "#597EF7", "#D6E4FF", "#FF7875", "#B37FEB", "#FFA39E"]);

const chart3Data = ref({
	name: [
		"华为技术有限公司",
		"大疆创新科技有限公司",
		"TCL科技集团股份有限公司",
		"中兴通讯股份有限公司",
		"联想集团",
		"比亚迪集团",
		"宁德时代新能源科技股份有限公司",
		"晶科智能科技有限公司"
	],
	value: [42, 35, 28, 19, 15, 12, 11, 8]
});

const mapData = ref([
	{ name: "北京", value: 10, coord: [116.46, 39.92] },
	{ name: "上海", value: 9, coord: [121.48, 31.22] },
	{ name: "广东", value: 15, coord: [113.23, 23.16] },
	{ name: "江苏", value: 30, coord: [118.78, 32.04] },
	{ name: "浙江", value: 20, coord: [120.19, 30.26] },
	{ name: "四川", value: 4, coord: [104.06, 30.67] },
	{ name: "陕西", value: 1, coord: [108.95, 34.27] },
	{ name: "辽宁", value: 3, coord: [123.38, 41.8] }
	// { name: "湖北", value: 2, coord: [114.31, 30.52] },
	// { name: "山东", value: 12, coord: [117.0, 36.65] },
]);

const chart4Data = ref([
	{ name: "和解/同意令", value: 50 },
	{ name: "裁定不侵权", value: 46 },
	{ name: "裁定侵权", value: 40 },
	{ name: "申诉方撤诉", value: 31 },
	{ name: "其他", value: 24 }
]);
const chart4ColorList = ref(["#69B1FF", "#FFC069", "#87E8DE", "#D6E4FF", "#FFA39E"]);

onMounted(() => {
	let chart1 = getMultiLineChart(chart1Data.value.title, chart1Data.value.data[0].value);
	setChart(chart1, "chart1");

	let chart2 = getPieChart(chart2Data.value, chart2ColorList.value);
	setChart(chart2, "chart2");

	let chart3 = getBarChart(chart3Data.value.name, chart3Data.value.value);
	setChart(chart3, "chart3");

	let chartMap = getMapChart(mapData.value);
	setChart(chartMap, "chartMap");

	let chart4 = getPieChart(chart4Data.value, chart4ColorList.value);
	setChart(chart4, "chart4");
});
</script>

<style lang="scss" scoped>
.wrap {
	width: 100%;
	height: 100%;
	overflow: hidden;
	.top {
		display: flex;
		justify-content: space-between;
		margin: 16px 160px;
		.item {
			width: 388px;
			height: 80px;
			border-radius: 4px;
			box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
			background: rgba(255, 255, 255, 1);
			position: relative;
			display: flex;
			justify-content: space-between;
			&::before {
				position: absolute;
				content: "";
				width: 4px;
				height: 49px;
				background: rgba(10, 87, 166, 1);
				left: 0;
				top: 15px;
			}
			.item-left {
				margin-left: 30px;
				margin-top: 25px;
				height: 24px;
				color: rgba(59, 65, 75, 1);
				font-family: Microsoft YaHei;
				font-size: 16px;
				font-weight: 700;
				line-height: 24px;
			}
			.item-right {
				margin-top: 28px;
				margin-right: 35px;
				height: 24px;
				color: rgba(10, 87, 166, 1);
				font-family: Microsoft YaHei;
				font-size: 30px;
				font-weight: 700;
				line-height: 24px;
			}
			.item-left-box {
				margin-left: 30px;
				.item-left1 {
					margin-top: 13px;
					height: 24px;
					color: rgba(59, 65, 75, 1);
					font-family: Microsoft YaHei;
					font-size: 16px;
					font-weight: 700;
					line-height: 24px;
				}
				.item-left2 {
					height: 2px;
					color: rgba(95, 101, 108, 1);
					font-family: Microsoft YaHei;
					font-size: 16px;
					font-weight: 400;
					line-height: 24px;
				}
			}
		}
	}
	.box-header {
		height: 56px;
		display: flex;
		position: relative;
		.header-left {
			margin-top: 20px;
			width: 8px;
			height: 16px;
			border-radius: 0 4px 4px 0;
			background: rgba(10, 87, 166, 1);
		}
		.title {
			margin-left: 22px;
			margin-top: 20px;
			height: 16px;
			line-height: 16px;
			color: rgba(10, 87, 166, 1);
			font-family: Microsoft YaHei;
			font-size: 16px;
			font-weight: 600;
			line-height: 16px;
		}
		.header-btn-box {
			position: absolute;
			top: 14px;
			right: 120px;
			display: flex;
			.btn {
				margin-left: 8px;
				height: 28px;
				padding: 0 8px;
				box-sizing: border-box;
				border: 1px solid rgba(230, 231, 232, 1);
				border-radius: 4px;
				background: rgba(255, 255, 255, 1);
				text-align: center;
				line-height: 28px;
				color: rgba(59, 65, 75, 1);
				font-family: Microsoft YaHei;
				font-size: 16px;
				font-weight: 400;
				cursor: pointer;
			}
			.btnActive {
				border: 1px solid rgba(10, 87, 166, 1);
				background: rgba(246, 250, 255, 1);
				color: rgba(10, 87, 166, 1);
			}
		}
		.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%;
				}
			}
		}
	}
	.center {
		display: flex;
		justify-content: space-between;
		margin: 0 160px;
		.box1 {
			width: 792px;
			height: 360px;
			border-radius: 4px;
			box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
			background: rgba(255, 255, 255, 1);
			.box1-main {
				height: 300px;
			}
		}
		.box2 {
			width: 792px;
			height: 360px;
			border-radius: 4px;
			box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
			background: rgba(255, 255, 255, 1);
			.box2-main {
				height: 300px;
				// width: 752px;
				box-sizing: border-box;
				padding: 0 20px;
			}
		}
	}
	.footer {
		margin: 16px 160px;
		display: flex;
		justify-content: space-between;
		.box3 {
			width: 792px;
			height: 360px;
			border-radius: 4px;
			box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
			background: rgba(255, 255, 255, 1);
			.box3-main {
				height: 300px;
			}
			.box3-main1 {
				height: 300px;
				display: flex;
				.box3-main1-left {
					width: 380px;
					height: 300px;
					overflow-y: auto;
					overflow-x: hidden;
					.box3-main1-left-item {
						display: flex;
						height: 36px;
						margin-left: 20px;
						.box3-main1-left-item-left {
							width: 24px;
							height: 24px;
							border-radius: 12px;
							margin-left: 12px;
							margin-top: 6px;
							background: #e7f3ff;
							color: #0a57a6;
							text-align: center;
							line-height: 24px;
						}
						.box3-main1-left-item-center {
							height: 36px;
							line-height: 36px;
							width: 220px;
							margin-left: 12px;
						}
						.box3-main1-left-item-right {
							width: 80px;
							box-sizing: border-box;
							padding-right: 10px;
							text-align: right;
						}
					}
				}
				.box3-main1-right {
					width: 390px;
					height: 300px;
				}
			}
		}
		.box4 {
			width: 792px;
			height: 360px;
			border-radius: 4px;
			box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
			background: rgba(255, 255, 255, 1);
			.box4-main {
				height: 300px;
				box-sizing: border-box;
				padding: 0 20px;
			}
		}
	}
}
</style>