<template>
	<div style="display: flex;">
		<a-upload-dragger v-model:file-list="fileList" class="avatar-uploader" :show-upload-list="false"
			:before-upload="beforeUpload" :data="uploadData" :customRequest="uploadCustom" @drop="handleDrop" >
			<p class="ant-upload-drag-icon">
				<inbox-outlined></inbox-outlined>
			</p>
			<p class="ant-upload-text">拖拽或点击文件上传</p>
		</a-upload-dragger>
	</div>
</template>

<script setup lang="ts">
	import { ref, onMounted, computed, defineProps, watch, defineEmits } from 'vue';
	import axios from 'axios';
	import { UploadOutlined, InboxOutlined } from '@ant-design/icons-vue';
	import { useCommon } from '@/hooks/useCommon';
	let { message, imageprefix } = useCommon();
	const props = defineProps({
		upload_txt: String,
		doc_type: {
			type: Number,
			default: 1
		}
	});
	const emit = defineEmits();
	const headers = ref<Object>({
		Authorization: sessionStorage.getItem('token'),
		'X-Requested-With': null
	})
	const uploadData = ref<Object>({
		doc: ''
	})
	const docType = ref<Number>(props.doc_type)
	let fileList = ref<Object[]>([])
	watch(() => [props.doc_type], (newVal, oldVal) => {
		docType.value = newVal[0];
	}, {
		immediate: true
	})

	const handleDrop = (e) => {
	}


	const beforeUpload = (file) => {
		uploadData.value.doc = file
	}

	const uploadCustom = (e) => {
		let formdata = new FormData()
		formdata.append('doc', e.file)
		axios({
			url: 'https://rcsc-test.jcjob.cn/api/common/doc/upload?doctype=' + docType.value,
			method: 'post',
			data: formdata,
			headers: headers.value
		}).then((res) => {
			console.log(res.data.data.filename)
			message.success(`上传文件成功`);
			emit('uploadSuccess', res.data.data.filename)
		}).catch(error => {
			message.warn('文件上传失败，请检查文件类型，如有疑问，请咨询管理员');
		})
	}
	
	
</script>

<style scoped lang="less">
	.avatar-uploader {
		width: 300px;
	}

	.avatar-uploader i {
		font-size: 32px;
		color: #999;
	}

	.avatar-uploader .ant-upload-text {
		margin-top: 8px;
		color: #666;
		padding: 20px;
	}

	.avatar-uploader .ant-upload-list-item {
		width: 128px;
		height: 128px;
		margin-right: 8px;
	}
</style>