<template>
	<el-dialog :visible.sync="visible" :close-on-click-modal="false" :close-on-press-escape="false" center>
		<span slot="title"><i class="font-sexteen">上传视频</i></span>
		<el-upload name="file" :action="url" :file-list="fileList" drag :before-upload="beforeUploadHandle" :on-success="successHandle"
		 class="text-center" :limit="1" :headers="headers">
			<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': 'mp4、flv、avi、rmvb' }) }}</div>
		</el-upload>
	</el-dialog>
</template>

<script>
	import Cookies from 'js-cookie'
	export default {
		data() {
			return {
				// 弹框状态
				visible: false,
				// 视频URL
				url: '',
				fileList: [],
				headers: {
					'token': Cookies.get('token')
				},
			}
		},
		methods: {
			init() {
				this.visible = true
				// this.url = `${window.SITE_CONFIG['apiURL']}/act/process/deploy?token=${Cookies.get('token')}`
				this.url = `${window.SITE_CONFIG['apiURL']}/control/addcomparvideoFile`
				this.fileList = []
			},
			// 上传之前
			beforeUploadHandle(file) {
				if (!/.+\.mp4$/.test(file.name) && !/.+\.flv$/.test(file.name) && !/.+\.avi$/.test(file.name) && !/.+\.rmvb$/.test(
						file.name)) {
					this.$message.error(this.$t('upload.tip', {
						'format': 'mp4、flv、avi、rmvb'
					}))
					return false
				}
			},
			handleExceed(e) {
				this.$message.warning(`单次只能上传一个视频`)
			},
			// 上传成功
			successHandle(res, file, fileList) {
				console.log(res)
				if (res.code == 0) {
					this.$emit('refreshDataList', file.name, res.data.url)
					this.$message({
						message: this.$t('prompt.success'),
						type: 'success',
						duration: 500,
						onClose: () => {
							this.visible = false
						}
					})
				} else {
					console.log(res)
				}
			}
		}
	}
</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;
	}

	.cursor-class {
		cursor: pointer;
	}
</style>
