<template>
	<div>
		<h3>word抓取图片</h3>
		<el-alert title="此功能将协助您将word内的图片进行抓取" type="info" />
		<br>
		<el-form ref="visioForm" :model="form" size="small" label-width="160px">
			<el-row>
				<el-col :span="16">
					<el-form-item label="文档" prop="file">
						<el-upload ref="upload" class="upload-demo" drag :limit="1" :file-list="fileList" :action="uploadURL"
							:on-change="handelFileChange" :on-remove="handleFileRemove" :on-exceed="handleExceed" :auto-upload="false"
							accept="application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document">
							<i class="el-icon-upload" />
							<div class="el-upload__text">
								将文件拖到此处，或<em>点击上传</em>
							</div>
						</el-upload>
					</el-form-item>
					<el-form-item label="最大宽度：">
						<el-input v-model="form.MaxWidthCm" style="width:358px"></el-input><span class="desc">(cm)</span>
					</el-form-item>
					<el-form-item label="最大高度：">
						<el-input v-model="form.MaxHeightCm" style="width:358px"></el-input><span class="desc">(cm)</span>
					</el-form-item>
					<el-form-item label="Dpi：">
						<el-input v-model="form.Dpi" style="width:358px"></el-input>
					</el-form-item>
				</el-col>

			</el-row>
			<el-row>
				<el-col :span="12" :offset="10">
					<el-button style="margin-left: 10px" size="small" type="success" @click="submitUpload">
						下载档案
					</el-button>
				</el-col>
			</el-row>
		</el-form>
	</div>
</template>
<script>
import { fetchWordPic } from "@api/convertApi"
import { saveAs } from 'file-saver'
export default {
	name: 'GrabPic',
	data: function () {
		return {
			form: {
				MaxWidthCm: '',
				MaxHeightCm: '',
				Dpi: ''

			},
			uploadURL: 'Aspose/GetWordAllPic',
			fileList: []
		}
	},
	props: {
		baseUrl: {
			type: String
		}
	},
	methods: {
		// 上传到服务器
		async submitUpload() {
			if (this.fileList.length <= 0) {
				this.$message.error('请先选择需要上传的文件！')
				return false
			}
			window._paq && window._paq.push(['trackEvent', 'Tool', 'Click', '公式转换图片'])
			const formData = new FormData()
			formData.append('file', this.fileList[0].raw)
			formData.append('MaxWidthCm', this.form.MaxWidthCm)
			formData.append('MaxHeightCm', this.form.MaxHeightCm)
			formData.append('Dpi', this.form.Dpi)
			await fetchWordPic(this.baseUrl, formData).
				then(res => {
					const blob = new Blob([res])
					saveAs(blob, `${this.fileList[0].name}.zip`)
					this.$message({
						showClose: true,
						message: `档案下载成功！`,
						type: 'success'
					})
				}).catch((r) => {
					console.error(r)
					this.$message({
						showClose: true,
						message: `下载文件出现错误，请联系管理员！`,
						type: 'error'
					})
				})

		},
		// 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
		handelFileChange(file, fileList) {
			// 存在文件标识
			let existsFileFlag = false

			for (let i = 0; i < this.fileList.length; i++) {
				if (
					file.name === this.fileList[i].name &&
					file.size === this.fileList[i].size
				) {
					// 如果存在了，赋值true
					existsFileFlag = true
				}
			}
			// 遍历的这个文件存在当前列表直接结束
			if (existsFileFlag) {
				// 否则不加入
				fileList.pop()
				// console.log(`文件已经存在：${file.name}`)
				// this.handleMsg(`文件已经选择过了：${file.name})`);
				this.$message({
					showClose: true,
					message: `文件已经选择过了：${file.name})`,
					type: 'error'
				})
				return
			}
			this.fileList.push(file)
		},
		handelDetailFileChange(file, fileList) {
			// 存在文件标识
			let existsFileFlag = false

			for (let i = 0; i < this.detailFileList.length; i++) {
				if (
					file.name === this.detailFileList[i].name &&
					file.size === this.detailFileList[i].size
				) {
					// 如果存在了，赋值true
					existsFileFlag = true
				}
			}
			// 遍历的这个文件存在当前列表直接结束
			if (existsFileFlag) {
				// 否则不加入
				fileList.pop()
				// console.log(`文件已经存在：${file.name}`)
				// this.handleMsg(`文件已经选择过了：${file.name})`);
				this.$message({
					showClose: true,
					message: `文件已经选择过了：${file.name})`,
					type: 'error'
				})
				return
			}
			this.detailFileList.push(file)
		},
		// 文件列表移除文件时的钩子
		handleFileRemove(file, fileList) {
			this.fileList = fileList
		},
		handleDetailFileRemove(file, fileList) {
			this.detailFileList = fileList
		},
		handleExceed(files, fileList) {
			this.$set(fileList[0], 'raw', files[0])
			this.$set(fileList[0], 'name', files[0].name)
			this.$refs['rebateUpload'].clearFiles()// 清除文件
			this.$refs['rebateUpload'].handleStart(files[0])// 选择文件后的赋值方法

		}
	}
}
</script>
<style>
.desc {
	color: #606266;
	font-size: 14px;
}
</style>