<template>
	<div class="wrapper">
		<div class="box1 box">
			<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-icon2.png" alt="" />
					</div>
					<div class="icon">
						<img src="@/assets/icons/box-header-icon3.png" alt="" />
					</div>
				</div>
			</div>
			<div class="box1-main">
				<div class="box1-main-item" v-for="(bg, index) in bgList" :key="index">
					<!-- <div class="id">{{ index + 1 + "." }}</div> -->
					<div class="title">{{ bg.title }}</div>
				</div>
			</div>
			<div class="box-footer">
				<div class="box-footer-left">
					<img src="@/assets/icons/box-footer-left-icon.png" alt="" />
				</div>
				<div class="box-footer-center">
					{{
						`美国 232 调查认定，钕铁硼永磁体（关键领域核心材料）进口威胁其国家安全，因中国主导全球市场、美本土产能薄弱，未提关税，提议扶持本土供应链。`
					}}
				</div>
				<div class="box-footer-right">
					<img src="@/assets/icons/box-footer-right-icon.png" alt="" />
				</div>
			</div>
		</div>
		<div class="box2 box">
			<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-icon2.png" alt="" />
					</div>
					<div class="icon">
						<img src="@/assets/icons/box-header-icon3.png" alt="" />
					</div>
				</div>
			</div>
			<div class="box2-main">
				<div class="box2-main-item" v-for="(demand, index) in demandList" :key="index">
					<div class="box2-main-item-header">
						<div class="header-left">
							{{ demand.title }}
						</div>
						<div class="header-right">
							<div class="icon">
								<img src="@/assets/images/icon-open.png" alt="" />
							</div>
							<div class="text">{{ "跳转原文" }}</div>
						</div>
					</div>
					<div class="box2-main-item-content">
						<div class="content-item" v-for="(val, idx) in demand.data" :key="idx">
							<!-- <div class="id">{{ idx + 1 + "." }}</div> -->
							<div class="title">{{ val.title }}</div>
						</div>
					</div>
				</div>
			</div>
			<div class="box-footer">
				<div class="box-footer-left">
					<img src="@/assets/icons/box-footer-left-icon.png" alt="" />
				</div>
				<div class="box-footer-center">
					{{
						`美国 232 调查认定，钕铁硼永磁体（关键领域核心材料）进口威胁其国家安全，因中国主导全球市场、美本土产能薄弱，未提关税，提议扶持本土供应链。`
					}}
				</div>
				<div class="box-footer-right">
					<img src="@/assets/icons/box-footer-right-icon.png" alt="" />
				</div>
			</div>
		</div>
		<div class="box3 box">
			<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-icon1.png" alt="" />
					</div>
					<div class="icon">
						<img src="@/assets/icons/box-header-icon2.png" alt="" />
					</div>
					<div class="icon">
						<img src="@/assets/icons/box-header-icon3.png" alt="" />
					</div>
				</div>
			</div>
			<div class="box3-main">
				<div class="box3-main-item" v-for="(supply, index) in supplyList" :key="index">
					<div class="box3-main-item-header">
						<div class="header-left">
							{{ supply.title }}
						</div>
						<div class="header-right">
							<div class="icon">
								<img src="@/assets/images/icon-open.png" alt="" />
							</div>
							<div class="text">{{ "跳转原文" }}</div>
						</div>
					</div>
					<div class="box3-main-item-content">
						<div class="content-item" v-for="(val, idx) in supply.data" :key="idx">
							<!-- <div class="id">{{ idx + 1 + "." }}</div> -->
							<div class="title">{{ val.title }}</div>
						</div>
					</div>
				</div>
			</div>
			<div class="box-footer">
				<div class="box-footer-left">
					<img src="@/assets/icons/box-footer-left-icon.png" alt="" />
				</div>
				<div class="box-footer-center">
					{{
						`美国 232 调查认定，钕铁硼永磁体（关键领域核心材料）进口威胁其国家安全，因中国主导全球市场、美本土产能薄弱，未提关税，提议扶持本土供应链。`
					}}
				</div>
				<div class="box-footer-right">
					<img src="@/assets/icons/box-footer-right-icon.png" alt="" />
				</div>
			</div>
		</div>
		<div class="box4 box">
			<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-icon1.png" alt="" />
					</div>
					<div class="icon">
						<img src="@/assets/icons/box-header-icon2.png" alt="" />
					</div>
					<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 box4List" :key="index">
					<div class="box4-main-item-header">
						<div class="header-left">
							{{ item.title }}
						</div>
						<div class="header-right">
							<div class="icon">
								<img src="@/assets/images/icon-open.png" alt="" />
							</div>
							<div class="text">{{ "跳转原文" }}</div>
						</div>
					</div>
					<div class="box4-main-item-content">
						<div class="content-item" v-for="(val, idx) in item.data" :key="idx">
							<!-- <div class="id">{{ idx + 1 + "." }}</div> -->
							<div class="title">{{ val.title }}</div>
						</div>
					</div>
				</div>
			</div>
			<div class="box-footer">
				<div class="box-footer-left">
					<img src="@/assets/icons/box-footer-left-icon.png" alt="" />
				</div>
				<div class="box-footer-center">
					{{
						`美国 232 调查认定，钕铁硼永磁体（关键领域核心材料）进口威胁其国家安全，因中国主导全球市场、美本土产能薄弱，未提关税，提议扶持本土供应链。`
					}}
				</div>
				<div class="box-footer-right">
					<img src="@/assets/icons/box-footer-right-icon.png" alt="" />
				</div>
			</div>
		</div>
		<div class="box5 box">
			<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-icon1.png" alt="" />
					</div>
					<div class="icon">
						<img src="@/assets/icons/box-header-icon2.png" alt="" />
					</div>
					<div class="icon">
						<img src="@/assets/icons/box-header-icon3.png" alt="" />
					</div>
				</div>
			</div>
			<div class="box5-main">
				<div class="box5-main-item" v-for="(suggestion, index) in suggestionList" :key="index">
					<div class="box5-main-item-header">{{ suggestion.title }}</div>
					<div class="box5-main-item-content">
						<div class="content-item" v-for="(val, idx) in suggestion.data" :key="idx">
							<div class="content-item-title">{{val.title }}</div>
							<div class="content-item-info">
								<div class="desc">{{ val.info.desc }}</div>
								<div class="info-bill" v-if="val.info.bill">
									<div class="info-bill-box">
										<div class="info-bill-left">{{ "法案" }}</div>
										<div class="info-bill-center">{{ val.info.bill }}</div>
										<div class="info-bill-right">
											<img src="@/assets/icons/box-footer-right-icon.png" alt="" />
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="box-footer">
				<div class="box-footer-left">
					<img src="@/assets/icons/box-footer-left-icon.png" alt="" />
				</div>
				<div class="box-footer-center">
					{{
						`美国 232 调查认定，钕铁硼永磁体（关键领域核心材料）进口威胁其国家安全，因中国主导全球市场、美本土产能薄弱，未提关税，提议扶持本土供应链。`
					}}
				</div>
				<div class="box-footer-right">
					<img src="@/assets/icons/box-footer-right-icon.png" alt="" />
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRoute } from "vue-router";
import { getReportAnalyze } from "@/api/marketAccessRestrictions/index.js";

const route = useRoute();
const searchId = route.query.searchId || "232";

const bgList = ref([]);
const demandList = ref([]);
const supplyList = ref([]);
const box4List = ref([]);
const suggestionList = ref([]);

const getData = async () => {
	// 行业背景
	getReportAnalyze({ searchId, type: "01" }).then((res) => {
		if (res.data) {
			bgList.value = res.data.map((item) => ({
				title: item.CONTENT
			}));
		}
	});

	// 市场需求
	getReportAnalyze({ searchId, type: "02" }).then((res) => {
		if (res.data) {
			demandList.value = groupData(res.data);
		}
	});

	// 国内外供应情况
	getReportAnalyze({ searchId, type: "03" }).then((res) => {
		if (res.data) {
			supplyList.value = groupData(res.data);
		}
	});

	// 未来产业格局
	getReportAnalyze({ searchId, type: "04" }).then((res) => {
		if (res.data) {
			box4List.value = groupData(res.data);
		}
	});

	// 调查建议
	getReportAnalyze({ searchId, type: "05" }).then((res) => {
		if (res.data) {
			suggestionList.value = groupSuggestionData(res.data);
		}
	});
};

const groupData = (data) => {
	const groups = {};
	data.forEach((item) => {
		const title = item.TITLE || "其他";
		if (!groups[title]) {
			groups[title] = [];
		}
		groups[title].push({
			title: item.CONTENT
		});
	});
	return Object.keys(groups).map((title) => ({
		title,
		data: groups[title]
	}));
};

const groupSuggestionData = (data) => {
	const groups = {};
	data.forEach((item) => {
		const groupTitle = "调查建议详情";
		if (!groups[groupTitle]) {
			groups[groupTitle] = [];
		}
		groups[groupTitle].push({
			title: item.TITLE,
			info: {
				desc: item.CONTENT,
				bill: item.BILLNAME
			}
		});
	});
	return Object.keys(groups).map((title) => ({
		title,
		data: groups[title]
	}));
};

onMounted(() => {
	getData();
});
</script>

<style lang="scss" scoped>
.wrapper {
	width: 100%;
	height: 100%;
	overflow-y: auto;
	.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;
		}
		.header-btn-box {
			position: absolute;
			top: 14px;
			right: 116px;
			display: flex;
			.btn {
				margin-left: 8px;
				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);
			}
		}
		.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%;
				}
			}
		}
	}
	.box-footer {
		margin: 24px auto 0;
		width: 1568px;
		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;
		.box-footer-left {
			width: 19px;
			height: 20px;
			img {
				width: 100%;
				height: 100%;
			}
		}
		.box-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;
		}
		.box-footer-right {
			width: 24px;
			height: 24px;
			img {
				width: 100%;
				height: 100%;
			}
		}
	}
	.box {
		border: 1px solid rgba(234, 236, 238, 1);
		border-radius: 10px;
		box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
		background: rgba(255, 255, 255, 1);
		margin: 16px auto;
	}
	.box1 {
		width: 1600px;
		// height: 588px;
		.box1-main {
			// height: 425px;
			margin-top: 2px;
			overflow: hidden;
			overflow-y: auto;
		}
		.box1-main-item {
			margin: 0 auto;
			width: 1552px;
			padding: 12px 23px 12px 44px;
			color: rgba(59, 65, 75, 1);
			font-family: Microsoft YaHei;
			font-size: 16px;
			font-weight: 400;
			line-height: 30px;
			letter-spacing: 0px;
			text-align: justify;
			display: flex;
			box-sizing: border-box;
			border-bottom: 1px solid rgba(234, 236, 238, 1);
			.id {
				width: 18px;
			}
			.title {
				flex: 1;
			}
		}
	}
	.box2 {
		width: 1600px;
		// height: 921px;
		.box2-main {
			// height: 760px;
			width: 1552px;
			margin: 2px auto 0;
			.box2-main-item {
				width: 1552px;
				.box2-main-item-header {
					height: 48px;
					display: flex;
					justify-content: space-between;
					align-items: center;
					box-sizing: border-box;
					border-bottom: 1px solid rgba(234, 236, 238, 1);
					border-top: 1px solid rgba(234, 236, 238, 1);
					background: rgba(247, 248, 249, 1);
					.header-left {
						margin-left: 12px;
						height: 24px;
						color: rgba(59, 65, 75, 1);
						font-family: Microsoft YaHei;
						font-size: 18px;
						font-weight: 700;
						line-height: 24px;
						letter-spacing: 0px;
						text-align: justify;
					}
					.header-right {
						margin-right: 22px;
						display: flex;
						gap: 5px;
						justify-content: flex-end;
						.icon {
							width: 16px;
							height: 16px;
							img {
								width: 100%;
								height: 100%;
							}
						}
						.text {
							height: 14px;
							color: rgba(5, 95, 194, 1);
							font-family: Microsoft YaHei;
							font-size: 12px;
							font-weight: 400;
							line-height: 14px;
							letter-spacing: 0px;
							text-align: justify;
						}
					}
				}
				.box2-main-item-content {
					.content-item {
						box-sizing: border-box;
						padding: 12px 23px 12px 44px;
						border-bottom: 1px solid rgba(234, 236, 238, 1);
						color: rgba(59, 65, 75, 1);
						font-family: Microsoft YaHei;
						font-size: 16px;
						font-weight: 400;
						line-height: 30px;
						letter-spacing: 0px;
						text-align: justify;
						display: flex;
						.id {
							width: 18px;
						}
						.title {
							flex: 1;
						}
					}
				}
			}
		}
	}
	.box3 {
		width: 1600px;
		// height: 957px;
		.box3-main {
			// height: 795px;
			width: 1552px;
			margin: 2px auto 0;
			.box3-main-item {
				width: 1552px;
				.box3-main-item-header {
					height: 48px;
					display: flex;
					justify-content: space-between;
					align-items: center;
					box-sizing: border-box;
					border-bottom: 1px solid rgba(234, 236, 238, 1);
					border-top: 1px solid rgba(234, 236, 238, 1);
					background: rgba(247, 248, 249, 1);
					.header-left {
						margin-left: 12px;
						height: 24px;
						color: rgba(59, 65, 75, 1);
						font-family: Microsoft YaHei;
						font-size: 18px;
						font-weight: 700;
						line-height: 24px;
						letter-spacing: 0px;
						text-align: justify;
					}
					.header-right {
						margin-right: 22px;
						display: flex;
						gap: 5px;
						justify-content: flex-end;
						.icon {
							width: 16px;
							height: 16px;
							img {
								width: 100%;
								height: 100%;
							}
						}
						.text {
							height: 14px;
							color: rgba(5, 95, 194, 1);
							font-family: Microsoft YaHei;
							font-size: 12px;
							font-weight: 400;
							line-height: 14px;
							letter-spacing: 0px;
							text-align: justify;
						}
					}
				}
				.box3-main-item-content {
					.content-item {
						box-sizing: border-box;
						padding: 12px 23px 12px 44px;
						border-bottom: 1px solid rgba(234, 236, 238, 1);
						color: rgba(59, 65, 75, 1);
						font-family: Microsoft YaHei;
						font-size: 16px;
						font-weight: 400;
						line-height: 30px;
						letter-spacing: 0px;
						text-align: justify;
						display: flex;
						.id {
							width: 18px;
						}
						.title {
							flex: 1;
						}
					}
				}
			}
		}
	}
	.box4 {
		width: 1600px;
		// height: 954px;
		.box4-main {
			// height: 795px;
			width: 1552px;
			margin: 2px auto 0;
			.box4-main-item {
				width: 1552px;
				.box4-main-item-header {
					height: 48px;
					display: flex;
					justify-content: space-between;
					align-items: center;
					box-sizing: border-box;
					border-bottom: 1px solid rgba(234, 236, 238, 1);
					border-top: 1px solid rgba(234, 236, 238, 1);
					background: rgba(247, 248, 249, 1);
					.header-left {
						margin-left: 12px;
						height: 24px;
						color: rgba(59, 65, 75, 1);
						font-family: Microsoft YaHei;
						font-size: 18px;
						font-weight: 700;
						line-height: 24px;
						letter-spacing: 0px;
						text-align: justify;
					}
					.header-right {
						margin-right: 22px;
						display: flex;
						gap: 5px;
						justify-content: flex-end;
						.icon {
							width: 16px;
							height: 16px;
							img {
								width: 100%;
								height: 100%;
							}
						}
						.text {
							height: 14px;
							color: rgba(5, 95, 194, 1);
							font-family: Microsoft YaHei;
							font-size: 12px;
							font-weight: 400;
							line-height: 14px;
							letter-spacing: 0px;
							text-align: justify;
						}
					}
				}
				.box4-main-item-content {
					.content-item {
						box-sizing: border-box;
						padding: 12px 23px 12px 44px;
						border-bottom: 1px solid rgba(234, 236, 238, 1);
						color: rgba(59, 65, 75, 1);
						font-family: Microsoft YaHei;
						font-size: 16px;
						font-weight: 400;
						line-height: 30px;
						letter-spacing: 0px;
						text-align: justify;
						display: flex;
						.id {
							width: 18px;
						}
						.title {
							flex: 1;
						}
					}
				}
			}
		}
	}
	.box5 {
		width: 1600px;
		// height: 813px;
		.box5-main {
			// height: 650px;
			width: 1552px;
			margin: 0 auto;
			margin-top: 2px;
			.box5-main-item {
				.box5-main-item-header {
					width: 1552px;
					height: 48px;
					box-sizing: border-box;
					border-bottom: 1px solid rgba(234, 236, 238, 1);
					border-top: 1px solid rgba(234, 236, 238, 1);
					background: rgba(247, 248, 249, 1);
					line-height: 48px;
					color: rgba(59, 65, 75, 1);
					font-family: Microsoft YaHei;
					font-size: 18px;
					font-weight: 700;
					letter-spacing: 0px;
					text-align: justify;
					padding-left: 12px;
				}
				.box5-main-item-content {
					margin-bottom: 10px;
					.content-item {
						.content-item-title {
							padding: 12px 23px 12px 44px;
							box-sizing: border-box;
							border-bottom: 1px solid rgba(234, 236, 238, 1);
							color: rgba(59, 65, 75, 1);
							font-family: Microsoft YaHei;
							font-size: 16px;
							font-weight: 700;
							line-height: 30px;
							letter-spacing: 0px;
							text-align: justify;
						}
						.content-item-info {
							padding: 12px 23px 12px 44px;
							box-sizing: border-box;
							border-bottom: 1px solid rgba(234, 236, 238, 1);
							.desc {
								color: rgba(59, 65, 75, 1);
								font-family: Microsoft YaHei;
								font-size: 16px;
								font-weight: 400;
								line-height: 30px;
								letter-spacing: 0px;
								text-align: justify;
								padding-left: 15px;
							}
							.info-bill {
								border-radius: 4px;
								display: inline-block;
								background: rgba(246, 250, 255, 1);
								.info-bill-box {
									display: flex;
									margin-top: 4px;
									height: 32px;
									border-radius: 4px;
									background: rgba(246, 250, 255, 1);
									gap: 16px;
									align-items: center;
									padding: 0 8px;
									.info-bill-left {
										height: 22px;
										padding: 0 4px;
										border-radius: 4px;
										background: rgba(231, 243, 255, 1);
										color: rgba(5, 95, 194, 1);
										font-family: Microsoft YaHei;
										font-size: 14px;
										font-weight: 400;
										line-height: 22px;
										letter-spacing: 0px;
										text-align: left;
									}
									.info-bill-center {
										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: left;
									}
									.info-bill-right {
										width: 20px;
										height: 20px;
										cursor: pointer;
										img {
											width: 100%;
											height: 100%;
										}
									}
								}
							}
						}
					}
				}
			}
		}
	}
}
</style>
