<template>
    <div>
        <div class="container">
            <el-form
                ref="import"
                :model="upform"
                label-width="120px"
                element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(0, 0, 0, 0.8)"
            >
                <el-form-item label="Course">
                    <el-select v-model="upform.course" placeholder="Please select course">
                        <el-option v-for="item in courses" :key="item.dirname" :label="item.dirname" :value="item.dirname"></el-option>
                    </el-select>
                    <el-button type="text" @click="clear">清除所有</el-button>
                </el-form-item>
                <el-form-item label="File">
                    <el-upload
                        :action="up_url"
                        name="importExcel"
                        :on-remove="handleRemove"
                        accept=".xlsx"
                        :before-upload="checkfile"
                        :limit="1"
                        :on-exceed="handleExceed"
                        :on-success="upSuccess"
                        :on-error="uperror"
                    >
                        <el-button size="small" type="text">upload excel</el-button>
                        <div slot="tip" class="el-upload__tip">Only excel files can be uploaded(.xls,.xlsx)</div>
                    </el-upload>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onsubmit">制作证书</el-button>
                    <el-progress type="circle" :percentage="bfb" v-show="jdt"></el-progress>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="getlinkurl">下载</el-button>
                </el-form-item>
            </el-form>
            <el-divider></el-divider>
            <el-table :data="tabledata" border>
                <el-table-column prop="username" label="学员名" align="center"></el-table-column>
                <el-table-column prop="has" label="出证状态" align="center"></el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            timer: null,
            new_num: 0,
            has_num: 0,
            bfb: 0,
            jdt:false,
            mediaUrl: this.Common.mediaUrl,
            baseUrl: this.Common.baseUrl,
            username: localStorage.getItem('ms_username'),
            upform: {
                course: '',
                url: ''
            },
            courses: [],
            items: [],
            tabledata: [],
            sudata: [],
            erdata: [],
            dialogFormVisible: false
        };
    },
    created() {
        this.initCourse();
    },
    computed: {
        up_url: function () {
            return this.baseUrl + 'api/Img/up_import';
        }
    },
    methods: {
        onsubmit() {
            if (this.upform.journal == '' || this.upform.url == '') {
                this.$message.error('please select journal and upload a excel');
                return false;
            }
            if (this.new_num == 0) {
                this.$message.error('new data is null');
                return false;
            }
            this.$api.post('api/Img/reviewerImport', this.upform).then((res) => {
                this.getInfo();
                this.jdt = true;
                // this.$message.success('程序已启动，请等待一会后刷新此页面，待全部出证完成点击下载！！');
            });
        },
        //下载文件
        download() {
            this.$api.post('api/Img/downLoad', this.upform).then((res) => {});
        },
        getInfo() {
            // 轮询获取更新过程中的信息
            if (this.timer) {
                clearInterval(this.timer);
            } else {
                this.timer = setInterval(() => {
                    // 在这里发送请求获取数据
                    this.$api.post('api/Img/getAllNum', this.upform).then((res) => {
                        this.bfb = parseInt(((res - this.has_num) * 100) / this.new_num);
                        if (res - this.has_num == this.new_num) {
                            clearInterval(this.timer);
                            this.timer = null;
                            this.$router.go(0);
                        }
                    });
                    // this.updateInfo.push('升级的第' + num++ + '步');
                    // if (num === 3) {
                    //     clearInterval(this.timer);
                    //     this.timer = null;
                    // }
                }, 1500);
            }
        },
        //移除文件
        handleRemove() {},
        //审查文件
        checkfile(file) {
            // let isslx =
            //     file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' ||
            //     file.type === 'application/vnd.ms-excel';
            // if (!isslx) {
            //     this.$message.error('Only excel files can be uploaded(.xls,.xlsx)');
            // }
            // return isslx;
        },
        uperror(err) {
            this.$message.error(err);
        },
        //初始化课程选项
        initCourse() {
            this.$api
                .post('api/Img/getCourse')
                .then((res) => {
                    this.courses = res;
                    this.upform.course = res[0]['dirname'];
                    this.gettables();
                })
                .catch((err) => {
                    console.log(err);
                });
        },
        clear() {
            this.$confirm('此操作将永久删除证书, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$api.post('api/Img/clear', this.upform).then((res) => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                });
                this.$router.go(0);
            });
        },
        getlinkurl() {
            this.$api.post('api/Img/getZip', this.upform).then((res) => {
                let url = this.baseUrl + res.data.url;
                let a = document.createElement('a');
                a.href = url;
                a.click();
            });
        },
        // changeCourse(course) {
        //     this.$api
        //         .post('api/Img/getImgs', { course: course })
        //         .then((res) => {
        //             this.tabledata = res;
        //         })
        //         .catch((err) => {
        //             console.log(err);
        //         });
        // },
        handleExceed() {
            this.$message.error('limit one file');
        },
        //文件上传成功后的操作
        upSuccess(res, file) {
            if (res.code == 0) {
                this.upform.url = 'zhengshu/import/' + res.upurl;
                this.gettables();
            } else {
                this.$message.error('service error' + res.msg);
            }
        },
        //获取table数据
        gettables() {
            this.$api.post('api/Img/getExcelData', this.upform).then((res) => {
                this.tabledata = res.list;
                this.new_num = res.count;
                this.has_num = res.has;
            });
        }
    }
};
</script>

<style>
.el-table .warning-row {
    background: rgb(252, 158, 158);
}

.el-table .success-row {
    background: #d7f1c8;
}
</style>