<template>
	<el-dialog v-model="visible" :title="title" :close-on-click-modal="false" :modal="false" size="95%" :wrapper-closable="false" class="detailDrawer">
		<div style="padding: 10px">
			<el-form ref="dataFormRef" :model="dataForm" :rules="dataRules" label-width="100px">
				<el-row>
					<el-col :span="24">
						<el-upload
							ref="uploadRef"
							class="upload-demo"
							drag
							limit="1"
							accept=".xls,.xlsx"
							action="http://oms.maydos.com.cn/sit-api/sys/file/upload"
							:on-success="uploadSuccess"
							:on-remove="removeFile"
						>
							<el-icon class="el-icon--upload"><upload-filled /></el-icon>
							<div class="el-upload__text"><em>点击上传文件</em></div>
							<template #tip>
								<div class="el-upload__tip"><a :href="dataForm.btnData.importTempUrl" target="_blank">点击下载导入模板</a></div>
								<div class="el-upload__tip">只能上传 xls/xlsx 格式的文件</div>
							</template>
						</el-upload>
					</el-col>
				</el-row>
				<el-form-item>
					<el-button v-prevent-reclick type="primary" @click="submitHandle()">确认</el-button>
					<el-button @click="visible = false">取消</el-button>
				</el-form-item>
			</el-form>
		</div>
	</el-dialog>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { ElMessage, UploadFile, UploadFiles } from 'element-plus/es'
import { baseUploadApi } from '../api/report'

const emit = defineEmits(['refreshDataList'])
const title = ref('导入')
const visible = ref(false)
const dataFormRef = ref()
const uploadRef = ref()
const dataForm = reactive({
	id: '',
	btnData: {},
	fileUpload: []
})

const init = (btnData?: {}) => {
	dataForm.id = ''
	if (btnData.btnLinkFormTitle && btnData.btnLinkFormTitle != '') {
		title.value = btnData.btnLinkFormTitle
	}
	// 重置表单数据
	if (dataFormRef.value) {
		dataFormRef.value.resetFields()
	}
	Object.assign(dataForm, { btnData: btnData, fileUpload: [] })
	visible.value = true
}

const dataRules = ref({})

const uploadSuccess = (response: any, uploadFile: UploadFile, uploadFiles: UploadFiles) => {
	dataForm.fileUpload.push(response.data)
}
const removeFile = (uploadFile: UploadFile, uploadFiles: UploadFiles) => {
	dataForm.fileUpload.splice(0, 1)
}

// 表单提交
const submitHandle = () => {
	if (dataForm.fileUpload.length == 0) {
		ElMessage.info({ message: '请上传文件' })
		return
	}
	dataFormRef.value.validate((valid: boolean) => {
		if (!valid) {
			return false
		}
		baseUploadApi(dataForm).then(() => {
			ElMessage.success({
				message: '操作成功',
				duration: 500,
				onClose: () => {
					visible.value = false
					uploadRef.value.clearFiles()
					emit('refreshDataList')
				}
			})
		})
	})
}

defineExpose({
	init
})
</script>

<style lang="scss" scoped>
.mod__menu {
	::v-deep(.el-popover.el-popper) {
		overflow-x: hidden;
	}

	.popover-list {
		::v-deep(.el-input__inner) {
			cursor: pointer;
		}

		::v-deep(.el-input__suffix) {
			cursor: pointer;
		}
	}

	&-icon-inner {
		width: 100%;
		max-height: 350px;
		overflow-x: hidden;
		overflow-y: auto;
		// 滚动条的宽度
		&::-webkit-scrollbar {
			width: 8px;
			height: 8px;
			background: transparent;
		}

		// 滚动条的设置
		&::-webkit-scrollbar-thumb {
			background-color: #dddddd;
			background-clip: padding-box;
			min-height: 28px;
			border-radius: 4px;
		}

		&::-webkit-scrollbar-thumb:hover {
			background-color: #bbb;
		}
	}

	&-icon-list {
		width: 100% !important;
		padding: 0;
		margin: -8px 0 0 -8px;

		> .el-button {
			padding: 8px;
			margin: 18px 0 0 8px;
			height: 45px;
			width: 45px;

			> span {
				display: inline-block;
				vertical-align: middle;
				width: 18px;
				height: 18px;
				font-size: 18px;
			}
		}
	}
}
</style>
