<template>
    <div style="height: 100%;">
        <div class="crumbs" style="margin: 0;">
            <!-- <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-user"></i> Reviewer list </el-breadcrumb-item>
            </el-breadcrumb> -->
        </div>
        <div class="container" style="height: 100%;box-sizing: border-box;">
            <!-- <div class="handle-box">
				
			</div> -->
            <div class="handle-box">
                <el-select
                    v-model="query.journalId"
                    placeholder="Please select a journal"
                    @change="
                        query.pageIndex = 1;
                        getContent();
                    "
                >
                    <el-option label="All journals" :key="0" :value="0"></el-option>
                    <el-option v-for="item in df_jour" :label="item.title" :key="item.journal_id" :value="item.journal_id"></el-option>
                </el-select>
                <!-- <span style="margin:0 10px 0 20px;font-size: 14px;">Class:</span> -->
                <!-- <el-select v-model="query.class" style="width: 100px;margin: 0 0 0 15px;" @change="getContent">
					<el-option label="All class" :key="0" :value="0"></el-option>
					<el-option label="A" key="A" value="A"></el-option>
					<el-option label="B" key="B" value="B"></el-option>
					<el-option label="C" key="C" value="C"></el-option>
					<el-option label="D" key="D" value="D"></el-option>
					<el-option label="Not rated" key="1" value="1"></el-option>
				</el-select> -->
                <el-input clearable v-model="query.keyword" placeholder="Account / Realname / Email" style="width: 240px; margin: 0 15px">
                </el-input>
                <el-cascader
                    clearable
                    :ref="`cascader1`"
                    @change="handleChange"
                    v-model="selectField"
                    :placeholder="'Please select Field '"
                    :options="options"
                    :props="getProps()"
                ></el-cascader>
                <el-button
                    type="primary"
                    style="margin-left: 20px"
                    icon="el-icon-search"
                    @click="
                        query.pageIndex = 1;
                        getContent();
                    "
                    >Search
                </el-button>
                <el-button type="primary" icon="el-icon-plus" class="handle-del" @click="add_Selection">Add Reviewer </el-button>
            </div>
            <el-table height="86%" :data="tableData" class="table" ref="multipleTable" header-cell-class-name="table-header" empty-text="Messages (0)">
                <el-table-column label="Base Information" width="280px">
                    <template slot-scope="scope">
                        <p class="tab_tie_col">
                            <span>Realname: </span>
                            <b style="font-size: 15px; letter-spacing: -0.5px">{{ scope.row.realname }}</b>
                            <!-- <span style="margin-left:30px ;">Class: </span>
							<el-button @click="BoxGrade(scope.row)" size="mini" type="text">
								<b v-if="scope.row.grade!=''">{{scope.row.grade}}</b>
								<b v-if="scope.row.grade==''">Not rated</b>
							</el-button> -->
                        </p>
                        <p class="tab_tie_col">
                            <span>Title: </span>{{ scope.row.technical }}
                            <span style="margin-left: 25px">CV: </span>
                            <span v-if="scope.row.cvs.length > 0" v-for="(item, index) in [scope.row.cvs[scope.row.cvs.length - 1]]">
                                <!-- <span style="margin-left: 20px; color: #888; font-size: 13px">
                                        <i class="el-icon-paperclip"></i>
                                        {{ formatDate(item.ctime) }}
                                    </span> -->
                                <el-tooltip :content="formatDate(item.ctime)" placement="top">
                                    <a
                                        :href="mediaUrl + 'reviewer/' + item.cv"
                                        target="_blank"
                                        class="txt_pdf"
                                        style="margin: 0; display: inline-block"
                                        ><img
                                            src="@/assets/img/icon_0.png"
                                            alt=""
                                            class="icon_img"
                                            style="vertical-align: middle; width: 16px; height: 16px"
                                        />
                                        <i class="el-icon-download" style="font-size: 12px;margin-left: 4px;"></i>
                                    </a>
                                </el-tooltip>
                            </span>
                            <!-- <b class="el-icon-check" style="color: #0fa31d; font-weight: bold" v-if="scope.row.cvs.length > 0"> </b> -->
                            <b class="el-icon-close" style="color: #ff0000; font-weight: bold" v-if="scope.row.cvs.length == 0"> </b>
                        </p>
                        <p class="tab_tie_col"><span>Email: </span>{{ scope.row.email }}</p>
                        <div class="tab_tie_col" style="display: flex; align-items: center">
                            <p>
                                <span>H-WOS: </span>
                                <el-tooltip :content="getTime(scope.row.wos_time)" placement="top">
                                    <font v-html="colorIndex(scope.row.wos_index, scope.row.wos_time)"></font>
                                </el-tooltip>
                            </p>
                            <p style="margin-left: 20px">
                                <span>H-Google: </span>
                                <el-tooltip :content="getTime(scope.row.google_time)" placement="top">
                                    <font v-html="colorIndex(scope.row.google_index, scope.row.google_time)"></font>
                                </el-tooltip>
                            </p>
                        </div>
                        <!-- <p class="tab_tie_col">
                            <span>H-Google: </span>
                            <font v-html="colorIndex(scope.row.google_index, scope.row.google_time)"></font>
                        </p> -->
                        <p class="tab_tie_col" v-if="scope.row.starList_mark != 0">
                            <span>Grade: </span>
                            <font style="display: inline-block">
                                <img
                                    src="../../assets/img/star-all.png"
                                    v-for="item in scope.row.starList"
                                    v-if="scope.row.starList_mark <= 8 && item.star == 1"
                                    class="starSty"
                                />
                                <img
                                    src="../../assets/img/star-traf.png"
                                    v-for="item in scope.row.starList"
                                    v-if="scope.row.starList_mark <= 8 && item.star == 0"
                                    class="starSty"
                                />
                                <img
                                    src="../../assets/img/star-none.png"
                                    v-for="item in scope.row.starList"
                                    v-if="scope.row.starList_mark <= 8 && item.star == 2"
                                    class="starSty"
                                />
                                <img src="../../assets/img/star-all.png" v-if="scope.row.starList_mark > 8" class="starSty" />
                                <b style="font-size: 15px; color: #b77614" v-if="scope.row.starList_mark > 8"
                                    >× {{ scope.row.starList_mark }}</b
                                >
                            </font>
                        </p>
                        <p class="tab_tie_col">
                            <span style="color: #0b71ff">Reviewed manuscripts {{ ReviewTime }}: </span>
                            <font style="display: inline-block; color: #0b71ff; font-weight: bold" v-if="scope.row.review_num_two_year">
                                {{ scope.row.review_num_two_year }}
                            </font>
                            <font style="display: inline-block; color: #aaa; font-weight: bold" v-else> 0 </font>
                        </p>
                    </template>
                </el-table-column>
                <el-table-column label="Other Information" min-width="300">
                    <template slot-scope="scope">
                        <p class="tab_tie_col"><span>Field: </span>{{ scope.row.field }}</p>
                        <!-- <p class="tab_tie_col"><span>Major: </span>{{ scope.row.major_title }}</p> -->
                        <p class="tab_tie_col"><span>Affiliation: </span>{{ scope.row.company }}</p>
                        <p class="tab_tie_col">
                            <span>Remarks: </span><span style="color: #ce4f15">{{ scope.row.remark }}</span>
                            <b
                                @click="BoxRemark(scope.row)"
                                style="margin-left: 10px; cursor: pointer; color: #ce4f15"
                                class="el-icon-edit"
                            ></b>
                        </p>

                        <p class="tab_tie_col">
                            <span>Youth editorial board: </span>
                            <b
                                class="el-icon-check"
                                style="color: #0fa31d; margin-right: 20px; font-weight: bold"
                                v-if="scope.row.is_yboard == '1'"
                            >
                            </b>
                            <b
                                class="el-icon-close"
                                style="color: #ff0000; margin-right: 20px; font-weight: bold"
                                v-if="scope.row.is_yboard == '0'"
                            >
                            </b>
                            <el-button
                            style="padding: 4px;"
                                size="mini"
                                type="success"
                                plain
                                icon="el-icon-sort-up"
                                @click="gradeup(scope.row)"
                                v-if="scope.row.is_yboard == '0'"
                                >Upgrade</el-button
                            >
                            <el-button style="padding: 4px;"
                                size="mini"
                                type="warning"
                                plain
                                icon="el-icon-sort-down"
                                @click="gradedown(scope.row)"
                                v-if="scope.row.is_yboard == '1'"
                                >downgrade</el-button
                            >
                        </p>
                    </template>
                </el-table-column>
                <!-- <el-table-column label="Remarks" width="250">
                    <template slot-scope="scope">
                        {{ scope.row.remark }}
                        <b
                            @click="BoxRemark(scope.row)"
                            style="margin-left: 10px; cursor: pointer; color: #006699"
                            class="el-icon-edit"
                        ></b>
                    </template>
                </el-table-column> -->
                <el-table-column label="Research areas" width="260">
                    <template slot-scope="scope">
                      <commonMajorTableList :user_id="scope.row.user_id" :baseInfo="scope.row"  :key="scope.row.user_id"></commonMajorTableList>
                    </template>
                </el-table-column>

                <el-table-column label="" width="110" align="center">
                    <template slot-scope="scope">
                        <!-- <div style="margin: 0 0 6px 0;">
							<el-button size="mini" type="primary" plain icon="el-icon-tickets"
								@click="handleEdit(scope.$index, scope.row)">Edit</el-button>
						</div> -->
                        <div style="margin: 0 0 6px 0">
                            <el-button style="width: 80px;padding: 7px 10px;" type="primary" plain icon="el-icon-edit" @click="handleDtail(scope.row)"> Detail </el-button>
                        </div>
                        <div >
                            <el-button style="width: 80px;padding: 7px 10px;" size="mini" type="danger" plain icon="el-icon-delete" @click="showDelete(scope.row)">
                                Delete</el-button
                            >
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                    background
                    layout="total, prev, pager, next"
                    :current-page="query.pageIndex"
                    :page-size="query.pageSize"
                    :total="link_Total"
                    @current-change="handlePageChange"
                ></el-pagination>
            </div>
        </div>
        <common-reviewer ref="commonReviewer" @fresh="getContent"></common-reviewer>
        <!-- 检测邮箱弹出框 -->
        <!-- <el-dialog title="Add User Check Email" :visible.sync="checkVisible" width="500px">
			<el-form ref="check_Form" :model="checkForm" :rules="rules" label-width="80px">
				<el-form-item label="Email :" prop="email">
					<el-input v-model="checkForm.email" style="width: 300px;margin-right: 10px;"></el-input>
					<el-button v-if="email_num==0" type="primary" @click="saveCheck(checkForm)">Check</el-button>
				</el-form-item>
			</el-form>
			<div v-if="email_num==1" style="margin: 0 80px;color: orangered;word-break:break-word;">
			
				{{checkForm.email}} already exists. <br>Do you want to continue adding a new identity or modify the
				mailbox for
				authentication.
				<div style="text-align: center;margin: 15px 0 0 0;">
					<el-button type="primary" @click="NewCheck()" icon="el-icon-refresh">Re-enter</el-button>
					<el-button type="primary" @click="GoldCheck()" icon="el-icon-plus">Add this user role</el-button>
				</div>
			</div>
			<div v-if="email_num==2" style="margin: 0 80px;color: #006699;">
				
				Verification succeeded, continue to add information!
			</div>
		</el-dialog> -->

        <!-- 添加弹出框 -->

        <!-- 编辑弹出框 -->
        <el-dialog title="Edit User Message" :visible.sync="editVisible" width="700px"  :close-on-click-modal="false">
            <el-form ref="edit_Form" :model="editForm" :rules="rules" label-width="120px">
                <el-form-item label="Email :">
                    {{ editForm.email }}
                </el-form-item>
                <el-form-item label="Account :" prop="account">
                    {{ editForm.account }}
                </el-form-item>
                <el-form-item label="Gender :" prop="gender">
                    <span v-if="editForm.gender == 1">Male</span>
                    <span v-if="editForm.gender == 2">Female</span>
                </el-form-item>
                <el-form-item label="Journal :" prop="journal_title">
                    {{ editForm.journal_title }}
                </el-form-item>
                <el-form-item label="Title :" prop="title">
                    <el-select
                        v-model="editForm.title"
                        filterable
                        placeholder="Please select a title"
                        value-key="groupID"
                        style="width: 300px"
                    >
                        <el-option v-for="item in df_technical" :key="item.label" :label="item.label" :value="item.label"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="Country :" prop="country">
                    <el-select
                        v-model="editForm.country"
                        filterable
                        placeholder="Please select a country"
                        value-key="groupID"
                        style="width: 300px"
                    >
                        <el-option v-for="item in df_country" :label="item.en_name" :key="item.en_name" :value="item.en_name"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="Realname :">
                    <el-input v-model="editForm.realname"></el-input>
                </el-form-item>
                <el-form-item label="Orcid :">
                    {{ editForm.orcid }}
                </el-form-item>
                <el-form-item label="Introduction :">
                    <el-input v-model="editForm.introduction" type="textarea" autosize></el-input>
                </el-form-item>
                <el-form-item label="Affiliation :">
                    <el-input v-model="editForm.company"></el-input>
                </el-form-item>
                <el-form-item label="Major :" prop="major_a">
                    <el-select
                        v-model="editForm.major_a"
                        placeholder="Please select"
                        @change="majorChangeEdit(1)"
                        style="width: 150px; margin: 0 10px 0 0"
                    >
                        <el-option
                            v-for="item in majors_a_edit"
                            :key="item.major_id"
                            :label="item.major_title"
                            :value="item.major_id"
                        ></el-option>
                    </el-select>
                    <el-select
                        v-model="editForm.major_b"
                        placeholder="Please select"
                        v-if="majors_b_edit != ''"
                        @change="majorChangeEdit(2)"
                        style="width: 150px; margin: 0 10px 0 0"
                    >
                        <el-option :key="0" label="None" :value="0"></el-option>
                        <el-option
                            v-for="item in majors_b_edit"
                            :key="item.major_id"
                            :label="item.major_title"
                            :value="item.major_id"
                        ></el-option>
                    </el-select>
                    <el-select
                        v-model="editForm.major_c"
                        placeholder="Please select"
                        v-if="majors_c_edit != ''"
                        @change="majorChangeEdit(3)"
                        style="width: 150px"
                    >
                        <el-option :key="0" label="None" :value="0"></el-option>
                        <el-option
                            v-for="item in majors_c_edit"
                            :key="item.major_id"
                            :label="item.major_title"
                            :value="item.major_id"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="Field :">
                    <el-input v-model="editForm.field" type="textarea" autosize></el-input>
                </el-form-item>
                <!-- 简历 -->
                <el-form-item label="CV. :" prop="qualifications">
                    <el-upload
                        class="upload-demo"
                        :action="baseUrl + 'api/Reviewer/up_cv_file'"
                        :on-success="handleFileSuccess3"
                        name="reviewerCV"
                        type="reviewerCV"
                        :on-error="handleFileError"
                        :on-preview="handlePreview"
                        :on-remove="handleRemove"
                        :before-remove="beforeRemove"
                        :on-change="handleChange3"
                        accept=".pdf"
                        :on-exceed="handleExceed"
                        :file-list="fileL_pdf3"
                        ref="upload"
                    >
                        <el-button type="text" style="font-weight: bolder"
                            ><b class="el-icon-lx-top" style="font-weight: bolder"></b>upload</el-button
                        >
                    </el-upload>
                    <span style="font-size: 12px; color: #aaa">Only pdf files can be uploaded(.pdf)</span>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editVisible = false">Cancel</el-button>
                <el-button type="primary" @click="saveEdit(editForm)">OK</el-button>
            </span>
        </el-dialog>

        <!-- 删除弹出框 -->
        <el-dialog title="Delete Reviewer" :visible.sync="delOpen" width="600px" :close-on-click-modal="false">
            <div v-for="item in lineOptions" :name="item.journal_id" :value="item.reviewer_id" style="margin: 0 0 12px 60px">
                {{ item.journal.title }} - {{ item.reviewer.realname }}
                <font @click="lastDelete($event)" class="deteleBtn">
                    <i class="el-icon-delete"></i>
                    Delete
                </font>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="delOpen = false">Cancel</el-button>
            </span>
        </el-dialog>

        <!-- 标记弹出框 -->
        <el-dialog title="Remarks" :visible.sync="remarkBox" width="800px" :close-on-click-modal="false">
            <el-form ref="remark" :model="remarkMes" label-width="95px">
                <el-form-item label="Reviewer :">
                    <p style="line-height: 20px; margin-top: 6px">
                        <span style="color: #333; font-weight: bold">{{ remarkMes.realname }}</span>
                        ( {{ remarkMes.email }} )
                    </p>
                </el-form-item>
                <el-form-item label="Content :">
                    <el-input type="textarea" rows="20" v-model="remarkMes.remark"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="remarkBox = false">Cancel</el-button>
                <el-button type="primary" @click="saveRemark">Save</el-button>
            </span>
        </el-dialog>
        <el-dialog title="Edit Research areas" :visible.sync="majorBox" width="800px" :close-on-click-modal="false">
            <el-form ref="remark" :model="majorMes" label-width="120px">
                <el-form-item label="Reviewer :">
                    <p style="line-height: 20px; margin-top: 6px">
                        <span style="color: #333; font-weight: bold">{{ majorMes.realname }}</span>
                        ( {{ majorMes.email }} )
                    </p>
                </el-form-item>
                <!-- <el-form-item label="Email :">
                    <p style="line-height: 20px; margin-top: 6px">{{ majorMes.email }}</p>
                </el-form-item> -->
                <el-form-item label="Research areas :">
                    <common-major-list :list="majorValueList" @load="(e) => (this.majorValueList = e)"></common-major-list>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="majorBox = false">Cancel</el-button>
                <el-button type="primary" @click="saveMajor">Save</el-button>
            </span>
        </el-dialog>

        <!-- 评级弹出框 -->
        <el-dialog title="Reviewer Class" :visible.sync="gradeBox" width="400px" :close-on-click-modal="false">
            <el-form ref="grade" :model="gradeMes" label-width="85px">
                <el-form-item label="Reviewer :">
                    <p style="line-height: 20px; margin-top: 6px">{{ gradeMes.realname }}</p>
                </el-form-item>
                <el-form-item label="Class :">
                    <el-select v-model="gradeMes.grade" placeholder="Please select">
                        <el-option key="A" label="A" value="A"></el-option>
                        <el-option key="B" label="B" value="B"></el-option>
                        <el-option key="C" label="C" value="C"></el-option>
                        <el-option key="D" label="D" value="D"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="gradeBox = false">Cancel</el-button>
                <el-button type="primary" @click="saveGrade">Save</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
const currentYear = new Date().getFullYear();
var ReviewTime = `(${currentYear - 2}–${currentYear})`;
import commonReviewer from '../page/components/reviewerList/add.vue';
import commonMajorTableList from '../page/components/major/tableList.vue';
export default {
    components: {
        commonReviewer,
        commonMajorTableList,
    },

    data() {
        return {
            ReviewTime: ReviewTime,
            majorValueList: [],
            majorData: [],
            selectField: [],
            options: [], // 用于存储级联选择的选项数据
            tableData: [],
            checkForm: {
                email: ''
            },
            mess_age: {},
            editForm: {
                title: ''
            },
            addForm: {},
            cvitaTable: [],
            delOpen: false,
            editVisible: false,
            addVisible: false,
            checkVisible: false,
            btn_alert: false,
            email_num: 0,
            df_jour_cun: [],
            df_jour: [],
            df_country: [],
            majors_a: [],
            majors_b: [],
            majors_c: [],
            majors_a_edit: [],
            majors_b_edit: [],
            majors_c_edit: [],
            lineOptions: [],
            edit_id: localStorage.getItem('U_id'),
            query: {
                username: localStorage.getItem('U_name'),
                journalId: 0,
                class: 0,
                pageIndex: 1,
                pageSize: 15
            },
            df_technical: [
                {
                    label: 'Prof'
                },
                {
                    label: 'Associate Prof.'
                },
                {
                    label: 'Assistant Prof.'
                },
                {
                    label: 'Ph.D.'
                },
                {
                    label: 'Others'
                }
            ],
            remarkMes: {
                remark: ''
            },
            majorMes: {},
            remarkBox: false,
            majorBox: false,
            gradeMes: {
                grade: ''
            },
            gradeBox: false,
            link_Total: 0,
            baseUrl: this.Common.baseUrl,
            mediaUrl: this.Common.mediaUrl,
            fileL_pdf2: [],
            fileL_pdf3: [],
            rules: {
                account: [
                    {
                        required: true,
                        message: 'Please input account',
                        trigger: 'blur'
                    }
                ],
                email: [
                    {
                        required: true,
                        message: 'Please input email',
                        trigger: 'blur'
                    },
                    {
                        validator: function (rule, value, callback) {
                            if (/^[-.-_A-Za-z0-9]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(value) == false) {
                                callback(new Error('Please enter the correct email format'));
                            } else {
                                callback();
                            }
                        },
                        trigger: 'blur'
                    }
                ],
                genger: [
                    {
                        required: true,
                        message: 'Please select genger',
                        trigger: 'blur'
                    }
                ],
                journal_id: [
                    {
                        required: true,
                        message: 'Please select journal',
                        trigger: 'blur'
                    }
                ],
                journal_title: [
                    {
                        required: true,
                        message: 'Please select title',
                        trigger: 'blur'
                    }
                ],
                maj_cn: [
                    {
                        required: true,
                        message: 'Please select major',
                        trigger: 'blur'
                    }
                ],
                title: [
                    {
                        required: true,
                        message: 'Please select title',
                        trigger: 'blur'
                    }
                ],
                technical: [
                    {
                        required: true,
                        message: 'Please select title',
                        trigger: 'blur'
                    }
                ],
                country: [
                    {
                        required: true,
                        message: 'Please select country',
                        trigger: 'blur'
                    }
                ],
                field: [
                    {
                        required: true,
                        message: 'Please input field',
                        trigger: 'blur'
                    }
                ],
                realname: [
                    {
                        required: true,
                        message: 'Please input realname',
                        trigger: 'blur'
                    }
                ],
                major_a: [
                    {
                        required: true,
                        message: 'Please select major',
                        trigger: 'blur'
                    }
                ]
            }
        };
    },
    created() {
        this.getDate();
        this.getContent();
        this.loadFields();
        // this.initMajor()
    },
    methods: {
        getProps() {
            return {
                value: 'value',
                label: 'label',
                children: 'children',
                checkStrictly: true, // 允许任意选择一级
                expandTrigger: 'hover' // 使用 hover 触发展开
            };
        },
        handleChange() {
            this.$nextTick(() => {
                console.log(this.selectField);
                this.$refs.cascader1.dropDownVisible = false;
                // this.coreForm1.majorList = this.fields[i].selectedValue;

                //  this.$emit('load',this.fields)

                this.$forceUpdate();
            });
        },
        // 加载多个领域数据
        loadFields() {
            this.$api.post('api/Major/getMajorList', {}).then((res) => {
                const transformData = (data) => {
                    return data.map((item) => {
                        const transformedItem = {
                            ...item,
                            value: item.major_id,
                            label: `${item.major_title}`
                        };

                        // 如果存在 children，递归处理
                        if (item.children && item.children.length > 0) {
                            transformedItem.children = transformData(item.children);
                        }

                        return transformedItem;
                    });
                };

                // 执行递归，获取选项数据
                const data = transformData(res.data.majors.find((item) => item.major_id == 1).children);
                this.options = [...data]; // 将选项数据赋给 options
            });
        },
        // 获取编辑列表数据
        getDate() {
            this.$api
                .post('api/Chief/getJournalsByEditor', {
                    user_id: this.edit_id
                })
                .then((res) => {
                    if (res.code == 0) {
                        this.df_jour = res.data.journals;
                    } else {
                        this.$message.error(res.msg);
                    }
                })
                .catch((err) => {
                    this.$message.error(err);
                });
            this.$api
                .post('api/Reviewer/getCountrys')
                .then((res) => {
                    this.df_country = res.countrys;
                })
                .catch((err) => {
                    this.$message.error(err);
                });
        },

        async getContent() {
            console.log('this.selectField at line 720:', this.selectField);
            if (this.selectField.length > 0) {
                this.query.user_field = this.selectField[this.selectField.length - 1];
            } else {
                this.query.user_field = '';
            }
            if (this.query.class == 0) {
                if (this.query.grade != undefined) {
                    delete this.query.grade;
                }
            } else if (this.query.class == 1) {
                this.query.grade = '';
            } else {
                this.query.grade = this.query.class;
            }
            const loading = this.$loading({
                lock: true,
                text: 'Loading...',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
            await this.$api
                .post('api/Reviewer/getReviewerListByJournal', this.query)
                .then(async (res) => {
                    if (res.code == 0) {
                        this.tableData = res.data;
                        for (var i = 0; i < this.tableData.length; i++) {
                            // this.fetchMajorData(this.tableData[i].user_id); // 加载第一个用户的数据
                            this.getScoreData(i, this.tableData[i].score);
                        }
                        this.link_Total = res.total || 0;

                        loading.close();
                        // this.$nextTick(() => {
                        //     this.tableData.forEach(async (item, i) => {
                        //         this.majorData[i] = await this.getMajor(item.user_id);
                        //         console.log('at line 718:', this.majorData[i])
                        //     });
                        // });

                        this.$forceUpdate();
                    } else {
                        this.$message.error(res.msg);
                        loading.close();
                    }
                })
                .catch((err) => {
                    this.$message.error(err);
                    loading.close();
                });
        },

        // 评分
        getScoreData(i, e) {
            this.tableData[i].starList = [];
            this.tableData[i].starList_mark = 0;
            if (e < 0.5 && e > 0) {
                this.tableData[i].starList.push({
                    star: 2
                });
                this.tableData[i].starList_mark = 1;
            } else {
                let zheng = Math.floor(e);
                let xiao = Number(e) - Math.floor(e);
                if (xiao >= 0.5) {
                    xiao = 0.5;
                } else {
                    xiao = 0;
                }
                for (var j = 0; j < zheng; j++) {
                    this.tableData[i].starList.push({
                        star: 1
                    });
                }
                if (xiao == 0.5) {
                    this.tableData[i].starList.push({
                        star: 0
                    });
                }
                this.tableData[i].starList_mark = Number(zheng) + Number(xiao);
            }
        },
        // 分页导航
        handlePageChange(val) {
            this.$set(this.query, 'pageIndex', val);
            this.getContent();
        },
        // 升级
        gradeup(row) {
            // 二次确认
            this.$confirm('确定要升级' + row.account + '为青年编委吗？', '提示', {
                type: 'warning'
            })
                .then(() => {
                    this.$api
                        .post('api/User/upReviewerToYboard', row)
                        .then((res) => {
                            if (res.code == 0) {
                                this.$message.success('升级' + row.account + '为青年编委成功');
                                this.getContent();
                            } else {
                                this.$message.error(res.msg);
                            }
                        })
                        .catch((err) => {
                            this.$message.error(err);
                        });
                })
                .catch(() => {});
        },
        // 降级
        gradedown(row) {
            // 二次确认
            this.$confirm('确定要降级' + row.account + '为审稿人吗？', '提示', {
                type: 'warning'
            })
                .then(() => {
                    this.$api
                        .post('api/User/downReviewerToYboard ', row)
                        .then((res) => {
                            if (res.code == 0) {
                                this.$message.success('降级为' + row.account + '审稿人成功');
                                this.getContent();
                            } else {
                                this.$message.error(res.msg);
                            }
                        })
                        .catch((err) => {
                            this.$message.error(err);
                        });
                })
                .catch(() => {});
        },
        // 下拉级联添加
        ched_id_add(event) {
            this.addForm.major = event[0];
            this.addForm.cmajor = event[1];
        },
        ched_id_edit(event) {
            this.editForm.major = event[0];
            this.editForm.cmajor = event[1];
        },
        // 添加操作
        add_Selection(index, row) {
            this.$refs.commonReviewer.init();
            // this.checkVisible = true;
            // this.checkForm.email = '';
            // this.email_num = 0;
            // this.addForm = {};
            // this.cvitaTable = []
            // this.fileL_pdf2 = [];
        },
        // 验证邮箱是否存在
        saveCheck(checkForm) {
            this.$refs.check_Form.validate((valid) => {
                if (valid) {
                    this.$api
                        .post('api/Reviewer/checkUser', {
                            account: this.checkForm.email
                        })
                        .then((res) => {
                            if (res.code == 0) {
                                if (res.data.has == 'no') {
                                    this.email_num = 2;
                                    this.addForm.email = this.checkForm.email;
                                    this.addForm.gender = 1;
                                    setTimeout(() => {
                                        this.checkVisible = false;
                                        this.addVisible = true;
                                    }, 1000);
                                } else {
                                    this.email_num = 1;
                                }
                            } else {
                                this.$message.error(res.msg);
                            }
                        })
                        .catch((err) => {
                            this.$message.error(err);
                        });
                }
            });
        },
        // 如果重新填写
        NewCheck() {
            this.checkForm.email = '';
            this.email_num = 0;
        },
        // 如果继续添加
        GoldCheck() {
            this.$api
                .post('api/Reviewer/getReviewerByNameEmail', {
                    account: this.checkForm.email
                })
                .then((res) => {
                    this.checkVisible = false;
                    this.addForm = res.data.reviewer;
                    if (this.addForm.reviewer_id == null) {
                        this.addForm.reviewer_id = res.data.reviewer.user_id;
                    }
                    this.addForm.title = res.data.reviewer.technical;
                    this.fileL_pdf2 = [];
                    this.cvitaTable = res.data.reviewer.cvs;
                    if (res.data.reviewer.cvs.length == 0) {
                        this.addForm.cv = '';
                        this.addForm.qualifications = '';
                    } else {
                        this.addForm.cv = res.data.reviewer.cvs[res.data.reviewer.cvs.length - 1].cv;
                        this.addForm.qualifications = res.data.reviewer.cvs[res.data.reviewer.cvs.length - 1].cv;
                        this.fileL_pdf2 = [{}];
                        this.fileL_pdf2[0].name = 'reviewerCV';
                        this.fileL_pdf2[0].url = this.mediaUrl + 'reviewer/' + res.data.reviewer.cvs[res.data.reviewer.cvs.length - 1].cv;
                    }

                    // this.addForm.maj_cn = [this.addForm.major, this.addForm.cmajor];
                    this.addForm.major = 1;
                    this.addForm.major_a = '';
                    this.addForm.major_b = '';
                    this.addForm.major_c = '';
                    this.addForm.majorList = [];

                    if (this.addForm.majorshu != 0 && this.addForm.majorshu != null) {
                        if (typeof this.addForm.majorshu == 'number') {
                            this.addForm.majorList.push(this.addForm.majorshu);
                        } else {
                            this.addForm.majorList = this.addForm.majorshu.split(',');
                        }
                    }

                    this.$nextTick(() => {
                        this.jiLInaoan();
                        this.addVisible = true;
                    });

                    // 可申请审稿人的期刊
                    this.$api
                        .post('api/Journal/getJournalsForReviewerInEditor', {
                            editor_id: this.edit_id,
                            reviewer_id: this.addForm.reviewer_id
                        })
                        .then((res) => {
                            this.df_jour_cun = res.data.journals;
                        })
                        .catch((err) => {
                            this.$message.error(err);
                        });
                })
                .catch((err) => {
                    this.$message.error(err);
                });
        },
        // 查找与他相同的账号
        saerNa_U() {
            if (this.addForm.account != undefined) {
                this.$api
                    .post('api/Reviewer/checkUser', {
                        account: this.addForm.account
                    })
                    .then((res) => {
                        if (res.code == 0) {
                            if (res.data.has == 'no') {
                                this.btn_alert = false;
                            } else {
                                this.btn_alert = true;
                            }
                        } else {
                            this.$message.error(res.msg);
                        }
                    })
                    .catch((err) => {
                        this.$message.error(err);
                    });
            }
        },
        // 保存用户的添加
        saveAdd(addForm) {
            this.$refs.add_Form.validate((valid) => {
                if (this.cvitaTable.length == 0) {
                    if (this.addForm.qualifications == '' || this.addForm.qualifications == undefined) {
                        this.$message.error('Please make sure that CV. document is uploaded successfully');
                        return false;
                    }
                }
                if (valid) {
                    let path_add = '';
                    if (this.email_num == 2) {
                        // 新的
                        path_add = 'api/Reviewer/addReviewer';
                    } else {
                        // 重复
                        path_add = 'api/Reviewer/addReviewerBee';
                    }
                    this.$api
                        .post(path_add, this.addForm)
                        .then((res) => {
                            if (res.code == 0) {
                                this.addVisible = false;
                                this.btn_alert = false;
                                this.$refs.add_Form.resetFields();
                                this.$message.success(`Added successfully!`);
                                this.getContent();
                            } else {
                                this.$message.error(res.msg);
                            }
                        })
                        .catch((err) => {
                            this.$message.error(err);
                        });
                } else {
                    this.$message.error('error submit!!');
                    return false;
                }
            });
        },
        // 编辑操作
        handleEdit(index, row) {
            row.title = row.technical;
            this.editForm = Object.assign({}, row);
            this.editForm.cv = this.editForm.qualifications;
            this.fileL_pdf3 = [];
            if (this.editForm.qualifications != '') {
                this.fileL_pdf3 = [{}];
                this.fileL_pdf3[0].name = 'reviewerCV';
                this.fileL_pdf3[0].url = this.mediaUrl + 'reviewer/' + this.editForm.qualifications;
            }

            this.editForm.maj_cn = [this.editForm.major, this.editForm.cmajor];
            this.editVisible = true;
        },

        // 详情
        handleDtail(e) {
            let routerJump = this.$router.resolve({
                path: '/partyRole',
                query: {
                    id: e.user_id
                }
            });
            window.open(routerJump.href, '_blank');
        },

        // 保存编辑
        saveEdit(editForm) {
            this.$refs.edit_Form.validate((valid) => {
                // if (this.editForm.qualifications == '') {
                // 	this.$message.error('Please make sure that the CV. document is uploaded successfully');
                // 	return false;
                // }
                if (valid) {
                    this.$api
                        .post('api/Reviewer/editReviewerForEditor', this.editForm)
                        .then((res) => {
                            if (res.code == 0) {
                                this.editVisible = false;
                                this.btn_alert = false;
                                this.$message.success(`Successfully changed `);
                                this.getContent();
                            } else {
                                this.$message.error(res.msg);
                            }
                        })
                        .catch((err) => {
                            this.$message.error(err);
                        });
                } else {
                    this.$message.error('error submit!!');
                    return false;
                }
            });
        },
        // 删除弹窗
        showDelete(index, row) {
            this.delOpen = true;
            this.$api
                .post('api/User/getReviewerForDel', {
                    reviewer_id: index.user_id,
                    editor_account: localStorage.getItem('U_name')
                })
                .then((res) => {
                    this.lineOptions = res.data;
                })
                .catch((err) => {
                    this.$message.error(err);
                });
        },
        // 删除操作
        lastDelete(e) {
            this.mess_age.reviewer_id = e.currentTarget.parentElement.getAttribute('value');
            this.mess_age.journal_id = e.currentTarget.parentElement.getAttribute('name');
            // 二次确认删除
            // this.$confirm('Are you sure you want to delete?', 'Tip', {
            // 		type: 'warning'
            // 	})
            // 	.then(() => {
            this.$api
                .post('api/User/deleteArticleReviewer', this.mess_age)
                .then((res) => {
                    if (res.code == 0) {
                        this.delOpen = false;
                        this.$message.success('Deleted successfully');
                        this.getContent();
                    } else {
                        this.$message.error(res.msg);
                    }
                })
                .catch((err) => {
                    this.$message.error(err);
                });
            // })
            // .catch(() => {});
        },
        // 评级弹出框
        BoxGrade(e) {
            this.gradeBox = true;
            this.gradeMes.journal_id = e.journal_id;
            this.gradeMes.user_id = e.user_id;
            this.gradeMes.grade = e.grade;
            this.gradeMes.realname = e.realname;
            console.log(this.gradeMes);
        },
        // 修改评级
        saveGrade() {
            this.$api.post('api/Reviewer/editReviewerGrade', this.gradeMes).then((res) => {
                if (res.code == 0) {
                    this.$message.success('Success');
                    this.gradeBox = false;
                    this.getContent();
                } else {
                    this.$message.error(res.msg);
                }
            });
        },
        // 标记弹出框
        BoxRemark(e) {
            this.remarkBox = true;
            this.remarkMes.realname = e.realname;
            this.remarkMes.user_id = e.user_id;
            this.remarkMes.email = e.email;
            this.remarkMes.remark = e.remark;
        },
        BoxMajor(e, data) {
            this.majorBox = true;
            this.majorMes.realname = e.realname;
            this.majorMes.user_id = e.user_id;
            this.majorMes.email = e.email;
            this.majorValueList = [...data].map((item) => ({
                selectedValue: Array.isArray(item.shu)
                    ? item.shu
                    : typeof item.shu === 'string'
                    ? item.shu.split(',').map(Number)
                    : [item.shu]
            }));
        },
        async fetchMajorData(userId) {
            // if (!this.majorData[userId]) {
            // 判断是否已经加载过该用户的数据
            const data = await this.getMajorData(userId); // 获取数据

            this.$set(this.majorData, userId, data); // 使用 Vue.set 确保数据是响应式的
            // }
        },
        // 修改标记
        async getMajorData(userId) {
            try {
                const res = await this.$api.post('api/Reviewer/getUserField', { user_id: userId });
                if (res.status === 1) {
                    return res.data; // 返回数据
                } else {
                    return []; // 如果没有数据，返回空数组
                }
            } catch (error) {
                console.error('Error fetching data:', error);
                return []; // 如果发生错误，返回空数组
            }
        },
        saveRemark() {
            this.$api.post('api/User/editRemarkForUser', this.remarkMes).then((res) => {
                if (res.code == 0) {
                    this.$message.success('Success');
                    this.remarkBox = false;
                    this.getContent();
                } else {
                    this.$message.error(res.msg);
                }
            });
        },
        saveMajor() {
            this.$api
                .post('api/Reviewer/updateUserField', {
                    user_id: this.majorMes.user_id,
                    user_field: this.majorValueList.map((item) => item.selectedValue[item.selectedValue.length - 1]).toString(',')
                })
                .then((res) => {
                    if (res.status == 1) {
                        this.$message.success('Success');
                        this.majorBox = false;
                        this.fetchMajorData(this.majorMes.user_id);
                    } else {
                        this.$message.error(res.msg);
                    }
                });
        },

        // 领域
        initMajor() {
            this.$api
                .post('api/Ucenter/getMajor', {
                    major_id: 1
                })
                .then((res) => {
                    this.majors_a = res.data.major.children;
                });
        },

        jiLInaoan() {
            this.majors_a = [];
            this.majors_b = [];
            this.majors_c = [];
            this.$api
                .post('api/Ucenter/getMajor', {
                    major_id: 1
                })
                .then((res) => {
                    this.majors_a = res.data.major.children;
                    if (this.addForm.majorList[0] != undefined) {
                        this.addForm.major_a = Number(this.addForm.majorList[0]);
                        this.$api
                            .post('api/Ucenter/getMajor', {
                                major_id: this.addForm.major_a
                            })
                            .then((res) => {
                                this.majors_b = res.data.major.children;
                                this.majors_c = [];
                                this.addForm.major_b = '';
                                this.addForm.major_c = '';
                                this.majorChange_panduan();
                                if (this.addForm.majorList[1] != undefined) {
                                    this.addForm.major_b = Number(this.addForm.majorList[1]);
                                    this.$api
                                        .post('api/Ucenter/getMajor', {
                                            major_id: this.addForm.major_b
                                        })
                                        .then((ref) => {
                                            if (ref.data.major.children.length != 0) {
                                                this.majors_c = ref.data.major.children;
                                                this.majorChange_panduan();
                                                if (this.addForm.majorList[2] != undefined) {
                                                    this.addForm.major_c = Number(this.MessForm.majorList[2]);
                                                    this.majorChange_panduan();
                                                }
                                            }
                                        });
                                }
                            });
                    }
                });
        },

        // 搜索选择领域
        majorChange(e, val) {
            if (e == 1) {
                this.$api
                    .post('api/Ucenter/getMajor', {
                        major_id: this.addForm.major_a
                    })
                    .then((res) => {
                        this.majors_b = res.data.major.children;
                        this.majors_c = [];
                        this.addForm.major_b = '';
                        this.addForm.major_c = '';
                        this.majorChange_panduan();
                    });
            } else if (e == 2 && this.addForm.major_b != 0) {
                this.$api
                    .post('api/Ucenter/getMajor', {
                        major_id: this.addForm.major_b
                    })
                    .then((res) => {
                        this.majors_c = res.data.major.children;
                        this.addForm.major_c = '';
                        this.majorChange_panduan();
                    });
            } else {
                this.$set(this.addForm, this.addForm.major_c, val);
                this.majorChange_panduan();
            }
        },

        majorChange_panduan() {
            if (this.addForm.major_c != '' || this.addForm.major_c != 0) {
                this.addForm.major = this.addForm.major_c;
            } else if (this.addForm.major_b != '' || this.addForm.major_b != 0) {
                this.addForm.major = this.addForm.major_b;
            } else {
                this.addForm.major = this.addForm.major_a;
            }
        },
        getTime(time) {
            var str = '';
            if (time != 0) {
                let date = new Date(parseInt(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();
                let H = date.getHours() < 10 ? '0' + date.getHours() + ':' : date.getHours() + ':';
                let U = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
                str = Y + M + D;
            } else {
                str = 'No time';
            }
            return str;
        },
        // 指数颜色
        colorIndex(num, time) {
            // if (time != 0) {
            //     let date = new Date(parseInt(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();
            //     let H = date.getHours() < 10 ? '0' + date.getHours() + ':' : date.getHours() + ':';
            //     let U = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
            //     time = Y + M + D;
            // }
            let str = '';

            if (num < 10) {
                // str =
                //     '<b style="color:#cb160a">' +
                //     num +
                //     '</b><span style="color:#aaa;font-size:14px;margin-left:10px;">(' +
                //     time +
                //     ')</span>';
                str = '<b style="color:#cb160a">' + num + '</b>';
            } else if (num < 15) {
                // str =
                //     '<b style="color:#cbb504">' +
                //     num +
                //     '</b><span style="color:#aaa;font-size:14px;margin-left:10px;">(' +
                //     time +
                //     ')</span>';
                str = '<b style="color:#cbb504">' + num + '</b>';
            } else {
                if (num == null) {
                    num = 0;
                }
                // str =
                //     '<b style="color:#0cbc15">' +
                //     num +
                //     '</b><span style="color:#aaa;font-size:14px;margin-left:10px;">(' +
                //     time +
                //     ')</span>';
                str = '<b style="color:#0cbc15">' + num + '</b>';
            }
            if (time == 0 || time == null) {
                // str = '<b style="color:#aaa;">0</b><span style="color:#aaa;font-size:14px;margin-left:10px;">(No time)</span>';
                str = '<b style="color:#aaa;">0</b>';
            }
            return str;
        },

        // 上传文件
        handleChange2(file, fileList) {
            if (fileList.length > 0) {
                this.fileL_pdf2 = [fileList[fileList.length - 1]];
            }
        },
        handleChange3(file, fileList) {
            if (fileList.length > 0) {
                this.fileL_pdf3 = [fileList[fileList.length - 1]];
            }
        },
        handleFileSuccess1(res, file) {
            if (res.code == 0) {
                this.checkForm.cv = res.upurl;
                this.checkForm.qualifications = res.upurl;
            } else {
                this.$message.error(res.msg);
            }
        },
        handleFileSuccess2(res, file) {
            if (res.code == 0) {
                this.addForm.cv = res.upurl;
                this.addForm.qualifications = res.upurl;
            } else {
                this.$message.error(res.msg);
            }
        },
        handleFileSuccess3(res, file) {
            if (res.code == 0) {
                this.editForm.cv = res.upurl;
                this.editForm.qualifications = res.upurl;
            } else {
                this.$message.error(res.msg);
            }
        },
        beforeRemove(file, fileList) {
            return this.$confirm(`Remove ${file.name}？`);
        },
        handleFileError(res, file) {},

        handleRemove(file, fileList) {},
        handlePreview(file) {
            window.open(file.url);
        },
        handleExceed(files, fileList) {
            this.$message.warning('The current limit is 1 file. Please delete the current file first!');
        },

        // 时间格式
        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;
        }
    }
};
</script>

<style scoped>
.container {
    padding: 20px;
}
.handle-del {
    float: right;
}
.handle-box {
    margin-bottom: 20px;
}

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

.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}

.el-table .warning-row {
    background: #f3ca7f;
}

.el-table .success-row {
    background: #bcfc9a;
}

.el-table .normol-row {
    background: #d8f1c7;
}

.el-table .red-row {
    background: #f05555;
}

.tab_tie_col {
    margin-bottom: 5px;
    color: #333;
    word-wrap: break-word;
    word-break: normal;
}

.tab_tie_col > span {
    color: #888;
    margin: 0 5px 0 0;
    font-size: 13px;
}

.starSty {
    width: 14px;
    margin-right: 4px;
    vertical-align: text-top;
}

.starSty:nth-last-child(1) {
    margin-right: 0;
}

.txt_pdf {
    margin: 0 0 20px 10px;
    display: inline-block;
    color: #333;
}

.txt_pdf > i {
    color: #66a9f0;
    font-weight: bold;
    margin-left: 10px;
}

.deteleBtn {
    color: #ce1111;
    margin-left: 18px;
}

.deteleBtn i {
    font-weight: bold;
}

.deteleBtn:hover {
    text-decoration: underline;
    cursor: pointer;
}
.majorDataBox p:nth-child(1) {
    border-top: none !important;
}
</style>
