<template>
	<div class="wrapper">
		<AnalysisBox title="行业背景" :showAllBtn="false" height="auto">
			<div class="box1-main">
				<Level2List :list="bgList"></Level2List>
				<!-- <AiTips tips="钒作为被美国列为对经济与国家安全至关重要且供应链易受中断的关键矿产，广泛应用于国防、关键基础设施等多个领域，美国钒产业以二次生产为主、产业高度集中且依赖进口原料，同时通过征收反倾销税、加征关税及签订国际合作协议等方式管控钒进口。"></AiTips> -->
			</div>
		</AnalysisBox>
		<SurveyConclusion title="市场需求" :listData="demandList" tips="美国钒市场年均表观消费量约 8590 吨且进口依赖度超 80%，需求主要集中在钢铁产业（占 90%），钛产业和非冶金领域各占 5%，2020 年受新冠疫情冲击需求下滑；全球钒需求以钢铁产业为主（90%-93%），中国是最大消费国，航空航天领域需求稳定、钒液流电池为新兴增长点，化工领域提供稳定补充。"></SurveyConclusion>
		<SurveyConclusion title="国内外供应情况" :listData="supplyList" tips="美国钒供应以二次生产为主、原生供应仅一家企业且已停产，存在潜在产能但需达到一定钒价才具经济性，原料进口依赖度高；全球钒产能集中在中国、俄罗斯等四国，中国主导供应，欧盟、南非等为主要出口方，美国进口来源集中且本土生产竞争力弱，多国规划新增产能有望大幅提升全球矿山产量。"></SurveyConclusion>
		<SurveyConclusion title="未来产业格局" :listData="box4List" tips="美国钒产业短期将通过产能扩张提升自给率，中长期有望进一步降低进口依赖度，同时受政策驱动与多重风险挑战影响；全球钒市场需求将受钢铁产业结构调整和储能需求增长支撑，供应格局向多极化发展，价格受产能释放与储能需求影响呈现短期低位、中长期有望回升的态势，贸易与政策层面的竞争和管控将持续加剧。"></SurveyConclusion>
		<AnalysisBox title="调查建议" :showAllBtn="false" height="auto">
			<div class="box5-main">
				<div class="data-list">
					<div class="data-item" v-for="(item, index) in suggestionList" :key="index">
						<div class="item-head">
							<div class="item-name">{{ item.title }}</div>
							<div class="button-box" @click="onNavigateTo()">
								<div class="button-icon">
									<img src="@/views/marketAccessRestrictions/assets/icons/open.png" alt="" />
								</div>
								<div class="button-text">跳转原文</div>
							</div>
						</div>
						<div class="item-down">
							<div class="content-item" v-for="(val, idx) in item.data" :key="idx">
								<div class="content-item-title">{{val.TITLE }}</div>
								<div class="content-item-info">
									<Level2List :list="val.CONTENT"></Level2List>
									<div class="info-bill-box" v-if="val.BILLNAME && val.BILLID" @click="onNavigateToBill(val)">
										<div class="info-bill-left">{{ "法案" }}</div>
										<div class="info-bill-center">{{ val.BILLNAME }}</div>
										<div class="info-bill-right">
											<img src="@/assets/icons/box-footer-right-icon.png" alt="" />
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<!-- <AiTips tips="美国为降低盟友及自身在钕铁硼磁体价值链对中国的依赖、保障国家安全，一方面推动关键矿物多边及双边合作，另一方面通过支持相关税收抵免法案、分配额外资金等立法与政策举措，强化稀土及非稀土磁体相关国内供应链建设。"></AiTips> -->
			</div>
		</AnalysisBox>
	</div>
</template>

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

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 onNavigateTo = () => {
	const page = router.resolve({
		name: "MarketSingleReportOriginal",
		query: { ...route.query }
	});
	window.open(page.href, "_blank");
}

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

	// 市场需求
	getReportAnalyze({ searchId, type: "02" }).then((res) => {
		if (res.code==200) {
			demandList.value = res.data.map(item => {
				return {
					title: item.TITLE,
					data: item.CONTENT || [],
				};
			});
		}
	});

	// 国内外供应情况
	getReportAnalyze({ searchId, type: "03" }).then((res) => {
		if (res.code==200) {
			supplyList.value = res.data.map(item => {
				return {
					title: item.TITLE,
					data: item.CONTENT || [],
				};
			});
		}
	});

	// 未来产业格局
	getReportAnalyze({ searchId, type: "04" }).then((res) => {
		if (res.code==200) {
			box4List.value = res.data.map(item => {
				return {
					title: item.TITLE,
					data: item.CONTENT || [],
				};
			});
		}
	});

	// 调查建议
	getReportAnalyze({ searchId, type: "05" }).then((res) => {
		console.log('调查建议', res)
		if (res.code==200 && res.data) {
			suggestionList.value = groupSuggestionData(res.data);
		}
	});
};
// 跳转科技法案详情页
const onNavigateToBill = (item) => {
	window.sessionStorage.setItem("curTabName", item.BILLNAME);
	const route = router.resolve({
		path: "/billLayout",
		query: { billId: item.BILLID }
	});
	window.open(route.href, "_blank");
};

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

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

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

.box1-main {
	padding: 0 22px 20px;
}

.box5-main {
	padding: 0 22px 20px;
	.data-list {
		margin-bottom: 16px;
		border-top: 1px solid rgba(234, 236, 238, 1);
		.data-item {
			.item-head {
				padding: 0 20px;
				height: 48px;
				border-bottom: 1px solid rgba(234, 236, 238, 1);
				background: rgba(247, 248, 249, 1);
				display: flex;
				align-items: center;
				.item-name {
					width: 20px;
					flex: auto;
					font-family: Source Han Sans CN;
					font-size: 18px;
					font-weight: bold;
					line-height: 30px;
					color: var(--text-primary-80-color);
				}
				.button-box {
					display: flex;
					align-items: center;
					margin-left: 50px;
					cursor: pointer;
					.button-icon {
						width: 16px;
						height: 16px;
						font-size: 0;
						margin-right: 4px;
						img {
							width: 100%;
							height: 100%;
						}
					}
					.button-text {
						color: var(--color-primary-100);
						font-family: Microsoft YaHei;
						font-size: 12px;
						font-weight: 400;
						line-height: 12px;
					}
				}
			}
			.item-down {
				margin-bottom: 10px;
				.content-item {
					.content-item-title {
						padding: 12px 23px 12px 30px;
						box-sizing: border-box;
						border-bottom: 1px solid rgba(234, 236, 238, 1);
						color: rgba(59, 65, 75, 1);
						font-family: Source Han Sans CN;
						font-size: 16px;
						font-weight: 700;
						line-height: 30px;
						letter-spacing: 0px;
						text-align: justify;
					}
					.content-item-info {
						border-bottom: 1px solid rgba(234, 236, 238, 1);
						:deep(.item-info) {
							padding-left: 70px;
								.item-num {
									left: 46px;
								}
						}
						.info-bill-box {
							cursor: pointer;
							margin: 10px 44px;
							display: inline-flex;
							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;
								img {
									width: 100%;
									height: 100%;
								}
							}
						}
					}
				}
			}
		}
	}
}
</style>