<template>
	<div class="upload-demo">
		<a-card title="图片上传组件示例" class="demo-card">
			<a-row :gutter="24">
				<a-col :span="12">
					<a-card type="inner" title="单图上传">
						<ImageUpload v-model="singleImage" />
						<div class="result">
							<strong>结果：</strong>
							<p>{{ singleImage || '暂无图片' }}</p>
						</div>
					</a-card>
				</a-col>
				<a-col :span="12">
					<a-card type="inner" title="多图上传（最多5张）">
						<ImageUpload
							v-model="multipleImages"
							:max-count="5"
							@change="handleImageChange"
						/>
						<div class="result">
							<strong>结果：</strong>
							<p v-if="multipleImages.length > 0">
								{{ multipleImages.join(', ') }}
							</p>
							<p v-else>暂无图片</p>
						</div>
					</a-card>
				</a-col>
			</a-row>
		</a-card>

		<a-card title="图片尺寸限制示例" class="demo-card">
			<a-row :gutter="24">
				<a-col :span="12">
					<a-card type="inner" title="限制图片尺寸 800x600">
						<ImageUpload
							v-model="sizeImage"
							:min-width="800"
							:max-width="1920"
							:min-height="600"
							:max-height="1080"
							tip="尺寸要求：800x600 ~ 1920x1080"
						/>
						<div class="result">
							<strong>结果：</strong>
							<p>{{ sizeImage || '暂无图片' }}</p>
						</div>
					</a-card>
				</a-col>
				<a-col :span="12">
					<a-card type="inner" title="自定义上传文字">
						<ImageUpload
							v-model="customImage"
							upload-text="点击选择图片"
							tip="支持 JPG、PNG 格式，最大 10MB"
						/>
						<div class="result">
							<strong>结果：</strong>
							<p>{{ customImage || '暂无图片' }}</p>
						</div>
					</a-card>
				</a-col>
			</a-row>
		</a-card>

		<a-card title="上传事件监听示例" class="demo-card">
			<a-row :gutter="24">
				<a-col :span="12">
					<a-card type="inner" title="监听上传事件">
						<ImageUpload
							v-model="eventImage"
							@upload-success="handleUploadSuccess"
							@upload-error="handleUploadError"
							@preview="handlePreview"
						/>
						<div class="result">
							<strong>结果：</strong>
							<p>{{ eventImage || '暂无图片' }}</p>
							<p v-if="eventLog" class="event-log">
								<strong>事件日志：</strong>
								<pre>{{ eventLog }}</pre>
							</p>
						</div>
					</a-card>
				</a-col>
			</a-row>
		</a-card>

		<a-card title="文件上传组件示例" class="demo-card">
			<a-row :gutter="24">
				<a-col :span="12">
					<a-card type="inner" title="单文件上传">
						<FileUpload v-model="singleFile" />
						<div class="result">
							<strong>结果：</strong>
							<p>{{ singleFile || '暂无文件' }}</p>
						</div>
					</a-card>
				</a-col>
				<a-col :span="12">
					<a-card type="inner" title="多文件上传">
						<FileUpload
							v-model="multipleFiles"
							:max-count="10"
							:multiple="true"
							@change="handleFileChange"
							@remove="handleFileRemove"
						/>
						<div class="result">
							<strong>结果：</strong>
							<p v-if="multipleFiles.length > 0">
								{{ multipleFiles.join(', ') }}
							</p>
							<p v-else>暂无文件</p>
						</div>
					</a-card>
				</a-col>
			</a-row>
		</a-card>

		<a-card title="限制文件类型示例" class="demo-card">
			<a-row :gutter="24">
				<a-col :span="12">
					<a-card type="inner" title="仅支持 JPG/PNG 图片">
						<ImageUpload
							v-model="jpgImage"
							accept="image/jpeg,image/png"
						/>
					</a-card>
				</a-col>
				<a-col :span="12">
					<a-card type="inner" title="仅支持 PDF/Word 文档">
						<FileUpload
							v-model="documentFile"
							accept=".pdf,.doc,.docx"
						/>
					</a-card>
				</a-col>
			</a-row>
		</a-card>

		<a-card title="禁用状态示例" class="demo-card">
			<a-row :gutter="24">
				<a-col :span="12">
					<a-card type="inner" title="禁用图片上传">
						<ImageUpload
							v-model="disabledImage"
							:disabled="true"
						/>
					</a-card>
				</a-col>
				<a-col :span="12">
					<a-card type="inner" title="禁用文件上传">
						<FileUpload
							v-model="disabledFile"
							:disabled="true"
						/>
					</a-card>
				</a-col>
			</a-row>
		</a-card>

		<a-card title="返回完整文件列表示例" class="demo-card">
			<a-row :gutter="24">
				<a-col :span="12">
					<a-card type="inner" title="返回完整文件对象">
						<ImageUpload
							v-model="fullFileList"
							:return-url="false"
							@change="handleFullListChange"
						/>
						<div class="result">
							<strong>完整文件列表：</strong>
							<pre>{{ JSON.stringify(fullFileList, null, 2) }}</pre>
						</div>
					</a-card>
				</a-col>
			</a-row>
		</a-card>
	</div>
</template>

<script setup>
import { ref } from 'vue'
import ImageUpload from '@/components/scUpload/index.vue'
import FileUpload from '@/components/scUpload/file.vue'

// 单图上传
const singleImage = ref('')

// 多图上传
const multipleImages = ref([])

// 单文件上传
const singleFile = ref('')

// 多文件上传
const multipleFiles = ref([])

// 限制类型
const jpgImage = ref('')
const documentFile = ref('')

// 禁用状态
const disabledImage = ref('')
const disabledFile = ref('')

// 完整文件列表
const fullFileList = ref([])

// 新增示例
const sizeImage = ref('')
const customImage = ref('')
const eventImage = ref('')
const eventLog = ref('')

// 图片变化事件
const handleImageChange = (value, fileList) => {
	console.log('图片URL数组:', value)
	console.log('完整文件列表:', fileList)
}

// 文件变化事件
const handleFileChange = (value, fileList) => {
	console.log('文件URL数组:', value)
	console.log('完整文件列表:', fileList)
}

// 文件移除事件
const handleFileRemove = (file) => {
	console.log('移除的文件:', file)
}

// 完整文件列表变化事件
const handleFullListChange = (value, fileList) => {
	console.log('完整文件列表:', fileList)
}

// 上传成功事件
const handleUploadSuccess = (data, file) => {
	eventLog.value = `上传成功\n文件名: ${file.name}\n响应数据: ${JSON.stringify(data, null, 2)}`
	console.log('上传成功:', data, file)
}

// 上传失败事件
const handleUploadError = (errorMsg, file) => {
	eventLog.value = `上传失败\n文件名: ${file.name}\n错误信息: ${errorMsg}`
	console.log('上传失败:', errorMsg, file)
}

// 预览事件
const handlePreview = (file) => {
	eventLog.value = `预览图片\n文件名: ${file.name}\n状态: ${file.status}`
	console.log('预览文件:', file)
}
</script>

<style scoped>
.upload-demo {
	padding: 24px;
}

.demo-card {
	margin-bottom: 24px;
}

.demo-card :deep(.ant-card-body) {
	padding: 24px;
}

.demo-card :deep(.ant-card-head-title) {
	font-size: 16px;
	font-weight: 600;
}

.result {
	margin-top: 16px;
	padding: 12px;
	background-color: #f5f5f5;
	border-radius: 4px;
}

.result p {
	margin: 8px 0 0 0;
	word-break: break-all;
}

.result pre {
	margin: 8px 0 0 0;
	max-height: 200px;
	overflow-y: auto;
	background: #fff;
	padding: 8px;
	border-radius: 4px;
}

.event-log {
	margin-top: 12px !important;
	padding: 8px !important;
	background-color: #f0f2f5 !important;
	border-radius: 4px;
}

.event-log pre {
	margin: 8px 0 0 0;
	max-height: 150px;
	overflow-y: auto;
	background: #fff;
	padding: 8px;
	border-radius: 4px;
	font-size: 11px;
}
</style>
