<template>
	<div>
		<!-- Detail Modal -->
		<a-modal v-model="showDetailModal" title="가이드 알람이력" width="1200px" :footer="null"
			:style="{ borderRadius: '8px', overflow: 'hidden' }" :bodyStyle="{ paddingTop: '0px' }">
			<!-- Top Input Fields -->
			<a-row :gutter="8" align="middle" style="margin-bottom: 16px;">
				<!-- Label on the left -->
				<a-col :span="24" style="text-align: left;">
					<div style="line-height: 32px;">설비</div>
				</a-col>

				<!-- Two inputs on the right -->
				<a-col :span="12">
					<a-input value="설비명" :style="{ borderRadius: '6px', height: '34px' }" disabled />
				</a-col>
				<a-col :span="12">
					<a-input value="가이드지표" :style="{ borderRadius: '6px', height: '34px' }" disabled />
				</a-col>
			</a-row>
			<a-row :gutter="8" align="middle" style="margin-bottom: 16px;">
				<!-- Label on the left -->
				<a-col :span="24" style="text-align: left;">
					<div style="line-height: 32px;">가이드지표</div>
				</a-col>

				<!-- Two inputs on the right -->
				<a-col :span="12">
					<a-input value="설비명" :style="{ borderRadius: '6px', height: '34px' }" disabled />
				</a-col>
				<a-col :span="12">
					<a-input value="가이드지표" :style="{ borderRadius: '6px', height: '34px' }" disabled />
				</a-col>
			</a-row>

			<a-divider />
			<!-- Table -->
			<h3 style=" margin-bottom: 16px">설비 가이드 정보</h3>
			<a-table :columns="modalTableColumns" :dataSource="modalTableData" rowKey="No" size="small" bordered
				:pagination="false" />

			<!-- Footer Buttons -->
			<div style="text-align: right; margin-top: 16px;">
				<a-button @click="showDetailModal = false">닫기</a-button>
				<a-button type="primary" style="margin-left: 8px; color:#fff" @click="confirmModal">확인</a-button>
			</div>
		</a-modal>
	</div>
</template>

<script>
export default {
	data() {
		return {
			showDetailModal: false,
			selectedRecord: null,
			modalTableColumns: [
				{ title: 'No.', dataIndex: 'No', key: 'No', align: 'center' },
				{ title: '발생일', dataIndex: '발생일', key: '발생일' },
				{ title: '발생시간대', dataIndex: '발생시간대', key: '발생시간대' },
				{ title: '가이드지표명', dataIndex: '가이드지표명', key: '가이드지표명' },
				{ title: '주의', dataIndex: '주의', key: '주의' },
				{ title: '경고', dataIndex: '경고', key: '경고' },
				{ title: '가이드값', dataIndex: '가이드값', key: '가이드값' },
				{ title: '알랑내용', dataIndex: '알랑내용', key: '알랑내용' },
			],
			modalTableData: [
				{
					No: 1,
					발생일: '2025-06-01',
					발생시간대: '02-03',
					가이드지표명: '냉수 출구 온도 평균 편차',
					주의: 3,
					경고: 2,
					가이드값: -1.23,
					알랑내용: '[심각]냉수3과 온도차가 7.72°C로 낮음(평균 15.44*C 대비 7.72°C 낮음) - UT_HT_CH1C',
				},
				{
					No: 2,
					발생일: '2025-06-02',
					발생시간대: '02-03',
					가이드지표명: '냉수 출구 온도 평균 편차',
					주의: 2,
					경고: 1,
					가이드값: -1.45,
				},
			],
		};
	},
	methods: {
		handleNgCntClick(record) {
			this.selectedRecord = record;
			this.showDetailModal = true;
		},
		confirmModal() {
			this.showDetailModal = false;
		},
	},
};
</script>
<style>
.ant-modal-header {
	border-bottom: none;
	border-radius: 8px 8px 0 0;
}

.ant-modal-content {
	border-radius: 8px;
}

.ant-modal-title,
h3 {
	font-weight: 600
}
</style>