<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-collection"></i> <span class="top_dao"> Review 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="article_title" label="Article Title"></el-table-column>
                            <el-table-column prop="journal_title" label="Journal" width="300"></el-table-column>
                            <el-table-column prop="ctime" label="Invited time" width="130"></el-table-column>
                            <el-table-column label="Article Status" width="130" align="center">
                                <template slot-scope="scope">
                                    <b v-if="scope.row.astate == 0">Received</b>
                                    <b v-if="scope.row.astate == 1">With editor</b>
                                    <b v-if="scope.row.astate == 2">Under review</b>
                                    <b v-if="scope.row.astate == 3">Reject</b>
                                    <b v-if="scope.row.astate == 4">Revision</b>
                                    <b v-if="scope.row.astate == 5">Accept</b>
                                    <b v-if="scope.row.astate == 8">Final Decision</b>
                                    <b v-if="scope.row.astate == 6">Pre-accept</b>
                                </template>
                            </el-table-column>

                            <el-table-column label="Review decision" align="center" width="420">
                                <template slot="header" slot-scope="scope">
                                    <p>Review decision</p>
                                    <p style="height: 1px; background-color: #ddd; margin: 4px 0"></p>
                                    <p class="review_decision_header"><span> </span><span>Status</span><span>Time</span></p>
                                </template>
                                <template slot-scope="scope">
                                    <!-- <span style="font-size: 16px;"v-html="revstate(scope.row)"></span> -->

                                    <div class="fixCard reviewer_decision" style="position: relative" v-if="scope.row.recommend">
                                        <div class="overflow-x-auto">
                                            <table class="review_table">
                                                <tbody>
                                                    <!-- 遍历评审轮次：1st + 重复轮次 -->
                                                    <tr>
                                                        <td>1<sup>st</sup> review</td>
                                                        <!-- 遍历每个评审者的1st评审结果 -->
                                                        <template v-for="(iken, reviewerIndex) in [scope.row]">
                                                            <td style="cursor: pointer">
                                                                <span style="display: none; margin-left: 4px; margin-right: 8px">
                                                                    <font
                                                                        v-if="iken.recommend == 1 || iken.recommend == 2"
                                                                        style="
                                                                            width: 12px;
                                                                            height: 12px;
                                                                            display: block;
                                                                            border-radius: 10px;
                                                                            background-color: #67c23a;
                                                                        "
                                                                    >
                                                                    </font>
                                                                    <font
                                                                        v-if="iken.recommend == 3 || iken.recommend == 4"
                                                                        style="
                                                                            width: 12px;
                                                                            height: 12px;
                                                                            display: block;
                                                                            border-radius: 10px;
                                                                            background-color: #f56c6c;
                                                                        "
                                                                    >
                                                                    </font>
                                                                </span>
                                                                <span v-if="iken.recommend == 1" style="color: #006699">Minor</span>
                                                                <span v-else-if="iken.recommend == 2" style="color: #006699">Major</span>
                                                                <span v-else-if="iken.recommend == 3" style="color: #f56c6c"
                                                                    >reject and resubmission</span
                                                                >
                                                                <span v-else-if="iken.recommend == 4" style="color: #f56c6c">Reject</span>
                                                                <span v-else style="color: #888">No reply</span>
                                                            </td>

                                                            <td>
                                                                <p style="line-height: 20px; color: #888" v-if="iken.ctime > 0">
                                                                    {{ iken.ctime | formatDatehms }}
                                                                </p>
                                                            </td>
                                                        </template>
                                                    </tr>
                                                    <!-- 遍历重复评审轮次（2nd、3rd...） -->
                                                    <template v-for="(round, index1) in maxRepeatReviewCount([scope.row])">
                                                        <tr>
                                                            <td>{{ index1 + 2 }}<sup>nd</sup> review</td>
                                                            <!-- 遍历每个评审者在该轮次的结果 -->
                                                            <template v-for="(iken, reviewerIndex) in [scope.row]">
                                                                <td style="">
                                                                    <span
                                                                        style="cursor: pointer"
                                                                        v-if="Array.isArray(iken.repeat) && iken.repeat[index1]"
                                                                    >
                                                                        <span style="display: none; margin-left: 4px; margin-right: 8px">
                                                                            <font
                                                                                v-if="iken.repeat[index1].recommend == 1"
                                                                                style="
                                                                                    width: 12px;
                                                                                    height: 12px;
                                                                                    display: block;
                                                                                    border-radius: 10px;
                                                                                    background-color: #67c23a;
                                                                                "
                                                                            >
                                                                            </font>
                                                                            <font
                                                                                v-if="iken.repeat[index1].recommend == 2"
                                                                                style="
                                                                                    width: 12px;
                                                                                    height: 12px;
                                                                                    display: block;
                                                                                    border-radius: 10px;
                                                                                    background-color: #f56c6c;
                                                                                "
                                                                            >
                                                                            </font>
                                                                            <font
                                                                                v-if="iken.repeat[index1].recommend == 3"
                                                                                style="
                                                                                    width: 12px;
                                                                                    height: 12px;
                                                                                    display: block;
                                                                                    border-radius: 10px;
                                                                                    background-color: #006699;
                                                                                "
                                                                            >
                                                                            </font>
                                                                        </span>
                                                                        <span
                                                                            v-if="iken.repeat[index1].recommend == 1"
                                                                            style="color: #67c23a"
                                                                            >Accept</span
                                                                        >
                                                                        <span
                                                                            v-else-if="iken.repeat[index1].recommend == 2"
                                                                            style="color: #f56c6c"
                                                                            >Reject</span
                                                                        >
                                                                        <span
                                                                            v-else-if="iken.repeat[index1].recommend == 3"
                                                                            style="color: #006699"
                                                                            >Revision</span
                                                                        >
                                                                        <span v-else style="color: #888">No reply</span>
                                                                    </span>
                                                                    <span v-else>-</span>
                                                                </td>
                                                                <td>
                                                                    <p
                                                                        style="line-height: 20px; color: #888"
                                                                        v-if="iken.repeat[index1].ctime > 0"
                                                                    >
                                                                        {{ iken.repeat[index1].ctime | formatDatehms }}
                                                                    </p>
                                                                </td>
                                                            </template>
                                                        </tr>
                                                    </template>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                    <div v-else>/</div>
                                </template>
                            </el-table-column>
                            <!-- <el-table-column label="Recommendation" width="160" align="center">
								<template slot-scope="scope">
									<b v-if="scope.row.recommend == 1||scope.row.recommend == 2">Accept</b>
									<b v-if="scope.row.recommend == 3||scope.row.recommend == 4">Reject</b>
								</template>
							</el-table-column> -->
                            <el-table-column label=" " width="130">
                                <template slot-scope="scope">
                                    <router-link
                                        :to="{
                                            path: '/perhistory_commen',
                                            query: { Art_id: scope.row.article_id, Rev_id: scope.row.art_rev_id }
                                        }"
                                        v-if="
                                            (scope.row.astate == 3 || scope.row.astate == 5) &&
                                            (scope.row.journal_id == 1 || scope.row.journal_id == 9 || scope.row.article_id > 1598)
                                        "
                                    >
                                        <el-button type="primary" plain style="margin-right: 10px">All Comments </el-button>
                                    </router-link>
                                    <el-button
                                        type="warning"
                                        plain
                                        @click="cerFicte(scope.$index, scope.row)"
                                        v-if="scope.row.state == 1 || scope.row.state == 2 || scope.row.state == 3"
                                        >Certificate
                                    </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>
    </div>
</template>

<script>
export default {
    data() {
        return {
            loading: false,
            query: {
                user_id: localStorage.getItem('U_id')
            },
            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: {
        maxRepeatReviewCount(list) {
            if (!list || !Array.isArray(list)) return null; // 边界处理：无数据返回null

            // 遍历所有评审者，找到repeat数组长度最大的那条数据
            const maxItem = list.reduce((maxItem, currentItem) => {
                // 计算当前项的repeat长度，非数组则视为0
                const currentLen = Array.isArray(currentItem.repeat) ? currentItem.repeat.length : 0;
                // 计算当前最大项的repeat长度，非数组则视为0
                const maxLen = Array.isArray(maxItem.repeat) ? maxItem.repeat.length : 0;

                // 如果当前项长度更大，则更新最大项
                return currentLen > maxLen ? currentItem : maxItem;
            }, {}); // 初始值设为一个空对象
            //   console.log('maxItem at line 2142:', maxItem.repeat.length)
            return maxItem && maxItem.repeat ? maxItem.repeat.length : 0;
        },
        revstate(row, column, cellValue, index) {
            let frag = '';
            if (row.state == 0) {
                frag = 'With reviewer';
            } else if (row.state == 1) {
                // 大修
                frag = 'Major revision';

                // frag = 'Revision';
            } else if (row.state == 2) {
                frag = 'Reject';
            } else if (row.state == 3) {
                //小修
                // frag = 'Accept';
                frag = 'Minor revision';
            } else if (row.state == 4) {
                frag = '<text style="color:#aaa">invalid</text>';
            } else if (row.state == 5) {
                frag = 'invitation';
            }

            return frag;
        },
        // 获取数据
        getTable() {
            this.$api
                .post('api/Reviewer/getReviewerDetail1', this.query)
                .then((res) => {
                    if (res.code == 0) {
                        this.getData();
                    } else {
                        this.$message.error(res.msg);
                    }
                })
                .catch((err) => {
                    this.$message.error(err);
                });
        },

        getData() {
            this.$api
                .post('api/Reviewer/getReviewerListHistory', this.TaBle3)
                .then((res) => {
                    this.loading = false;
                    if (res.code == 0) {
                        if (res.data.lists != '') {
                            for (let i = 0; i < res.data.lists.length; i++) {
                                if (res.data.lists[i].recommenttime == null) {
                                    res.data.lists[i].ctime = '';
                                } else {
                                    let date = new Date(parseInt(res.data.lists[i].recommenttime) * 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.count || 0;
                    } else {
                        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 scoped>
.review_table {
    width: 100% !important;
    background-color: #fff !important;
    /* margin-top: 10px; */
    border-collapse: collapse !important; /* 合并表格边框 */
}

.review_table th,
td {
    padding: 4px !important;
    min-width: 70px !important;
    /* border-top: 1px solid #ddd !important;
    border-bottom: 1px solid #ddd !important; */
    color: #333 !important;
    text-align: left !important;
    height: 18px !important;
}

.review_table th {
    font-size: 12px !important;
    background-color: #f0f0f0 !important;
}
.review_table td {
    font-size: 12px;
    /* background-color: #f0f0f0; */
}
.review_table th:first-child,
.review_table td:first-child {
    width: 110px !important;

    word-wrap: break-word !important;

    word-break: break-all !important;
}

.overflow-x-auto {
    overflow-x: auto;
}
</style>
<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;
}
.review_decision_header {
    width: 100%;
    display: flex;
    align-items: center;
}
.review_decision_header span {
    width: 30%;
    text-align: left;
}
.review_decision_header span:nth-child(1) {
    width: 120px;
    /* text-align: center; */
    display: flex;
}
</style>
