<template>
	<div class="list-detail" v-if="showDialog">
		<div class="dialog-content">
			<div class="dialog-title">
				<div class="title-img"><img src="@/assets/images/titleIcon.png" alt="" /></div>
				<div class="title-text">
					<i>{{ postData.title || '' }}</i>
				</div>
			</div>
			<div class="political-outlook" v-if="!postData.projectSn">
				<memberMoreList ref="historyList" :dataObj="postData"></memberMoreList>
			</div>
			<div class="political-outlook" v-if="postData.projectSn">
				<riskTipDialog ref="riskTipDialog" :dataObj="postData"></riskTipDialog>
			</div>
			<div class="close-icon" @click="showDialog = false">
				<el-icon><Close /></el-icon>
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import memberMoreList from "./member-more-list.vue";
import riskTipDialog from "./risk-tip-dialog.vue";
import { GlobalStore } from "@/stores";
let showDialog = ref(false as any);
const postData = ref({} as any);
function openDialog(obj: any) {
	console.log("type", obj);
	postData.value = obj
	showDialog.value = true;
}

// 暴露给父组件的参数和方法(外部需要什么，都可以从这里暴露出去)
defineExpose({
	openDialog
});

onMounted(async () => {
	console.log("Mount_type", postData.value.type);
});
</script>

<style lang="scss" scoped>
.list-detail {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0%;
	left: 0%;
	background: rgba(7, 28, 49, 0.5);
	z-index: 20;
	.dialog-content {
		position: absolute;
		box-sizing: border-box;
		padding: 1%;
		left: 17%;
		top: 21%;
		width: 70%;
		height: 60%;
		background: url("@/assets/images/aIEarlyWarning/dialogBg.png") no-repeat;
		background-size: 100% 100%;
		z-index: 21;
		.political-outlook {
			height: 95%;
		}
		.dialog-article {
			height: 95%;
		}
		.close-icon {
			position: absolute;
			right: 3%;
			top: 3%;
			cursor: pointer;
			color: #ffffff;
			font-size: 18px;
		}
		.dialog-title {
			color: #ffffff;
			font-weight: bold;
			font-size: 18px;
			font-family: "OPPOSans-Bold";
			display: flex;
			align-items: center;
			.title-img {
				width: 3%;
				height: 3%;
				img {
					width: 100%;
					height: 100%;
				}
			}
			.title-text {
				margin-left: 1%;
			}
		}
	}
}
.notoDta {
	top: 73%;
	width: 12%;
	left: 44%;
	position: absolute;
	img {
		width: 40%;
		margin: 5% 30%;
	}
	p {
		color: #fff;
		font-size: 14px;
		margin: -6% 37%;
	}
}
</style>
