<template>
	<div class="political-outlook">
		<el-scrollbar class="scrollbar" ref="refScrollbar">
			<div class="radar-map_list">
				<div class="map-list" v-for="item in randerInfo.randerList" :key="item.id">
					<radarMapOption :randerInfo="item" />
				</div>
			</div>
		</el-scrollbar>
	</div>
</template>

<script lang="ts" setup>
import radarMapOption from "@/views/commandScreen/components/radarMapOption.vue";
import { onMounted, reactive, ref } from "vue";
// import { GlobalStore } from "@/stores";
// const store = GlobalStore();
const props = defineProps(["tip", "randerDetail"]);

const randerInfo = reactive({
	randerList: [] as any[],
	randerTitleList: ["未来三天人员风险概率预测", "未来三天事故风险概率预测", "未来三天安全隐患风险概率预测"],
	moreScroll: true
});
const refScrollbar = ref(null as any); // 绑定到滚动的盒子上
onMounted(async () => {
	console.log(props.randerDetail);
	for (let index = 0; index < 4; index++) {
		randerInfo.randerList.push({
			id: `list${index}`,
			radius: "70%",
			isLegend: "top",
			radarCenter: ["50%", "60%"],
			dataList: [
				{
					value: [4200, 3000, 20000, 35000, 50000],
					name: "项目事故风险概率预测"
					// areaStyle: {}
				}
			],
			indicator: [
				{ name: "恶劣天气占比", max: 6500 },
				{ name: "人员风险概率", max: 16000 },
				{ name: "特殊作业风险概率", max: 30000 },
				{ name: "月度安全评分", max: 38000 },
				{ name: "隐患未整改占比", max: 52000 }
			],
			titleInfo: {
				titleLeft: randerInfo.randerTitleList[props.randerDetail.radarType - 1],
				// titleRight: "查看各企业应急事故风险概率预测",
				percentage: 80
			}
		});
	}

	refScrollbar.value.wrapRef.addEventListener("scroll", (e: any) => {
		const scrollTop = e.target.scrollTop;
		const scrollHeight = e.target.scrollHeight;
		const clientHeight = e.target.clientHeight;
		// 向上加载更多
		if (scrollTop >= scrollHeight - clientHeight - 1) {
			if (randerInfo.moreScroll) {
				// getMemberCountList("more");
			}
		}
	});
});
</script>

<style lang="scss" scoped>
.political-outlook {
	height: 97%;
	margin: 50px 60px 0;
}

.scrollbar {
	height: 85%;
}

.radar-map_list {
	height: 100%;
	display: flex;
	flex-wrap: wrap;

	.map-list {
		width: 33%;
		height: 290px;
	}
}
</style>
