<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>{{ detailData.constructionPart || '' }}</div>
						</div>
						<div class="base-text">
							<div>试验类型</div>
							<div>{{ detailData.testType || '' }}</div>
						</div>
						<div class="base-text">
							<div>试验编号</div>
							<div>{{ detailData.testNumber || '' }}</div>
						</div>
						<div class="base-text">
							<div>设备名称</div>
							<div>{{ detailData.devName || '' }}</div>
						</div>
					</div>
					<div class="base-right">
						<div class="base-text">
							<div>设备编号</div>
							<div>{{ detailData.devSn || '' }}</div>
						</div>
						<div class="base-text">
							<div>制件时间</div>
							<div>{{ detailData.productionTime || '' }}</div>
						</div>
						<div class="base-text">
							<div>试验开始时间</div>
							<div>{{ detailData.testTime || '' }}</div>
						</div>
						<div class="base-text">
							<div>操作员</div>
							<div>{{ detailData.operator || '' }}</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>
					<tr>
						<td>设备强度</td>
						<td>{{ detailData.equipmentStrength || '' }}</td>
						<td>强度代表值(Mpa)</td>
						<td>{{ detailData.intensityRepresentativeValue || '' }}</td>
					</tr>
					<tr>
						<td>试件尺寸</td>
						<td>{{ detailData.specimenSize || '' }}</td>
						<td>试件龄期</td>
						<td>{{ detailData.specimenAge || '' }}</td>
					</tr>
					<tr>
						<td>试件面积</td>
						<td>{{ detailData.specimenArea || '' }}</td>
						<td>公称直径(mm)</td>
						<td>{{ detailData.nominalDiameter || '' }}</td>
					</tr>
				</table>
				<div class="base-title" style="margin-bottom: 3%">试块测试值</div>
				<div style="width: 100%">
					<el-scrollbar style="height: 200px">
						<div class="list-table">
							<div class="list-tr">
								<div class="list-td">试块编号</div>
								<div class="list-td">荷载力值（KN/㎡）</div>
								<div class="list-td">抗折/抗压强度</div>
							</div>

							<div class="list-thread" v-for="item in steelBeamList" :key="item.id">
								<div class="list-td">{{ item.devSn || "" }}</div>
								<div class="list-td">{{ item.loadForceValue || 0 }}</div>
								<div class="list-td">{{ item.flexuralAndCompressiveStrength || 0 }}</div>
							</div>

							<!-- <div class="list-tr">
							<div class="list-td">抗折/抗压强度</div>
							<div class="list-td">72</div>
							<div class="list-td">72</div>
							<div class="list-td">72</div>
						</div> -->
						</div>
					</el-scrollbar>
				</div>
			</div>
			<div class="curve-line" v-show="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";
import mitts from "@/utils/bus"; //兄弟组件传值
import { pressureBlockNumberList3, pressureBlockDataList3 } from "@/api/modules/largeMachinery";

const store = GlobalStore();
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;
	finishLine.value = false;
}

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

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

function getWeekData(type: any) {
	checked.value = type;
	mitts.emit("pressureLineDraw", true);
}
let detailData = ref({} as any);
// let dialogIndex = ref(null as any);
let dialogTitle = ref("" as any);
function openDialog(item: any) {
	console.log("item", item);
	detailData.value = item;
	// dialogIndex.value = type;
	dialogTitle.value = "设备详情";
	getDetailList(item.id);
}

let steelBeamList = ref([] as any);
let steelLineList = ref([] as any);
let steelSecondLineList = ref([] as any);
let finishLine = ref(false as any);
const getDetailList = async (detailId: any) => {
	const res: any = await pressureBlockNumberList3({ projectSn: store.sn, universalTestManageId: detailId });
	if (res.result.length > 0) {
		// console.log("试块列表", res.result);
		steelBeamList.value = res.result;
		for (let index = 0; index < res.result.length; index++) {
			const element = res.result[index];
			getLineList(element);
			if (index === res.result.length - 1) {
				console.log("最后一次循环");
				finishLine.value = true;
			}
		}
		// dialogShow = true
	} else {
		showDialog.value = true;
	}
};

const getLineList = async (item: any) => {
	const res: any = await pressureBlockDataList3({ projectSn: store.sn, universalTestManageBlockNumberId: item.id });
	if (res.result.length > 0) {
		const filteredData = res.result.filter(item => item.type === 1)
          const filteredSecondData = res.result.filter(item => item.type === 2)

          // x y轴
          const arr1 = filteredData.map(item => item.code)
          const arr2 = filteredData.map(item => item.value)

          const arr3 = filteredSecondData.map(item => item.code)
          const arr4 = filteredSecondData.map(item => item.value)

          const combinedArray = arr1.map((value, index) => [value, arr2[index]])
          const combinedSecondArray = arr3.map((value, index) => [value, arr4[index]])

          console.log(combinedArray) // [[1, 4], [2, 5], [3, 6]]
          console.log('试块曲线数据', res.result)
          let currentData = {
            name: item.testNumber,
            data: combinedArray,
            type: 'line',
            smooth: true
          }
          let currentSecondData = {
            name: item.testNumber,
            data: combinedSecondArray,
            type: 'line',
            smooth: true
          }
          steelLineList.value.push(currentData)
          steelSecondLineList.value.push(currentSecondData)
	}
	if (finishLine.value) {
		setTimeout(() => {
			showDialog.value = true;
			// console.log("发送pressureLine", steelLineList.value);
			mitts.emit("pressureLine", steelLineList.value);
			mitts.emit("pressureScondLine", steelSecondLineList.value);
		}, 1000);
		// console.log("曲线数据", steelLineList.value, "试块列表", steelBeamList.value);
	}
};

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

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

<style lang="scss" scoped>
.test-block {
	width: 94%;
	padding: 2% 4%;
	text-align: center;
	table {
		width: 98%;
		border-collapse: collapse;
	}

	td {
		width: 100px;
		padding: 10px;
		box-sizing: border-box;
		border: 1px solid black;
	}

	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);
	}

	.list-table {
		width: 98%;
		border-collapse: collapse;
	}
	.list-tr {
		display: flex;
		justify-content: space-around;
	}

	.list-td {
		width: 100%;
		padding: 10px;
		box-sizing: border-box;
		border: 1px solid black;
	}

	.list-tr {
		background-color: rgba(18, 40, 87, 0.6);
		color: rgba(255, 255, 255, 0.6);
	}

	.list-thread {
		display: flex;
		background-color: rgba(12, 33, 73, 0.2);
	}
}
.curve-line {
	width: 100%;
	height: 49%;
	margin-top: 5%;
	overflow-y: scroll;
	.line-first {
		width: 100%;
		height: 350px;
		margin-top: 2%;
	}
	.line-second {
		width: 100%;
		height: 350px;
		margin-top: 2%;
	}
}

.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;
		width: 50%;
		padding: 1%;
		left: 26%;
		top: 15%;
		height: 80%;
		padding-bottom: 3%;
		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>
