<template>
	<div class="wrap">
		<div class="content-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}` }}</div>
			</div>
		</div>
		<div class="content-list">
			<div class="content-item" v-loading="box1Loading">
				<AnalysisBox title="数量变化趋势">
					<template #header-btn>
						<div class="header-btn-box">
							<ActionButton :type="box1Paarams.byYorM === '12' ? 'active' : 'normal'" name="按年度" @click="handleGetStatNum('12')"></ActionButton>
							<ActionButton :type="box1Paarams.byYorM === '0' ? 'active' : 'normal'" name="按调查" @click="handleGetStatNum('0')"></ActionButton>
						</div>
					</template>
					<div class="box-main">
						<div class="box-head" ref="chart1"></div>
						<TipTab text="美对华337调查案件的数量变化趋势，数据来源：美国国际贸易委员会官网" style="margin-top: 16px;" />
						<AiReport ref="refAiReport1"></AiReport>
					</div>
				</AnalysisBox>
			</div>
			<div class="content-item" v-loading="box2Loading">
				<AnalysisBox title="领域分布情况">
					<template #header-btn>
						<el-select v-model="box2Paarams.years" @change="handleGetStatArea()" style="width:120px; margin-right:12px;">
							<el-option v-for="item in yearList" :key="item.value" :label="item.label" :value="item.value" />
						</el-select>
					</template>
					<div class="box-main">
						<div class="box-head" ref="chart2"></div>
						<TipTab text="美对华337调查案件的领域分布情况，数据来源：美国国际贸易委员会官网" style="margin-top: -16px;" />
						<AiReport ref="refAiReport2"></AiReport>
					</div>
				</AnalysisBox>
			</div>
		</div>
		<div class="content-list">
			<div class="content-item" v-loading="box3Loading">
				<AnalysisBox title="中国实体分布情况">
					<template #header-btn>
						<el-select v-model="box3Paarams.years" @change="handleGetStatcnOrgCount()" style="width:120px; margin-right:12px;">
							<el-option v-for="item in yearList" :key="item.value" :label="item.label" :value="item.value" />
						</el-select>
						<el-select v-model="box3Paarams.type" @change="handleGetStatcnOrgCount()" style="width:120px; margin-right:12px;">
							<el-option label="调查次数" value="01" />
							<el-option label="注册地分布" value="02" />
						</el-select>
					</template>
					<div class="box-main">
						<div v-show="box3Paarams.type === '01'" class="box-head" id="chart3"></div>
						<div v-show="box3Paarams.type === '02'" class="box-head2">
							<div class="map-box-left">
								<div class="map-box-left-item" v-for="(item, index) in mapData" :key="index">
									<div class="map-box-left-item-left">{{ index + 1 }}</div>
									<div class="map-box-left-item-center">{{ item.name }}</div>
									<div class="map-box-left-item-right">
										{{ item.value + "次" }}
									</div>
								</div>
							</div>
							<div class="map-box-right" id="chartMap"></div>
						</div>
						<TipTab text="美对华337调查案件的中国实体分布情况，数据来源：美国国际贸易委员会官网" />
						<AiReport ref="refAiReport3"></AiReport>
					</div>
				</AnalysisBox>
			</div>
			<div class="content-item" v-loading="box4Loading">
				<AnalysisBox title="调查结果分布">
					<template #header-btn>
						<el-select v-model="box4Paarams.years" @change="handleGetSearchResult()" style="width:120px; margin-right:12px;">
							<el-option v-for="item in yearList" :key="item.value" :label="item.label" :value="item.value" />
						</el-select>
					</template>
					<div class="box-main">
						<div class="box-head" ref="chart4"></div>
						<TipTab text="美对华337调查案件的调查结果分布情况，数据来源：美国国际贸易委员会官网" style="margin-top: -16px;" />
						<AiReport ref="refAiReport4"></AiReport>
					</div>
				</AnalysisBox>
			</div>
		</div>
	</div>
</template>
<script setup>
import { ref, onMounted, nextTick, reactive } from "vue";
import setChart from "@/utils/setChart";
import TipTab from "@/components/base/TipTab/index.vue"

import {
	getStatCount,
	getStatcnOrgCount,
	getSearchResult,
	getStatArea,
	getStatNum
} from "@/api/marketAccessRestrictions";

import createLineChart from "@/views/marketAccessRestrictions/utils/baseLineChart";
import createPieChart from "@/views/marketAccessRestrictions/utils/basePiechart.js";
import getBarChart from "./utils/barChart";
import getMapChart from "./utils/mapChart";
import AiReport from '@/views/marketAccessRestrictions/marketAccessHome/com/AiReport.vue';
import { getNearYearList } from "@/views/marketAccessRestrictions/utils/index.ts";

const yearList = getNearYearList();
// 获取AI智能报告
const refAiReport1 = ref(null)
const refAiReport2 = ref(null)
const refAiReport3 = ref(null)
const refAiReport4 = ref(null)

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 windRate = ref('0%')
const handleGetStat = async () => {
	try {
		const res = await getStatCount({sortCode: '337'})
		console.log('数量统计', res);
		if (res.code === 200 && res.data) {
			totalCaseNum.value = res.data.allCaseNum
			onCaseNum.value = res.data.underCaseNum
			relateCnNum.value = res.data.involvinChinese
			windRate.value = res.data.winRate
		}
	} catch (error) {}
}

const chart1 = ref(null);
const box1Paarams = reactive({
	sortCode: 337,
	byYorM: '12'
})
const box1Loading = ref(false);
const handleGetStatNum = async (type) => {
	if (type) box1Paarams.byYorM = type
	box1Loading.value = true;
	let chartData = { title: [], list: [] }
	try {
		const res = await getStatNum(box1Paarams);
		console.log('数量变化趋势', res);
		if (res.code === 200 && res.data) {
			const sortedData = res.data.sort((a, b) => parseInt(a.searchYorM) - parseInt(b.searchYorM));
			chartData.title = sortedData.map(item => item.searchYorM);
			chartData.list = [
				{ name: "调查数量", value: sortedData.map(item => item.searchCount) }
			];
		} else {
			chartData.title = [];
			chartData.list = [];
		}
	} catch (error) {
			chartData.title = [];
			chartData.list = [];
	}
	refAiReport1.value?.onDataInfo({ type: "折线图", name: "数量变化趋势", data: chartData })
	nextTick(() => { createLineChart(chart1, chartData) });
	box1Loading.value = false;
};

const chart2 = ref(null);
const box2Paarams = reactive({
	sortCode: 337,
	years: '2025'
})
const box2Loading = ref(false);
const handleGetStatArea = async () => {
	box2Loading.value = true;
	let chartData = []
	try {
		const res = await getStatArea(box2Paarams);
		console.log('领域分布情况', res);
		if (res.code === 200 && res.data) {
			chartData = res.data.map(item => ({ name: item.areaname, value: item.areacount }));
		} else {
			chartData = [];
		}
	} catch (error) {
		chartData = [];
	}
	refAiReport2.value?.onDataInfo({ type: "环形图", name: "领域分布情况", data: chartData })
	nextTick(() => { createPieChart(chart2, chartData) });
	box2Loading.value = false;
};

const mapData = ref([]);
const box3Paarams = reactive({
	sortCode: 337,
	years: '2025',
	type: '01'
})
const box3Loading = ref(false);
const handleGetStatcnOrgCount = async () => {
	box3Loading.value = true;
	if (box3Paarams.type === "01") {
		let chartData = { name: [], value: [] }
		try {
			const res = await getStatcnOrgCount(box3Paarams);
			console.log('中国实体分布情况', res);
			if (res.code === 200 && res.data) {
				chartData.name = res.data.map(item => item.ORGNAME)
				chartData.value = res.data.map(item => item.ORGCOUNT)
			} else {
				chartData.name = [];
				chartData.value = [];
			}
		} catch (error) {
			chartData.name = [];
			chartData.value = [];
		}
		refAiReport3.value?.onDataInfo({ type: "柱状图", name: "中国实体分布情况", data: chartData })
		nextTick(() => {
			let chart3 = getBarChart(chartData.name, chartData.value);
			setChart(chart3, "chart3");
		});
	} else if (box3Paarams.type === "02") {
		try {
			const res = await getStatcnOrgCount(box3Paarams);
			console.log('中国实体分布情况', res);
			if (res.code === 200 && res.data) {
				mapData.value = res.data.map(item => {
					return {
						name: item.ORGPROVINCE,
						value: item.PROVINCECOUNT,
						coord: provinceCoords[item.ORGPROVINCE] || [0, 0]
					};
				});
			} else {
				mapData.value = [];
			}
		} catch (error) {
			mapData.value = [];
		}
		refAiReport3.value?.onDataInfo({ type: "地图", name: "中国实体分布情况", data: mapData.value })
		nextTick(() => {
			let chartMap = getMapChart(mapData.value);
			setChart(chartMap, "chartMap");
		});
	}
	box3Loading.value = false;
};

const chart4 = ref(null)
const box4Paarams = reactive({
	sortCode: 337,
	years: '2025'
})
const box4Loading = ref(false);
const handleGetSearchResult = async () => {
	box4Loading.value = true;
	let chartData = []
	try {
		const res = await getSearchResult(box4Paarams);
		console.log('调查结果分布', res);
		if (res.code === 200 && res.data) {
			chartData = res.data.map(item => ({ name: item.RESULTNAME, value: item.RESULTNUM }));
		} else {
			chartData = [];
		}
	} catch (error) {
		chartData = [];
	}
	refAiReport4.value?.onDataInfo({ type: "环形图", name: "调查结果分布", data: chartData })
	nextTick(() => { createPieChart(chart4, chartData) });
	box4Loading.value = false;
};

onMounted(() => {
	handleGetStat()
	handleGetStatNum();
	handleGetStatArea();
	handleGetStatcnOrgCount();
	handleGetSearchResult();
});
</script>

<style lang="scss" scoped>
.wrap {
	width: 1600px;
	margin: 0 auto;
	padding: 20px 0;
	display: flex;
	flex-direction: column;
	gap: 16px;

	.content-top {
		display: flex;
		gap: 16px;

		.item {
			width: 20px;
			flex: auto;
			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;
			align-items: center;
			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;
				height: 24px;
				color: rgba(59, 65, 75, 1);
				font-family: Microsoft YaHei;
				font-size: 16px;
				font-weight: 700;
				line-height: 24px;
			}

			.item-right {
				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;
				font-size: 16px;
				line-height: 24px;
				.item-left1 {
					color: rgba(59, 65, 75, 1);
					font-family: Microsoft YaHei;
					font-weight: 700;
				}

				.item-left2 {
					color: rgba(95, 101, 108, 1);
					font-family: Microsoft YaHei;
				}
			}
		}
	}

	.content-list {
		height: 410px;
		display: flex;
		gap: 16px;

		.content-item {
			width: 20px;
			flex: auto;
			height: 100%;
			.box-main {
				width: 100%;
				height: 100%;
				padding: 12px 30px 20px;
				display: flex;
				flex-direction: column;
				position: relative;
				.box-head {
					height: 20px;
					flex: auto;
				}
			}
		}
	}

	.header-btn-box {
		display: flex;
		gap: 12px;
		margin-right: 12px;
	}

	.box-head2 {
		height: 100%;
		width: 100%;
		padding-top: 10px;
		display: flex;

		.map-box-left {
			width: 20px;
			flex: auto;
			height: 100%;

			.map-box-left-item {
				display: flex;
				align-items: center;
				height: 36px;
				margin-left: 20px;

				.map-box-left-item-left {
					width: 24px;
					height: 24px;
					border-radius: 12px;
					background: #e7f3ff;
					margin-right: 12px;
					color: #0a57a6;
					text-align: center;
					line-height: 24px;
				}

				.map-box-left-item-center {
					height: 36px;
					line-height: 36px;
					width: 20px;
					flex: auto;
				}

				.map-box-left-item-right {
					min-width: 80px;
					padding-right: 10px;
					text-align: right;
				}
			}
		}

		.map-box-right {
			width: 450px;
			height: 100%;
		}
	}
}
</style>