<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-user-solid"></i> Import reviewer
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <el-form 
                ref="import" 
                :model="upform" 
                label-width="120px"
                v-loading="fullscreenLoading"
                element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(0, 0, 0, 0.8)">
                <el-form-item label="Journal">
                    <el-select v-model="upform.journal" placeholder="Please select journal">
                        <el-option
                            v-for="item in items"
                            :key="item.journal_id"
                            :label="item.title"
                            :value="item.journal_id"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="Template">
                    <el-link icon="el-icon-download" type="text" :href="getlinkurl">Download template</el-link>
                    <div>please delete demo message before you import</div>
                </el-form-item>
                <el-form-item label="File">
                    <el-upload
                        :action="up_url"
                        name="importExcel"
                        :on-remove="handleRemove"
                        accept=".xls, .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"
                    >Import</el-button>
                </el-form-item>
            </el-form>
            <el-divider></el-divider>
            <el-table :data="tabledata" border>
                <el-table-column prop="username" label="username" align="center"></el-table-column>
                <el-table-column prop="realname" label="realname" align="center"></el-table-column>
                <el-table-column prop="email" label="email" align="center"></el-table-column>
                <el-table-column prop="gender" label="gender" align="center"></el-table-column>
                <el-table-column prop="technical" label="technical" align="center"></el-table-column>
                <el-table-column prop="country" label="country" align="center"></el-table-column>
                <el-table-column prop="major" label="major" align="center"></el-table-column>
                <el-table-column prop="field" label="field" align="center"></el-table-column>
                <el-table-column prop="company" label="company" align="center"></el-table-column>
            </el-table>
        </div>
        <el-dialog title="Import results" :visible.sync="dialogFormVisible">
            <h3 v-show="erdata.lenght>0">error list</h3>
            <el-table :data="erdata" row-class-name="warning-row">
                <el-table-column type="index" label="No." align="center"></el-table-column>
                <el-table-column prop="username" label="Username" align="center"></el-table-column>
                <el-table-column prop="realname" label="Realname" align="center"></el-table-column>
                <el-table-column prop="email" label="Email" align="center"></el-table-column>
                <el-table-column prop="reason" label="reason" align="center"></el-table-column>
            </el-table>
            <el-divider></el-divider>
            <h3 v-show="sudata.lenght>0">success list</h3>
            <el-table :data="sudata" row-class-name="success-row">
                <el-table-column type="index" label="No." align="center"></el-table-column>
                <el-table-column prop="username" label="Username" align="center"></el-table-column>
                <el-table-column prop="realname" label="Realname" align="center"></el-table-column>
                <el-table-column prop="email" label="Email" align="center"></el-table-column>
                <el-table-column prop="reason" label="result" align="center"></el-table-column>
            </el-table>

            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            mediaUrl:this.Common.mediaUrl,
            baseUrl: this.Common.baseUrl,
            fullscreenLoading: false,
            username: localStorage.getItem('ms_username'),
            upform: {
                journal: '',
                url: ''
            },
            items: [],
            tabledata: [],
            sudata: [],
            erdata: [],
            dialogFormVisible:false
        };
    },
    created() {
        this.initselect();
    },
    computed: {
        up_url: function () {
            return this.baseUrl + 'api/Admin/up_import';
        },
        getlinkurl:function(){
            return this.mediaUrl+'static/import.xlsx'
        }
    },
    methods: {
        onsubmit() {
            if (this.upform.journal == '' || this.upform.url == '') {
                this.$message.error('please select journal and upload a excel');
                return false;
            }
            this.fullscreenLoading = true;
            this.$api.post('api/Admin/reviewerImport', this.upform).then((res) => {
                this.fullscreenLoading = false;
                this.sudata = res.sudata;
                this.erdata = res.erdata;
                this.dialogFormVisible = true;
                console.log(res);
            });
        },
        //初始化期刊选项
        initselect() {
            this.$api
                .post('api/Article/getJournal', { username: this.username })
                .then((res) => {
                    this.items = res;
                })
                .catch((err) => {
                    console.log(err);
                });
        },
        //移除文件
        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);
        },
        handleExceed() {
            this.$message.error('limit one file');
        },
        //文件上传成功后的操作
        upSuccess(res, file) {
            if (res.code == 0) {
                this.upform.url = 'reviewer/import/' + res.upurl;
                this.gettables();
            } else {
                this.$message.error('service error' + res.msg);
            }
        },
        //获取table数据
        gettables() {
            this.$api.post('api/Admin/getExcelData', this.upform).then((res) => {
                this.tabledata = res;
            });
        }
    }
};
</script>

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

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