<template>
	<div class="camera-upload">
		<el-dialog :visible.sync="visible" center :show-close="false" :close-on-click-modal="false" :close-on-press-escape="false">
			<span slot="title"><i class="font-sexteen">批量导入</i></span>
			<div style="text-align: center;margin-bottom: 10px;">
				<i class="font-twenty">导入之前请先下载模板</i>
				<span class="el-icon-download font-twenty down-btn"></span>
			</div>
			<el-upload class="text-center" drag multiple name="file" :show-file-list="true" file-list="text" :auto-upload="true"
			 :action="url" :file-list="fileList" :before-upload="beforeUploadHandle" :on-success="successHandle" :on-error="errorHandle">
				<i class="el-icon-upload"></i>
				<div class="el-upload__text" v-html="$t('upload.text')"></div>
				<div class="el-upload__tip" slot="tip">{{ $t('upload.tip', { 'format': 'zip、jpg、png、rar' }) }}</div>
			</el-upload>
			<span slot="footer">
				<el-button @click="visible = false">取消</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import Cookies from 'js-cookie'
	export default {
		data() {
			return {
				visible: false,
				url: '',
				fileList: [],
				uploadList: [],
			}
		},
		methods: {
			init() {
				this.visible = true
				// this.url = `${window.SITE_CONFIG['apiURL']}/act/process/deploy?token=${Cookies.get('token')}`
				this.url = " https://jsonplaceholder.typicode.com/posts/"
				this.fileList = []
			},
			// 上传之前
			beforeUploadHandle(file) {
				if (!/.+\.zip$/.test(file.name) && !/.+\.jpg$/.test(file.name) && !/.+\.png$/.test(file.name) && !/.+\.rar$/.test(
						file.name)) {
					this.$message.error(this.$t('upload.tip', {
						'format': 'zip、jpg、png、rar'
					}))
					return false
				}
				this.uploadList.push({
					"name": file.name,
					"uid": file.uid,
					"percent": 0,
					"startTime": this.getNowTime(),
					"endTime": "",
					"status": ""
				})
			},
			// 上传成功
			successHandle(res, file, fileList) {
				if (res.code !== 0) {
					// return this.$message.error(res.msg)
				}
				this.$message({
					message: this.$t('prompt.success'),
					type: 'success',
					duration: 500,
					onClose: () => {
						this.visible = false
						this.$emit('refreshUploadClick')
					}
				})
			},
			// 上传失败
			errorHandle(err, file, fileList) {
				this.uploadList.forEach(item => {
					if (item.uid === file.uid) {
						item.status = "fail"
					}
				})
			},
			refreshUpload() {
				this.uploadState = true
			}
		}
	}
</script>
<style scoped>
	i {
		font-style: normal;
		font-family: "Noto Sans SC";
		color: #333
	}

	.font-fourteen {
		font-size: 14px;
		font-weight: 400;
	}

	.font-eighteen {
		font-size: 18px;
		font-weight: bold;
	}

	.font-sexteen {
		font-size: 16px;
		font-weight: bold;
	}

	.font-twenty {
		font-size: 20px;
		color: red
	}

	.cursor-class {
		cursor: pointer;
	}

	.down-btn:hover {
		color:#008000;
		cursor: pointer;
	}
</style>
