<template>
	<div class="wrapper">
		<div class="left">
			<div class="box1" v-loading="leftLoading">
				<div class="box-header">
					<div class="header-left"></div>
					<div class="title">基本信息</div>
					<div class="header-right">
						<div class="icon">
							<img src="@/assets/icons/box-header-icon3.png" alt="" />
						</div>
					</div>
				</div>
				<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">
							<div
								class="tag"
								:class="{ tag1: tag.type === 1, tag2: tag.type === 2 }"
								v-for="(tag, index) in surveyAreaList"
								:key="index"
							>
								{{ tag.name }}
							</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>
			</div>
			<div class="box2" v-loading="leftLoading">
				<div class="box-header">
					<div class="header-left"></div>
					<div class="title">调查公告</div>
					<div class="header-right">
						<div class="icon">
							<img src="@/assets/icons/box-header-icon3.png" alt="" />
						</div>
					</div>
				</div>
				<div class="box2-main">
					<div class="box2-item" v-for="(item, index) in box2Data" :key="index">
						<div class="box2-item-left">
							<img src="./assets/images/box2-icon.png" alt="" />
						</div>
						<div class="box2-item-right">
							<div class="time">{{ item.time }}</div>
							<div class="content">{{ item.content }}</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="right">
			<div class="box3" v-loading="box3Loading">
				<div class="box-header">
					<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>
					<div class="header-right">
						<div class="icon">
							<img src="@/assets/icons/box-header-icon3.png" alt="" />
						</div>
					</div>
				</div>
				<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.time }}</div>
									<div class="title">{{ item.title }}</div>
								</div>
								<div class="content">{{ item.content }}</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>
			</div>
			<div class="box4" v-loading="box4Loading">
				<div class="box-header">
					<div class="header-left"></div>
					<div class="title">相关事件</div>
					<div class="header-right">
						<div class="icon">
							<img src="@/assets/icons/box-header-icon3.png" alt="" />
						</div>
					</div>
				</div>
				<div class="box4-main">
					<div class="box4-main-item" v-for="(item, index) in box4Data" :key="index">
						<div class="item-left">
							<div class="item-left-tag" :class="{
                tag1: item.tag.type == '新闻',
                tag2: item.tag.type == '行政令',
                tag3: item.tag.type == '法案',
                }">
								{{ item.tag.name }}
							</div>
						</div>
						<div class="item-right">
							<div class="item-right-header">
								<div class="item-right-title">{{ item.title }}</div>
								<div class="item-right-time">
									{{ item.time }}
								</div>
							</div>
							<div class="item-right-content">{{ item.content }}</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { useRoute } from "vue-router";
import { getSearchBlurb, getRelatedEvents, getSearchContext, getSearchMeasures } from "@/api/marketAccessRestrictions";

const route = useRoute();

const leftLoading = ref(false);
const box3Loading = ref(false);
const box4Loading = ref(false);

const baseInfo = ref({});
const surveyAreaList = ref([]);
const box2Data = ref([]);
const box3Data1 = ref([]);
const box3Data2 = ref([]);
const box4Data = ref([]);

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

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

const handleGetSearchBlurb = async () => {
	leftLoading.value = true;
	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
				}));
				
				// 事件脉络
				box3Data1.value = data.progress.map(p => ({
					time: p.PROGRESSDATE,
					title: p.PROGRESSSTAGE,
					content: "" 
				}));
			}

			// 报复性措施
			if (data.SORTMEASURE) {
				box3Data2.value = [
					{
						title: "报复性措施",
						data: [{ content: data.SORTMEASURE }]
					}
				];
			}
		}
	} catch (error) {
		console.error("获取调查详情失败", error);
	} finally {
		leftLoading.value = false;
	}
};

const handleGetRelatedEvents = async () => {
	box4Loading.value = true;
	try {
		const res = await getRelatedEvents({
			searchId: route.query.searchId
		});
		if(res.code === 200 && res.data) {
			box4Data.value = res.data.map(item => ({
				title: item.NAME,
				content: item.SUMMARY,
				time: item.DATE,
        tag: {
          type: item.TYPE,
          name: item.TYPE
        }
			}));
		}
	} catch (error) {
		console.error("获取相关事件失败", error);
	} finally {
		box4Loading.value = false;
	}
};

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

const handleGetSearchMeasures = async () => {
	// box3Loading is shared with Context for now if they are called together
	// or we can just set it true here as well
	box3Loading.value = true; 
	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);
	} finally {
		box3Loading.value = false;
	}
};
onMounted(() => {
	handleGetSearchBlurb();
	handleGetRelatedEvents();
	handleGetSearchContext();
	handleGetSearchMeasures();
});
</script>

<style lang="scss" scoped>
.wrapper {
  width: 1600px;
  margin: 20px auto;
	display: flex;
	.box-header {
		height: 56px;
		display: flex;
		position: relative;
		.header-left {
			margin-top: 20px;
			width: 8px;
			height: 16px;
			border-radius: 0 4px 4px 0;
			background: var(--color-main-active);
		}
		.title {
			margin-left: 14px;
			margin-top: 16px;
			height: 24px;
			line-height: 24px;
			color: var(--color-main-active);
			font-family: Microsoft YaHei;
			font-size: 18px;
			font-weight: 700;
		}
		.btn-box {
			position: absolute;
			top: 17px;
			left: 36px;
			display: flex;
			gap: 20px;
			height: 26px;
			.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);
			}
		}
		.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%;
				}
			}
		}
	}
	.left {
		width: 520px;
		margin-bottom: 20px;
		.box1 {
			margin-top: 16px;
			width: 520px;
			height: 561px;
			border-radius: 10px;
			box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
			background: rgba(255, 255, 255, 1);
			.box1-main {
				margin-top: 6px;
				margin-left: 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 {
						margin-top: 2px;
						height: 24px;
						display: flex;
						gap: 8px;
						.tag {
							height: 24px;
							padding: 0 8px;
							box-sizing: border-box;
							border-radius: 4px;
							text-align: center;
							line-height: 24px;
						}
						.tag1 {
							color: rgba(19, 168, 168, 1);
							border: 1px solid rgba(135, 232, 222, 1);
							background: rgba(230, 255, 251, 1);
						}
						.tag2 {
							color: rgba(22, 119, 255, 1);
							border: 1px solid rgba(145, 202, 255, 1);
							background: rgba(230, 244, 255, 1);
						}
            .tag3 {
              color: rgba(114, 46, 209, 1);
              border: 1px solid rgba(211, 173, 247, 1);
              background: rgba(249, 240, 255, 1);
            }
					}
					.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;
					}
				}
			}
		}
		.box2 {
			width: 520px;
			height: 815px;
			margin-top: 16px;
			border-radius: 10px;
			box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
			background: rgba(255, 255, 255, 1);
			.box2-main {
				height: 749px;
				border-top: 1px solid rgba(234, 236, 238, 1);
				.box2-item {
					width: 483px;
					// height: 108px;
					margin: 0 auto;
					display: flex;
					gap: 16px;
					padding: 12px 8px 8px 8px;
					border-bottom: 1px solid rgba(234, 236, 238, 1);
					.box2-item-left {
						margin-top: 4px;
						width: 15px;
						height: 15px;
						img {
							width: 100%;
							height: 100%;
						}
					}
					.box2-item-right {
						.time {
							height: 24px;
							color: rgba(59, 65, 75, 1);
							font-family: Microsoft YaHei;
							font-style: Bold;
							font-size: 16px;
							font-weight: 700;
							line-height: 24px;
							letter-spacing: 1px;
							text-align: left;
						}
						.content {
							width: 435px;
							// height: 60px;
							margin-top: 4px;
							color: rgba(95, 101, 108, 1);
							font-family: Microsoft YaHei;
							font-style: Regular;
							font-size: 16px;
							font-weight: 400;
							line-height: 30px;
							letter-spacing: 0px;
							text-align: justify;
						}
					}
				}
			}
		}
	}
	.right {
		width: 1064px;
		margin-left: 16px;
		.box3 {
			margin-top: 16px;
			width: 1064px;
			// height: 410px;
			border-radius: 10px;
			box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
			background: rgba(255, 255, 255, 1);
			.box3-main {
				margin-top: 8px;
				margin: 10px 0;
				border-top: 1px solid rgba(234, 236, 238, 1);
				padding: 15px 20px;
				.box3-main1 {
					.box3-main1-item {
						// height: 140px;
            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-top: 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);
							}
						}
					}
				}
			}
		}
		.box4 {
			margin-top: 16px;
			margin-bottom: 35px;
			width: 1064px;
			// height: 714px;
			border-radius: 10px;
			box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
			background: rgba(255, 255, 255, 1);
			padding-bottom: 18px;
			.box4-main {
				width: 1014px;
				margin: 10px auto;
				.box4-main-item {
					width: 1014px;
					padding: 11px 0;
					display: flex;
					border-bottom: 1px solid rgba(234, 236, 238, 1);
					.item-left {
						width: 90px;
						display: flex;
						.item-left-tag {
							width: 80px;
							height: 28px;
							padding: 0px 8px;
							border-radius: 20px;
							font-family: Microsoft YaHei;
							font-size: 16px;
							font-weight: 400;
							line-height: 24px;
							letter-spacing: 0px;
							text-align: center;
							padding: 0 8px;
						}
						.tag1 {
							color: rgba(19, 168, 168, 1);
							border: 1px solid rgba(135, 232, 222, 1);
							background: rgba(230, 255, 251, 1);
						}
						.tag2 {
							color: rgba(22, 119, 255, 1);
							border: 1px solid rgba(145, 202, 255, 1);
							background: rgba(230, 244, 255, 1);
						}
            .tag3 {
              color: rgba(114, 46, 209, 1);
              border: 1px solid rgba(211, 173, 247, 1);
              background: rgba(249, 240, 255, 1);
            }
					}
					.item-right {
						width: 924px;
						.item-right-header {
							width: 924px;
							display: flex;
							justify-content: space-between;
							.item-right-title {
								width: 800px;
								height: 24px;
								color: rgba(59, 65, 75, 1);
								font-family: Microsoft YaHei;
								font-size: 16px;
								font-weight: 700;
								line-height: 24px;
								letter-spacing: 0px;
								text-align: left;
							}
							.item-right-time {
								width: 124px;
								height: 24px;
								color: rgba(95, 101, 108, 1);
								font-family: Microsoft YaHei;
								font-size: 16px;
								font-weight: 400;
								line-height: 24px;
								letter-spacing: 0px;
								text-align: left;
							}
						}

						.item-right-content {
							margin-top: 4px;
							width: 928px;
							height: 30px;
							color: rgba(95, 101, 108, 1);
							font-family: Microsoft YaHei;
							font-size: 16px;
							font-weight: 400;
							line-height: 30px;
							letter-spacing: 0px;
							text-align: justify;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
					}
				}
			}
		}
	}
}

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

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