<template>
    <el-dialog
        title="导入生产计划"
        :visible.sync="dialogToggle"
        :show-close="false"
        :close-on-press-escape="false"
        :close-on-click-modal="false"
        width="400px">
        <el-upload
            ref="upload"
            class="upload-demo"
            :action="apiAdress"
            :limit="1"
            :headers="uploadToken"
            :file-list="fileList"
            :auto-upload="false"
            :on-exceed="handleExceed"
            :on-success="uploadSuccess"
            :on-change="uploadChange"
            :on-remove="uploadRemove">
            <el-button size="small" type="primary">选取文件</el-button>
            <div slot="tip" class="el-upload__tip">请上传Excel格式文件</div>
        </el-upload>
        <span slot="footer" class="dialog-footer">
            <el-button :loading="loadingToggle" size="small" type="primary" icon="el-icon-upload2" @click="doUploadClick">上传</el-button>
            <el-button size="small" icon="el-icon-close" @click="doCancelClick">取消</el-button>
        </span>
    </el-dialog>
</template>

<script>
    export default {
        data () {
            return {
                // 对话框开关标识
                dialogToggle: false,
                // 数据提交状态开关标识
                loadingToggle: false,
                // 接口请求头
                uploadToken: {
                    Authorization: ''
                },
                // 接口请求地址
                apiAdress: `${process.env.API_HOST}/api/basicinfo/upload`,
                // 文件上传列表
                fileList: [],
                // 是否可以提交
                uploadFileToggle: false
            }
        },
        methods: {
            // 点击上传按钮
            doUploadClick () {
                if (this.uploadFileToggle) {
                    this.loadingToggle = true
                    this.$refs.upload.submit()
                } else {
                    this.$message.warning('请选择要上传的文件！')
                }
            },
            // 点击取消按钮
            doCancelClick () {
                this.loadingToggle = false
                this.dialogToggle = false
                this.fileList = []
            },
            // 超出文件上传个数
            handleExceed (files, fileList) {
                this.$message.warning(`当前限制选择1个文件！`)
            },
            // 文件上传成功
            uploadSuccess (res, file) {
                if (res.code === 600) {
                    this.dialogToggle = false
                    this.loadingToggle = false
                    this.$message.success('文件导入成功！')
                    this.fileList = []
                    this.$emit('onUploadSuccess')
                } else {
                    this.loadingToggle = false
                    this.$message.error(res.message)
                }
            },
            // 文件上传状态改变
            uploadChange (file, fileList) {
                this.uploadFileToggle = true
            },
            // 文件删除
            uploadRemove (file, fileList) {
                this.uploadFileToggle = false
            }
        },
        mounted () {
            setTimeout(() => {
                this.uploadToken.Authorization = window.sessionStorage.getItem('Admin-Token')
            }, 0)
        }
    }
</script>

<style lang="scss" scoped>
    /deep/ .el-dialog {

        .el-dialog__body {
            height: 200px;
            border: 1px solid rgb(192,204,218);
            border-radius: 5px;
            padding: 10px 10px;
            margin: 10px 20px;
        }
    }
</style>