<template>
	<div style="display: flex;">
		<img v-if="imagesLength == 1 && imageUrl" :src="imageUrl" alt="avatar" width="100px" height="100px"
			style="margin-right: 10px;" />
		<template v-else>
			<template v-for="(item, index) in imagesList">
				<img :src="item.url" alt="avatar" width="100px" height="100px" style="margin-right: 10px;" />
			</template>
		</template>
		<div v-if="imagesList.length < imagesLength">
			<a-upload a-upload v-model:file-list="fileList" list-type="picture-card" class="avatar-uploader"
				:show-upload-list="false" :before-upload="beforeUpload" :data="uploadData"
				:customRequest="uploadCustom">
					<div class="ant-upload-text">{{uploadTxt}}</div>
			</a-upload>
		</div>
	</div>
</template>

<script setup lang="ts">
	import { ref, onMounted, computed, defineProps, watch, defineEmits } from 'vue';
	import axios from 'axios';
	import { message } from 'ant-design-vue';
	import { useCommon } from '@/hooks/useCommon';
	let {  imageprefix } = useCommon();
	const props = defineProps(['upload_txt', 'success_image', 'images_length', 'image_type']);
	const emit = defineEmits();
	const headers = ref<Object>({
		Authorization: sessionStorage.getItem('token'),
		'X-Requested-With': null
	})
	const uploadData = ref<Object>({
		image: ''
	})
	let imagesList = ref<Object[]>([])
	let fileList = ref<Object[]>([])
	let imageUrl = ref<String>(props.success_image) // 图片路径
	let uploadTxt = ref<String>(props.upload_txt)
	let imagesLength = ref<Number>(props.images_length)
	let imagesType= ref<Number>(props.image_type)
	watch(() => props.success_image, (newVal : string, oldVal : string) => {
		imageUrl.value = newVal;
	})


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

	const uploadCustom = (e) => {
		let formdata = new FormData()
		formdata.append('image', e.file)
		axios({
			url: 'https://rcsc-test.jcjob.cn/api/common/image/upload?imgtype=' + imagesType.value,
			method: 'post',
			data: formdata,
			headers: headers.value
		}).then((res) => {
			if (imagesLength.value === 1) {
				imagesList.value = [{
					uid: '-1', // 文件唯一标识，建议设置为负数，防止和内部产生的 id 冲突
					name: e.file.name, // 文件名
					status: 'done', // 状态有：uploading done error removed
					url: imageprefix + res.data.data.filename
				}]
			} else {
				if (imagesList.value.length < imagesLength.value) {
					console.log(imagesList.value)
					imagesList.value.push({
						uid: '-' + (imagesList.value.length + 1), // 文件唯一标识，建议设置为负数，防止和内部产生的 id 冲突
						name: e.file.name, // 文件名
						status: 'done', // 状态有：uploading done error removed
						url: imageprefix + res.data.data.filename
					})
				} else {
					message.danger('最多上传5张');
				}
			}
			message.success(`${props.upload_txt}成功`);
			emit('uploadSuccess', res.data.data.filename)
		})
	}


	// const uploadChange = ({ file, fileList }) => {
	// 	console.log(fileList)
	// 	if (file.file.response) {
	// 		message.success(`${props.upload_txt}成功`);
	// 		emit('uploadSuccess', file.file.response)
	// 	}
	// }
</script>

<style scoped lang="less">
	.avatar-uploader>.ant-upload {
		width: 128px;
		height: 128px;
	}

	.ant-upload-select-picture-card i {
		font-size: 32px;
		color: #999;
	}

	.ant-upload-select-picture-card .ant-upload-text {
		margin-top: 8px;
		color: #666;
	}

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