<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
	<div>
		<el-dialog :title="title" :close-on-click-modal="false" draggable width="1000px" height="500px" @close="close"
			append-to-body v-model="visible">
			<el-form :model="inputForm" ref="inputForm" :class="method === 'view' ? 'readonly' : ''"
				:disabled="status === 'audit' || status === 'taskFormDetail'" label-width="135px"
				@submit.native.prevent>
				<el-row :gutter="0">
				</el-row>
				<el-row :gutter="0">
					<el-col :span="24">
						<el-form-item label="附件上传：">
							<el-upload ref="upload" :on-remove="handleRemove" action="" :limit="1" :auto-upload="false"
								:on-change="beforeUploadDetail" :show-file-list="true">
								<el-button type="primary">点击上传Excel文件</el-button>
							</el-upload>
						</el-form-item>
					</el-col>
				</el-row>

			</el-form>


			<template #footer>
				<span class="dialog-footer">
					<el-button type="warning" @click="downloadTpl()" plain>下载模板</el-button>
					<el-button @click="close()" icon="el-icon-circle-close">关闭</el-button>
					<el-button v-if="method !== 'view'" type="primary" icon="el-icon-circle-check"
						@click="doSubmit()">确定</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script>
import projectRecordsService from '@/api/cw/projectRecords/ProjectRecordsService'
export default {
	data() {
		return {
			visible: false,
			title: '',
			inputForm: {
				file: []
			}
		}
	},
	created() {
	},
	components: {
	},
	methods: {
		handleRemove() {
			this.inputForm.file.pop()
			console.log(this.inputForm.file);
		},
		init() {
			this.visible = true
			this.title = '项目导入'
			this.inputForm = {
				file: []
			}
			this.$forceUpdate()
		},

		beforeUploadDetail(file) {
			this.inputForm.file.push(file)
		},

		// 下载模板
		downloadTpl() {
			const loading = this.$loading({
				lock: true,
				text: '模板下载中，请稍后',
				spinner: 'el-icon-loading',
				background: 'rgba(255, 255, 255, 0.3)'
			});
			projectRecordsService.exportProjectRecordsTemplate().then((res) => {
				// 将二进制流文件写入excel表，以下为重要步骤
				this.$utils.downloadExcel(res, '项目批量导入模板' + ".xlsx")
				loading.close();
			}).catch(function (err) {
				loading.close();
				if (err.response) {
					console.log(err.response)
				}
			})
		},
		doSubmit() {
			if (this.inputForm.file.length == 0) {
				this.$message.warning('未上传文件，无法提交导入')
				return
			}
			const loading = this.$loading({
				lock: true,
				text: '导入中，请稍后',
				spinner: 'el-icon-loading',
				background: 'rgba(255, 255, 255, 0.3)'
			});
			const formBody = new FormData()
			formBody.append('file', this.inputForm.file[0].raw)
			projectRecordsService.importProjectRecords(formBody).then((data) => {
				if (data) {
					loading.close();
					this.$message.success('导入成功')
					this.close()
					this.$emit("refreshDataList");
				} else {
					loading.close();
				}
			}).catch(err => {
				loading.close();
			})
		},
		close() {
			this.visible = false
			this.$refs.inputForm.resetFields()
			this.$refs.upload.clearFiles();
			this.inputForm = {
				file: []
			}
		}

	}
}
</script>

<style scoped>
/deep/ .el-input-number .el-input__inner {
	text-align: left;
}

.el-row {
	display: flex;
	align-items: center;
	/* 垂直居中 */
}
</style>
