<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">232调查数量年度变化趋势</div>
					<div class="header-btn-box">
						<div
							class="btn"
							:class="{ btnActive: btnActiveName === '发起调查' }"
							@click="handleClickBox1Btn('发起调查')"
						>
							{{ "发起调查" }}
						</div>
						<div
							class="btn"
							:class="{ btnActive: btnActiveName === '结束调查' }"
							@click="handleClickBox1Btn('结束调查')"
						>
							{{ "结束调查" }}
						</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 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-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="chart3"></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 handleClickBox1Btn = name => {
	btnActiveName.value = name;
};

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: "税率25%+", value: 50 },
	{ name: "税率11%-25%", value: 46 },
	{ name: "税率1%-10%", value: 22 },
	{ name: "税率0%", value: 10 },
]

);
const chart3ColorList = ref(["#69B1FF", "#FFC069", "#87E8DE", "#FFA39E"]);

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 = getPieChart(chart3Data.value, chart3ColorList.value);
	setChart(chart3, "chart3");

	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: var(--color-main-active);
				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: var(--color-main-active);
				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: 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;
			line-height: 26px;
			color: var(--color-main-active);
			font-family: Microsoft YaHei;
			font-size: 20px;
			font-weight: 700;

		}
		.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 var(--color-main-active);
				background: rgba(246, 250, 255, 1);
				color: var(--color-main-active);
			}
		}
		.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>