<template>
	<div class="copyright-upload-container">
		<h2 class="upload-title">图书版权信息登记</h2>
		<el-form
			:model="formData"
			ref="formRef"
			label-width="120px"
			label-position="right"
			class="copyright-upload-form"
			:rules="rules"
		>
			<!-- 基本信息部分 -->
			<div class="form-section">
				<h3 class="section-title">
					<el-icon><Document /></el-icon>
					基本信息
				</h3>
				<div class="form-grid">
					<el-form-item label="图书标题" prop="title">
						<el-input
							v-model="formData.title"
							placeholder="请输入图书标题"
							clearable
						/>
					</el-form-item>

					<el-form-item label="ISBN编号" prop="isbn">
						<el-input
							v-model="formData.isbn"
							placeholder="请输入ISBN编号"
							clearable
						/>
						<div class="input-tip">国际标准书号，如978-7-121-12345-6</div>
					</el-form-item>

					<el-form-item label="作者" prop="author">
						<el-input
							v-model="formData.author"
							placeholder="请输入作者姓名"
							clearable
						/>
					</el-form-item>

					<el-form-item label="出版社" prop="publisher">
						<el-input
							v-model="formData.publisher"
							placeholder="请输入出版社名称"
							clearable
						/>
					</el-form-item>
				</div>
			</div>

			<!-- 版权信息部分 -->
			<div class="form-section">
				<h3 class="section-title">
					<el-icon><Lock /></el-icon>
					版权信息
				</h3>
				<div class="form-grid">
					<el-form-item label="出版日期" prop="publishDate">
						<el-date-picker
							v-model="formData.publishDate"
							type="date"
							placeholder="选择出版日期"
							value-format="YYYY-MM-DD"
							style="width: 100%"
						/>
					</el-form-item>

					<el-form-item label="版权持有人" prop="copyrightOwner">
						<el-input
							v-model="formData.copyrightOwner"
							placeholder="请输入版权持有人"
							clearable
						/>
					</el-form-item>

					<el-form-item label="版权起始年份" prop="copyrightStartYear">
						<el-date-picker
							v-model="formData.copyrightStartYear"
							type="year"
							placeholder="选择起始年份"
							value-format="YYYY"
							style="width: 100%"
						/>
					</el-form-item>

					<el-form-item label="版权到期年份" prop="copyrightEndYear">
						<el-date-picker
							v-model="formData.copyrightEndYear"
							type="year"
							placeholder="选择到期年份"
							value-format="YYYY"
							style="width: 100%"
						/>
					</el-form-item>

					<el-form-item label="版次" prop="edition">
						<el-input
							v-model="formData.edition"
							placeholder="如：第一版"
							clearable
						/>
					</el-form-item>

					<el-form-item label="语言" prop="language">
						<el-select
							v-model="formData.language"
							placeholder="请选择语言"
							style="width: 100%"
						>
							<el-option label="中文" value="中文" />
							<el-option label="英文" value="英文" />
							<el-option label="日文" value="日文" />
							<el-option label="其他" value="其他" />
						</el-select>
					</el-form-item>
				</div>
			</div>

			<!-- 文件上传部分 -->
			<div class="form-section">
				<h3 class="section-title">
					<el-icon><UploadFilled /></el-icon>
					文件上传
				</h3>
				<el-row :gutter="20">
					<el-col :span="12">
						<el-form-item label="电子文件" prop="file" class="file-upload-item">
							<el-upload
								drag
								:action="state.path"
								:limit="1"
								:on-success="handleFileSuccess"
								:on-error="handleUploadError"
								:before-upload="beforeFileUpload"
								:file-list="fileList"
							>
								<el-icon class="el-icon--upload"><UploadFilled /></el-icon>
								<div class="el-upload__text">
									将图书电子文件拖到此处，或<em>点击上传</em>
								</div>
								<template #tip>
									<div class="el-upload__tip">
										支持PDF、EPUB等格式，大小不超过50MB
									</div>
								</template>
							</el-upload>
						</el-form-item>
					</el-col>

					<el-col :span="12">
						<el-form-item label="封面图片" prop="image" class="image-upload-item">
							<el-upload
								:action="state.path"
								list-type="picture-card"
								:show-file-list="false"
								:on-success="handleImageSuccess"
								:before-upload="beforeImageUpload"
							>
								<img
									v-if="formData.image"
									:src="formData.image"
									class="uploaded-image"
									alt="封面图片"
								/>
								<el-icon v-else class="uploader-icon">
									<Plus />
								</el-icon>
							</el-upload>
							<div class="upload-tip">建议尺寸16:9，大小不超过5MB</div>
						</el-form-item>
					</el-col>
				</el-row>
			</div>

			<!-- 其他信息部分 -->
			<div class="form-section">
				<h3 class="section-title">
					<el-icon><PriceTag /></el-icon>
					其他信息
				</h3>
				<div class="form-grid">
					<el-form-item label="图书定价" prop="price">
						<el-input-number
							v-model="formData.price"
							:min="0"
							:precision="2"
							controls-position="right"
						/>
						<span class="price-unit">元</span>
					</el-form-item>


				</div>
			</div>

			<!-- 表单操作按钮 -->
			<div class="form-actions">
				<el-button
					type="primary"
					@click="submitForm"
					:loading="submitting"
					class="submit-btn"
				>
					<template #icon>
						<el-icon><Upload /></el-icon>
					</template>
					提交版权信息
				</el-button>

				<el-button
					@click="resetForm"
					class="reset-btn"
				>
					<template #icon>
						<el-icon><Refresh /></el-icon>
					</template>
					重置表单
				</el-button>
			</div>
		</el-form>
	</div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { FormInstance, FormRules, UploadProps } from 'element-plus'
import {
	Document,
	Lock,
	UploadFilled,
	PriceTag,
	Upload,
	Refresh,
	Plus
} from '@element-plus/icons-vue'

const state = reactive({
	path:import.meta.env.VITE_API_FRONT_BASE_URL+"/api/upload"
})

// 表单引用
const formRef = ref<FormInstance>()

// 表单数据
const formData = reactive({
	title: '',
	isbn: '',
	author: '',
	publisher: '',
	publishDate: '',
	copyrightOwner: '',
	copyrightStartYear: '',
	copyrightEndYear: '',
	edition: '',
	language: '中文',
	price: 0,
	image: '',
	file: '',
	useBlockchain: true
})

// 文件列表
const fileList = ref([])

// 提交状态
const submitting = ref(false)

// 表单验证规则
const rules = reactive<FormRules>({
	title: [
		{ required: true, message: '请输入图书标题', trigger: 'blur' },
		{ min: 2, max: 100, message: '长度在2到100个字符', trigger: 'blur' }
	],
	isbn: [
		{ required: true, message: '请输入ISBN编号', trigger: 'blur' },
		{ pattern: /^(?:\d{3}-)?\d{1,5}-\d{1,7}-\d{1,7}-\d$/, message: 'ISBN格式不正确', trigger: 'blur' }
	],
	author: [
		{ required: true, message: '请输入作者', trigger: 'blur' },
		{ min: 2, max: 50, message: '长度在2到50个字符', trigger: 'blur' }
	],
	publisher: [
		{ required: true, message: '请输入出版社', trigger: 'blur' },
		{ min: 2, max: 100, message: '长度在2到100个字符', trigger: 'blur' }
	],
	copyrightOwner: [
		{ required: true, message: '请输入版权持有人', trigger: 'blur' }
	],
	image: [
		{ required: true, message: '请上传封面图片', trigger: 'change' }
	],
	file: [
		{ required: true, message: '请上传电子文件', trigger: 'change' }
	]
})

// 图片上传成功处理
const handleImageSuccess: UploadProps['onSuccess'] = (response) => {
	formData.image = response.data.path
}

// 文件上传成功处理
const handleFileSuccess: UploadProps['onSuccess'] = (response) => {
	formData.file = response.data.path
}

// 上传错误处理
const handleUploadError: UploadProps['onError'] = () => {
	ElMessage.error('文件上传失败，请重试')
}

// 图片上传前校验
const beforeImageUpload: UploadProps['beforeUpload'] = (file) => {
	const isImage = file.type.startsWith('image/')
	const isLt5M = file.size / 1024 / 1024 < 5

	if (!isImage) {
		ElMessage.error('只能上传图片文件!')
		return false
	}
	if (!isLt5M) {
		ElMessage.error('图片大小不能超过5MB!')
		return false
	}
	return true
}

// 文件上传前校验
const beforeFileUpload: UploadProps['beforeUpload'] = (file) => {
	const allowedTypes = ['application/pdf', 'application/epub+zip']
	const isAllowedType = allowedTypes.includes(file.type)
	const isLt50M = file.size / 1024 / 1024 < 50

	if (!isAllowedType) {
		ElMessage.error('只能上传PDF或EPUB文件!')
		return false
	}
	if (!isLt50M) {
		ElMessage.error('文件大小不能超过50MB!')
		return false
	}
	return true
}
// 提交表单
const submitForm = () => {
	formRef.value?.validate(async (valid) => {
		if (!valid) {
			ElMessage.warning('请填写完整的表单信息')
			return
		}
		submitting.value = true
		try {
			// 这里应该是实际的API调用
			const response = await frontRequest.post('/api/book', formData)
			// 模拟API调用
			await new Promise(resolve => setTimeout(resolve, 1500))
			ElMessage.success('版权信息提交成功')
			resetForm()
		} catch (error) {
			console.error('提交失败:', error)
			ElMessage.error('提交失败，请稍后重试')
		} finally {
			submitting.value = false
		}
	})
}

// 重置表单
const resetForm = () => {
	ElMessageBox.confirm('确定要重置表单吗?', '提示', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning'
	}).then(() => {
		formRef.value?.resetFields()
		fileList.value = []
		formData.image = ''
		formData.file = ''
		ElMessage.success('表单已重置')
	}).catch(() => {
		// 取消操作
	})
}
</script>

<style scoped lang="scss">
.copyright-upload-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 30px;
	background-color: #fff;
	border-radius: 12px;
	box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);

	.upload-title {
		text-align: center;
		margin-bottom: 30px;
		color: #333;
		font-size: 24px;
		font-weight: 500;
		letter-spacing: 1px;
	}

	.copyright-upload-form {
		.form-section {
			margin-bottom: 30px;
			padding: 20px;
			background-color: #f9fafc;
			border-radius: 8px;
			border-left: 4px solid #409EFF;
			transition: all 0.3s ease;

			&:hover {
				box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
			}

			.section-title {
				display: flex;
				align-items: center;
				margin-bottom: 20px;
				color: #409EFF;
				font-size: 18px;
				font-weight: 500;

				.el-icon {
					margin-right: 8px;
					font-size: 20px;
				}
			}

			.form-grid {
				display: grid;
				grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
				gap: 20px;

				:deep(.el-form-item) {
					margin-bottom: 20px;
				}
			}
		}

		.input-tip {
			margin-top: 8px;
			font-size: 12px;
			color: #999;
			line-height: 1.5;
		}

		.price-unit {
			margin-left: 8px;
			color: #666;
		}

		.file-upload-item {
			:deep(.el-upload) {
				width: 100%;
			}

			:deep(.el-upload-dragger) {
				width: 100%;
				padding: 20px;
			}
		}


	}

	.form-actions {
		display: flex;
		justify-content: center;
		gap: 20px;
		margin-top: 40px;

		.submit-btn {
			padding: 12px 36px;
			font-size: 16px;
			letter-spacing: 1px;
		}

		.reset-btn {
			padding: 12px 36px;
			font-size: 16px;
		}
	}
}

@media (max-width: 768px) {
	.copyright-upload-container {
		padding: 15px;

		.copyright-upload-form {
			.form-grid {
				grid-template-columns: 1fr;
			}

			.form-section {
				padding: 15px;
			}
		}

		.form-actions {
			flex-direction: column;
			gap: 10px;

			button {
				width: 100%;
			}
		}
	}
}
</style>

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