<!--
 * @Description: 上传组件
-->

<template>
	<!-- 上传列表 -->
	<ul>
		<!-- 文件列表 -->
		<!-- <li v-for="(item, index) in fileList" :key="item.id">
		</li> -->
		<Attachment
			module="upload"
			:mode="mode"
			v-model="fileList"
		>
			<!-- <template v-for="(_, name) in slots" #[name]="scope">
			<slot :name="name" v-bind="scope" />
			</template> -->
		</Attachment>

		<li
			class="upload-uploader-wrapper"
		>
			<Uploader
				v-model="fileList"
				:mode="mode"
				:accept="accept"
				:multiple="multiple"
				:beforeRead="beforeRead"
				:afterRead="afterRead"
				:checkFormat="checkFormat"
				:compress="compress"
				:customRequest="customRequest"
				@oversize="(e: File[]) => emit('oversize', e)"
			>
				<template v-for="(_, name) in slots" #[name]="scope">
					<slot :name="name" v-bind="scope" />
				</template>
			</Uploader>
		</li>
	</ul>
</template>

<script name="Upload" lang="ts" setup>
//#region import
import Uploader from './uploader/index.vue'
import Attachment from './attachment/index.vue'
import type { StyleValue, NewFile, Status } from './types'
export type { NewFile, Status }
import {toRefs,computed, ref, useSlots, getCurrentInstance, type ComponentInternalInstance} from 'vue'
//#endregion

//#region Vue 组件参数
// 插槽
const slots = useSlots()

const emit = defineEmits([
	'update:modelValue',
	'sort-start',
	'sort-end',
	'sort-update',
	'oversize'
])

const props = withDefaults(
	defineProps<{
		mode?: 'normal' | 'thumbnail' // 显示模式：常规/缩略图
		modelValue: Array<NewFile>
		accept?: string // 文件格式
		multiple?: boolean // 是否支持文件多选
		maxSize?: number // 限制文件大小
		maxCount?: number // 最大上传文件数量
		previewable?: boolean // 是否可预览
		beforeRead?: (file: File[]) => boolean
		afterRead?: (newFile: NewFile[]) => void
		checkFormat?: (file: File[]) => Promise<File[]>
		compress?: (file: NewFile[]) => Promise<NewFile[]>
		customRequest?: (file: NewFile) => Promise<NewFile>
	}>(),
	{
		mode: 'thumbnail',
		accept: '*/*',
		multiple: false,
		maxSize: Infinity,
		maxCount: Infinity,
		previewable: false,
	}
)

const {
	modelValue,
	mode,
	accept,
	multiple,
	maxSize,
	maxCount,
	previewable,
	beforeRead,
	afterRead,
	checkFormat,
	compress,
	customRequest
} = toRefs(props)

// 双向数据绑定
const fileList = computed({
	get() {
		return modelValue.value
	},
	set(newValue) {
		emit('update:modelValue', newValue)
	}
})

if(!Array.isArray(fileList.value)) fileList.value = []
//#endregion
</script>

<style lang="scss" scoped>
ul {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(auto-fill, 100px);
	grid-gap: 10px;
}
</style>
