<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-user"></i> Editorial board </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box" :rules="rules">
                <el-select v-model="query.journal_id" placeholder="Please select a journal" @change="getJourdate" style="width: 290px">
                    <el-option v-for="item in df_jour" :label="item.title" :key="item.journal_id" :value="item.journal_id"></el-option>
                </el-select>
                <!-- <el-select v-model="query.board_group_id" placeholder="Please select a group" @change="getDate"
					style="margin-left: 10px;">
					<el-option v-for="item in df_group" :label="item.group_name" :key="item.board_group_id"
						:value="item.board_group_id">
						{{item.group_name}}
						<span v-if="item.person_num!=undefined" style="color: #bbb;">({{item.person_num}})</span>
					</el-option>
				</el-select> -->
                <el-button type="warning" icon="el-icon-circle-plus-outline" @click="addGroup" style="margin-left: 10px">
                    Group management</el-button
                >
                <el-button type="primary" icon="el-icon-plus" @click="addEditor" style="float: right"> Add new board</el-button>
            </div>

            <!-- 期刊基本信息 -->
            <el-card shadow="never" style="margin-bottom: 20px; border-color: #409eff" class="jourInfoBox" v-if="journalInfo.title">
                <el-row :gutter="20">
                    <el-col :span="24" class="jourInfo">
                        <div class="" style="vertical-align: top">
                            <span>Journal : </span>
                            <el-link type="primary" :href="journalInfo.website" v-if="journalInfo.website != ''" target="_blank">
                                <em>{{ journalInfo.title }}({{ journalInfo.abbr }})</em>
                            </el-link>
                        </div>
                        <div class="">
                            <span>Editor-in-Chief : </span><em>{{ journalInfo.editorinchief }}</em>
                        </div>
                        <div class="">
                            <span>Email : </span><em>{{ journalInfo.email }}</em>
                        </div>
                    </el-col>
                    <el-col :span="24">
                        <div class="lieitem">
                            <span
                                >Hindex: <em>{{ journalInfo.index_num }} / {{ journalInfo.boards_count }}</em></span
                            >
                            <span
                                >Median: <em>{{ journalInfo.median }}</em></span
                            >
                            <span
                                >Avg: <em>{{ journalInfo.avg }}</em></span
                            >
                            <span
                                >Total: <em>{{ journalInfo.boards_count }}</em
                                >&nbsp;
                                <span style="color: #909399; float: none"
                                    >( China: <em style="color: #2675c7; font-weight: 500">{{ journalInfo.china_count }}</em
                                    >)</span
                                >
                            </span>
                        </div>
                    </el-col>
                    <!-- <el-col :span="6"><div class=""><span>Website: </span><em>{{journalInfo.website}}</em></div></el-col>
					<el-col :span="6"><div class=""><span>Aim_web: </span><em>{{journalInfo.aim_web}}</em></div></el-col> -->
                </el-row>
            </el-card>
            <!-- end -->

            <el-table
                :data="tableData_0"
                border
                stripe
                class="table nullTable"
                ref="multipleTable"
                header-cell-class-name="table-header"
                empty-text="New messages (0)"
            >
                <el-table-column prop="name" label="Realname"></el-table-column>
                <el-table-column prop="email" label="Email"></el-table-column>
                <el-table-column label="Contributions" align="center"></el-table-column>
                <el-table-column prop="ghindex" label="H-Google" width="110px" align="center"></el-table-column>
                <el-table-column prop="Wosindex" label="Wosindex" width="110px" align="center"></el-table-column>
                <el-table-column prop="remark" label="Remark" align="center"></el-table-column>
                <!-- <el-table-column label="Grade" width="110px" align="center"></el-table-column> -->
                <!-- <el-table-column label="Remarks" width="180"></el-table-column> -->
                <el-table-column label="" width="300" align="center"></el-table-column>
            </el-table>

            <p class="shen_fen" style="margin-top: 0" v-if="tableData_A.length != 0">Editor-in-Chief</p>
            <el-table
                :data="tableData_A"
                border
                stripe
                class="table"
                ref="multipleTable"
                header-cell-class-name="table-header"
                empty-text="New messages (0)"
                :show-header="false"
                v-if="tableData_A.length != 0"
            >
                <el-table-column prop="Realname" label="Realname">
                    <template slot-scope="scope">
                        <p @click="perSonnel(scope.row.user_id)" class="perSonGo">{{ scope.row.realname }}</p>
                    </template>
                </el-table-column>
                <el-table-column prop="email" label="Email"></el-table-column>
                <el-table-column label="Contributions" align="center">
                    <template slot-scope="scope">
                        <div class="flexbox">
                            <div>
                                Articles: <em v-if="scope.row.articles.length > 0">{{ scope.row.articles.length }}</em
                                ><em v-else>0</em> / <em v-if="scope.row.articles_all.length > 0">{{ scope.row.articles_all.length }}</em
                                ><em v-else>0</em>
                            </div>
                            <div>
                                Reviewd: <em v-if="scope.row.reviewes.length > 0">{{ scope.row.reviewes.length }}</em
                                ><em v-else>0</em>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <!-- <el-table-column prop="hindex" label="H-WOS" width="110px" align="center">
					<template slot-scope="scope">
						<p v-html="colorIndex(scope.row.wos_index,scope.row.wos_time)"></p>
					</template>
				</el-table-column> -->
                <el-table-column prop="ghindex" label="H-Google" width="110px" align="center">
                    <template slot-scope="scope">
                        <p v-html="colorIndex(scope.row.google_index, scope.row.google_time)"></p>
                    </template>
                </el-table-column>
                <el-table-column prop="Wosindex" label="Wosindex" width="110px" align="center">
                    <template slot-scope="scope">
                        <p v-html="colorIndex(scope.row.wos_index, scope.row.wos_time)"></p>
                    </template>
                </el-table-column>
                <el-table-column prop="remark" label="Remark" align="center">
                    <template slot-scope="scope">
                        <div style="margin-bottom: 5px" v-if="scope.row.remark != ''">{{ scope.row.remark }}</div>
                        <div>
                            <el-button
                                v-if="scope.row.remark != ''"
                                size="mini"
                                type="primary"
                                plain
                                icon="el-icon-edit"
                                @click="BoxRemark(scope.row)"
                            >
                                Edit Remark</el-button
                            >
                            <el-button v-else size="mini" type="primary" plain icon="el-icon-edit" @click="BoxRemark(scope.row)">
                                Add Remark</el-button
                            >
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="" width="300" align="center">
                    <template slot-scope="scope">
                        <el-button size="mini" type="primary" plain icon="el-icon-edit" @click="perSonnel(scope.row.user_id)"
                            >User Edit</el-button
                        >
                        <el-button size="mini" type="primary" plain icon="el-icon-edit" @click="bhandleEdit(scope.$index, scope.row)"
                            >Board Edit</el-button
                        >
                        <el-button
                            size="mini"
                            type="danger"
                            plain
                            icon="el-icon-delete"
                            style="margin-top: 10px"
                            @click="handleDelete(scope.$index, scope.row)"
                            >Delete</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>
            <p class="shen_fen" v-if="tableData_B.length != 0">Vice Editor-in-Chief</p>
            <el-table
                :data="tableData_B"
                border
                stripe
                class="table"
                ref="multipleTable"
                header-cell-class-name="table-header"
                empty-text="New messages (0)"
                :show-header="false"
                v-if="tableData_B.length != 0"
            >
                <el-table-column prop="Realname" label="Realname">
                    <template slot-scope="scope">
                        <p @click="perSonnel(scope.row.user_id)" class="perSonGo">{{ scope.row.realname }}</p>
                    </template>
                </el-table-column>
                <el-table-column prop="email" label="Email"></el-table-column>
                <el-table-column label="Contributions" align="center">
                    <template slot-scope="scope">
                        <div class="flexbox">
                            <div>
                                Articles: <em v-if="scope.row.articles.length > 0">{{ scope.row.articles.length }}</em
                                ><em v-else>0</em> / <em v-if="scope.row.articles_all.length > 0">{{ scope.row.articles_all.length }}</em
                                ><em v-else>0</em>
                            </div>
                            <div>
                                Reviewd: <em v-if="scope.row.reviewes.length > 0">{{ scope.row.reviewes.length }}</em
                                ><em v-else>0</em>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <!-- <el-table-column prop="hindex" label="H-WOS" width="110px" align="center">
					<template slot-scope="scope">
						<p v-html="colorIndex(scope.row.wos_index,scope.row.wos_time)"></p>
					</template>
				</el-table-column> -->
                <el-table-column prop="ghindex" label="H-Google" width="110px" align="center">
                    <template slot-scope="scope">
                        <p v-html="colorIndex(scope.row.google_index, scope.row.google_time)"></p>
                    </template>
                </el-table-column>
                <el-table-column prop="Wosindex" label="Wosindex" width="110px" align="center">
                    <template slot-scope="scope">
                        <p v-html="colorIndex(scope.row.wos_index, scope.row.wos_time)"></p>
                    </template>
                </el-table-column>
                <el-table-column prop="remark" label="Remark" align="center">
                    <template slot-scope="scope">
                        <div style="margin-bottom: 5px" v-if="scope.row.remark != ''">{{ scope.row.remark }}</div>
                        <div>
                            <el-button
                                v-if="scope.row.remark != ''"
                                size="mini"
                                type="primary"
                                plain
                                icon="el-icon-edit"
                                @click="BoxRemark(scope.row)"
                            >
                                Edit Remark</el-button
                            >
                            <el-button v-else size="mini" type="primary" plain icon="el-icon-edit" @click="BoxRemark(scope.row)">
                                Add Remark</el-button
                            >
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="" width="300" align="center">
                    <template slot-scope="scope">
                        <el-button size="mini" type="primary" plain icon="el-icon-edit" @click="perSonnel(scope.row.user_id)"
                            >User Edit</el-button
                        >
                        <el-button size="mini" type="primary" plain icon="el-icon-edit" @click="bhandleEdit(scope.$index, scope.row)"
                            >Board Edit</el-button
                        >
                        <el-button
                            size="mini"
                            type="danger"
                            plain
                            icon="el-icon-delete"
                            style="margin-top: 10px"
                            @click="handleDelete(scope.$index, scope.row)"
                            >Delete</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>
            <p class="shen_fen" v-if="tableData_C.length != 0">Editorial Board Members</p>
            <div v-if="tableData_C[0]">
                <!-- 没有分组时 -->
                <el-table
                    :data="tableData_C"
                    border
                    stripe
                    class="table"
                    ref="multipleTable"
                    :show-header="false"
                    header-cell-class-name="table-header"
                    empty-text="New messages (0)"
                    style="margin-bottom: 20px"
                >
                    <el-table-column prop="Realname" label="Realname">
                        <template slot-scope="scope">
                            <p @click="perSonnel(scope.row.user_id)" class="perSonGo">{{ scope.row.realname }}</p>
                        </template>
                    </el-table-column>
                    <el-table-column prop="email" label="Email"></el-table-column>
                    <el-table-column label="Contributions" align="center">
                        <template slot-scope="scope">
                            <div class="flexbox">
                                <div>
                                    Articles: <em v-if="scope.row.articles.length > 0">{{ scope.row.articles.length }}</em
                                    ><em v-else>0</em> /
                                    <em v-if="scope.row.articles_all.length > 0">{{ scope.row.articles_all.length }}</em
                                    ><em v-else>0</em>
                                </div>
                                <div>
                                    Reviewd: <em v-if="scope.row.reviewes.length > 0">{{ scope.row.reviewes.length }}</em
                                    ><em v-else>0</em>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <!-- <el-table-column prop="hindex" label="H-WOS" width="110px" align="center">
							<template slot-scope="scope">
								<p v-html="colorIndex(scope.row.wos_index,scope.row.wos_time)"></p>
							</template>
						</el-table-column> -->
                    <el-table-column prop="ghindex" label="H-Google" width="110px" align="center">
                        <template slot-scope="scope">
                            <p v-html="colorIndex(scope.row.google_index, scope.row.google_time)"></p>
                        </template>
                    </el-table-column>
                    <el-table-column prop="Wosindex" label="Wosindex" width="110px" align="center">
                        <template slot-scope="scope">
                            <p v-html="colorIndex(scope.row.wos_index, scope.row.wos_time)"></p>
                        </template>
                    </el-table-column>
                    <el-table-column prop="remark" label="Remark" align="center">
                        <template slot-scope="scope">
                            <div style="margin-bottom: 5px" v-if="scope.row.remark != ''">{{ scope.row.remark }}</div>
                            <div>
                                <el-button
                                    v-if="scope.row.remark != ''"
                                    size="mini"
                                    type="primary"
                                    plain
                                    icon="el-icon-edit"
                                    @click="BoxRemark(scope.row)"
                                >
                                    Edit Remark</el-button
                                >
                                <el-button v-else size="mini" type="primary" plain icon="el-icon-edit" @click="BoxRemark(scope.row)">
                                    Add Remark</el-button
                                >
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="" width="300" align="center">
                        <template slot-scope="scope">
                            <el-button size="mini" type="primary" plain icon="el-icon-edit" @click="perSonnel(scope.row.user_id)"
                                >User Edit</el-button
                            >
                            <el-button size="mini" type="primary" plain icon="el-icon-edit" @click="bhandleEdit(scope.$index, scope.row)"
                                >Board Edit</el-button
                            >
                            <el-button
                                size="mini"
                                type="danger"
                                plain
                                icon="el-icon-delete"
                                style="margin-top: 10px"
                                @click="handleDelete(scope.$index, scope.row)"
                                >Delete</el-button
                            >
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div v-else>
                <!-- 有分组时 -->
                <div>
                    <div v-for="(item, key1) of tableData_C" :key="key1">
                        <div v-if="key1 == 'nogroup'">
                            <!-- 显示无分组 -->
                            <el-table
                                :data="item"
                                border
                                stripe
                                class="table"
                                ref="multipleTable"
                                :show-header="false"
                                header-cell-class-name="table-header"
                                empty-text="New messages (0)"
                                style="margin-bottom: 20px"
                            >
                                <el-table-column prop="Realname" label="Realname">
                                    <template slot-scope="scope">
                                        <p @click="perSonnel(scope.row.user_id)" class="perSonGo">{{ scope.row.realname }}</p>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="email" label="Email"></el-table-column>
                                <el-table-column label="Contributions" align="center">
                                    <template slot-scope="scope">
                                        <div class="flexbox">
                                            <div>
                                                Articles: <em v-if="scope.row.articles.length > 0">{{ scope.row.articles.length }}</em
                                                ><em v-else>0</em> /
                                                <em v-if="scope.row.articles_all.length > 0">{{ scope.row.articles_all.length }}</em
                                                ><em v-else>0</em>
                                            </div>
                                            <div>
                                                Reviewd: <em v-if="scope.row.reviewes.length > 0">{{ scope.row.reviewes.length }}</em
                                                ><em v-else>0</em>
                                            </div>
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="ghindex" label="H-Google" width="110px" align="center">
                                    <template slot-scope="scope">
                                        <p v-html="colorIndex(scope.row.google_index, scope.row.google_time)"></p>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="Wosindex" label="Wosindex" width="110px" align="center">
                                    <template slot-scope="scope">
                                        <p v-html="colorIndex(scope.row.wos_index, scope.row.wos_time)"></p>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="remark" label="Remark" align="center">
                                    <template slot-scope="scope">
                                        <div style="margin-bottom: 5px" v-if="scope.row.remark != ''">{{ scope.row.remark }}</div>
                                        <div>
                                            <el-button
                                                v-if="scope.row.remark != ''"
                                                size="mini"
                                                type="primary"
                                                plain
                                                icon="el-icon-edit"
                                                @click="BoxRemark(scope.row)"
                                            >
                                                Edit Remark</el-button
                                            >
                                            <el-button
                                                v-else
                                                size="mini"
                                                type="primary"
                                                plain
                                                icon="el-icon-edit"
                                                @click="BoxRemark(scope.row)"
                                            >
                                                Add Remark</el-button
                                            >
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column label="" width="300" align="center">
                                    <template slot-scope="scope">
                                        <el-button
                                            size="mini"
                                            type="primary"
                                            plain
                                            icon="el-icon-edit"
                                            @click="perSonnel(scope.row.user_id)"
                                            >User Edit</el-button
                                        >
                                        <el-button
                                            size="mini"
                                            type="primary"
                                            plain
                                            icon="el-icon-edit"
                                            @click="bhandleEdit(scope.$index, scope.row)"
                                            >Board Edit</el-button
                                        >
                                        <el-button
                                            size="mini"
                                            type="danger"
                                            plain
                                            icon="el-icon-delete"
                                            style="margin-top: 10px"
                                            @click="handleDelete(scope.$index, scope.row)"
                                            >Delete</el-button
                                        >
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </div>
                </div>
                <div>
                    <div v-for="(item, key) of tableData_C" :key="key">
                        <div v-if="key !== 'nogroup'">
                            <!-- 显示有分组 -->
                            <p class="shen_number" v-if="key !== 'nogroup'">{{ key }}</p>
                            <el-table
                                :data="item"
                                border
                                stripe
                                class="table"
                                ref="multipleTable"
                                :show-header="false"
                                header-cell-class-name="table-header"
                                empty-text="New messages (0)"
                                style="margin-bottom: 20px"
                            >
                                <el-table-column prop="Realname" label="Realname">
                                    <template slot-scope="scope">
                                        <p @click="perSonnel(scope.row.user_id)" class="perSonGo">{{ scope.row.realname }}</p>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="email" label="Email"></el-table-column>
                                <el-table-column label="Contributions" align="center">
                                    <template slot-scope="scope">
                                        <div class="flexbox">
                                            <div>
                                                Articles: <em v-if="scope.row.articles.length > 0">{{ scope.row.articles.length }}</em
                                                ><em v-else>0</em> /
                                                <em v-if="scope.row.articles_all.length > 0">{{ scope.row.articles_all.length }}</em
                                                ><em v-else>0</em>
                                            </div>
                                            <div>
                                                Reviewd: <em v-if="scope.row.reviewes.length > 0">{{ scope.row.reviewes.length }}</em
                                                ><em v-else>0</em>
                                            </div>
                                        </div>
                                    </template>
                                </el-table-column>
                                <!-- <el-table-column prop="hindex" label="H-WOS" width="110px" align="center">
							<template slot-scope="scope">
								<p v-html="colorIndex(scope.row.wos_index,scope.row.wos_time)"></p>
							</template>
						</el-table-column> -->
                                <el-table-column prop="ghindex" label="H-Google" width="110px" align="center">
                                    <template slot-scope="scope">
                                        <p v-html="colorIndex(scope.row.google_index, scope.row.google_time)"></p>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="Wosindex" label="Wosindex" width="110px" align="center">
                                    <template slot-scope="scope">
                                        <p v-html="colorIndex(scope.row.wos_index, scope.row.wos_time)"></p>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="remark" label="Remark" align="center">
                                    <template slot-scope="scope">
                                        <div style="margin-bottom: 5px" v-if="scope.row.remark != ''">{{ scope.row.remark }}</div>
                                        <div>
                                            <el-button
                                                v-if="scope.row.remark != ''"
                                                size="mini"
                                                type="primary"
                                                plain
                                                icon="el-icon-edit"
                                                @click="BoxRemark(scope.row)"
                                            >
                                                Edit Remark</el-button
                                            >
                                            <el-button
                                                v-else
                                                size="mini"
                                                type="primary"
                                                plain
                                                icon="el-icon-edit"
                                                @click="BoxRemark(scope.row)"
                                            >
                                                Add Remark</el-button
                                            >
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column label="" width="300" align="center">
                                    <template slot-scope="scope">
                                        <el-button
                                            size="mini"
                                            type="primary"
                                            plain
                                            icon="el-icon-edit"
                                            @click="perSonnel(scope.row.user_id)"
                                            >User Edit</el-button
                                        >
                                        <el-button
                                            size="mini"
                                            type="primary"
                                            plain
                                            icon="el-icon-edit"
                                            @click="bhandleEdit(scope.$index, scope.row)"
                                            >Board Edit</el-button
                                        >
                                        <el-button
                                            size="mini"
                                            type="danger"
                                            plain
                                            icon="el-icon-delete"
                                            style="margin-top: 10px"
                                            @click="handleDelete(scope.$index, scope.row)"
                                            >Delete</el-button
                                        >
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 添加弹出框 -->
        <el-dialog title="Add Editorial board" :visible.sync="addVisible" width="750px" :close-on-click-modal="false" @close="addVisCancle">
            <el-form ref="add_Form" :model="addForm" :rules="rules" label-width="150px" v-if="!dis_able">
                <el-form-item label="Email :" prop="email" v-if="!dis_able">
                    <el-input v-model="addForm.email" style="width: 300px"></el-input>
                    <el-button type="warning" @click="saerNa_U()" style="margin-left: 15px" icon="el-icon-paperclip"> Check</el-button>
                    <p style="color: #888; margin-top: 10px">
                        Note: The new editorial board must be a registered user. Click
                        <a class="zhu_ce" @click="Goto_res()">register</a>.
                    </p>
                </el-form-item>
            </el-form>
            <el-form ref="add_Form" :model="addForm" :rules="rules" label-width="150px" v-if="dis_able">
                <el-form-item label="Personal Picture :" prop="icon">
                    <div class="portrait" @click="unplIcon">
                        <img src="@/assets/img/userImg.jpg" class="portrait" v-if="pictureUrl == ''" />
                        <img :src="pictureUrl" class="portrait" v-if="pictureUrl != ''" />
                        <el-upload
                            class="avatar-uploader"
                            ref="upIconIMg"
                            :action="baseUrl + 'api/Ucenter/up_userIcon_file'"
                            :show-file-list="false"
                            name="icon"
                            :on-success="handleAvatarSuccess2"
                            :on-error="handleAvatarError2"
                            :before-upload="beforeAvatarUpload2"
                            style="display: none"
                        >
                            <img v-if="pictureUrl == ''" :src="pictureUrl" class="avatar" accept=".png,.jpg" />
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                        <div class="ptmark">Upload avatar</div>
                    </div>
                </el-form-item>
                <el-form-item label="Email :" prop="email">
                    <el-input v-model="addForm.email"></el-input>
                </el-form-item>
                <!-- <el-form-item label="Account :" prop="account">
					{{addForm.account}}
				</el-form-item> -->
                <!-- <el-form-item label="Realname :" prop="name">
                    {{ addForm.name }}
                 
                </el-form-item> -->
                <el-form-item label="English name :" prop="realname">
                    <el-input v-model="addForm.realname"></el-input>
                </el-form-item>
                <el-form-item label="Website :" prop="website">
                    <el-input v-model="addForm.website" placeholder="eg:http://..."></el-input>
                </el-form-item>
                <el-form-item label="Title :" prop="technical">
                    <el-select v-model="addForm.technical" filterable placeholder="Please select" value-key="groupID" style="width: 200px">
                        <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="Affiliation :" prop="affiliation">
                    <el-input v-model="addForm.affiliation" placeholder="Please enter"></el-input>
                </el-form-item>
                <el-form-item label="Journal :" prop="journal_id">
                    <el-select
                        v-model="addForm.journal_id"
                        placeholder="Please select a journal"
                        @change="getJourAdd()"
                        style="width: 300px"
                    >
                        <el-option v-for="item in add_jour" :label="item.title" :key="item.journal_id" :value="item.journal_id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="Identity :" prop="type">
                    <el-radio-group v-model="addForm.type">
                        <el-radio :label="0">Editor-in-Chief</el-radio>
                        <el-radio :label="1">Vice Editor-in-Chief</el-radio>
                        <el-radio :label="2">Editorial Board Members</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="Group :" prop="board_group_id" v-if="addForm.type == 2">
                    <el-select v-model="addForm.board_group_id" placeholder="Please select a group" style="width: 300px">
                        <el-option
                            v-for="item in add_group"
                            :label="item.group_name"
                            :key="item.board_group_id"
                            :value="item.board_group_id"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="Research areas :" prop="field">
                    <el-input v-model="addForm.field" type="textarea" rows="5"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addVisible = false">Cancel</el-button>
                <!-- 这这这 -->
                <el-button type="primary" @click="saveAdd()" v-if="dis_able">OK</el-button>
            </span>
        </el-dialog>

        <!-- 标记弹出框 -->
        <el-dialog title="Remarks" :visible.sync="remarkBox" width="550px" :close-on-click-modal="false">
            <el-form ref="remark" :model="remarkMes" label-width="130px">
                <el-form-item label="Editorial board :">
                    <p style="line-height: 20px; margin-top: 6px">{{ remarkMes.realname }}</p>
                </el-form-item>
                <el-form-item label="Remark :">
                    <el-input type="textarea" rows="5" 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 Board" :visible.sync="BoardEditorFormVisible" width="800px" :close-on-click-modal="false">
            <el-form ref="BoardEditorForm" :model="BoardEditorForm" label-width="160px" :rules="BoardEditorFormRule">
                <el-form-item label="Type :">
                    <el-radio-group v-model="BoardEditorForm.type">
                        <el-radio :label="0">Editor-in-Chief</el-radio>
                        <el-radio :label="1">Vice Editor-in-Chief</el-radio>
                        <el-radio :label="2">Editorial Board Members</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="Group :" v-if="BoardEditorForm.type == 2">
                    <el-select v-model="BoardEditorForm.board_group_id" placeholder="Please select a group" style="width: 300px">
                        <el-option
                            v-for="item in add_group"
                            :label="item.group_name"
                            :key="item.board_group_id"
                            :value="item.board_group_id"
                        ></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="Personal Picture :" prop="email">
                    <div class="portrait" @click="unplIcon">
                        <img src="@/assets/img/userImg.jpg" class="portrait" v-if="pictureUrl == ''" />
                        <img :src="pictureUrl" class="portrait" v-if="pictureUrl != ''" />
                        <el-upload
                            class="avatar-uploader"
                            ref="upIconIMg"
                            :action="baseUrl + 'api/Ucenter/up_userIcon_file'"
                            :show-file-list="false"
                            name="icon"
                            :on-success="handleAvatarSuccess2"
                            :on-error="handleAvatarError2"
                            :before-upload="beforeAvatarUpload2"
                            style="display: none"
                        >
                            <img v-if="pictureUrl" :src="pictureUrl" class="avatar" accept=".png,.jpg" />
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                        <div class="ptmark">Upload avatar</div>
                    </div>
                </el-form-item>
                <el-form-item label="Email :" prop="email">
                    <el-input v-model="BoardEditorForm.email"></el-input>
                </el-form-item>
                <el-form-item label="English name :" prop="realname">
                    <el-input v-model="BoardEditorForm.realname"></el-input>
                </el-form-item>

                <el-form-item label="Website :" prop="website">
                    <el-input v-model="BoardEditorForm.website" placeholder="eg:http://..."></el-input>
                </el-form-item>
                <el-form-item label="Title :" prop="technical">
                    <el-select
                        v-model="BoardEditorForm.technical"
                        filterable
                        placeholder="Please select"
                        value-key="groupID"
                        style="width: 200px"
                    >
                        <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="Affiliation :" prop="affiliation">
                    <el-input v-model="BoardEditorForm.affiliation" placeholder="Please enter"></el-input>
                </el-form-item>
                <el-form-item label="Research Areas :" prop="research_areas">
                    <el-input type="textarea" rows="5" v-model="BoardEditorForm.research_areas"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="BoardEditorFormVisible = false">Cancel</el-button>
                <el-button type="primary" @click="saveBoard">Save</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import bus from '../common/bus'
export default {
    data() {
        return {
            pictureUrl: '',
            journalInfo: {}, // 选中期刊信息
            baseUrl: this.Common.baseUrl,
            mediaUrl: this.Common.mediaUrl,
            edit_id: localStorage.getItem('U_id'),
            now_year: 0,
            tableData_0: [],
            tableData_A: [],
            tableData_B: [],
            tableData_C: [],
            df_jour: [],
            df_group: [],
            add_jour: [],
            add_group: [],
            add_country: [],
            addVisible: false,
            editVisible: false,
            BoardEditorForm: {
                btj_id: null,
                type: 0,

                research_areas: '',
                email: '',
                icon: '',
                board_group_id: -1,
                technical: '',
                affiliation: '',
                website: '',
                realname: '',
                type: ''
            },
            BoardEditorFormVisible: false,
            addForm: {
                email: '',
                icon: '',
                board_group_id: -1,
                technical: '',
                affiliation: '',
                website: '',
                realname: '',
                type: '',
                field: ''
            },
            editForm: {
                journal_id: 0
            },
            edit_group: [],
            dis_able: false,
            remarkMes: {
                remark: ''
            },
            remarkBox: false,
            query: {
                journal_id: 0,
                journal_title: ''
            },
            imageUrl: '',
            imageUrl_: '',
            imageUrl_Mark: 0,

            df_technical: [
                {
                    label: 'Professor'
                },
                {
                    label: 'Associate Professor'
                },
                {
                    label: 'Assistant Professor'
                },
                // {
                // 	label: 'Ph.D.',
                // },
                {
                    label: 'Researcher'
                },
                {
                    label: 'Associate research fellow'
                },
                {
                    label: 'Assistant research fellow'
                },
                {
                    label: 'Engineer'
                },
                {
                    label: 'Senior engineer'
                },
                {
                    label: 'Associate Researcher'
                },
                {
                    label: 'Lecturer'
                },
                {
                    label: 'Associate Chief Physician'
                },
                {
                    label: 'Assistant Researcher'
                },
                {
                    label: 'Physician'
                },
                {
                    label: 'Chief Physician'
                },
                {
                    label: 'Senior Lecturer'
                },
                {
                    label: 'Research Fellow'
                },
                {
                    label: 'Senior Investigator'
                }
            ],
            title_options: [
                {
                    value: 'Instructor'
                },
                {
                    value: 'Assistant Professor'
                },
                {
                    value: 'Senior Assistant Professor'
                },
                {
                    value: 'Associate Professor'
                },
                {
                    value: 'Senior Associate professor'
                },
                {
                    value: 'Professor'
                },
                {
                    value: 'Researcher'
                },
                {
                    value: 'Associate Researcher'
                },
                {
                    value: 'Assistant Researcher'
                },
                {
                    value: 'RN'
                },
                {
                    value: 'Research Fellow'
                },
                {
                    value: 'Associate Research Scientist'
                },
                {
                    value: 'Research Scientist'
                },
                {
                    value: 'Senior Research Fellow'
                },
                {
                    value: 'Senior Lecturer'
                },
                {
                    value: 'Physician'
                },
                {
                    value: 'Attending Physician'
                },
                {
                    value: 'Associate Chief Physician'
                },
                {
                    value: 'Chief Physician'
                },
                {
                    value: 'Senior Research Scientist'
                },
                {
                    value: 'Honorary Senior Research Fellow'
                },
                {
                    value: 'Director'
                },
                {
                    value: 'Executive Director'
                },
                {
                    value: 'Sr. Bioinformatics Scientist'
                },
                {
                    value: 'Psychotherapist'
                },
                {
                    value: 'Postdoctoral Researcher'
                },
                {
                    value: 'Managing Editor'
                },
                {
                    value: 'Scientific Editor'
                },
                {
                    value: 'Production Editor'
                },
                {
                    value: 'Assistant Editor'
                },
                {
                    value: 'Engineer'
                },
                {
                    value: 'Lecturer'
                },
                {
                    value: 'Investigator'
                },
                {
                    value: 'Senior Investigator'
                },
                {
                    value: '教授'
                },
                {
                    value: '副教授'
                },
                {
                    value: '讲师'
                },
                {
                    value: '主任医师'
                },
                {
                    value: '副主任医师'
                },
                {
                    value: '主治医师'
                },
                {
                    value: '主任中医师'
                },
                {
                    value: '副主任中医师'
                }
            ],
            rules: {
                account: [
                    {
                        required: true,
                        message: 'Please input account',
                        trigger: 'blur'
                    }
                ],
                realname: [
                    {
                        required: true,
                        message: 'Please input english name',
                        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'
                    }
                ],
                name: [
                    {
                        required: true,
                        message: 'Please input realname',
                        trigger: 'blur'
                    }
                ],
                journal_id: [
                    {
                        required: true,
                        message: 'Please select a journal',
                        trigger: 'blur'
                    }
                ],
                board_group_id: [
                    {
                        required: true,
                        message: 'Please select a group',
                        trigger: 'blur'
                    }
                ],
                website: [
                    {
                        required: true,
                        message: 'Please input website',
                        trigger: 'blur'
                    }
                ],
                affiliation: [
                    {
                        required: true,
                        message: 'Please input affiliation',
                        trigger: 'blur'
                    }
                ],
                type: [
                    {
                        required: true,
                        message: 'Please select Identity',
                        trigger: 'blur'
                    }
                ],
                dr: [
                    {
                        required: true,
                        message: 'Please input academic degree',
                        trigger: 'blur'
                    }
                ],
                title: [
                    {
                        required: true,
                        message: 'Please input technical',
                        trigger: 'blur'
                    }
                ],
                technical: [
                    {
                        required: true,
                        message: 'Please input title',
                        trigger: 'blur'
                    }
                ],
                field: [
                    {
                        required: true,
                        message: 'Please input field ',
                        trigger: 'blur'
                    }
                ],
                // icon: [
                //     {
                //         required: true,
                //         message: 'Please select a icon',
                //         trigger: 'blur'
                //     }
                // ],
                address: [
                    {
                        required: true,
                        message: 'Please input affiliation',
                        trigger: 'blur'
                    }
                ],
                country: [
                    {
                        required: true,
                        message: 'Please select a country',
                        trigger: 'blur'
                    }
                ]
            },
            BoardEditorFormRule: {
                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'
                    }
                ],
                affiliation: [
                    {
                        required: true,
                        message: 'Please input affiliation',
                        trigger: 'blur'
                    }
                ],
                technical: [
                    {
                        required: true,
                        message: 'Please input title',
                        trigger: 'blur'
                    }
                ],
                research_areas: [
                    {
                        required: true,
                        message: 'Please input research areas',
                        trigger: 'blur'
                    }
                ]
            }
        };
    },
    created() {
        this.getjour();
    },
    methods: {
        readPromotionFactoryJumpJournalId() {
            try {
                const raw = sessionStorage.getItem('promotionFactoryJump');
                if (!raw) return '';
                const obj = JSON.parse(raw || '{}');
                if (!obj || obj.from !== 'promotionFactory') return '';
                if (obj.targetPath && String(obj.targetPath) !== String(this.$route.path)) return '';
                const id = obj.journal_id != null ? String(obj.journal_id) : '';
                sessionStorage.removeItem('promotionFactoryJump');
                return id;
            } catch (e) {
                try {
                    sessionStorage.removeItem('promotionFactoryJump');
                } catch (e2) {}
                return '';
            }
        },
        forceClearJumpQuery() {
            const q = (this.$route && this.$route.query) || {};
            const has = q && (q._ap_from || q.journal_id || q.journalId || q.journalIdd);
            if (!has) return;
            const oldFullPath = this.$route && this.$route.fullPath ? this.$route.fullPath : '';
            const nextQuery = Object.assign({}, q);
            delete nextQuery._ap_from;
            delete nextQuery.journal_id;
            delete nextQuery.journalId;
            delete nextQuery.journalIdd;
            // 关闭“中间态 fullPath”对应的标签页，避免残留在顶部 Tags
            if (oldFullPath) {
                bus.$emit('close_tag_by_path', { path: oldFullPath, silent: true });
            }
            this.$router.replace({ path: this.$route.path, query: nextQuery }).catch(() => {});
            try {
                const cleanUrl = window.location.origin + this.$route.path;
                window.history.replaceState({}, '', cleanUrl);
            } catch (e) {}
        },
        unplIcon() {
            this.$refs['upIconIMg'].$refs['upload-inner'].handleClick();
        },

        //上传头像
        handleAvatarSuccess2(res, file) {
            console.log('res at line 1183:', res);
            // upurl
            if (res.code == 0) {
                if (this.addVisible) {
                    this.addForm.icon = res.upurl;
                } else if (this.BoardEditorFormVisible) {
                    this.BoardEditorForm.icon = res.upurl;
                }

                this.pictureUrl = URL.createObjectURL(file.raw);
                // this.$api
                //     .post('api/Ucenter/updateIncon', {
                //         user_id: this.role_id,
                //         icon: res.upurl
                //     })
                //     .then((res) => {
                //         if (res.code == 0) {
                //             this.$message.success('Successfully uploaded the avatar!');
                //             this.pictureUrl = URL.createObjectURL(file.raw);
                //         } else {
                //             this.$message.error(res.msg);
                //         }
                //     })
                //     .catch((err) => {
                //         this.$message.error(err);
                //     });
            } else {
                this.$message.error(res.msg);
            }
        },
        handleAvatarError2(res, file) {
            // this.$message.error(res);
        },
        beforeAvatarUpload2(file) {
            const isLt2M = file.size / 1024 / 1024 < 1;
            if (!isLt2M) {
                this.$message.error('Picture size cannot exceed 1M!');
            }
            return isLt2M;
        },
        // 获取编委和负责期刊列表数据
        getDate() {
            const loading = this.$loading({
                lock: true,
                text: 'Loading...',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
            this.$api
                .post('api/Board/getBoards', this.query)
                .then((res) => {
                    if (res.code == 0) {
                        if (res.data.boards.main != undefined) {
                            this.tableData_A = res.data.boards.main;
                            for (var i = 0; i < this.tableData_A.length; i++) {
                                this.getScoreDataA(i, this.tableData_A[i].score);
                            }
                        } else {
                            this.tableData_A = [];
                        }
                        if (res.data.boards.remain != undefined) {
                            this.tableData_B = res.data.boards.remain;
                            for (var i = 0; i < this.tableData_B.length; i++) {
                                this.getScoreDataB(i, this.tableData_B[i].score);
                            }
                        } else {
                            this.tableData_B = [];
                        }
                        if (res.data.boards.member != undefined) {
                            // this.tableData_C = res.data.boards.member;
                            //console.log(tablec,'tablec')
                            // this.tableData_C = tablec.member;

                            if (res.data.boards.member[0]) {
                                //console.log('是数组',tablec.member[0])
                            } else {
                                //console.log('是对象')
                                if (res.data.boards.member.nogroup && !res.data.boards.member.nogroup[0]) {
                                    //console.log('是对象没有分组')
                                    var arr = [];
                                    arr.push(res.data.boards.member.nogroup);
                                    res.data.boards.member.nogroup = arr;
                                    //console.log('处理后的格式')
                                }
                            }

                            this.tableData_C = res.data.boards.member;

                            for (var i = 0; i < this.tableData_C.length; i++) {
                                this.getScoreDataC(i, this.tableData_C[i].score);
                            }
                        } else {
                            this.tableData_C = [];
                        }

                        if (res.data.journal) {
                            this.journalInfo = { ...res.data.journal, china_count: res.data.china_count };
                            // console.log(this.journalInfo,'this.journalInfo')
                        }
                        loading.close();
                    } else {
                        this.$message.error(res.msg);
                        loading.close();
                    }
                })
                .catch((err) => {
                    this.$message.error(err);
                    loading.close();
                });
        },
        getjour() {
            this.now_year = new Date().getFullYear();
            this.$api
                .post('api/Chief/getJournalsByEditor', {
                    user_id: this.edit_id
                })
                .then((res) => {
                    if (res.code == 0) {
                        this.df_jour = res.data.journals;
                        this.add_jour = res.data.journals;
                        const fromQueryId = this.$route && this.$route.query ? this.$route.query.journal_id : '';
                        const fromSessionId = this.readPromotionFactoryJumpJournalId();
                        const pickedId = fromQueryId || fromSessionId;
                        const matched = pickedId ? this.df_jour.find((j) => String(j.journal_id) === String(pickedId)) : null;
                        const first = this.df_jour[0];
                        const picked = matched || first;
                        this.query.journal_id = picked ? picked.journal_id : 0;
                        this.query.journal_title = picked ? picked.title : '';
                        this.getgroup();

                        // 仅首次接收参数：应用后立刻清掉 URL，避免刷新仍然固定某一本期刊
                        if (fromQueryId) {
                            const nextQuery = Object.assign({}, (this.$route && this.$route.query) || {});
                            delete nextQuery.journal_id;
                            delete nextQuery.journalId;
                            delete nextQuery._ap_from;
                            this.$router.replace({ path: this.$route.path, query: nextQuery }).catch(() => {});
                            // 双保险：路由稳定后再强制清参一次，避免地址栏残留“中间态”
                            setTimeout(() => {
                                this.forceClearJumpQuery();
                            }, 0);
                        }
                    } else {
                        this.$message.error(res.msg);
                    }
                })
                .catch((err) => {
                    this.$message.error(err);
                });

            this.$api
                .post('api/Reviewer/getCountrys')
                .then((res) => {
                    this.add_country = res.countrys;
                })
                .catch((err) => {
                    this.$message.error(err);
                });
        },

        getgroup() {
            this.$api
                .post('api/Board/getBoardGroupList', {
                    journal_id: this.query.journal_id
                })
                .then((res) => {
                    if (res.code == 0) {
                        this.edit_group = JSON.parse(JSON.stringify(res.data.groups));
                        this.edit_group.unshift({
                            board_group_id: 0,
                            group_name: 'No Group'
                        });

                        this.df_group = Object.assign(res.data.groups);
                        this.df_group.unshift(
                            {
                                board_group_id: -1,
                                group_name: 'All Group'
                            },
                            {
                                board_group_id: 0,
                                group_name: 'No Group'
                            }
                        );
                        this.query.board_group_id = -1;
                        this.getDate();
                    } else {
                        this.$message.error(res.msg);
                    }
                })
                .catch((err) => {
                    this.$message.error(err);
                });
        },

        getJourdate() {
            for (let i = 0; i < this.df_jour.length; i++) {
                if (this.df_jour[i].journal_id == this.query.journal_id) {
                    this.query.journal_title = this.df_jour[i].title;
                }
            }
            this.getgroup();
        },

        // 编辑编委
        saveBoard() {
            this.$refs.BoardEditorForm.validate((valid) => {
                if (valid) {
                    if (this.BoardEditorForm.icon == '' || this.BoardEditorForm.icon == undefined) {
                        this.$message.error('Please upload the picture!');
                        return;
                    }
                    this.$api
                        .post('/api/Board/editBoardNew', this.BoardEditorForm)
                        .then((res) => {
                            if (res.code == 0) {
                                this.$refs.BoardEditorForm.resetFields();
                                this.$message.success('succeed!');
                                this.BoardEditorFormVisible = false;
                                setTimeout(() => {
                                    this.getDate();
                                }, 500);
                            } else {
                                this.$message.error(res.msg);
                            }
                        })
                        .catch((err) => {
                            this.$message.error(err);
                        });
                } else {
                    return false;
                }
            });
        },

        // 评分
        getScoreDataA(i, e) {
            this.tableData_A[i].starList = [];
            this.tableData_A[i].starList_mark = 0;
            if (e < 0.5 && e > 0) {
                this.tableData_A[i].starList.push({
                    star: 2
                });
                this.tableData_A[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_A[i].starList.push({
                        star: 1
                    });
                }
                if (xiao == 0.5) {
                    this.tableData_A[i].starList.push({
                        star: 0
                    });
                }
                this.tableData_A[i].starList_mark = Number(zheng) + Number(xiao);
            }
        },

        getScoreDataB(i, e) {
            this.tableData_B[i].starList = [];
            this.tableData_B[i].starList_mark = 0;
            if (e < 0.5 && e > 0) {
                this.tableData_B[i].starList.push({
                    star: 2
                });
                this.tableData_B[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_B[i].starList.push({
                        star: 1
                    });
                }
                if (xiao == 0.5) {
                    this.tableData_B[i].starList.push({
                        star: 0
                    });
                }
                this.tableData_B[i].starList_mark = Number(zheng) + Number(xiao);
            }
        },
        getScoreDataC(i, e) {
            this.tableData_C[i].starList = [];
            this.tableData_C[i].starList_mark = 0;
            if (e < 0.5 && e > 0) {
                this.tableData_C[i].starList.push({
                    star: 2
                });
                this.tableData_C[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_C[i].starList.push({
                        star: 1
                    });
                }
                if (xiao == 0.5) {
                    this.tableData_C[i].starList.push({
                        star: 0
                    });
                }
                this.tableData_C[i].starList_mark = Number(zheng) + Number(xiao);
            }
        },
        // 分组管理
        addGroup() {
            console.log(this.query.journal_id, 'this.query.journal_id');
            this.$router.push('/editorGroup?journal_id=' + this.query.journal_id);
        },

        // 用户跳转
        perSonnel(e) {
            let routerJump = this.$router.resolve({
                path: '/partyRole',
                query: {
                    id: e
                }
            });
            window.open(routerJump.href, '_blank');
        },

        // 添加操作
        addEditor(index, row) {
            this.$set(this.addForm, 'journal_id', this.add_jour[0].journal_id);
            // this.addForm.journal_id = this.add_jour[0].journal_id;
            this.getJourAdd();
            this.addVisible = true;
        },

        // 改变期刊
        getJourAdd(type) {
            this.$api
                .post('api/Board/getBoardGroupList', {
                    journal_id: type ? this.BoardEditorForm.journal_id : this.addForm.journal_id
                })
                .then((res) => {
                    if (res.code == 0) {
                        this.add_group = res.data.groups;
                        this.add_group.unshift({
                            board_group_id: 0,
                            group_name: 'No Group'
                        });
                        this.addForm.board_group_id = 0;
                    } else {
                        this.$message.error(res.msg);
                    }
                })
                .catch((err) => {
                    this.$message.error(err);
                });
        },

        // 编辑编委操作
        bhandleEdit(index, row) {
            this.$api
                .post('api/Board/getBoardInfo', {
                    btj_id: row.btj_id
                })
                .then((res) => {
                    if (res.code == 0 && res.data) {
                        var info = { ...res.data };
                        this.$nextTick(() => {
                            this.BoardEditorForm.btj_id = info.btj_id;
                            this.BoardEditorForm.type = info.type;
                            this.BoardEditorForm.board_group_id = info.board_group_id;
                            this.BoardEditorForm.research_areas = info.research_areas;
                            this.BoardEditorForm.affiliation = info.affiliation;
                            this.BoardEditorForm.icon = info.icon;
                            this.BoardEditorForm.technical = info.technical;
                            this.BoardEditorForm.website = info.website;
                            this.BoardEditorForm.email = info.email;
                            this.BoardEditorForm.realname = info.realname;
                            this.BoardEditorForm.journal_id = info.journal_id;
                            // this.pictureUrl=this.mediaUrl + 'usericon/' + info.icon;

                            if (info.icon != '') {
                                this.pictureUrl = this.mediaUrl + 'usericon/' + info.icon;
                            } else {
                                this.pictureUrl = '';
                            }
                            this.getJourAdd('edit');
                            this.BoardEditorFormVisible = true;
                        });
                    } else {
                    }
                })
                .catch((err) => {
                    this.$message.error(err);
                });
        },
        // 查找账号
        saerNa_U() {
            if (this.addForm.email != '') {
                this.$api
                    .post('api/Chief/checkEmailForUser', {
                        email: this.addForm.email
                    })
                    .then((res) => {
                        if (res.code == 0) {
                            if (res.data.user_info == null) {
                                this.$message.error('No email, please fill in or register again!');
                            } else {
                                this.$message.success('Validation succeeded!');
                                this.dis_able = true;
                                this.addForm.user_id = res.data.user_info.user_id;
                                this.addForm.account = res.data.user_info.account;
                                this.addForm.email = res.data.user_info.email;
                                this.addForm.realname = res.data.user_info.realname;
                                this.addForm.affiliation = res.data.user_info.affiliation;
                                this.addForm.website = res.data.user_info.website;
                                this.addForm.technical = res.data.user_info.technical;
                                this.addForm.icon = res.data.user_info.icon;
                                this.pictureUrl = this.mediaUrl + 'usericon/' + res.data.user_info.icon;
                                this.$forceUpdate();
                            }
                        } else {
                            this.$message.error(res.msg);
                        }
                    })
                    .catch((err) => {
                        this.$message.error(err);
                    });
            } else {
                this.$message.error('Please fill in the email address!');
            }
        },

        // 保存添加
        saveAdd() {
            console.log('this.addForm at line 1597:', this.addForm);

            this.$refs.add_Form.validate((valid) => {
                if (valid) {
                    if (this.addForm.icon == '' || this.addForm.icon == undefined) {
                        this.$message.error('Please upload the picture!');
                        return;
                    }
                    this.$api
                        .post('api/Board/addBoardNew', {
                            user_id: this.addForm.user_id,
                            journal_id: this.query.journal_id,
                            board_group_id: this.addForm.board_group_id,
                            type: this.addForm.type,
                            research_areas: this.addForm.field,
                            realname: this.addForm.realname,
                            email: this.addForm.email,
                            website: this.addForm.website,
                            affiliation: this.addForm.affiliation,
                            technical: this.addForm.technical,
                            icon: this.addForm.icon
                        })
                        .then((res) => {
                            if (res.code == 0) {
                                this.addVisible = false;
                                this.$refs.add_Form.resetFields();
                                this.$message.success(`Added successfully！`);
                                this.dis_able = false;
                                setTimeout(() => {
                                    this.getDate();
                                }, 500);
                            } else {
                                this.$message.error(res.msg);
                            }
                        })
                        .catch((err) => {
                            this.$message.error(err);
                        });
                } else {
                    return false;
                }
            });
        },

        // 添加关闭
        addVisCancle() {
            this.$refs['add_Form'].resetFields();
            this.addForm.email = '';
            this.dis_able = false;
        },

        // 编辑操作
        handleEdit(index, row) {
            this.editForm = Object.assign({}, row);
            this.imageUrl_ = this.baseUrl + 'journalpublic/' + this.editForm.icon;
            this.imageUrl_Mark = 0;
            this.editVisible = true;
            // this.getJourEdit(this.query.journal_id)
        },

        // 改变期刊
        getJourEdit(e) {
            this.$api
                .post('', {
                    journal_id: e
                })
                .then((res) => {
                    if (res.code == 0) {
                        this.edit_group = res.data.groups;
                        this.edit_group.unshift({
                            board_group_id: 0,
                            group_name: 'No Group'
                        });
                    } else {
                        this.$message.error(res.msg);
                    }
                })
                .catch((err) => {
                    this.$message.error(err);
                });
        },

        // 保存编辑
        saveEdit() {
            this.$refs.edit_Form.validate((valid) => {
                if (valid) {
                    this.$api
                        .post('api/Board/editBoard', this.editForm)
                        .then((res) => {
                            if (res.code == 0) {
                                this.editVisible = false;
                                this.$refs.edit_Form.resetFields();
                                this.$message.success(`Edit successfully！`);
                                this.getDate();
                            } else {
                                this.$message.error(res.msg);
                            }
                        })
                        .catch((err) => {
                            this.$message.error(err);
                        });

                    if (this.imageUrl_Mark == 1) {
                        this.$api
                            .post('api/Board/editIcon', this.editForm)
                            .then((res) => {
                                if (res.code == 0) {
                                    this.imageUrl_Mark = 0;
                                } else {
                                    this.$message.error(res.msg);
                                }
                            })
                            .catch((err) => {
                                this.$message.error(err);
                            });
                    }
                } else {
                    return false;
                }
            });
        },

        // 删除操作
        handleDelete(index, row) {
            // 二次确认删除
            this.$confirm('Are you sure you want to delete?', 'Tips', {
                type: 'warning'
            })
                .then(() => {
                    this.$api
                        .post('api/Board/delBoard', row)
                        .then((res) => {
                            if (res.code == 0) {
                                this.$message.success('Delete succeeded');
                                this.getDate();
                            } else {
                                this.$message.error(res.msg);
                            }
                        })
                        .catch((err) => {
                            this.$message.error(err);
                        });
                })
                .catch(() => {});
        },

        // 点击注册
        Goto_res() {
            this.$router.push('/register');
        },

        // 标记弹出框
        BoxRemark(e) {
            this.remarkBox = true;
            this.remarkMes.realname = e.realname;
            this.remarkMes.btj_id = e.btj_id;
            this.remarkMes.remark = e.remark;
        },
        // 修改标记
        saveRemark() {
            this.$api
                .post('api/Board/editBoardRemark', {
                    btj_id: this.remarkMes.btj_id,
                    remark: this.remarkMes.remark
                })
                .then((res) => {
                    if (res.code == 0) {
                        this.$message.success('Success');
                        this.remarkBox = false;
                        this.getDate();
                    } else {
                        this.$message.error(res.msg);
                    }
                });
        },

        // 指数颜色
        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:5px;"><br/>(' +
                    time +
                    ')</span>';
            } else if (num < 15) {
                str =
                    '<b style="color:#cbb504">' +
                    num +
                    '</b><span style="color:#aaa;font-size:14px;margin-left:5px;"><br/>(' +
                    time +
                    ')</span>';
            } else {
                str =
                    '<b style="color:#0cbc15">' +
                    num +
                    '</b><span style="color:#aaa;font-size:14px;margin-left:5px;"><br/>(' +
                    time +
                    ')</span>';
            }
            if (time == 0) {
                str = '<b style="color:#aaa;">0</b><br/><span style="color:#aaa;font-size:14px;margin-left:5px;">(No time)</span>';
            }
            return str;
        },

        //上传图片-添加
        handleAvatarSuccess(res, file) {
            if (res.code == 0) {
                this.addForm.icon = res.upurl;
            } else {
                this.$message.error(res.msg);
            }
            this.imageUrl = URL.createObjectURL(file.raw);
        },
        handleAvatarError(res, file) {
            // this.$message.error(res);
        },
        beforeAvatarUpload(file) {
            const isLt2M = file.size / 1024 / 1024 < 1;
            if (!isLt2M) {
                this.$message.error('The picture size cannot exceed 1M!');
            }
            return isLt2M;
        },

        //上传图片-编辑
        handleAvatarSuccess_(res, file) {
            if (res.code == 0) {
                this.editForm.icon = res.upurl;
                // this.imageUrl_ = this.baseUrl + 'boardIcon/' + res.upurl;
                this.imageUrl_Mark = 1;
            } else {
                this.$message.error(res.msg);
            }
            this.imageUrl_ = URL.createObjectURL(file.raw);
        },
        handleAvatarError_(res, file) {
            // this.$message.error(res);
        },
        beforeAvatarUpload_(file) {
            const isLt2M = file.size / 1024 / 1024 < 1;
            if (!isLt2M) {
                this.$message.error('The picture size cannot exceed 1M!');
            }
            return isLt2M;
        }
    }
};
</script>

<style scoped>
.lieitem {
    margin-top: 15px;
}
.lieitem span {
    display: inline-block;
    float: left;
    margin-right: 30px;
    font-size: 14px;
    color: #606266;
}
.lieitem em {
    font-style: normal;
    font-weight: bold;
    font-size: 14px;
    color: #409eff;
    background: #ecf5ff;
    border-radius: 10px;
    padding: 4px;
}
.jourInfoBox {
    background-color: #ecf5ff;
}
.jourInfo {
    justify-content: space-around !important;
    align-items: start;
    color: #606266;
}
.jourInfo div {
    width: auto !important;
    margin-right: 30px;
    display: inline-block;
    font-size: 14px;
}
.jourInfo div em {
    font-style: normal;
    font-weight: bold;
}
.flexbox {
    display: flex;
    justify-content: space-between;
}
.flexbox div {
    width: 50%;
}
.flexbox em {
    font-style: normal;
    font-weight: bold;
    font-size: 14px;
    color: #409eff;
    background: #ecf5ff;
    border-radius: 10px;
    padding: 4px;
}
.handle-box {
    margin-bottom: 20px;
}

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

.red {
    color: #ff0000;
}

.zhu_ce {
    text-decoration: underline;
    color: #006699;
    font-weight: bold;
    cursor: pointer;
}

.biaoTou {
    background-color: #006699;
    font-size: 14px;
    min-width: 800px;
}

.nullTable {
    margin-bottom: 20px;
}

.shen_fen {
    margin: 30px 0 20px 0;
    font-weight: bold;
    letter-spacing: -0.5px;
}

.shen_number {
    margin-bottom: 15px;
    margin-left: 5px;
}

.perSonGo:hover {
    text-decoration: underline;
    color: #006699;
    cursor: pointer;
}

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

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

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    width: 140px;
    height: 140px;
}

.avatar-uploader_small {
    height: 140px;
}

.avatar-uploader .el-upload:hover {
    border-color: #409eff;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 140px;
    height: 140px;
    line-height: 140px;
    text-align: center;
}

.avatar-uploader_small .el-upload {
    width: 80px;
    height: 80px;
}

.avatar-uploader_small .avatar-uploader-icon {
    line-height: 80px;
    margin-left: -30px;
}

.avatar {
    width: 140px;
    height: 140px;
    display: block;
}
.portrait {
    width: 83px;
    height: 83px;
    border-radius: 110px;
    border: 1.5px solid #eee;
    cursor: pointer;
    position: relative;
    display: inline-block;
}

.portrait > img {
    width: 80px;
    height: 80px;
    border-radius: 110px;
}

.portrait .ptmark {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: #00000033;
    color: #fff;
    border-radius: 110px;
    font-size: 16px;
    line-height: 22px;
    display: none;
    padding: 22px 0 0 0;
    text-align: center;
}

.portrait:hover .ptmark {
    display: block;
}
</style>
