<template>
	<div class="item-trace-container">
		<!-- 顶部导航 -->
		<div class="trace-header">
			<h1 class="title">版权源溯源系统</h1>
			<el-input
				v-model="searchQuery"
				placeholder="请输入版权区块编号"
				class="search-input"
				clearable
				@keyup.enter="handleSearch"
			>
				<template #append>
					<el-button :icon="Search" @click="handleSearch" />
				</template>
			</el-input>
		</div>

		<!-- 版权详情展示 -->
		<div v-if="state.bookData.hex" class="copyright-detail">
			<el-card shadow="hover" class="detail-card">
				<div class="info-header">
					<h2>图书版权信息</h2>
					<el-tag :type="getStatusTagType(state.bookData.status)" size="large">
						{{ state.bookData.status || '未知状态' }}
					</el-tag>
				</div>

				<el-divider />
				<div class="info-grid">
					<div class="info-section">
						<h3>图书基本信息</h3>
						<el-descriptions :column="1" border>
							<el-descriptions-item label="封面">
								<el-image
									:src="state.bookData.image || 'https://via.placeholder.com/150x200?text=No+Cover'"
									style="width: 100px; height: 140px;"
									fit="cover"
								/>
							</el-descriptions-item>
							<el-descriptions-item label="ISBN编号">{{ state.bookData.isbn || '-' }}</el-descriptions-item>
							<el-descriptions-item label="图书标题">{{ state.bookData.title || '-' }}</el-descriptions-item>
							<el-descriptions-item label="作者">{{ state.bookData.author || '-' }}</el-descriptions-item>
							<el-descriptions-item label="出版社">{{ state.bookData.publisher || '-' }}</el-descriptions-item>
							<el-descriptions-item label="出版日期">{{state.bookData.publishDate || '-' }}</el-descriptions-item>
							<el-descriptions-item label="版次">{{ state.bookData.edition || '-' }}</el-descriptions-item>
							<el-descriptions-item label="语言">{{ state.bookData.language || '中文' }}</el-descriptions-item>
							<el-descriptions-item label="定价">{{ state.bookData.price ? `${state.bookData.price}元` : '-' }}</el-descriptions-item>
						</el-descriptions>
					</div>

					<div class="info-section">
						<h3>版权信息</h3>
						<el-descriptions :column="1" border>
							<el-descriptions-item label="版权区块编号">{{ state.bookData.hex || '-' }}</el-descriptions-item>
							<el-descriptions-item label="版权持有人">{{ state.bookData.copyrightOwner || '-' }}</el-descriptions-item>
							<el-descriptions-item label="版权起始年份">{{ state.bookData.copyrightStartYear || '-' }}</el-descriptions-item>
							<el-descriptions-item label="版权到期年份">{{ state.bookData.copyrightEndYear || '-' }}</el-descriptions-item>
							<el-descriptions-item label="上链时间">{{state.bookData.createTime || '-' }}</el-descriptions-item>
							<el-descriptions-item label="电子文件">
								<el-button
									v-if="state.bookData.file"
									type="primary"
									size="small"
									@click="downloadFile(state.bookData.file)"
								>
									下载文件
								</el-button>
								<span v-else>-</span>
							</el-descriptions-item>
						</el-descriptions>
					</div>
				</div>

				<el-divider />


			</el-card>
		</div>

		<!-- 空状态 -->
		<div v-else class="empty-state">
			<el-empty description="请输入版权区块编号查询详情" />
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'


// 搜索查询
const searchQuery = ref('')

const state = reactive({
	bookData: {} as any
})

// 获取状态标签类型
const getStatusTagType = (status: string) => {
	switch (status) {
		case '已通过':
			return 'success'
		case '待审核':
			return 'warning'
		case '已拒绝':
			return 'danger'
		default:
			return 'info'
	}
}

// 搜索版权信息
const handleSearch = async () => {
	if (!searchQuery.value.trim()) {
		ElMessage.warning('请输入查询内容')
		return
	}
	try {
		const response = await frontRequest.get(`/api/book/hex?hex=${searchQuery.value}`)
		ElMessage.success('查询成功')
		state.bookData = response.data || {}
	} catch (error) {
		ElMessage.error('查询失败，请检查区块编号是否正确')
		console.error('查询失败:', error)
	}
}

// 下载文件
const downloadFile = (fileUrl: string) => {
	if (!fileUrl) {
		ElMessage.warning('没有可下载的文件')
		return
	}

	const link = document.createElement('a')
	link.href = fileUrl
	link.download = `book_${state.bookData.isbn || 'file'}_${new Date().getTime()}`
	document.body.appendChild(link)
	link.click()
	document.body.removeChild(link)
}

// 查看版权凭证
const viewCertificate = (hex: string) => {
	if (!hex) {
		ElMessage.warning('无有效的版权凭证')
		return
	}
	// 这里可以打开新窗口或弹窗显示版权凭证
	window.open(`https://blockchain-explorer.com/tx/${hex}`, '_blank')
}

// 查看区块链交易
const viewTransaction = (hex: string) => {
	if (!hex) {
		ElMessage.warning('无有效的交易哈希')
		return
	}
	// 这里可以打开区块链浏览器查看交易详情
	window.open(`https://blockchain-explorer.com/tx/${hex}`, '_blank')
}
</script>

<style scoped>
.item-trace-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 20px;
}

.trace-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 30px;
}

.title {
	color: #333;
	font-size: 24px;
}

.search-input {
	width: 400px;
}

.copyright-detail {
	margin-top: 20px;
}

.detail-card {
	padding: 20px;
}

.info-header {
	display: flex;
	align-items: center;
	margin-bottom: 15px;
}

.info-header h2 {
	margin-right: 15px;
	font-size: 22px;
	color: #333;
}

.info-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin-bottom: 20px;
}

.info-section h3 {
	color: #666;
	font-size: 18px;
	margin-bottom: 15px;
	padding-bottom: 10px;
	border-bottom: 1px solid #eee;
}

.action-buttons {
	display: flex;
	justify-content: center;
	gap: 20px;
	margin-top: 20px;
}

.empty-state {
	margin-top: 100px;
	text-align: center;
}

:deep(.el-descriptions__body) {
	background-color: #f9f9f9;
}

:deep(.el-descriptions__label) {
	width: 120px;
}
</style>

<route lang="json">
{
"meta": {
"layout": "front"
}
}
</route>
