<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">{{ `${totalCaseNum}项` }}</div>
			</div>
			<div class="item">
				<div class="item-left">{{ "仍在调查中的案件" }}</div>
				<div class="item-right">{{ `${onCaseNum}项` }}</div>
			</div>
			<div class="item">
				<div class="item-left">{{ "涉及中企数量" }}</div>
				<div class="item-right">{{ `${relateCnNum}家` }}</div>
			</div>
			<div class="item">
				<div class="item-left">{{ "胜诉/和解率" }}</div>
				<div class="item-right">{{ `${windRate}/${cancelRate}` }}</div>
			</div>
		</div>
		<div class="center">
			<div class="box1" v-loading="box1Loading">
				<AnalysisBox title="美国对华337调查年度趋势">
					<div class="box1-main" id="chart1"></div>
					<div class="box1-footer">
						<TipTab />
					</div>
				</AnalysisBox>
			</div>
			<div class="box2" v-loading="box2Loading">
				<AnalysisBox title="调查案件领域分布">
					<div class="box2-main" id="chart2"></div>
					<div class="box2-footer">
						<TipTab />
					</div>
				</AnalysisBox>
			</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 class="box3-footer">
					<TipTab />
				</div> -->
				<AnalysisBox title="中国公司受调查情况">
					<template #header-btn>
						<div class="header-btn-box">
							<div class="btn" :class="{ btnActive: btnActiveName === '调查次数' }" @click="handleClickBox3Btn('调查次数')">
								调查次数
							</div>
							<div class="btn" :class="{ btnActive: btnActiveName === '注册地分布' }" @click="handleClickBox3Btn('注册地分布')">
								注册地分布
							</div>
						</div>
					</template>
					<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 class="box3-footer">
						<TipTab />
					</div>
				</AnalysisBox>
			</div>
			<div class="box4" v-loading="box4Loading">
				<AnalysisBox title="调查结果分布">
					<div class="box4-main" id="chart4"></div>
					<div class="box4-footer">
						<TipTab />
					</div>
				</AnalysisBox>
			</div>
		</div>
		<div class="graph-box" id="graphChart">

		</div>
	</div>
</template>
<script setup>
import { ref, onMounted, nextTick } from "vue";
import setChart from "@/utils/setChart";
import TipTab from "@/components/base/TipTab/index.vue"
import AnalysisBox from "@/components/base/BoxBackground/AnalysisBox.vue"

import { getStatCount, 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";

import CompanyImg from "./symbol.png"

import getGraphChart from "./utils/graphChart";
import getGraph from "./utils/graph";

const box1Loading = ref(false);
const box2Loading = ref(false);
const box3Loading = ref(false);
const box4Loading = ref(false);
const btnActiveName = ref("调查次数");

const nodes = ref([
	{
		id: 0,
		name: "泰丰先行",
		// category: 0,
		symbolSize: 30,
		value: 8,
		symbol: `image://${CompanyImg}`,
	},
	{
		id: 1,
		name: "国轩高科",
		// category: 0,
		symbolSize: 30,
		value: 9,
		symbol: `image://${CompanyImg}`,
	},
	{
		id: 2,
		name: "智方纳米",
		// category: 2,
		symbolSize: 30,
		value: 7,
		symbol: `image://${CompanyImg}`,
	},
	{
		id: 3,
		name: "香百科技",
		// category: 1,
		symbolSize: 30,
		value: 6,
		symbol: `image://${CompanyImg}`,
	},
	{
		id: 4,
		name: "格林滨",
		// category: 2,
		symbolSize: 30,
		value: 6,
		symbol: `image://${CompanyImg}`,
	},
	{
		id: 5,
		name: "江西紫宸",
		// category: 2,
		symbolSize: 30,
		value: 7,
		symbol: `image://${CompanyImg}`,
	},
	{
		id: 6,
		name: "紫江企业",
		// category: 4,
		symbolSize: 30,
		value: 6,
		symbol: `image://${CompanyImg}`,
	},
	{
		id: 7,
		name: "大而美法案",
		// category: 4,
		symbolSize: 50,
		value: 5,
		symbol: `image://${CompanyImg}`,
	},
	{
		id: 8,
		name: "比亚迪",
		// category: 0,
		symbolSize: 30,
		value: 10,
		symbol: `image://${CompanyImg}`,
	},
	{
		id: 9,
		name: "铜陵有色",
		// category: 3,
		symbolSize: 30,
		value: 8,
		symbol: `image://${CompanyImg}`,
	},
	{
		id: 10,
		name: "长盛精密",
		// category: 1,
		symbolSize: 30,
		value: 7,
		symbol: `image://${CompanyImg}`,
	},
	{
		id: 11,
		name: "天合光能",
		// category: 0,
		symbolSize: 30,
		value: 8,
		symbol: `image://${CompanyImg}`,
	},
	{
		id: 12,
		name: "昆仑化学",
		// category: 2,
		symbolSize: 30,
		value: 6,
		symbol: `image://${CompanyImg}`,
	},
	{
		id: 13,
		name: "嘉源科技",
		// category: 1,
		symbolSize: 30,
		value: 6,
		symbol: `image://${CompanyImg}`,
	},
	{
		id: 14,
		name: "华阳集团",
		// category: 4,
		symbolSize: 30,
		value: 7,
		symbol: `image://${CompanyImg}`,
	},
	{
		id: 15,
		name: "海辰智能",
		// category: 1,
		symbolSize: 30,
		value: 7,
		symbol: `image://${CompanyImg}`,
	},
]);

const links = ref([
	{ source: 1, target: 7, label: { show: true, formatter: '合作' } },
	{ source: 2, target: 7, label: { show: true, formatter: '持股' } },
	{ source: 3, target: 7, label: { show: true, formatter: '合作' } },
	{ source: 4, target: 7, lineStyle: { type: 'dashed', color: '#d32f2f' }, label: { show: true, formatter: '从属' } },
	{ source: 5, target: 7, label: { show: true, formatter: '合作' } },
	{ source: 6, target: 7, label: { show: true, formatter: '持股' } },
	{ source: 0, target: 7, label: { show: true, formatter: '持股' } },
	{ source: 8, target: 7, label: { show: true, formatter: '合作' } },
	{ source: 9, target: 7, lineStyle: { type: 'dashed', color: '#d32f2f' }, label: { show: true, formatter: '从属' } },
	{ source: 10, target: 7, lineStyle: { type: 'dashed', color: '#d32f2f' }, label: { show: true, formatter: '合作' } },
	{ source: 11, target: 7, label: { show: true, formatter: '合作' } },
	{ source: 12, target: 7, label: { show: true, formatter: '合作' } },
	{ source: 13, target: 7, label: { show: true, formatter: '合作' } },
	{ source: 14, target: 7, label: { show: true, formatter: '合作' } },
	{ source: 15, target: 7, label: { show: true, formatter: '合作', color: 'red', borderColor: 'red'  } },
]);


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 totalCaseNum = ref(0)
const onCaseNum = ref(0)
const relateCnNum = ref(0)
const cancelRate = ref('0%')
const windRate = ref('0%')

const handleGetStat = async () => {
	const params = {
		sortCode: '337'
	}
	try {
		const res = await getStatCount(params)
		console.log('337数量统计', res);
		if (res.code === 200 && res.data) {
			totalCaseNum.value = res.data.allCaseNum
			onCaseNum.value = res.data.underCaseNum
			relateCnNum.value = res.data.involvinChinese
			cancelRate.value = res.data.cancelNum
			windRate.value = res.data.winRate
		}

	} catch (error) {
		console.error('337数量统计error', error);

	}
}

handleGetStat()

const handleGetStatcnOrgCount = async (type) => {
	box3Loading.value = true;
	try {
		const res = await getStatcnOrgCount({
			type,
			sortCode: "337"
		});
		console.log('中国公司受调查情况', res);

		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 handleGetStatArea = async () => {
	box2Loading.value = true;
	try {
		const res = await getStatArea({
			sortCode: "337"
		});
		if (res.code === 200 && res.data) {
			console.log('调查案件领域分布', res);

			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);
				setChart(chart2, "chart2");
			});
		}
	} catch (error) {
		console.error("获取调查案件领域分布失败", error);
	} finally {
		box2Loading.value = false;
	}
};

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

const mapData = ref([]);

const chart4Data = ref([]);

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);
				setChart(chart4, "chart4");
			});
		}
	} catch (error) {
		console.error("获取调查结果分布失败", error);
	} finally {
		box4Loading.value = false;
	}
};

onMounted(() => {

	let graph = getGraphChart(nodes.value, links.value)
	setChart(graph, 'graphChart')


	handleGetStatNum();
	handleGetStatArea();
	handleGetStatcnOrgCount(btnActiveName.value === "调查次数" ? "01" : "02");
	handleGetSearchResult();
});
</script>

<style lang="scss" scoped>
.wrap {
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: relative;

	.graph-box {
		position: absolute;
		top: 100px;
		left: 100px;
		width: 1000px;
		height: 600px;
		border-radius: 10px;
		z-index: 9999;
		background: #fff;
	}

	.top {
		display: flex;
		justify-content: space-between;
		margin: 16px 160px;

		.item {
			width: 388px;
			height: 80px;
			border-radius: 10px;
			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;

			.box1-main {
				height: 263px;
			}

			.box1-footer {
				height: 40px;
			}
		}

		.box2 {
			width: 792px;
			height: 360px;

			.box2-main {
				width: 792px;
				height: 263px;
				box-sizing: border-box;
				padding: 0 24px;
			}

			.box2-footer {
				height: 40px;
			}
		}
	}

	.footer {
		margin: 16px 160px;
		display: flex;
		justify-content: space-between;

		.box3 {
			width: 792px;
			height: 360px;


			.header-btn-box {
				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);
				}
			}

			.box3-main {
				height: 263px;
			}

			.box3-main1 {
				height: 263px;
				display: flex;

				.box3-main1-left {
					padding-top: 24px;
					width: 380px;
					height: 263px;
					// 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: 263px;
					box-sizing: border-box;
					padding-top: 24px;
					padding-right: 24px;
				}

				.box3-footer {
					height: 40px;
				}
			}
		}

		.box4 {
			width: 792px;
			height: 360px;

			.box4-main {
				height: 263px;
				box-sizing: border-box;
				padding: 0 24px;
			}

			.box4-footer {
				height: 40px;
			}
		}
	}
}
</style>