<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">{{ `${isTariffNum}项` }}</div>
			</div>
			<div class="item">
				<div class="item-left">{{ "撤销案件梳理" }}</div>
				<div class="item-right">{{ `${cancelNum}` }}</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="activeName === '1' ? 'active' : 'normal'" name="发起调查" @click="onStatNum('1')"></ActionButton>
							<ActionButton :type="activeName === '0' ? 'active' : 'normal'" name="结束调查" @click="onStatNum('0')"></ActionButton>
						</div>
					</template>
					<div class="box-main">
						<div class="box-head" ref="chart1"></div>
						<TipTab text="美对华232调查案件的数量变化趋势，数据来源：美国商务部官网" style="margin-top: 16px;" />
						<div class="ai-pane">
							<AiButton />
							<AiPane :aiContent="aiContent.content1" />
						</div>
					</div>
				</AnalysisBox>
			</div>
			<div class="content-item" v-loading="box2Loading">
				<AnalysisBox title="领域分布情况">
					<template #header-btn>
						<el-select v-model="box2Paarams.years" @change="handleGetStatArea()" placeholder="选择时间" 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="美对华232调查案件的领域分布情况，数据来源：美国商务部官网" style="margin-top: -16px;" />
						<div class="ai-pane">
							<AiButton />
							<AiPane :aiContent="aiContent.content2" />
						</div>
					</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="onSearchTariff()" placeholder="选择时间" 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="chart3"></div>
						<TipTab text="美对华232调查案件导致的关税变化分布，数据来源：美国商务部官网" style="margin-top: -16px;" />
						<div class="ai-pane">
							<AiButton />
							<AiPane :aiContent="aiContent.content3" />
						</div>
					</div>
				</AnalysisBox>
			</div>
			<div class="content-item" v-loading="box4Loading">
				<AnalysisBox title="国家分布情况">
					<template #header-btn>
						<el-select v-model="box4Paarams.years" @change="handleGetSearchCountry()" placeholder="选择时间" 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="美232调查所涉及的国家分布情况，数据来源：美国商务部官网" style="margin-top: -16px;" />
						<div class="ai-pane">
							<AiButton />
							<AiPane :aiContent="aiContent.content4" />
						</div>
					</div>
				</AnalysisBox>
			</div>
		</div>
	</div>
</template>
<script setup>
import { ref, onMounted, nextTick, reactive } from "vue";
import {
	getStatCount,
	getStatArea,
	getSearchCountry,
	getStatNum,
	getSearchTariff,
} from "@/api/marketAccessRestrictions";

import createLineChart from "@/views/marketAccessRestrictions/utils/baseLineChart";
import createPieChart from "@/views/marketAccessRestrictions/utils/basePiechart.js";
import AiButton from '@/components/base/Ai/AiButton/index.vue';
import AiPane from '@/components/base/Ai/AiPane/index.vue';
import { getNearYearList, getAIReport } from "@/views/marketAccessRestrictions/utils/index.ts";

const yearList = getNearYearList();
// 获取AI智能报告
const aiContent = reactive({
	content1: "正在生成...",
	content2: "正在生成...",
	content3: "正在生成...",
	content4: "正在生成...",
})
const onAIReport = (data, key) => {
	getAIReport(data).then(res => { aiContent[key] = res })
}

// 数量统计
const totalCaseNum = ref(0)
const onCaseNum = ref(0)
const isTariffNum = ref(0)
const cancelNum = ref('0%')
const handleGetStat = async () => {
	try {
		const res = await getStatCount({sortCode: '232'})
		console.log('232数量统计', res);
		if (res.code === 200 && res.data) {
			totalCaseNum.value = res.data.allCaseNum
			onCaseNum.value = res.data.underCaseNum
			isTariffNum.value = res.data.isTariffNum
			cancelNum.value = res.data.cancelNum
		}
	} catch (error) {}
}

const chart1 = ref(null);
const activeName = ref('1');
const box1Loading = ref(false);
const onStatNum = async (event) => {
	if (event) activeName.value = event;
	box1Loading.value = true;
	let chartData = { title: [], list: [] };
	try {
		const res = await getStatNum({ sortCode: 232, searchStatus:activeName.value })
		console.log('数量变化趋势', res);
		if (res.code === 200 && res.data) {
			chartData.title = res.data.map(item => item.searchYorM),
			chartData.list = [{ name: "232调查", value: res.data.map(item => item.searchCount) }]
		} else {
			chartData.title = [];
			chartData.list = [];
		}
	} catch (error) {
		chartData.title = [];
		chartData.list = [];
	}
	onAIReport({ type: "折线图", name: "数量变化趋势", data: chartData }, "content1")
	nextTick(() => { createLineChart(chart1, chartData) });
	box1Loading.value = false;
}

const chart2 = ref(null);
const box2Paarams = reactive({
	sortCode: 232,
	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 = [];
	}
	onAIReport({ type: "环形图", name: "领域分布情况", data: chartData }, "content2")
	nextTick(() => { createPieChart(chart2, chartData) });
	box2Loading.value = false;
};

const chart3 = ref(null);
const box3Paarams = reactive({
	sortCode: 232,
	years: '2025'
})
const box3Loading = ref(false);
const onSearchTariff = async () => {
	box3Loading.value = true;
	let chartData = []
	try {
		const res = await getSearchTariff(box3Paarams);
		console.log('关税变化分布', res);
		if (res.code === 200 && res.data) {
			chartData = [
				{ name: "税率25%+", value: res.data.TARIFF25 },
				{ name: "税率11%-25%", value: res.data.TARIFF11 },
				{ name: "税率1%-10%", value: res.data.TARIFF1 },
				{ name: "税率0%", value: res.data.TARIFF0 },
			];
		} else {
			chartData = [];
		}
	}catch (error) {
		chartData = [];
	}
	onAIReport({ type: "环形图", name: "关税变化分布", data: chartData }, "content3")
	nextTick(() => { createPieChart(chart3, chartData) });
	box3Loading.value = false;
}

const chart4 = ref(null);
const box4Paarams = reactive({
	sortCode: 232,
	years: '2025'
})
const box4Loading = ref(false);
const handleGetSearchCountry = async () => {
	box4Loading.value = true;
	let chartData = []
	try {
		const res = await getSearchCountry(box4Paarams);
		console.log('国家分布情况', res);
		if (res.code === 200 && res.data) {
			chartData = res.data.map(item => ({ name: item.COUNTRY, value: item.NUM }) );
		} else {
			chartData = []
		}
	} catch (error) {
		chartData = []
	}
	onAIReport({ type: "环形图", name: "国家分布情况", data: chartData }, "content4")
	nextTick(() => { createPieChart(chart4, chartData) });
	box4Loading.value = false;
};

onMounted(() => {
	handleGetStat()
	onStatNum()
	handleGetStatArea()
	onSearchTariff()
	handleGetSearchCountry()
});
</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;
				}
				.ai-pane {
					position: absolute;
					right: 0px;
					bottom: 15px;
					z-index: 2;
					:deep(.ai-pane-wrapper) {
						display: none;
					}
					:deep(.ai-button-wrapper) {
						display: flex;
					}
					&:hover {
						width: 100%;
						bottom: 0px;
						:deep(.ai-pane-wrapper) {
							display: block;
						}
						:deep(.ai-button-wrapper) {
							display: none;
						}
					}
				}
			}
		}
	}

	.header-btn-box {
		display: flex;
		gap: 8px;
		margin-right: 12px;
		.btn {
			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);
		}
	}
}
</style>