<template>
	<div class="DIYUPLoad">
		<a-upload
			:customRequest="callback"
			:file-list="getFileList"
			:multiple="multiple"
			:action="action"
			:listType="listType"
			:disabled="disabled"
			v-bind="$attrs"
		>
			<template #itemRender="{ file }" v-if="listType === 'text'">
				<a-space class="file_row">
					<span class="file_name">{{ file.name }}</span>
					<span class="file_tools">
						<cloud-download-outlined @click="onDownload(file)" class="icon download" />
						<delete-outlined v-if="disabled != true" @click="onRemove(file)" class="icon delete" />
					</span>
				</a-space>
			</template>
			<a-button v-if="disabled != true && listType === 'text'">
				<template #icon><CloudUploadOutlined /></template>
				附件上传
			</a-button>
			<div v-else-if="listType === 'picture-card' && disabled != true">
				<plus-outlined />
				<div style="margin-top: 8px">上传</div>
			</div>
		</a-upload>
	</div>
</template>
<script setup name="DIYUPLoad">
	const emits = defineEmits(['update:modelValue', 'update:urls'])
	const props = defineProps({
		modelValue: Array | Object,
		urls: Array | String,
		action: String,
		listType: { type: String, default: 'text' },
		multiple: Boolean,
		disabled: Boolean,
		change: Function
	})

	const fileList = ref([])

	const getFileList = computed(() => {
		let reg = parseValue(props.modelValue || props.urls)
		return reg
	})

	function parseValue(reg) {
		if (!reg) {
			return []
		}
		const result = []
		if (Array.isArray(reg)) {
			reg.forEach((v) => {
				result.push(parse(v))
			})
		} else {
			result.push(parse(reg))
		}
		return result

		function parse(url) {
			if (typeof url === 'string') {
				const names = url.split('/')
				const name = names[names.length - 1]
				return { name, url }
			}
			return url
		}
	}

	function callback(ev) {
		let fd = new FormData()
		fd.append('file', ev.file)
		props.change(fd, ev?.file?.name).then((reg) => {
			const urls = reg.split('/')
			const name = urls[urls.length - 1]
			const result = { name, url: reg }
			updata(result)
		})
	}
	function onDownload(ev) {
		let link = document.createElement('a')
		link.href = ev.url
		link.download = ev.name
		link.style.display = 'none'
		document.body.appendChild(link)
		link.click()
		document.body.removeChild(link)
	}

	function onRemove(ev) {
		let reg = JSON.parse(
			JSON.stringify(
				getFileList.value.filter((v) => {
					v.url != ev.url
				})
			)
		)
		if (props.multiple) {
			emits('update:modelValue', reg)
			emits(
				'update:urls',
				reg.map((v) => v.url)
			)
		} else {
			emits('update:modelValue', undefined)
			emits('update:urls', undefined)
		}
	}

	function updata(data) {
		let vals = JSON.parse(JSON.stringify(getFileList.value))
		if (props.multiple) {
			vals.push(data)
			emits('update:modelValue', vals)
			emits(
				'update:urls',
				vals.map((v) => v.url)
			)
		} else {
			vals = data
			emits('update:modelValue', data)
			emits('update:urls', data.url)
		}
	}
</script>
<style lang="less" scoped>
	.file_row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 6px 0;
		.file_tools {
		}
		.file_name {
			color: #333;
		}
		.icon {
			cursor: pointer;
			margin: 0 20px;
			opacity: 0.7;
			transition: opacity 0.2s;
			&.delete {
				color: #f56c6c;
			}
			&.download {
				color: #409eff;
			}
			&:hover {
				opacity: 1;
			}
		}
	}
</style>
