<template>
	<div class="wrapper">
		<div class="left">
			<AnalysisBox title="基本信息" :showAllBtn="false" height="auto">
				<div class="box1-main">
					<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.RESPONDENTS || '-' }}
						</div>
					</div>
					<div class="box1-item">
						<div class="box1-item-left">{{ "调查机构：" }}</div>
						<div class="box1-item-right1">
							<div class="icon">
								<img src="./assets/images/icon1.png" alt="" />
							</div>
							<div class="text">{{ (baseInfo.SEARCHORG || '-') + " >" }}</div>
						</div>
					</div>
					<div class="box1-item">
						<div class="box1-item-left">{{ "调查领域：" }}</div>
						<div class="box1-item-right2">
							<AreaTag v-for="(item, num) in surveyAreaList" :key="num" :tagName="item.name"></AreaTag>
              <div v-if="!surveyAreaList?.length">-</div>
						</div>
					</div>
					<div class="box1-item">
						<div class="box1-item-left">{{ "调查状态：" }}</div>
						<div class="box1-item-right">
							{{ baseInfo.SEARCHSTATUS || '-' }}
						</div>
					</div>
					<div class="box1-item">
						<div class="box1-item-left">{{ "请愿方：" }}</div>
						<div class="box1-item-right">
							{{ baseInfo.qyData || '-' }}
						</div>
					</div>
					<div class="box1-item">
						<div class="box1-item-left">{{ "依托政令：" }}</div>
						<div class="box1-item-right3">
							<template v-if="baseInfo.AdminstrativeData && baseInfo.AdminstrativeData.length">
								<div v-for="(item, index) in baseInfo.AdminstrativeData" :key="index">
									{{ item.ORDERNAME + " >" }}
								</div>
							</template>
							<template v-else>-</template>
						</div>
					</div>
				</div>
			</AnalysisBox>
			<SurveyAffiche title="调查公告" :listData="box2Data"></SurveyAffiche>
		</div>
		<div class="right">
			<AnalysisBox :showAllBtn="false" height="auto">
				<template #custom-title>
					<div class="btn-box">
						<div class="btn"
							:class="{ btnActive: box3BtnActive === item }"
							v-for="(item, index) in box3BtnList" :key="index"
							@click="handleClickBox3Btn(item)"
						>
							{{ item }}
						</div>
					</div>
				</template>
				<div class="box3-main">
					<div class="box3-main1" v-if="box3BtnActive === '事件脉络'">
						<div class="box3-main1-item" v-for="(item, index) in box3Data1" :key="index">
							<div class="left">
								<div class="point">
									<img src="./assets/images/dot-active-icon.png" alt="" />
								</div>
								<div class="line" v-if="index !== box3Data1.length - 1"></div>
							</div>
							<div class="right">
								<div class="header">
									<div class="time">{{ item.CONTTIME }}</div>
									<div class="title">{{ item.CONTNODE }}</div>
								</div>
								<div class="content">{{ item.CONTDESC }}</div>
							</div>
						</div>
					</div>
					<div class="box3-main2" v-else>
						<div class="box3-main2-item" v-for="(item, index) in box3Data2" :key="index">
							<div class="box3-main2-item-header">
								<div class="title">{{ item.title }}</div>
								<div class="more">
									<div class="icon">
										<img src="./assets/images/open-active.png" alt="" />
									</div>
									<div class="text">
										{{ "跳转原文" }}
									</div>
								</div>
							</div>
							<div class="box3-main2-item-content">
								<div class="item" v-for="(val, idx) in item.data" :key="idx">
									{{ idx+1 + "." + val.content }}
								</div>
							</div>
						</div>
					</div>
				</div>
			</AnalysisBox>
			<RelatedEvent title="相关事件" :listData="eventList"></RelatedEvent>
		</div>
	</div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { useRoute } from "vue-router";
import {
	getSearchBlurb,
	getRelatedEvents,
	getSearchContext,
	getSearchMeasures,
} from "@/api/marketAccessRestrictions";
import RelatedEvent from "@/views/marketAccessRestrictions/com/RelatedEvent.vue";
import SurveyAffiche from "@/views/marketAccessRestrictions/com/SurveyAffiche.vue";

const route = useRoute();

const baseInfo = ref({});
const surveyAreaList = ref([]);

const box3BtnList = ref(["事件脉络", "报复性措施"]);
const box3BtnActive = ref("事件脉络");

const handleClickBox3Btn = btn => {
	box3BtnActive.value = btn;
};

const box2Data = ref([]);
const handleGetSearchBlurb = async () => {
	try {
		const res = await getSearchBlurb({
			searchId: route.query.searchId,
			sortCode: "301"
		});
		if (res.code === 200 && res.data) {
			const data = res.data;
			baseInfo.value = data;
			
			// 调查领域
			if (data.areaData) {
				surveyAreaList.value = data.areaData.map(name => ({
					name,
					type: 1 // 默认为 type 1
				}));
			}

			// 调查公告
			if (data.progress) {
				box2Data.value = data.progress.map(p => ({ time: p.PROGRESSDATE, content: p.PROGRESSSTAGE }));
			}
		}
	} catch (error) {
		console.error("获取调查详情失败", error);
	}
};

// 相关事件
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);
	}
};

// 事件脉络
const box3Data1 = ref([]);
const handleGetSearchContext = async () => {
	try {
		const res = await getSearchContext({ searchId: route.query.searchId });
		console.log('事件脉络', res.data)
		if(res.code === 200) box3Data1.value = res.data;
	} catch (error) {
		console.error("获取事件脉络失败", error);
	}
}
// 报复性措施
const box3Data2 = ref([]);
const handleGetSearchMeasures = async () => {
	try {
		const res = await getSearchMeasures({ searchId: route.query.searchId });
		if(res.code === 200 && res.data) {
			box3Data2.value = res.data.map(item => ({
				title: item.TITLE,
				data: [{ content: item.CONTENT }]
			}));
		}
	} catch (error) {
		console.error("获取报复性措施失败", error);
	}
};
onMounted(() => {
	handleGetSearchBlurb();
	handleGetRelatedEvents();
	handleGetSearchContext();
	handleGetSearchMeasures();
});
</script>

<style lang="scss" scoped>
.wrapper {
  width: 1600px;
  margin: 20px auto;
	display: flex;
	.left {
		width: 520px;
		display: flex;
		flex-direction: column;
		gap: 16px;
	}
	.right {
		width: 20px;
		flex: auto;
		display: flex;
		flex-direction: column;
		gap: 16px;
		margin-left: 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 {
			display: flex;
			gap: 6px;
			align-items: center;
			.icon {
				width: 20px;
				height: 20px;
				img {
					width: 100%;
					height: 100%;
				}
			}
			.text {
				height: 24px;
				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;
			}
		}
		.box1-item-right2 {
			display: flex;
			flex-wrap: wrap;
			gap: 8px;
		}
		.box1-item-right3 {
			width: 346px;
			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;
		}
		.box1-item-right4 {
			width: 346px;
		}
	}
}

.btn-box {
	display: flex;
	align-items: center;
	height: 100%;
	gap: 20px;
	.btn {
		height: 26px;
		padding: 0 8px;
		box-sizing: border-box;
		border: 1px solid rgba(230, 231, 232, 1);
		border-radius: 4px;
		background: rgba(255, 255, 255, 1);
		color: rgba(59, 65, 75, 1);
		font-family: Microsoft YaHei;
		font-style: Regular;
		font-size: 18px;
		font-weight: 400;
		line-height: 24px;
		letter-spacing: 0px;
		text-align: left;
		cursor: pointer;
	}
	.btnActive {
		color: var(--color-main-active);
		border: 1px solid var(--color-main-active);
		font-weight: bold;
		background: rgba(231, 243, 255, 1);
	}
}
.box3-main {
	border-top: 1px solid rgba(234, 236, 238, 1);
	padding: 15px 20px;
	.box3-main1 {
		.box3-main1-item {
			margin-bottom: 20px;
			display: flex;
			.left {
				width: 10px;
				.point {
					width: 10px;
					height: 10px;
					img {
						width: 100%;
						height: 100%;
					}
				}
				.line {
					width: 2px;
					height: 130%;
					margin-left: 4px;
					background: #e6e7e8;
				}
			}
			.right {
				margin-left: 17px;
				.header {
					height: 24px;
					display: flex;
					gap: 16px;
					color: var(--color-main-active);
					font-family: Microsoft YaHei;
					font-style: Bold;
					font-size: 18px;
					font-weight: 700;
					line-height: 24px;
					letter-spacing: 0px;
					text-align: justify;
				}
				.content {
					border-top: 1px solid #eaecee;
					margin-top: 10px;
					margin-bottom: 36px;
					padding: 10px 0;
					width: 971px;
					max-height: 60px;
					min-height: 0;
					color: rgba(59, 65, 75, 1);
					font-family: Microsoft YaHei;
					font-style: Regular;
					font-size: 16px;
					font-weight: 400;
					line-height: 30px;
					letter-spacing: 0px;
					text-align: justify;
				}
			}
		}
	}
	.box3-main2 {
		.box3-main2-item {
			margin-bottom: 16px;
			.box3-main2-item-header {
				width: 1020px;
				height: 48px;
				box-sizing: border-box;
				border-bottom: 1px solid rgba(234, 236, 238, 1);
				border-top: 1dpx solid rgba(234, 236, 238, 1);
				background: rgba(247, 248, 249, 1);
				display: flex;
				justify-content: space-between;
				align-items: center;
				.title {
					margin-left: 12px;
					height: 24px;
					color: rgba(59, 65, 75, 1);
					font-family: Microsoft YaHei;
					font-style: Bold;
					font-size: 18px;
					font-weight: 700;
					line-height: 24px;
					letter-spacing: 0px;
					text-align: justify;
				}
				.more {
					margin-right: 22px;
					height: 14px;
					display: flex;
					justify-content: flex-end;
					align-items: center;
					gap: 7px;
					.icon {
						width: 12px;
						height: 12px;
						img {
							width: 100%;
							height: 100%;
						}
					}
					.text {
						color: rgba(5, 95, 194, 1);
						font-family: Microsoft YaHei;
						font-style: Regular;
						font-size: 12px;
						font-weight: 400;
						line-height: 14px;
						letter-spacing: 0px;
						text-align: justify;
					}
				}
			}
			.box3-main2-item-content {
				.item {
					color: rgba(59, 65, 75, 1);
					font-family: Microsoft YaHei;
					font-style: Regular;
					font-size: 16px;
					font-weight: 400;
					line-height: 30px;
					letter-spacing: 0px;
					text-align: justify;
					padding: 12px 23px 12px 44px;
					border-bottom: 1px solid rgba(234, 236, 238, 1);
				}
			}
		}
	}
}

:deep(.el-timeline-item) {
	padding-bottom: 8px;
}

:deep(.el-timeline) {
	padding-left: 2px;
}
</style>