<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-collection"></i>
                    <router-link :to="{ path: '/perhistory' }">
                        <span class="top_dao"> Reviewer historical manuscripts</span>
                    </router-link>
                    >> Reviewer historical manuscripts comment
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div
            class="container_l"
            v-loading="loading"
            element-loading-text="Loading..."
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 0.8)"
        >
            <el-card class="box-card">
                <div class="tet_list" :model="txt_mess">
                    <h4>{{ txt_mess.article_title }}</h4>
                    <h5>{{ txt_mess.title }}<span style="margin: 0 10px"> >> </span> Manuscript ID: {{ txt_mess.accept_sn }}</h5>
                    <p style="display: inline-block; margin: 0 35px"><b>Type :</b> {{ txt_mess.atype }}</p>
                    <p style="display: inline-block"><b>Submitted time :</b> {{ txt_mess.ctime }}</p>
                    <p><b>Abstract :</b> <br />{{ txt_mess.abstrart }}</p>
                    <div class="file_sty" v-for="item in fileList" style="margin-top: 15px">
                        <img src="../../assets/img/icon_0.png" alt="" class="icon_img" />
                        <a :href="mediaUrl + item.file_url" target="_blank" class="txt_pdf"
                            >{{ item.type_name }} <span style="margin-left: 50px; color: #888; font-size: 13px">{{ item.ctime }}</span>
                            <i class="el-icon-download" style="margin-left: 20px; color: #66b1ff; font-weight: bold"></i> </a
                        ><br />
                    </div>

                    <div class="file_sty" v-for="item in picList">
                        <img src="../../assets/img/icon_0.png" alt="" class="icon_img" />
                        <a :href="mediaUrl + item.file_url" target="_blank" class="txt_pdf"
                            >Figures And Tables <span style="margin-left: 50px; color: #888; font-size: 13px">{{ item.ctime }}</span>
                            <i class="el-icon-download" style="margin-left: 20px; color: #66b1ff; font-weight: bold"></i> </a
                        ><br />
                    </div>
                </div>
            </el-card>

            <p style="font-size: 20px; text-align: center; margin: 0 0 25px 0">All comments</p>
            <p v-if="conmentList == ''" style="color: #666; margin: 0 0 0 10px">No comment</p>

            <div>
                <el-card class="box-card conment_list" v-for="(item, index) in conmentList">
                    <p style="margin: 0 0 15px 0">
                        <b>Comment {{ index + 1 }}</b>
                    </p>
                    <p style="font-size: 14px; color: #666; margin-bottom: 5px">
                        Reviewer :
                        <b v-if="item.reviewer.user_id == User_Id">{{ item.reviewer.account }}</b>
                        <b v-if="item.reviewer.user_id != User_Id">XXXXXXXXXX</b>
                    </p>

                    <p style="font-size: 14px; color: #666; margin-bottom: 5px">
                        Score :
                        <b>{{ item.question.rated }}</b>
                    </p>
                    <p style="font-size: 14px; color: #666; margin-bottom: 5px">
                        Recommendation :
                        <b v-if="item.question.recommend == 1">Minor revision</b>
                        <b v-if="item.question.recommend == 2">Major revision</b>
                        <b v-if="item.question.recommend == 3">Reject in current form, but may be resubmitted</b>
                        <b v-if="item.question.recommend == 4">Reject</b>
                    </p>
                    <p style="font-size: 14px; color: #666; margin: 0 0 20px 0">
                        Reviewed Time : <b>{{ item.ctime }}</b>
                    </p>
                    <el-button type="primary" size="mini" @click="ques_visible(item.question)" style="">Referee's Assessment</el-button>
                </el-card>
            </div>

            <!-- 证书弹出框 -->
            <el-dialog :visible.sync="questionVisible" width="1000px" :close-on-click-modal="false">
                <!-- 审稿人表单修改  -->
                <!-- 不显示给编辑的话  -->
                <common-review-article v-if="questionVisible"
                    :form="questionform"
                    type="questionform"
                    :txt_mess="txt_mess"
                    :confident="false"
                    :btn_submit="1"
                    :articleId="0"
                    :journal_id="journal_id"
                ></common-review-article>

            </el-dialog>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            loading: false,
            Direct_log: this.$route.query.act,
            Art_id: this.$route.query.Art_id,
            Rev_id: this.$route.query.Rev_id,
            txt_mess: {},
            fileList: [],
            picList: [],
            mediaUrl: this.Common.mediaUrl,
            User_Id: localStorage.getItem('U_id'),
            head_line: '',
            questionform: {
                rev_qu_id: '',
                qu1: '',
                qu2: '',
                qu3: '',
                qu4: '',
                qu5: '',
                qu6: '',
                qu7: '',
                qu8: '',
                qu9: '',
                qu9contents: '',
                qu10: '',
                qu10contents: '',
                qu11: '',
                qu11contents: '',
                qu12: '',
                qu12contents: '',
                qu13: '',
                qu13contents: '',
                qu14: '',
                qu14contents: '',
                qu15: '',
                qu15contents: '',
                rated: '',
                recommend: '',
                other: '',
                confident: '',
                comment: '',
                is_anonymous: ''
            },
            journal_id: null, // 期刊的id

            rules: {},
            conmentList: [],
            questionVisible: false
        };
    },
    created() {
        if (this.Direct_log == null) {
            this.getData();
        } else {
            this.$api
                .post('api/Chief/autoLoginForChief', {
                    code: this.Direct_log
                })
                .then((res) => {
                    if (res.code == 0) {
                        localStorage.setItem('U_role', res.data.roles);
                        localStorage.setItem('U_name', res.data.user.account);
                        localStorage.setItem('U_id', res.data.user.user_id);
                        localStorage.setItem('U_relname', res.data.user.realname);
                        this.getData();
                    } else {
                        this.$message.error(res.msg);
                    }
                })
                .catch((err) => {
                    this.$message.error(err);
                });
        }
    },
    methods: {
        getData() {
            // 获取文章信息
            this.$api
                .post('api/Reviewer/getartrevdate', {
                    revid: this.Rev_id,
                    human: 'reviewer'
                })
                .then((res) => {
                    let date = new Date(parseInt(res.ctime) * 1000);
                    let Y = date.getFullYear() + '-';
                    let M = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) + '-' : date.getMonth() + 1 + '-';
                    let D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
                    res.ctime = Y + M + D;

                    this.txt_mess = res;
                    this.journal_id = res.journal_id;
                    console.log(this.journal_id, 'this.journal_id');
                })
                .catch((err) => {
                    this.$message.error(err);
                });

            this.$api
                .post('api/Reviewer/getAFilelistByID ', {
                    revid: this.Rev_id
                })
                .then((res) => {
                    for (var i = 0; i < res.data.length; i++) {
                        let date = new Date(parseInt(res.data[i].ctime) * 1000);
                        let Y = date.getFullYear() + '-';
                        let M = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) + '-' : date.getMonth() + 1 + '-';
                        let D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
                        res.data[i].ctime = Y + M + D;
                    }
                    this.fileList = res.data;
                })
                .catch((err) => {
                    this.$message.error(err);
                });

            this.$api
                .post('api/Reviewer/getBFilelistByID', {
                    revid: this.Rev_id
                })
                .then((res) => {
                    for (var i = 0; i < res.data.length; i++) {
                        let date = new Date(parseInt(res.data[i].ctime) * 1000);
                        let Y = date.getFullYear() + '-';
                        let M = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) + '-' : date.getMonth() + 1 + '-';
                        let D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
                        res.data[i].ctime = Y + M + D;
                    }
                    this.picList = res.data;
                })
                .catch((err) => {
                    this.$message.error(err);
                });

            // 获取问卷列表顺序
            this.$api
                .post('api/Reviewer/getAllReviewerObj', {
                    article_id: this.Art_id
                })
                .then((res) => {
                    for (var i = 0; i < res.data.reviews.length; i++) {
                        let date = new Date(parseInt(res.data.reviews[i].ctime) * 1000);
                        let Y = date.getFullYear() + '-';
                        let M = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) + '-' : date.getMonth() + 1 + '-';
                        let D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
                        res.data.reviews[i].ctime = Y + M + D;
                    }
                    this.conmentList = res.data.reviews;
                })
                .catch((err) => {
                    this.$message.error(err);
                });
        },

        //初始化问卷
        ques_visible(e) {
            this.questionVisible = true;
            this.questionform.rev_qu_id = e.rev_qu_id;
            this.questionform.art_rev_id = e.art_rev_id;
            this.questionform.qu1 = e.qu1;
            this.questionform.qu2 = e.qu2;
            this.questionform.qu3 = e.qu3;
            this.questionform.qu4 = e.qu4;
            this.questionform.qu5 = e.qu5;
            this.questionform.qu6 = e.qu6;
            this.questionform.qu7 = e.qu7;
            this.questionform.qu8 = e.qu8;
            this.questionform.qu9 = e.qu9 == 0 ? false : true;
            this.questionform.qu9contents = e.qu9_contents;
            this.questionform.qu10 = e.qu10 == 0 ? false : true;
            this.questionform.qu10contents = e.qu10_contents;
            this.questionform.qu11 = e.qu11 == 0 ? false : true;
            this.questionform.qu11contents = e.qu11_contents;
            this.questionform.qu12 = e.qu12 == 0 ? false : true;
            this.questionform.qu12contents = e.qu12_contents;
            this.questionform.qu13 = e.qu13 == 0 ? false : true;
            this.questionform.qu13contents = e.qu13_contents;
            this.questionform.qu14 = e.qu14 == 0 ? false : true;
            this.questionform.qu14contents = e.qu14_contents;
            this.questionform.qu15 = e.qu15 == 0 ? false : true;
            this.questionform.qu15contents = e.qu15_contents;
            this.questionform.rated = e.rated;
            this.questionform.recommend = e.recommend;
            this.questionform.other = e.other;
            this.questionform.confident = e.confidential;
            this.questionform.comment = e.comments;
            this.questionform.is_anonymous = e.is_anonymous;
            this.questionform.type = e.type;
            this.questionform.score = e.score;
        }
    },
    mounted() {}
};
</script>

<style scoped>
.tet_list {
    font-size: 20px;
}

.box-card {
    margin-bottom: 20px;
    line-height: 24px;
}

.upload-txtc .el-upload-list__item .el-icon-upload-success {
    display: none !important;
}

.tet_list h5 {
    font-size: 15px;
    margin: 20px 0 5px 0;
    font-weight: normal;
    display: inline-block;
}

.tet_list p {
    font-family: Calibri;
    line-height: 22px;
    font-size: 16px;
}

.file_sty {
    margin-bottom: 6px;
}

.file_sty a {
    color: #606266;
    font-size: 14px;
}

.file_sty a:hover {
    text-decoration: underline;
}

.red {
    color: #ff0000;
}

.el-collapse {
    border-top: 0;
    border-bottom: 0;
}

.top_dao:hover {
    text-decoration: underline;
    cursor: pointer;
}

.icon_img {
    width: 15px;
    height: 15px;
    margin-right: 10px;
    vertical-align: middle;
}

.trah_c .icon_img {
    width: 24px;
    height: 24px;
    margin: 0 20px;
}

.el-divider {
    background-color: #006699;
}

.conment_list {
    display: inline-block;
    text-align: left;
    width: 32%;
    height: 270px;
    margin: 0 0.5% 1%;
}
</style>
