<template>
	<div class="wrapper">
		<div class="left">
			<AnalysisBox title="基本信息" :showAllBtn="false" height="auto">
				<div class="box1-main" v-loading="loading">
					<div class="box1-item">
						<div class="box1-item-left">{{ "案卷编号：" }}</div>
						<div class="box1-item-right">{{ baseInfo.SEARCHNUM || '-' }}</div>
					</div>
					<div class="box1-item">
						<div class="box1-item-left">{{ "调查时间：" }}</div>
						<div class="box1-item-right">
							{{ baseInfo.SEARCHDATE || '-' }}
						</div>
					</div>
					<div class="box1-item">
						<div class="box1-item-left">{{ "调查概括：" }}</div>
						<div class="box1-item-right">
							{{ baseInfo.SEARCHDESC || '-' }}
						</div>
					</div>
					<div class="box1-item">
						<div class="box1-item-left">{{ "涉及专利：" }}</div>
						<div class="box1-item-right">
							{{ baseInfo.patentCode || '-' }}
						</div>
					</div>
					<div class="box1-item">
						<div class="box1-item-left">{{ "调查背景：" }}</div>
						<div class="box1-item-right">
							{{ baseInfo.SEARCHBACKGROUND || '-' }}
						</div>
					</div>
					<div class="box1-item">
						<div class="box1-item-left">{{ "调查范围：" }}</div>
						<div class="box1-item-right">{{ baseInfo.SEARCHSCOPE || '-' }}</div>
					</div>
					<div class="box1-item">
						<div class="box1-item-left">{{ "法律依据：" }}</div>
						<div class="box1-item-right1">
							<div class="box1-item-right1-item" v-for="(item, index) in reasonList" :key="index">
								{{ item }}
							</div>
							<div v-if="!reasonList.length">-</div>
						</div>
					</div>
					<div class="box1-item">
						<div class="box1-item-left">{{ "调查结论：" }}</div>
						<div class="box1-item-right">
							{{ baseInfo.SEARCHRESULTBASIC || '-' }}
						</div>
					</div>
					<div class="box1-item">
						<div class="box1-item-left">{{ "增加关税：" }}</div>
						<div class="box1-item-right">{{ baseInfo.ISTARIFF === 'Y' ? `是，增加${baseInfo.ADDTARIFF}%` : '否' }}</div>
					</div>
				</div>
			</AnalysisBox>
		</div>
		<div class="right">
			<!-- <AnalysisBox title="调查脉络" :showAllBtn="false" height="auto">
				<div class="box2-main" v-loading="box2Loading">
					<div class="box2-line-box"></div>
					<div class="box2-item" :class="{ box2ItemFooter: index % 2 }" v-for="(item, index) in timeLineList" :key="index">
						<div class="point" :class="{ pointFooter: index % 2 }">
							<img src="@/assets/images/dot.png" alt="" />
						</div>
						<div class="box2-item-header">
							<div class="title">{{ item.time }}</div>
						</div>
						<div class="box2-item-content">{{ item.content }}</div>
					</div>
					<div class="arrow-left">
						<img src="@/assets/icons/card-btn-left.png" alt="" />
					</div>
					<div class="arrow-right">
						<img src="@/assets/icons/card-btn-right.png" alt="" />
					</div>
				</div>
				<div class="box2-footer">
					<div class="box2-footer-left">
						<img src="@/assets/icons/box-footer-left-icon.png" alt="" />
					</div>
					<div class="box2-footer-center">
						{{
							`美国 232 调查认定，钕铁硼永磁体（关键领域核心材料）进口威胁其国家安全，因中国主导全球市场、美本土产能薄弱，未提关税，提议扶持本土供应链。`
						}}
					</div>
					<div class="box2-footer-right">
						<img src="@/assets/icons/box-footer-right-icon.png" alt="" />
					</div>
				</div>
			</AnalysisBox> -->
			<SurveyConclusion title="调查结论" :listData="surveyResult" :tips="tips"></SurveyConclusion>
			<RelatedEvent title="相关行政举措" :listData="eventList"></RelatedEvent>
		</div>
	</div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRoute } from "vue-router";
import {
	getSearchBlurb,
	getSearchContext,
	getSearchConclusion,
	getRelatedEvents,
} from "@/api/marketAccessRestrictions";
import RelatedEvent from "@/views/marketAccessRestrictions/com/RelatedEvent.vue";
import SurveyConclusion from "@/views/marketAccessRestrictions/com/SurveyConclusion.vue";

const tips = "美国 232 调查认定，钕铁硼永磁体（关键领域核心材料）进口威胁其国家安全，因中国主导全球市场、美本土产能薄弱，未提关税，提议扶持本土供应链。"

const route = useRoute();
const loading = ref(false);
const box2Loading = ref(false);
const box3Loading = ref(false);
const baseInfo = ref({});
const reasonList = ref([]);
const timeLineList = ref([]);
const surveyResult = ref([]);

const handleGetSearchBlurb = async () => {
	loading.value = true;
	try {
		const res = await getSearchBlurb({
			searchId: route.query.searchId,
			sortCode: "232"
		});
		if (res.code === 200 && res.data) {
			const data = res.data;
			baseInfo.value = data;

			// 法律依据
			if (data.billData && data.billData !== "null") {
				reasonList.value = [data.billData];
			} else {
				reasonList.value = [];
			}
		}
	} catch (error) {
		console.error("获取调查详情失败", error);
	} finally {
		loading.value = false;
	}
};

const handleGetSearchContext = async () => {
	box2Loading.value = true;
	try {
		const res = await getSearchContext({
			searchId: route.query.searchId
		});
		if (res.code === 200 && res.data) {
			timeLineList.value = res.data.map(item => ({
				time: item.CONTTIME,
				content: item.CONTDESC
			}));
		}
	} catch (error) {
		console.error("获取事件脉络失败", error);
	} finally {
		box2Loading.value = false;
	}
};

const handleGetSearchConclusion = async () => {
	box3Loading.value = true;
	try {
		const res = await getSearchConclusion({
			searchId: route.query.searchId
		});
		if (res.code === 200) {
			surveyResult.value = res.data.map(item => {
				return {
					title: item.TITLE,
					data: item.CONTENT?.split(/\r\n|\n/).filter(line => line.trim()) || [],
				};
			});
		}
	} catch (error) {
		console.error("获取调查结论失败", error);
	} finally {
		box3Loading.value = false;
	}
};

// 相关行政举措
const eventList = ref([])
const handleGetRelatedEvents = async () => {
	try {
		const res = await getRelatedEvents({
			searchId: route.query.searchId
		});
		if(res.code === 200) eventList.value = res.data || [];
	} catch (error) {
		console.error("获取相关行政举措失败", error);
	}
};

onMounted(() => {
	handleGetSearchBlurb();
	handleGetRelatedEvents();
	handleGetSearchContext();
	handleGetSearchConclusion();
});
</script>

<style lang="scss" scoped>
.wrapper {
  width: 1600px;
  margin: 20px auto;
	display: flex;
	gap: 16px;
	.left {
		width: 520px;
		display: flex;
		flex-direction: column;
		gap: 16px;
	}
	.right {
		width: 20px;
		flex: auto;
		display: flex;
		flex-direction: column;
		gap: 16px;
	}
}

.box1-main {
	padding: 0 22px;
	.box1-item {
		display: flex;
		margin-bottom: 16px;
		.box1-item-left {
			width: 100px;
			height: 24px;
			color: rgba(59, 65, 75, 1);
			font-family: Microsoft YaHei;
			font-size: 16px;
			font-weight: 700;
			line-height: 24px;
			margin-top: 3px;
			margin-bottom: 3px;
		}
		.box1-item-right {
			width: 346px;
			color: rgba(59, 65, 75, 1);
			font-family: Microsoft YaHei;
			font-size: 16px;
			font-weight: 400;
			line-height: 24px;
		}
		.box1-item-right1 {
			.box1-item-right1-item {
				width: 346px;
				color: rgba(59, 65, 75, 1);
				font-family: Microsoft YaHei;
				font-size: 16px;
				font-weight: 400;
				line-height: 24px;
			}
		}
	}
}

.box2-main {
	padding: 0 22px;
	height: 250px;
	display: flex;
	justify-content: center;
	position: relative;
	.box2-line-box {
		position: absolute;
		left: 0;
		top: 114px;
		height: 8px;
		width: 100%;
		background: url("@/assets/icons/line-bg.png") repeat;
	}
	.box2-item {
		width: 320px;
		height: 120px;
		position: relative;
		box-sizing: border-box;
		padding-left: 13px;
		border-left: 1px solid #0a57a6;
		margin-left: -100px;
		.box2-item-header {
			display: flex;
			width: 240px;
			.title {
				color: var(--color-main-active);
				height: 26px;
				font-family: Microsoft YaHei;
				font-size: 16px;
				font-weight: 700;
			}
		}
		.box2-item-content {
			width: 300px;
			min-height: 48px;
			max-height: 96px;
			color: rgba(95, 101, 108, 1);
			font-family: Microsoft YaHei;
			font-size: 16px;
			font-weight: 400;
			line-height: 24px;
			overflow: hidden;
		}
		.point {
			position: absolute;
			left: -8px;
			bottom: -7px;
			width: 15px;
			height: 15px;
			img {
				width: 100%;
				height: 100%;
			}
		}
		.pointFooter {
			position: absolute;
			left: -8px;
			top: -7px;
			width: 15px;
			height: 15px;
			img {
				width: 100%;
				height: 100%;
			}
		}
		.time {
			height: 24px;
			color: var(--color-main-active);
			font-family: Microsoft YaHei;
			font-size: 16px;
			font-weight: 700;
			line-height: 24px;
			position: absolute;
			bottom: -36px;
			left: 0;
		}
	}
	.box2ItemFooter {
		margin-top: 118px;
		margin-left: -120px;
		box-sizing: border-box;
		padding-top: 20px;
	}
	.arrow-left {
		width: 24px;
		height: 48px;
		position: absolute;
		left: 0;
		top: 95px;
		cursor: pointer;
		img {
			width: 100%;
			height: 100%;
		}
	}
	.arrow-right {
		width: 24px;
		height: 48px;
		position: absolute;
		right: 0;
		top: 95px;
		cursor: pointer;
		img {
			width: 100%;
			height: 100%;
		}
	}
}
.box2-footer {
	margin: 20px 22px;
	height: 64px;
	box-sizing: border-box;
	border: 1px solid rgba(231, 243, 255, 1);
	border-radius: 4px;
	background: rgba(246, 250, 255, 1);
	display: flex;
	align-items: center;
	gap: 13px;
	padding: 0 12px;
	.box2-footer-left {
		width: 19px;
		height: 20px;
		img {
			width: 100%;
			height: 100%;
		}
	}
	.box2-footer-center {
		width: 939px;
		color: rgba(5, 95, 194, 1);
		font-family: Microsoft YaHei;
		font-size: 16px;
		font-weight: 400;
		line-height: 24px;
		letter-spacing: 0px;
		text-align: justify;
	}
	.box2-footer-right {
		width: 24px;
		height: 24px;
		img {
			width: 100%;
			height: 100%;
		}
	}
}
</style>
