<template>
	<div class="list-detail" v-if="showDialog" @click="handleClick">
		<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>{{ dialogTitle }}</i>
				</div>
			</div>
			<div class="base-info">
				<div class="base-title" style="margin-left: 3%">基本信息</div>
				<div class="base-content">
					<div class="base-left">
						<div class="base-text">
							<div>工程名称</div>
							<div>钦州港金谷港区金鼓江作业区11号...</div>
						</div>
						<div class="base-text">
							<div>试验类型</div>
							<div>钢筋机械连接接头试验</div>
						</div>
						<div class="base-text">
							<div>试验编号</div>
							<div>YP-TJ5-20220630-14</div>
						</div>
						<div class="base-text">
							<div>设备名称</div>
							<div>1#万能机</div>
						</div>
					</div>
					<div class="base-right">
						<div class="base-text">
							<div>设备编号</div>
							<div>AHWKGKE-092</div>
						</div>
						<div class="base-text">
							<div>制件时间</div>
							<div>2023.07.05 13:36:24</div>
						</div>
						<div class="base-text">
							<div>试验开始时间</div>
							<div>2023.07.05 13:56:24</div>
						</div>
						<div class="base-text">
							<div>操作员</div>
							<div>管理员</div>
						</div>
					</div>
				</div>
				<div class="select-left">
					<div class="week selected" @click="getdayData(1)" :class="checked == 1 ? 'active' : ''">试块信息</div>
					<div class="month selected" @click="getWeekData(2)" :class="checked == 2 ? 'active' : ''">曲线信息</div>
				</div>
			</div>
			<div class="test-block" v-if="checked === 1">
				<table class="universal-block">
					<tr>
						<td>钢筋牌号</td>
						<td style="width: 25%">HEB500</td>
						<td>公称直径(mm)</td>
						<td>150mmx150mmx150mm</td>
					</tr>
					<tr>
						<td>强度代表值(MPa)</td>
						<td>HEB500</td>
						<td>公称截面积(mm2)</td>
						<td>22500.0</td>
					</tr>
				</table>
				<div class="base-title" style="margin-bottom: 3%">试块测试值</div>
				<table class="common-block">
					<tr>
						<td style="width: 18%">试块编号</td>
						<td style="width: 18%">屈服点(kN)</td>
						<td>2屈服点强度(MPa)</td>
						<td>抗拉强度(MPa)</td>
						<td>伸长率(%)</td>
					</tr>
					<tr>
						<td>HJJAH-3</td>
						<td>73090.00</td>
						<td>417.2963513761281</td>
						<td>15.2</td>
						<td>0.259999994188547</td>
					</tr>
				</table>
			</div>
			<div class="curve-line" v-if="checked === 2">
				<div class="line-first">
					<lineFirst></lineFirst>
				</div>
				<div class="line-second">
					<lineSecond></lineSecond>
				</div>
			</div>
			<div class="close-icon" @click="closeDialog">
				<el-icon><Close /></el-icon>
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { reactive, ref, onMounted } from "vue";
import { GlobalStore } from "@/stores";
import lineFirst from "@/views/sevenLargeScreen/largeMachinery/universalTestMachine/line-first.vue";
import lineSecond from "@/views/sevenLargeScreen/largeMachinery/universalTestMachine/line-second.vue";

let showDialog = ref(false as any);

function handleClick(event: any) {
	// console.log("点击", event.target.className);
	if (event.target.className == "list-detail") {
		closeDialog();
	}
}

function closeDialog() {
	showDialog.value = false;
	checked.value = 1;
}

// 选中
let checked = ref(1);

function getdayData(type: any) {
	checked.value = type;
}

function getWeekData(type: any) {
	checked.value = type;
}

let dialogIndex = ref(null as any);
let dialogTitle = ref("" as any);
function openDialog(type: any) {
	// console.log("type", type);
	// dialogIndex.value = type;
	showDialog.value = true;
	dialogTitle.value = "设备详情";
}

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

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

<style lang="scss" scoped>
.test-block {
	width: 94%;
	height: 380px;
	padding: 2% 4%;
	text-align: center;
	.universal-block {
		td:nth-child(odd) {
			background-color: rgba(18, 40, 87, 0.6);
			color: rgba(255, 255, 255, 0.6);
		}

		td:nth-child(even) {
			background-color: rgba(12, 33, 73, 0.2);
		}
	}
	.common-block {
		tr:nth-child(odd) {
			background-color: rgba(18, 40, 87, 0.6);
			color: rgba(255, 255, 255, 0.6);
		}

		tr:nth-child(even) {
			background-color: rgba(12, 33, 73, 0.2);
		}
	}
	table {
		width: 100%;
		border-collapse: collapse;
	}

	td {
		padding: 10px;
		border: 1px solid black;
	}
}
.curve-line {
	width: 100%;
	height: 380px;
	margin-top: 2%;
	display: flex;
	justify-content: space-between;
	.line-first {
		width: 48%;
	}
	.line-second {
		width: 48%;
	}
}

.base-title {
	margin-top: 3%;
	text-align: start;
}
.base-title::before {
	content: "•"; /* 使用 content 属性添加小圆点 */
	margin-right: 0.5em; /* 调整小圆点与文字之间的间距 */
	width: 4px;
	height: 4px;
	color: #65d7f9;
}

.select-left {
	width: 35%;
	display: flex;
	color: rgba(255, 255, 255, 0.6);
	margin-left: 4%;
	margin-top: 4%;
	font-size: 14px;
	text-align: center;
	line-height: 20px;
	font-family: Source Han Sans CN-Regular, Source Han Sans CN;
	.selected {
		height: 6%;
		background: url("@/assets/images/dustNoise/rightImg2.png") no-repeat;
		background-size: 100% 100%;
		cursor: pointer;
	}
	.week {
		width: 25%;
		padding: 1%;
		margin-right: 5%;
	}
	.month {
		width: 25%;
		padding: 1%;
	}
	.active {
		color: #fff;
		background: url("@/assets/images/dustNoise/rightImg.png") no-repeat;
		background-size: 100% 100%;
	}
}

.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: 25%;
		top: 21%;
		width: 50%;
		padding-bottom: 1%;
		background: url("@/assets/images/aIEarlyWarning/dialogBg.png") no-repeat;
		background-size: 100% 100%;
		z-index: 21;
		color: #ffffff;
		.base-info {
			width: 100%;
			color: #ffffff;
			.base-content {
				width: 100%;
				margin-left: 4%;
				margin-top: 1%;
				display: flex;
				color: #fff;
				.base-left {
					width: 40%;
					margin-right: 10%;
				}
				.base-right {
					width: 40%;
				}
				.base-text {
					width: 100%;
					margin-top: 5%;
					display: flex;
					div:first-of-type {
						width: 45%;
					}
				}
			}
		}
		.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>
