<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">
                <el-form-item label="journal">
                    <el-select v-model="upform.journal" placeholder="Please select journal">
                        <el-option :key="0" label="all journal" :value="0"></el-option>
                        <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="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="primary">upload</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>
    </div>
</template>

<script>
export default {
    data() {
        return {
            baseUrl: this.Common.baseUrl,
            upform: {
                journal: '',
                url:''
            },
            items: [],
            tabledata:[]
        };
    },
    created() {
        this.initselect();
    },
    computed: {
        up_url:function(){
            return this.baseUrl+'api/Admin/up_import';
        }
    },
    methods: {
        onsubmit(){
            if(this.upform.journal==''){
                this.$message.error('please select journal');
                return false;
            }
            this.$api.post('api/Admin/reviewerImport',this.upform)
            .then(res=>{
                console.log(res);
            });
        },
        //初始化期刊选项
        initselect() {
            this.$api
                .post('api/Article/getJournal')
                .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 lang="stylus" scoped></style>