<template>
	<div class="blockchain-detail-container">
		<!-- 头部区块信息 -->
		<div class="blockchain-header">
			<div class="nav-logo">
				<span class="logo-icon">📚</span>
				<span class="logo-text">区块链版权</span>
			</div>
		</div>
		<!-- 主要内容区 -->
		<div class="detail-content">
			<el-row :gutter="30">
				<el-col :xs="24" :sm="24" :md="12" :lg="10">
					<!-- 图片展示区 -->
					<div class="image-section">
						<el-image
							:src="state.info.image"
							fit="cover"
							class="main-image"
							:preview-src-list="[state.info.image]"
						/>
						<div class="blockchain-badge">
							<span class="badge-icon">🔗</span>
							<span class="badge-text">链上验证</span>
						</div>
						<div class="image-tags">
							<el-tag v-if="state.info.language"  type="info" class="language-tag">
								<i class="el-icon-chat-line-round"></i>
								{{ state.info.language  }}
							</el-tag>
							<el-tag v-if="state.info.status"  :type="getStatusTagType(state.info.status)"  class="status-tag">
								{{ state.info.status  }}
							</el-tag>
						</div>
					</div>

					<!-- 电子文件下载区 -->
					<div class="file-section" v-if="state.info.file">
						<el-button
							type="primary"
							class="download-button"
							@click="handleDownload"
						>
							<el-icon><Download /></el-icon>
							下载电子文件
						</el-button>
						<div class="file-info">
							<el-icon><Document /></el-icon>
							<span>已上传电子版权文件</span>
						</div>
					</div>
				</el-col>

				<el-col :xs="24" :sm="24" :md="12" :lg="14">
					<!-- 信息展示区 -->
					<div class="info-section">
						<h1 class="property-title">{{ state.info.title  }}</h1>
						<div class="author-info">
							<el-icon><User /></el-icon>
							<span>{{ state.info.author  }}</span>
						</div>

						<div class="property-meta">
							<div class="meta-item">
								<span class="meta-label">ISBN编号:</span>
								<span class="meta-value">{{ state.info.isbn  || '暂无' }}</span>
							</div>

							<div class="price-section">
								<span class="price-label">定价:</span>
								<span class="price-value">{{ state.info.price  || '0' }}</span>
								<span class="price-unit">元</span>
								<el-tag type="success" size="small" class="blockchain-tag">
									<span class="tag-icon">⛓</span>
									<span>链上价格</span>
								</el-tag>
							</div>

							<div class="verification-badge">
								<el-icon><SuccessFilled /></el-icon>
								<span>版权信息已通过区块链验证</span>
							</div>

							<div class="property-details">
								<div class="detail-item">
									<span class="detail-label">出版社:</span>
									<span class="detail-value">{{ state.info.publisher  || '暂无' }}</span>
								</div>
								<div class="detail-item">
									<span class="detail-label">出版日期:</span>
									<span class="detail-value">{{ formatDate(state.info.publishDate)  || '暂无' }}</span>
								</div>
								<div class="detail-item">
									<span class="detail-label">版权持有人:</span>
									<span class="detail-value">{{ state.info.copyrightOwner  || '暂无' }}</span>
								</div>
								<div class="detail-item">
									<span class="detail-label">版权期限:</span>
									<span class="detail-value">
										{{ state.info.copyrightStartYear  }} - {{ state.info.copyrightEndYear  || '至今' }}
									</span>
								</div>
								<div class="detail-item">
									<span class="detail-label">版次:</span>
									<span class="detail-value">{{ state.info.edition  || '暂无' }}</span>
								</div>
							</div>

							<!-- 区块链哈希展示 -->
							<div class="blockchain-hash">
								<div class="hash-title">
									<el-icon><Connection /></el-icon>
									<span>区块链编号</span>
								</div>
								<el-tooltip :content="state.info.hex  || '暂无'" placement="top">
									<div class="hash-value">
										{{ shortenHash(state.info.hex)  || '暂无区块链信息' }}
									</div>
								</el-tooltip>
								<el-button
									type="text"
									size="small"
									class="view-transaction"
									v-if="state.info.hex"
								>

								</el-button>
							</div>
						</div>


					</div>
				</el-col>
			</el-row>
		</div>

	</div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import {
	SuccessFilled,
	ShoppingCart,
	Download,
	Document,
	Notebook,
	User,
	Connection,
	ArrowRight,
	Coin,
	Money,
	Checked
} from '@element-plus/icons-vue'
import type { FormInstance } from 'element-plus'
import { ElMessage } from 'element-plus'

const route = useRoute()
const itemId = route.params.id
const buyDrawer = ref(false)
const formRef = ref<FormInstance>()
const state = reactive(<any>{
	info: {},
	buyForm: {
		itemId: itemId,
		title: "",
		quantity: 1,
		price: 0,
		totalAmount: 0
	},
	userInfo: {}
})

/**
 * 格式化日期
 */
function formatDate(dateStr: string) {
	if (!dateStr) return ''
	const date = new Date(dateStr)
	return date.toLocaleDateString()
}

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

/**
 * 缩短哈希显示
 */
function shortenHash(hash: string) {
	if (!hash) return ''
	return hash.substring(0,  6) + '...' + hash.substring(hash.length  - 4)
}

/**
 * 更新总价
 */
function updateTotalAmount() {
	state.buyForm.totalAmount  = (state.buyForm.price  * state.buyForm.quantity).toFixed(2)
}

/**
 * 初始化数据
 */
function init() {
	frontRequest.get(`/api/book/${itemId}`).then(response  => {
		state.info  = response.data
		state.buyForm.title  = state.info.title
		state.buyForm.price  = state.info.price
		updateTotalAmount()
	})

	frontRequest.get("/api/user/userInfo").then(res  => {
		state.userInfo  = res.data
	})
}

/**
 * 用户收藏
 */
function handleFavorite() {
	if (state.info.isFavorite)  {
		frontRequest.post("/api/behavior/delete",  {itemId: itemId, type: 1}).then(res => {
			ElMessage.success({
				message: '已取消收藏',
				offset: 80
			})
			init()
		})
	} else {
		frontRequest.post("/api/behavior",  {itemId: itemId, type: 1}).then(res => {
			ElMessage.success({
				message: '收藏成功',
				offset: 80
			})
			init()
		})
	}
}

/**
 * 下载电子文件
 */
function handleDownload() {
	if (!state.info.file)  {
		ElMessage.warning(' 该图书暂无电子文件')
		return
	}
	window.open(state.info.file,  '_blank')
}

/**
 * 购买按钮
 */
function handlePurchase() {
	if (state.info.userId  === state.userInfo.id)  {
		ElMessage.warning(" 不能购买自己的图书版权")
		return
	}
	buyDrawer.value  = true
}

/**
 * 购买按钮提交
 */
const buySubmitForm = (formEl: FormInstance | undefined) => {
	if (!formEl) return
	formEl.validate((valid)  => {
		if (valid) {
			frontRequest.post("/api/order",  state.buyForm).then(()  => {
				ElMessage.success({
					message: '版权购买信息已提交区块链网络',
					offset: 80
				})
				buyDrawer.value  = false
			})
		}
	})
}

onMounted(() => {
	init()
})
</script>

<style scoped>
/* 全局样式 */
.blockchain-detail-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 20px;
	font-family: 'Helvetica Neue', Arial, sans-serif;
	color: #333;
}

/* 头部样式 */
.blockchain-header {
	margin-bottom: 30px;
	padding-bottom: 15px;
	border-bottom: 1px solid #eaeaea;
}

.nav-logo {
	display: flex;
	align-items: center;
	font-size: 20px;
	font-weight: bold;
	color: #2c3e50;
	margin-bottom: 15px;
}

.logo-icon {
	margin-right: 10px;
	font-size: 24px;
	color: #3498db;
}

.blockchain-breadcrumb {
	padding: 8px 0;
}

/* 图片区域 */
.image-section {
	position: relative;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	margin-bottom: 20px;
}

.main-image {
	width: 100%;
	height: 400px;
	display: block;
	transition: all 0.3s;
	background-color: #f5f7fa;
}

.main-image:hover {
	transform: scale(1.02);
}

.blockchain-badge {
	position: absolute;
	top: 15px;
	right: 15px;
	background-color: rgba(52, 152, 219, 0.9);
	color: white;
	padding: 6px 12px;
	border-radius: 4px;
	font-size: 14px;
	display: flex;
	align-items: center;
	z-index: 2;
}

.badge-icon {
	margin-right: 5px;
	font-size: 14px;
}

.image-tags {
	position: absolute;
	bottom: 15px;
	left: 15px;
	display: flex;
	gap: 10px;
	z-index: 2;
}

.language-tag {
	background-color: rgba(41, 128, 185, 0.9);
	color: white;
	border: none;
}

.status-tag {
	background-color: rgba(39, 174, 96, 0.9);
	color: white;
	border: none;
}

/* 电子文件下载区 */
.file-section {
	margin-top: 20px;
	text-align: center;
}

.download-button {
	width: 100%;
	height: 48px;
	font-size: 16px;
}

.file-info {
	margin-top: 10px;
	color: #7f8c8d;
	font-size: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.file-info .el-icon {
	margin-right: 5px;
}

/* 信息区域 */
.info-section {
	padding: 0 15px;
}

.property-title {
	font-size: 24px;
	font-weight: 700;
	color: #2c3e50;
	margin-bottom: 10px;
	line-height: 1.3;
}

.author-info {
	display: flex;
	align-items: center;
	color: #7f8c8d;
	margin-bottom: 20px;
	font-size: 16px;
}

.author-info .el-icon {
	margin-right: 8px;
}

.property-meta {
	margin-bottom: 30px;
}

.meta-item {
	display: flex;
	align-items: center;
	margin-bottom: 15px;
	font-size: 16px;
}

.meta-label {
	color: #7f8c8d;
	margin-right: 10px;
	min-width: 100px;
}

.meta-value {
	color: #34495e;
	font-weight: 500;
}

.price-section {
	display: flex;
	align-items: center;
	margin: 25px 0;
	padding-bottom: 20px;
	border-bottom: 1px dashed #eaeaea;
}

.price-label {
	color: #7f8c8d;
	margin-right: 10px;
	font-size: 16px;
}

.price-value {
	color: #e74c3c;
	font-size: 28px;
	font-weight: 700;
	margin-right: 5px;
}

.price-unit {
	color: #95a5a6;
	font-size: 16px;
	margin-right: 15px;
}

.blockchain-tag {
	background-color: #e8f8f5;
	color: #1abc9c;
	border: none;
	display: flex;
	align-items: center;
}

.tag-icon {
	margin-right: 5px;
}

.verification-badge {
	display: flex;
	align-items: center;
	background-color: #f8f9fa;
	padding: 10px 15px;
	border-radius: 6px;
	margin-bottom: 25px;
	color: #1abc9c;
	font-size: 14px;
}

.verification-badge .el-icon {
	margin-right: 8px;
	font-size: 18px;
}

.property-details {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 15px;
	margin-bottom: 30px;
}

.detail-item {
	display: flex;
	align-items: center;
}

.detail-label {
	color: #7f8c8d;
	margin-right: 8px;
	min-width: 80px;
}

.detail-value {
	color: #34495e;
	font-weight: 500;
}

/* 区块链哈希区域 */
.blockchain-hash {
	background-color: #f5f7fa;
	padding: 15px;
	border-radius: 6px;
	margin-bottom: 30px;
	border-left: 4px solid #3498db;
}

.hash-title {
	display: flex;
	align-items: center;
	color: #2c3e50;
	font-weight: 600;
	margin-bottom: 10px;
}

.hash-title .el-icon {
	margin-right: 8px;
	color: #3498db;
}

.hash-value {
	font-family: 'Courier New', monospace;
	background-color: #2c3e50;
	color: #ecf0f1;
	padding: 10px;
	border-radius: 4px;
	word-break: break-all;
	margin-bottom: 10px;
	font-size: 14px;
	cursor: pointer;
	transition: all 0.3s;
}

.hash-value:hover {
	background-color: #1a252f;
}

.view-transaction {
	color: #3498db !important;
	font-size: 13px;
}

.view-transaction .el-icon {
	margin-left: 3px;
}

/* 操作按钮 */
.action-buttons {
	display: flex;
	gap: 15px;
	margin-top: 30px;
	flex-wrap: wrap;
}

.buy-button {
	background-color: #3498db;
	border: none;
	height: 48px;
	font-size: 16px;
	font-weight: 500;
	padding: 0 25px;
	flex: 1;
}

.buy-button:hover {
	background-color: #2980b9;
}

.buy-button .el-icon {
	margin-right: 8px;
}

.favorite-button {
	height: 48px;
	font-size: 16px;
	font-weight: 500;
	padding: 0 25px;
	flex: 1;
}

.favorite-button .el-icon {
	margin-right: 8px;
}

/* 抽屉样式 */
.drawer-content {
	padding: 20px;
}

.blockchain-form {
	max-width: 500px;
	margin: 0 auto;
}

.blockchain-form :deep(.el-form-item__label) {
	font-weight: 500;
	color: #2c3e50;
}

.confirm-button {
	width: 100%;
	height: 48px;
	font-size: 16px;
	margin-top: 20px;
	background-color: #3498db;
	border: none;
}

.confirm-button:hover {
	background-color: #2980b9;
}

.confirm-button .el-icon {
	margin-right: 8px;
}

/* 响应式调整 */
@media (max-width: 768px) {
	.property-details {
		grid-template-columns: 1fr;
	}
	.action-buttons {
		flex-direction: column;
	}
	.buy-button,
	.favorite-button {
		width: 100%;
	}
}
</style>

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