<template>
	<xn-form-container :destroy-on-close="true" :visible="visible" :width="700" title="导入" @close="onClose">
		<span
			>导入数据格式严格按照系统模板进行数据录入，请点击
			<a-button size="small" type="primary" @click="downloadImportUserTemplate">下载模板</a-button>
		</span>
		<a-divider dashed />
		<div>
			<a-spin :spinning="impUploadLoading">
				<a-upload-dragger :accept="uploadAccept" :custom-request="customRequestLocal" :show-upload-list="false">
					<p class="ant-upload-drag-icon">
						<inbox-outlined></inbox-outlined>
					</p>
					<p class="ant-upload-text">单击或拖动文件到此区域进行上传</p>
					<p class="ant-upload-hint">仅支持xls、xlsx格式文件</p>
				</a-upload-dragger>
			</a-spin>
		</div>
		 <a-alert v-if="impAlertStatus" :show-icon="false" banner class="mt-3" closable type="info" @close="onImpClose">
			<template #description>
				<p>导入总数：{{ impResultData.totalCount }} 条</p>
				<p>导入成功：{{ impResultData.successCount }} 条</p>
				<div v-if="impResultData.errorCount > 0">
					<p><span style="color: red">失败条数：</span>{{ impResultData.errorCount }} 条</p>
					<a-table :columns="impErrorColumns" :dataSource="impResultErrorDataSource" size="small" />
				</div>
			</template>
		</a-alert>
	</xn-form-container>
</template>

<script name="itemImpExp" setup>
	import { message } from 'ant-design-vue'
	import downloadUtil from '@/utils/downloadUtil'
	import bizUserApi from '@/api/biz/bizUserApi'

	const impUploadLoading = ref(false)
	const impAlertStatus = ref(false)
	const impResultData = ref({})
	const impResultErrorDataSource = ref([])
	const impAccept = [
		{
			extension: '.xls',
			mimeType: 'application/vnd.ms-excel'
		},
		{
			extension: '.xlsx',
			mimeType: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
		}
	]
	// 指定能选择的文件类型
	const uploadAccept = String(
		impAccept.map((item) => {
			return item.mimeType
		})
	)
	// 导入
	const customRequestLocal = (data) => {
		impUploadLoading.value = true
		const fileData = new FormData()
		// 校验上传文件扩展名和文件类型是否为.xls、.xlsx
		const extension = '.'.concat(data.file.name.split('.').slice(-1).toString().toLowerCase())
		const mimeType = data.file.type
		// 提取允许的扩展名
		const extensionArr = impAccept.map((item) => item.extension)
		// 提取允许的MIMEType
		const mimeTypeArr = impAccept.map((item) => item.mimeType)
		if (!extensionArr.includes(extension) || !mimeTypeArr.includes(mimeType)) {
			message.warning('上传文件类型仅支持xls、xlsx格式文件！')
			impUploadLoading.value = false
			return false
		}
		fileData.append('file', data.file)
		return bizUserApi
			.itemImport(fileData)
			.then((res) => {
				impAlertStatus.value = true
				impResultData.value = res
				impResultErrorDataSource.value = res.errorDetail
				emit('successful')
			})
			.finally(() => {
				impUploadLoading.value = false
			})
	}
	// 关闭导入提示
	const onImpClose = () => {
		console.log("关闭导入提示")
		impAlertStatus.value = false
	}
	const impErrorColumns = [
		{
			title: '索引',
			dataIndex: 'index',
			width: '80px'
		},
		{
			title: '原因',
			dataIndex: 'msg'
		}
	]
	// 定义emit事件
	//const emit = defineEmits({ successful: null })
	const emit = defineEmits(['itemImportBack'])
	// 默认是关闭状态
	let visible = ref(false)
	const submitLoading = ref(false)

	// 打开抽屉
	const onOpen = () => {
		visible.value = true
	}
	// 关闭抽屉
	const onClose = () => {
		console.log("close")
		visible.value = false
		if (impAlertStatus.value === true) {
			console.log("111")
		}
		emit('successful')
		// 关闭导入的提示
		onImpClose()
	}
	// 下载用户导入模板
	const downloadImportUserTemplate = () => {
		impUploadLoading.value = true
		bizUserApi
			.downloadImportTemplate()
			.then((res) => {
				downloadUtil.resultDownload(res)
			})
			.finally(() => {
				impUploadLoading.value = false
			})
	}
	// 调用这个函数将子组件的一些数据和方法暴露出去
	defineExpose({
		onOpen
	})
</script>
