<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-calendar"></i> Apply list
                </el-breadcrumb-item>
                <el-breadcrumb-item>Apply Detail</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="form-box">
                <el-form ref="articleform" :model="form" label-width="200px">
                    <el-form-item label="name">
                        <span>{{form.name}}</span>
                    </el-form-item>
                    <el-form-item label="journal">
                        <span>{{form.journal}}</span>
                    </el-form-item>
                    <el-form-item label="gender">
                        <span>{{form.gender==1?'男':'女'}}</span>
                    </el-form-item>
                    <el-form-item label="technical">
                        <span>{{form.technical}}</span>
                    </el-form-item>
                    <el-form-item label="country">
                        <span>{{form.country}}</span>
                    </el-form-item>
                    <el-form-item label="major">
                        <span>{{form.major}}</span>
                    </el-form-item>
                    <el-form-item label="field">
                        <span>{{form.field}}</span>
                    </el-form-item>
                    <el-form-item label="introduction">
                        <span>{{form.introduction}}</span>
                    </el-form-item>
                    <el-form-item label="email">
                        <span>{{form.email}}</span>
                    </el-form-item>
                    <el-form-item label="company">
                        <span>{{form.company}}</span>
                    </el-form-item>
                    <el-form-item label="qualifications" v-if="this.form.qualifications!=''">
                        <el-link :href="downloadQualifications">download</el-link>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="editVisible=true">adopt</el-button>
                        <el-button type="primary" @click="rejectVisible=true">reject</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <el-dialog title="confirm" :visible.sync="editVisible" width="30%">
            <span>If you want to pass the applicant, the system will generate his user name and password,Users can change their own password according to the process</span>
            <p>username:{{this.form.name}}</p>
            <p>password:123456qwe</p>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editVisible = false">取 消</el-button>
                <el-button type="primary" @click="confirmSubmit">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog title="reject" :visible.sync="rejectVisible" width="30%">
            <span>Are you sure you want to reject this applicant</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="rejectVisible = false">取 消</el-button>
                <el-button type="primary" @click="rejectreviewer">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            baseUrl: this.Common.baseUrl,
            mediaUrl:this.Common.mediaUrl,
            items: '',
            editVisible: false,
            rejectVisible: false,
            form: {
                reviewerId: this.$route.query.id,
                name: '',
                journal: '',
                gender: '',
                technical: '',
                country: '',
                major: '',
                field: '',
                introduction: '',
                email: '',
                company: '',
                qualifications: ''
            }
        };
    },
    created: function () {
        this.initApply();
    },
    computed: {
        downloadQualifications: function () {
            return this.mediaUrl + this.form.qualifications;
        }
    },
    methods: {
        //弹出编辑框
        testvis() {
            this.editVisible = true;
        },
        //修改文章状态
        saveEdit() {
            this.$api
                .post('api/Article/editArticleEditor', this.editform)
                .then((res) => {
                    this.$message.success('success');
                    this.editVisible = false;
                    this.initApply();
                })
                .catch((err) => {
                    console.log(err);
                });
        },
        //初始化期刊信息
        initApply() {
            this.$api
                .post('api/User/getApplyDetail', { reviewerId: this.form.reviewerId })
                .then((res) => {
                    this.form.name = res.data.name;
                    this.form.introduction = res.data.introduction;
                    this.form.journal = res.data.journal;
                    this.form.gender = res.data.gender;
                    this.form.technical = res.data.technical;
                    this.form.country = res.data.country;
                    this.form.major = res.data.major_title;
                    this.form.field = res.data.field;
                    this.form.email = res.data.email;
                    this.form.company = res.data.company;
                    this.form.qualifications = res.data.qualifications;
                })
                .catch((err) => {
                    console.log(err);
                });
        },
        filedateformate(row, column, cellValue, index) {
            return this.formatDate(cellValue);
        },
        formatDate(timestamp) {
            var date = new Date(timestamp * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
            var Y = date.getFullYear() + '-';
            var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
            var D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
            var h = date.getHours() < 10 ? '0' + date.getHours() : date.getHours();
            var m = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
            var s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
            return Y + M + D + ' ' + h + ':' + m + ':' + s;
        },
        confirmSubmit() {
            this.$api
                .post('api/User/reviewerAdopt', { reviewerId: this.form.reviewerId })
                .then((res) => {
                    this.$message.success('Adopt success');
                    this.$router.push('/reviewerApplyList');
                })
                .catch((err) => {
                    console.log(err);
                });
        },
        //拒绝审核人
        rejectreviewer() {
            this.$api
                .post('api/User/reviewerRejec', { reviewerId: this.form.reviewerId })
                .then((res) => {
                    this.$message.success('reject success');
                    this.initApply();
                })
                .catch((err) => {
                    console.log(err);
                });
        }
    }
};
</script>


<style scoped>
.dwnbtn {
    margin-bottom: 5px;
}
.container {
    min-width: 800px;
}
.tree_box {
    padding: 15px 10px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.more_btn {
    margin-left: 30px;
}
</style>