<template>

	<el-form :inline="true" :model="state.query" class="demo-form-inline mb-4">
		<el-form-item label="书籍名称">
			<el-input v-model="state.query.title" placeholder="书籍名称" clearable />
		</el-form-item>
		<el-form-item>
			<el-button type="primary" @click="init()">查询</el-button>
			<el-button @click="resetQuery">重置</el-button>
		</el-form-item>
	</el-form>
	<el-row>
		<el-col :span="24">
			<el-tabs v-model="state.query.status" @tab-click="handleClick">
				<el-tab-pane v-for="status in state.status" :label="status.name" :name="status.status">
					<el-table
						v-loading="state.loading"
						:data="state.list"
						stripe
						border
						class="data-table"
						empty-text="暂无数据"
					>
						<el-table-column label="封面图" width="100" align="center">
							<template #default="{ row }">
								<el-image :src="row.image" fit="cover" class="book-image" />
							</template>
						</el-table-column>
						<el-table-column prop="isbn" label="ISBN" align="center" />
						<el-table-column prop="title" label="书名" align="center" />
						<el-table-column prop="author" label="作者" align="center" />
						<el-table-column prop="publisher" label="出版社" align="center" />
						<el-table-column prop="publishDate" label="出版日期" align="center" />
						<el-table-column prop="copyrightOwner" label="版权持有人" align="center" />
						<el-table-column prop="copyrightStartYear" label="版权开始" align="center" />
						<el-table-column prop="copyrightEndYear" label="版权到期" align="center" />
						<el-table-column prop="edition" label="版次" align="center" />
						<el-table-column prop="price" label="定价(元)" align="center" />
						<el-table-column label="状态" align="center" width="100">
							<template #default="{ row }">
								<el-tag :type="getStatusTagType(row.status)">{{ row.status }}</el-tag>
							</template>
						</el-table-column>
						<el-table-column label="操作" fixed="right" width="240" align="center">
							<template #default="{ row }">
								<el-button size="small" type="primary" plain @click="showDetail(row)">详情</el-button>
								<el-button size="small" type="success" plain @click="showCertificate(row)">查看凭证</el-button>
								<el-button size="small" type="warning" plain @click="downloadFile(row)">下载文件</el-button>
							</template>
						</el-table-column>
					</el-table>
				</el-tab-pane>
			</el-tabs>
		</el-col>
	</el-row>

	<el-row>
		<el-col :span="24">
			<!-- 分页器 -->
			<el-pagination
				class="pagination"
				background
				layout="prev, pager, next, jumper, ->, total"
				:current-page="state.query.page"
				:page-size="state.query.limit"
				:total="state.total"
				@current-change="handlePageChange"
			/>
		</el-col>
	</el-row>

	<!-- 详情对话框 -->
	<el-dialog v-model="state.detailVisible" title="书籍详情" width="50%">
		<el-descriptions :column="2" border>
			<el-descriptions-item label="封面图">
				<el-image :src="state.currentBook.image" fit="cover" class="detail-image" />
			</el-descriptions-item>
			<el-descriptions-item label="ISBN">{{ state.currentBook.isbn || '-' }}</el-descriptions-item>
			<el-descriptions-item label="书名">{{ state.currentBook.title || '-' }}</el-descriptions-item>
			<el-descriptions-item label="作者">{{ state.currentBook.author || '-' }}</el-descriptions-item>
			<el-descriptions-item label="出版社">{{ state.currentBook.publisher || '-' }}</el-descriptions-item>
			<el-descriptions-item label="出版日期">{{ state.currentBook.publishDate || '-' }}</el-descriptions-item>
			<el-descriptions-item label="版权持有人">{{ state.currentBook.copyrightOwner || '-' }}</el-descriptions-item>
			<el-descriptions-item label="版权开始">{{ state.currentBook.copyrightStartYear || '-' }}</el-descriptions-item>
			<el-descriptions-item label="版权到期">{{ state.currentBook.copyrightEndYear || '-' }}</el-descriptions-item>
			<el-descriptions-item label="版次">{{ state.currentBook.edition || '-' }}</el-descriptions-item>
			<el-descriptions-item label="定价">{{ state.currentBook.price ? `${state.currentBook.price}元` : '-' }}</el-descriptions-item>
			<el-descriptions-item label="状态">
				<el-tag :type="getStatusTagType(state.currentBook.status)">{{ state.currentBook.status || '-' }}</el-tag>
			</el-descriptions-item>
			<el-descriptions-item label="简介" :span="2">
				<div class="book-description">{{ state.currentBook.description || '暂无简介' }}</div>
			</el-descriptions-item>
		</el-descriptions>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="state.detailVisible = false">关闭</el-button>
			</span>
		</template>
	</el-dialog>

	<!-- 凭证对话框 -->
	<el-dialog v-model="state.certificateVisible" title="版权凭证" width="60%">
		<div class="certificate-container">
			<div class="certificate-content">
				<pre>{{ state.currentCertificate }}</pre>
			</div>
			<el-button type="primary" @click="copyCertificate" class="copy-btn">复制凭证</el-button>
		</div>
	</el-dialog>
</template>

<script setup lang="ts">
import { reactive, onMounted } from 'vue'
import { ElMessage, TabsPaneContext } from 'element-plus'

const state = reactive<any>({
	status:[
		{name:"全部",status:null},
		{name:"未审核",status:"未审核"},
		{name:"已同意",status:"已同意"},
		{name:"已拒绝",status:"已拒绝"},
	],
	loading: false,
	list: [],
	total: 0,
	query: {
		title: '',
		status: null,
		page: 1,
		limit: 5,
	},
	// 标签页相关
	activeTab: 'all',
	// 详情相关
	detailVisible: false,
	currentBook: {},
	// 凭证相关
	certificateVisible: false,
	currentCertificate: ''
})




function init() {
	state.loading = true
	frontRequest.get('/api/book/page', { params: state.query }).then((res) => {
		state.list = res.data.list
		state.total = res.data.total
		state.loading = false
	})
}

function handlePageChange(page: number) {
	state.query.page = page
	init()
}

const handleClick = (tab: TabsPaneContext, event: Event) => {
	state.query.status = state.status[tab.index].status;
	init();
}


function resetQuery() {
	state.query.title = ''
	state.query.status = null
	init()
}

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

// 显示详情
function showDetail(row: any) {
	state.currentBook = { ...row }
	state.detailVisible = true
}

// 显示凭证
function showCertificate(row: any) {
	state.currentCertificate = row.hex || '暂无凭证数据'
	state.certificateVisible = true
}

// 复制凭证
function copyCertificate() {
	navigator.clipboard.writeText(state.currentCertificate)
		.then(() => {
			ElMessage.success('凭证已复制到剪贴板')
		})
		.catch(() => {
			ElMessage.error('复制失败，请手动复制')
		})
}

// 下载文件
function downloadFile(row: any) {
	if (!row.file) {
		ElMessage.warning('该书籍没有可下载的文件')
		return
	}

	// 创建隐藏的可下载链接
	const link = document.createElement('a')
	link.href = row.file
	link.download = `${row.title || 'book'}_${new Date().getTime()}${getFileExtension(row.file)}`
	document.body.appendChild(link)
	link.click()
	document.body.removeChild(link)

	ElMessage.success('文件下载已开始')
}

// 获取文件扩展名
function getFileExtension(url: string) {
	const match = url.match(/\.([0-9a-z]+)(?:[\?#]|$)/i)
	return match ? `.${match[1]}` : '.pdf' // 默认返回pdf
}

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

<style scoped>
.book-image {
	width: 60px;
	height: 80px;
	border-radius: 4px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.detail-image {
	width: 120px;
	height: 160px;
	border-radius: 4px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.pagination {
	margin: 20px 0;
	text-align: center;
}

.mb-4 {
	margin-bottom: 16px;
}

.book-description {
	line-height: 1.6;
	color: #666;
}

.certificate-container {
	position: relative;
}

.certificate-content {
	background-color: #f8f8f8;
	border: 1px solid #eaeaea;
	border-radius: 4px;
	padding: 15px;
	max-height: 500px;
	overflow-y: auto;
	margin-bottom: 20px;
}

.certificate-content pre {
	margin: 0;
	white-space: pre-wrap;
	word-wrap: break-word;
	font-family: monospace;
}

.copy-btn {
	display: block;
	margin: 0 auto;
}

.el-tabs {
	margin-bottom: 20px;
}

.el-tag {
	margin: 2px;
}
</style>

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