<!--
 * @Descripttion: 文件导入
 * @version: 1.0
 * @Author: sakuya
 * @Date: 2022年5月24日11:30:03
 * @LastEditors:
 * @LastEditTime:
-->

<template>
	<slot :open="open">
		<el-button type="primary" plain @click="open">导入</el-button>
	</slot>
	<el-dialog v-model="dialog" title="导入" :width="550" :close-on-click-modal="false" append-to-body destroy-on-close>
		<el-progress v-if="loading" :text-inside="true" :stroke-width="20" :percentage="percentage" style="margin-bottom: 15px;"/>
		<div v-loading="loading">
			<el-upload ref="uploader"
				drag
				:accept="accept"
				:maxSize="maxSize"
				:limit="1"
				:data="data"
				:show-file-list="false"
				:http-request="request"
				:before-upload="before"
				:on-progress="progress"
				:on-success="success"
				:on-error="error"
				>
				<slot name="uploader">
					<el-icon class="el-icon--upload"><el-icon-upload-filled /></el-icon>
					<div class="el-upload__text">
						将文件拖到此处或 <em>点击选择文件上传</em>
					</div>
				</slot>
				<template #tip>
					<div class="el-upload__tip">
						<template v-if="tip">{{tip}}</template>
						<template v-else>请上传小于或等于 {{maxSize}}M 的 {{accept}} 格式文件</template>
						<p v-if="templateUrl" style="margin-top: 7px;">
							<el-link :href="templateUrl" target="_blank" type="primary" :underline="false">下载导入模板</el-link>
						</p>
					</div>
				</template>
			</el-upload>
			<el-form v-if="$slots.form" inline label-width="100px" label-position="left" style="margin-top: 18px;">
				<slot name="form" :formData="formData"></slot>
			</el-form>
		</div>
	</el-dialog>
</template>

<script>
	export default {
		emits: ['success'],
		props: {
			apiObj: { type: Object, default: () => {} },
			data: { type: Object, default: () => {} },
			accept: { type: String, default: ".xls, .xlsx" },
			maxSize: { type: Number, default: 10 },
			tip: { type: String, default: "" },
			templateUrl: { type: String, default: "" }
		},
		data() {
			return {
				dialog: false,
				loading: false,
				percentage: 0,
				formData: {}
			}
		},
		mounted() {

		},
		methods: {
			open(){
				this.dialog = true
				this.formData = {}
			},
			close(){
				this.dialog = false
			},
			before(file){
				const maxSize = file.size / 1024 / 1024 < this.maxSize;
				if (!maxSize) {
					this.$message.warning(`上传文件大小不能超过 ${this.maxSize}MB!`);
					return false;
				}
				this.loading = true
			},
			progress(e){
				this.percentage = e.percent
			},
			success(res, file){
				this.$refs.uploader.handleRemove(file)
				this.$refs.uploader.clearFiles()
				this.loading = false
				this.percentage = 0
				this.$emit('success', res, this.close)
			},
			error(err){
				this.loading = false
				this.percentage = 0
				this.$notify.error({
					title: '上传文件未成功',
					message: err
				})
			},
			request(param){
				Object.assign(param.data, this.formData)
				const data = new FormData();
				data.append(param.filename, param.file);
				for (const key in param.data) {
					data.append(key, param.data[key]);
				}
				this.apiObj.post(data, {
					onUploadProgress: e => {
						const complete = parseInt(((e.loaded / e.total) * 100) | 0, 10)
						param.onProgress({percent: complete})
					}
				}).then(res => {
					param.onSuccess(res)
				}).catch(err => {
					param.onError(err)
				})
			}
		}
	}
</script>

<style>

</style>
