<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-collection"></i> <span class="top_dao"> Final Decision History</span>
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container_l">
            <!-- <div v-for="item in dynamicTags"
				style="background-color: #f0f9eb;border-radius: 5px;border:1px solid #e1f3d8;color: #67c23a;font-size: 14px;padding: 8px 15px;margin: 0 0 20px 0;">
				<el-button type="success" icon="el-icon-close" circle @click='handleClose'
					style="float: right;margin: 17px 5px 0 0;"></el-button>
				<p><b>{{item.label}}</b></p>
				<p style="margin: 5px 0;">{{item.title}}</p>
				<p>{{item.content}}</p>
			</div> -->
            <el-row :gutter="20">
                <el-col :span="24">
                    <el-card
                        class="box-card"
                        v-loading="loading"
                        element-loading-text="Loading..."
                        element-loading-spinner="el-icon-loading"
                        element-loading-background="rgba(0, 0, 0, 0.8)"
                    >
                        <el-table
                            :data="tableData3"
                            border
                            class="table"
                            ref="multipleTable"
                            header-cell-class-name="table-header"
                            empty-text="New messages (0)"
                        >
                            <el-table-column prop="title" label="Article Title"></el-table-column>
                            <el-table-column prop="journal_name" label="Journal"></el-table-column>
                            <el-table-column prop="ctime" label="Final Reviewed Time" width="180"></el-table-column>
                            <el-table-column label="Article Status" width="160" align="center">
                                <template slot-scope="scope">
                                    <b v-if="scope.row.article_state == 0">Received</b>
                                    <b v-if="scope.row.article_state == 1">With editor</b>
                                    <b v-if="scope.row.article_state == 2">Under review</b>
                                    <b v-if="scope.row.article_state == 3">Reject</b>
                                    <b v-if="scope.row.article_state == 4">Revision</b>
                                    <b v-if="scope.row.article_state == 5">Accept</b>
                                    <b v-if="scope.row.article_state == 8">Final Decision</b>
                                    <b v-if="scope.row.astate == 6">Pre-accept</b>
                                </template>
                            </el-table-column>
                            <el-table-column label="State" align="center" width="210">
                                <template slot-scope="scope">
                                    <span style="font-size: 16px" v-html="revstate(scope.row)"></span>
                                </template>
                            </el-table-column>

                            <el-table-column label=" " width="230">
                                <template slot-scope="scope">
                                    <el-button @click="showDetail(scope.$index, scope.row)"
                                        v-if="scope.row.state == 1 || scope.row.state == 3 || scope.row.state == 2"
                                        type="primary"
                                        plain
                                        style="margin-right: 10px"
                                        ><i class="el-icon-tickets"></i> Detail
                                    </el-button>

                                    <el-button
                                        type="success"
                                        size="mini"
                                        @click="saveNow(scope.$index, scope.row)"
                                        v-if="scope.row.state == 5"
                                        >I agree to conduct the final review
                                    </el-button>
                                    <el-button
                                        type="danger"
                                        size="mini"
                                        @click="saveRef(scope.$index, scope.row)"
                                        v-if="scope.row.state == 5"
                                        >I decline to conduct the final review
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <div class="pagination">
                            <el-pagination
                                layout="total, prev, pager, next"
                                :current-page="TaBle3.pageIndex"
                                :page-size="TaBle3.pageSize"
                                :total="link_Tota3"
                                @current-change="handlePageChange3"
                            >
                            </el-pagination>
                        </div>
                    </el-card>

                    <!-- 证书弹出框 -->
                    <el-dialog :visible.sync="cerVisible" width="600px" :close-on-click-modal="false">
                        <el-image class="table-td-thumb rev_digol" :src="this.IMG_Url"></el-image>
                    </el-dialog>

                    <el-dialog :visible.sync="feilVisible" width="600px" :close-on-click-modal="false">
                        <h2 style="text-align: center">No certificate</h2>
                        <span slot="footer" class="dialog-footer">
                            <el-button type="primary" @click="feilVisible = false">OK</el-button>
                        </span>
                    </el-dialog>
                </el-col>
            </el-row>
        </div>

        <el-dialog destroy-on-close title="Detailed Comment for Final decision" :visible.sync="editVisible1" width="1200px" :close-on-click-modal="false">
        
            <common-editor-article
                                        type="questionform"
                                        ref="commonEditor"
                                        pagetype="Editor"
                                        :form="detailDate.article_final"
                                        :txt_mess="{}"
                                        :btn_submit="1"
                                        :articleId="articleId"
                                        :journal_id="journal_id"
                                    ></common-editor-article>
                                    <span slot="footer" class="dialog-footer">
            <el-button @click="editVisible1 = false">Cancel</el-button>
        </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            detailDate: {},
            editVisible1: false,
            loading: false,
            query: {
                reviewer_id: localStorage.getItem('U_id'),
                page: 1,
                size: 10
            },
            tableData3: [],
            TaBle3: {
                user_id: localStorage.getItem('U_id'),
                pageIndex: 1,
                pageSize: 10
            },
            link_Tota3: 0,
            IMG_Url: '',
            cerVisible: false,
            feilVisible: false,
            dynamicTags: [
                {
                    label: 'Submission System 2.0',
                    title: 'Update Notifications',
                    content: "The reviewers can check all reviewers ' comments when the manuscripts get final review."
                }
            ]
        };
    },
    mounted() {},
    created() {
        this.loading = true;
        this.getTable();
    },
    methods: {
        showDetail(i,data){
this.getDate(data.id)
        },
        // 同意
        saveNow(i, data) {
            // 二次确认
            this.$confirm('Are you sure you want to agree?', 'Tips', {
                type: 'warning'
            })
                .then(() => {
                    this.$api
                        .post('api/Finalreview/review', {
                            article_id: data.article_id,
                            record_id: data.id,
                            reviewer_id: localStorage.getItem('U_id'),
                            state: 0
                        })
                        .then((res) => {
                            if (res.status == 1) {
                                this.$message.success('Review now successfully!');
                                this.$router.push('/edit_per_text?Art_id=' + data.id);
                            } else {
                                this.$message.error(res.msg);
                            }
                        })
                        .catch((err) => {
                            this.$message.error(err);
                        });
                })
                .catch(() => {});
        },

        // 拒绝
        saveRef(i, data) {
            // 二次确认
            this.$confirm('Are you sure you want to refuse?', 'Tips', {
                type: 'warning'
            })
                .then(() => {
                    this.$api
                        .post('api/Finalreview/review', {
                            article_id: data.article_id,
                            record_id: data.id,
                            reviewer_id: localStorage.getItem('U_id'),
                            state: 4
                        })
                        .then((res) => {
                            if (res.status == 1) {
                                this.loading = true;
                                this.getTable();
                                // this.$router.push('/edit_per_text?Art_id=' + this.record_id);
                            } else {
                                this.$message.error(res.msg);
                            }
                        })
                        .catch((err) => {
                            this.$message.error(err);
                        });
                })
                .catch(() => {});
        },
        revstate(row, column, cellValue, index) {
            let frag = '';
            if (row.state == 0) {
                frag = 'Agree to review';
            } else if (row.state == 1) {
                // 大修
                frag = 'Accept';

                // frag = 'Revision';
            } else if (row.state == 3) {
                frag = 'Revision';
            } else if (row.state == 2) {
                //小修
                // frag = 'Accept';
                frag = 'Reject';
            } else if (row.state == 4) {
                frag = '<text style="color:#888">invalid</text>';
            } else if (row.state == 5) {
                frag = 'invitation';
            }
            return frag;
        },
        getDate(record_id) {
            const loading = this.$loading({
                lock: true,
                text: 'Loading',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)',
                zIndex: 9999 // 设置一个足够高的层级
            });
            this.$api
                .post('api/Finalreview/view', {
                    record_id: record_id
                    
                })
                .then((res) => {
                    loading.close();
                    if(res.status==1){

                   
                    this.detailDate.artrevid = res.art_rev_id;
                    this.detailDate.article = res.data.article.title;
                    this.detailDate.reviewer = res.data.article_final.realname;
                    this.detailDate.ctime = res.data.article_final.update_time;
                    this.detailDate.article_final = res.data.article_final;
                    this.detailDate.state = res.state;

                    this.txt_mess = res;
                    this.canRepeat = res.can_repeat;
                    this.journal_id = res.journal_id;
                    this.articleId = res.data.article.article_id;
                    this.editVisible1 = true;

                    this.$nextTick(() => {
                        this.$refs.commonEditor.getData();

                        
                    });

                    this.$forceUpdate();
                }else{
                    this.$message.error(res.msg);
                }
                })
                .catch((err) => {
                    this.$message.error(err);
                    console.log(err);
                });
        },
        // 获取数据
        getTable() {
            this.$api
                .post('api/Finalreview/lists', {...this.query,state:'1,2,3'})
                .then((res) => {
                    if (res.status == 1) {
                        this.loading = false;

                        if (res.data.lists != '') {
                            for (let i = 0; i < res.data.lists.length; i++) {
                                if (res.data.lists[i].update_time == null) {
                                    res.data.lists[i].ctime = '';
                                } else {
                                    let date = new Date(parseInt(res.data.lists[i].update_time) * 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.lists[i].ctime = Y + M + D;
                                }
                            }
                        }
                        this.tableData3 = res.data.lists;
                        this.link_Tota3 = res.data.total || 0;
                    } else {
                        this.loading = false;
                        this.$message.error(res.msg);
                    }
                })
                .catch((err) => {
                    this.loading = false;
                    this.$message.error(err);
                });
        },

        // 分页导航
        handlePageChange3(val) {
            this.loading = true;
            this.$set(this.TaBle3, 'pageIndex', val);
            this.getData();
        },

        // 证书弹出层
        cerFicte(index, row) {
            this.$api
                .post('api/Reviewer/getZSimg', {
                    art_rev_id: row.art_rev_id
                })
                .then((res) => {
                    if (res.code == 0) {
                        this.IMG_Url = this.Common.mediaUrl + res.data.icon;
                        this.cerVisible = true;
                    } else {
                        this.$message.error(res.msg);
                        this.feilVisible = true;
                    }
                })
                .catch((err) => {
                    this.$message.error(err);
                });
        },

        // 关闭标签
        handleClose(tag) {
            // this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
            this.dynamicTags = [];
        }
    },
    filters: {},
    watch: {}
};
</script>

<style>
.table {
    width: 100%;
    font-size: 14px;
}

.rev_digol .el-image__placeholder {
    background-image: url(../../assets/img/loading.gif);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 440px 300px;
    width: 560px;
    height: 400px;
    background-color: #fff;
}
</style>
