<template>
	<el-row>
<!--		<el-col :span="12">-->
<!--			<el-button type="primary" @click="openForm(true)">添加证书</el-button>-->
<!--		</el-col>-->
		<el-col :span="12" class="text-right">
			<el-button type="info" @click="openChainInstructions">上链须知</el-button>
		</el-col>
	</el-row>

	<el-table :data="state.certificateList" v-loading="loading" class="el-table">
		<el-table-column prop="id" label="编号" />
		<el-table-column prop="certificateNumber" label="证书编号" />
		<el-table-column prop="user.nickName" label="用户" />
		<el-table-column prop="issueDate" label="签发日期" />
		<el-table-column prop="expireDate" label="过期日期" />
		<el-table-column prop="status" label="状态" :formatter="statusText" />
		<el-table-column prop="blockchainTxId" label="交易哈希">
			<template #default="scope">
				<span v-if="scope.row.blockchainTxId">{{ scope.row.blockchainTxId }}</span>
				<span v-else>未上链</span>
			</template>
		</el-table-column>
		<el-table-column prop="createdAt" label="创建时间" />
	</el-table>
	<!-- 分页控件 -->
	<div class="pagination-container">
		<el-pagination
			v-if="state.query.total > 0"
			:current-page="state.query.page"
			:page-size="state.query.limit"
			:total="state.query.total"
			background
			layout="prev, pager, next"
			@current-change="handlePageChange"
		/>
	</div>

	<!-- 上链须知弹窗 -->
	<el-dialog
		v-model="state.chainDialogVisible"
		title="上链须知与注意事项"
		width="500px"
		:append-to-body="false"
	>
		<div class="tip-dialog">
			<h4>上链须知</h4>
			<p>1. 一旦证书信息上链后，将不可修改。</p>
			<p>2. 请务必确保所填写的证书信息准确无误。</p>
			<p>3. 上链信息具有公正性和透明性，请谨慎操作。</p>
			<p>4. 如果发现错误，请联系管理员进行后续处理。</p>
		</div>
		<template #footer>
			<el-button type="primary" @click="state.chainDialogVisible = false">我已知晓</el-button>
		</template>
	</el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, nextTick } from 'vue'

const loading = ref(true)
const state = reactive({
	dialogVisible: false,
	chainDialogVisible: false, // 控制上链须知弹窗
	dialogTitle: "",
	certificateList: [] as any[],
	form: {
		id: null,
		certificateNumber: '',
		userId: '',
		issueDate: '',
		expireDate: '',
		certificateData: '',
		blockchainTxId: '',
		img:'',
		status: 1
	},
	query:{
		page: 1,
		limit:10,
		total:1,
		isBlock:1
	},

})

const openForm = (isAdd: boolean, data?: any) => {
	state.dialogVisible = true
	state.dialogTitle = isAdd ? '添加证书' : '编辑证书'
	// 使用 nextTick 保证弹窗DOM更新
	nextTick(() => {
		state.form = isAdd
			? {
				id: null,
				certificateNumber: '',
				userId: '',
				issueDate: '',
				expireDate: '',
				certificateData: '',
				blockchainTxId: '',
				img:'',
				status: 1
			}
			: { ...data }
	})
}

// 页码改变时的处理函数
const handlePageChange = (page: number) => {
	state.query.page = page
	loadCertificates()
}

const statusText = (row: any) => {
	const map = { 0: '撤销', 1: '有效', 2: '过期' }
	return map[row.status] ?? '未知'
}
const loadCertificates = async () => {
	loading.value = true
	const res = await adminRequest.get('/sys/certificate/page',{params:state.query})
	state.certificateList = res.data.list || []
	state.query.total = res.data.total
	loading.value = false
}
const openChainInstructions = () => {
	state.chainDialogVisible = true
}
onMounted(() => {
	loadCertificates()
})
</script>

<style scoped>

.pagination-container {
	margin-top: 20px;
	display: flex;
	justify-content: center;
}

.el-table {
	margin-top: 20px;
}
.el-button {
	margin-bottom: 20px;
}
.text-right {
	text-align: right;
}

/* 弹出框样式 */
.el-dialog__header {
	background-color: #409EFF;
	color: #fff;
	text-align: center;
}
.el-dialog {
	border-radius: 8px;
}
.el-dialog__body {
	padding: 20px;
}

/* 表单样式 */
.el-form-item {
	margin-bottom: 15px;
}
.el-input,
.el-date-picker,
.el-select {
	width: 100%;
}

/* 上链须知弹框样式 */
.tip-dialog {
	border: 1px solid #f0ad4e;
	background-color: #fcf8e3;
	border-radius: 5px;
	padding: 20px;
	margin-bottom: 20px;
}
.tip-dialog h4 {
	margin: 0 0 10px 0;
	color: #f0ad4e;
}
.tip-dialog p {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
}
</style>
