<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" v-loading="box1Loading">
				<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" v-loading="box2Loading">
				<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" v-loading="box3Loading">
				<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" v-loading="box4Loading">
				<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 { getStatcnOrgCount, getSearchResult, getStatArea, getStatNum } from "@/api/marketAccessRestrictions";

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 box1Loading = ref(false);
const box2Loading = ref(false);
const box3Loading = ref(false);
const box4Loading = ref(false);
const btnActiveName = ref("注册地分布");

const provinceCoords = {
	"北京": [116.46, 39.92],
	"上海": [121.48, 31.22],
	"天津": [117.2, 39.13],
	"重庆": [106.54, 29.59],
	"河北": [114.48, 38.03],
	"山西": [112.53, 37.87],
	"内蒙古": [111.65, 40.82],
	"辽宁": [123.38, 41.8],
	"吉林": [125.35, 43.88],
	"黑龙江": [126.63, 45.75],
	"江苏": [118.78, 32.04],
	"浙江": [120.19, 30.26],
	"安徽": [117.27, 31.86],
	"福建": [119.3, 26.08],
	"江西": [115.89, 28.68],
	"山东": [117.0, 36.65],
	"河南": [113.65, 34.76],
	"湖北": [114.31, 30.52],
	"湖南": [113.0, 28.21],
	"广东": [113.23, 23.16],
	"广西": [108.33, 22.84],
	"海南": [110.35, 20.02],
	"四川": [104.06, 30.67],
	"贵州": [106.71, 26.57],
	"云南": [102.73, 25.04],
	"西藏": [91.11, 29.97],
	"陕西": [108.95, 34.27],
	"甘肃": [103.73, 36.03],
	"青海": [101.74, 36.56],
	"宁夏": [106.27, 38.47],
	"新疆": [87.68, 43.77],
	"香港": [114.17, 22.28],
	"澳门": [113.54, 22.19],
	"台湾": [121.5, 25.05]
};

const handleGetStatcnOrgCount = async (type) => {
	box3Loading.value = true;
	try {
		const res = await getStatcnOrgCount({
			type,
			sortCode: "337"
		});
		if (res.code === 200 && res.data) {
			if (type === "01") {
				chart3Data.value = {
					name: res.data.map(item => item.ORGNAME),
					value: res.data.map(item => item.ORGCOUNT)
				};
				nextTick(() => {
					let chart3 = getBarChart(chart3Data.value.name, chart3Data.value.value);
					setChart(chart3, "chart3");
				});
			} else if (type === "02") {
				mapData.value = res.data.map(item => {
					const name = item.ORGPROVINCE//.replace(/省|市|自治区|特别行政区/g, "");
					return {
						name: item.ORGPROVINCE,
						value: item.PROVINCECOUNT,
						coord: provinceCoords[name] || [0, 0]
					};
				});
				nextTick(() => {
					let chartMap = getMapChart(mapData.value);
					setChart(chartMap, "chartMap");
				});
			}
		}
	} catch (error) {
		console.error("获取中国公司受调查情况失败", error);
	} finally {
		box3Loading.value = false;
	}
};

const handleClickBox3Btn = name => {
	btnActiveName.value = name;
	if (name === "调查次数") {
		handleGetStatcnOrgCount("01");
	} else {
		handleGetStatcnOrgCount("02");
	}
};

const chart1Data = ref({
	title: [],
	data: []
});

const handleGetStatNum = async () => {
	box1Loading.value = true;
	try {
		const res = await getStatNum({
			byYorM: "12",
			sortCode: "337"
		});
		if (res.code === 200 && res.data) {
			const sortedData = res.data.sort((a, b) => parseInt(a.searchYorM) - parseInt(b.searchYorM));
			chart1Data.value.title = sortedData.map(item => item.searchYorM);
			chart1Data.value.data = [
				{
					name: "调查数量",
					value: sortedData.map(item => item.searchCount)
				}
			];
			nextTick(() => {
				let chart1 = getMultiLineChart(chart1Data.value.title, chart1Data.value.data[0].value);
				setChart(chart1, "chart1");
			});
		}
	} catch (error) {
		console.error("获取年度趋势数据失败", error);
	} finally {
		box1Loading.value = false;
	}
};

const chart2Data = ref([]);
const chart2ColorList = ref(["#69B1FF", "#FFC069", "#87E8DE", "#597EF7", "#D6E4FF", "#FF7875", "#B37FEB", "#FFA39E"]);

const handleGetStatArea = async () => {
	box2Loading.value = true;
	try {
		const res = await getStatArea({
			sortCode: "337"
		});
		if (res.code === 200 && res.data) {
			chart2Data.value = res.data
				.filter(item => item.SORTCODE === "337" || item.SORTNAME === "337调查")
				.map(item => ({
					name: item.AREANAME,
					value: item.AREACOUNT
				}));
			nextTick(() => {
				let chart2 = getPieChart(chart2Data.value, chart2ColorList.value);
				setChart(chart2, "chart2");
			});
		}
	} catch (error) {
		console.error("获取调查案件领域分布失败", error);
	} finally {
		box2Loading.value = false;
	}
};

const chart3Data = ref({
	name: [],
	value: []
});

const mapData = ref([]);

const chart4Data = ref([]);
const chart4ColorList = ref(["#69B1FF", "#FFC069", "#87E8DE", "#597EF7", "#D6E4FF", "#FF7875", "#B37FEB", "#FFA39E"]);

const handleGetSearchResult = async () => {
	box4Loading.value = true;
	try {
		const res = await getSearchResult({
			sortCode: "337"
		});
		if (res.code === 200 && res.data) {
			chart4Data.value = res.data.map(item => ({
				name: item.RESULTNAME,
				value: item.RESULTNUM
			}));
			nextTick(() => {
				let chart4 = getPieChart(chart4Data.value, chart4ColorList.value);
				setChart(chart4, "chart4");
			});
		}
	} catch (error) {
		console.error("获取调查结果分布失败", error);
	} finally {
		box4Loading.value = false;
	}
};

onMounted(() => {
	handleGetStatNum();

	handleGetStatArea();

	handleGetStatcnOrgCount(btnActiveName.value === "调查次数" ? "01" : "02");
	handleGetSearchResult();
});
</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>