<template>
    <div>
        <div class="liter_ture">
            <p v-if="role == 'editor'" style="text-indent: 2em; position: absolute; right: 0px; top: -60px">
                <el-button type="text" @click="showDialogSpecial">Special way to add</el-button>
            </p>
            <div class="chanSelLef" v-if="role == 'editor'">
                <!-- 1 -->
                <div :class="showB_step == 1 ? 'C_style' : ''">
                    <h3><span>1</span>Check References and Doi</h3>
                    <div v-if="showB_step == 1" style="">
                        <p class="p_style">
                            Please click here to download the manuscript and obtain the references section.
                            <a :href="mediaUrl + this.gridData" target="_blank">
                                <el-button type="text" size="mini" style="font-size: 12px; margin: 0 5px; font-weight: bold">
                                    <i class="el-icon-download" style="font-weight: bold"></i>
                                    Manuscript
                                </el-button> </a
                            >, Then copy the references and paste them into this link to generate the required format.
                            <span @click="StepBOper(3)">
                                <el-button type="text" size="mini" style="font-size: 12px; margin: 0 5px; font-weight: bold">
                                    <i class="el-icon-link" style="font-weight: bold"></i>
                                    Link
                                </el-button></span
                            >, After copying the filtered references , click
                            <el-button
                                type="warning"
                                @click="StepBOper(1)"
                                size="mini"
                                style="padding: 5px 8px; font-size: 12px; margin: 0 5px"
                            >
                                <i class="el-icon-edit-outline"></i>
                                Crossref
                            </el-button>
                            to open the website and get the correct DOI. Finally, copy the Crossref-verified references and place them in
                            the box.
                        </p>

                        <br />
                        <el-button
                            @click="StepBNext(2)"
                            plain
                            type="primary"
                            style="width: 260px; margin: 0px 0px 0px 32px; position: relative"
                        >
                            <i class="el-icon-right" style="font-size: 18px; position: absolute; right: 8px; top: 5px"></i>
                            Next Step
                        </el-button>
                    </div>
                </div>

                <!-- 2 -->
                <div :class="showB_step == 2 ? 'C_style' : ''">
                    <h3><span>2</span>Check Standard</h3>
                    <div v-if="showB_step == 2">
                        <p>
                            Convert to standard format<span style="color: #e6a23c; padding: 6px 0px; margin: 10px 0 0 10px">
                                ( The references with yellow background are problematic, so you can check and correct them yourself ) </span
                            >.
                        </p>

                        <div class="template-info" v-if="role == 'editor'" style="margin-left: 30px">
                            <span class="template-title">Article from a Journal (General format)</span> <br />
                            Author(s) Last Name First Initial.&nbsp;Title of article.&nbsp;<i>Abbreviated Journal Title</i
                            >.&nbsp;Year;Volume(issue):Inclusive page numbers.<br />
                            <br />
                            <span class="template-title">For example:</span><br />
                            Article with More than Six Authors<br />
                            Crompton J, Imms C, McCoy AT, et al. Group-based taskrelated training for children with cerebral palsy: a pilot
                            study.&nbsp;<i>Phys Occup Ther Pediatr.</i>&nbsp;2007;27:43-65.<br />
                            Special note: If the number of authors is 6 or fewer, all authors should be listed.
                        </div>
                        <el-button
                            @click="StepBNext(1)"
                            type="primary"
                            plain
                            style="width: 260px; margin: 0px 0px 0px 32px; position: relative"
                        >
                            <i class="el-icon-back" style="font-size: 18px; margin: 0; position: absolute; left: 8px; top: 5px"></i>
                            Back Step and Reset
                        </el-button>
                    </div>
                </div>

                <!-- 临时 -->
            </div>

            <!-- end -->
            <div class="chanFerAll" :style="{ width: role == 'user' ? 'calc(100%) !important' : '' }">
                <div v-if="showB_step == 1 && role == 'editor'">
                    <el-input
                        v-model="refAarray"
                        type="textarea"
                        :autosize="{ minRows: 16, maxRows: 40 }"
                        style="width: 100%"
                        :placeholder="placeRef"
                    ></el-input>
                    <el-button type="primary" @click="StepBOper(2)" style="width: 250px; margin: 20px 0 0 0; float: right">
                        <i class="el-icon-document-checked"></i>
                        Complete and conversion
                    </el-button>
                    <br clear="both" />
                </div>
                <!-- 新的 -->
                <div v-if="showB_step == 2">
                    <div class="duplicateRefBox" v-if="chanFerFormRepeatList.length > 0">
                        <el-tooltip class="item" effect="dark" content="Duplicate references" placement="top">
                            <img src="../../assets/img/repeat.png" alt="" style="width: 22px; height: 22px" />
                        </el-tooltip>

                        <span @click="handleContainerClick" style="margin-left: 5px" v-html="getRepeatRefHtml()"> </span>
                    </div>
                    <div class="topBtnBox btns" v-if="chanFerForm.length > 0 && role == 'editor'">
                        <el-button type="primary" plain @click="selectAllRef">Select all</el-button>
                        <el-button type="success" plain @click="toggleSelection">Select none</el-button>
                        <el-button type="danger" plain @click="deleteSomeRefs" :disabled="multipleSelection.length > 0 ? false : true"
                            >Delete</el-button
                        >
                    </div>

                    <el-table
                        :row-style="tableRowStyle"
                        :data="chanFerForm"
                        class="refTable"
                        ref="multipleTable"
                        @selection-change="RefenceSelectionChange"
                        empty-text="New messages (0)"
                        :show-header="false"
                        :stripe="false"
                        :highlight-current-row="false"
                        align="center"
                    >
                        <el-table-column type="selection" width="30" align="center" v-if="role == 'editor'"></el-table-column>

                        <el-table-column type="index" label="No." width="60" align="center">
                            <template slot-scope="scope">
                                <i v-if="scope.row.is_change == 1" class="itemChanged"></i>
                                <el-tooltip
                                    class="Duplicate-item"
                                    effect="dark"
                                    :content="getParsingInfo(scope.row, scope.$index)"
                                    placement="top"
                                    v-if="scope.row.is_repeat == 1"
                                >
                                    <img src="../../assets/img/repeat.png" alt="" style="width: 22px; height: 22px" />
                                </el-tooltip>

                                <span>{{ scope.$index + 1 }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="state" width="55" align="center">
                            <template slot-scope="scope">
                                <span
                                    class="status ok"
                                    :class="scope.row.refer_type == 'journal' ? getJournalDateno(scope.row.dateno, 'status') : ''"
                                    v-if="
        (
            (scope.row.refer_type == 'journal' && scope.row.doilink != '' && scope.row.cs == 1) ||
            (scope.row.refer_type == 'book' && scope.row.isbn != '' && scope.row.cs == 1)
        ) && scope.row.retract == 0
    "
                                >
                                    <i class="el-icon-circle-check"></i>
                                </span>
                                <span class="status warn" v-else>
                                    <i class="el-icon-warning-outline"></i>
                                </span>
                            </template>
                        </el-table-column>

                        <el-table-column label="Title" align="center">
                            <template slot-scope="scope">
                                <!-- journal 形式 -->
                                <div style="text-align: left" v-if="scope.row.refer_type == 'journal'" class="reference-item">
                                    <p>
                                        {{ scope.row.author }}&nbsp;<span v-html="formatTitle(scope.row.title)"></span>. &nbsp;<em>{{ scope.row.joura }}</em
                                        >.&nbsp;<span :class="getJournalDateno(scope.row.dateno, 'title')">{{ scope.row.dateno }}</span
                                        >.<br />
                                    </p>
                                    <a class="doiLink" :href="scope.row.doilink" target="_blank">{{ scope.row.doilink }}</a>
                                </div>
                                <!-- book 形式 -->
                                <div style="text-align: left" v-if="scope.row.refer_type == 'book'" class="reference-item">
                                    <p>{{ scope.row.author }}&nbsp;<span v-html="formatTitle(scope.row.title)"></span>.&nbsp;{{ scope.row.dateno }}.&nbsp;<br /></p>
                                    <a class="doiLink" :href="scope.row.isbn" target="_blank">{{ scope.row.isbn }}</a>
                                </div>
                                <!-- other 形式 -->
                                <p class="wrongLine reference-item" style="text-align: left" v-if="scope.row.refer_type == 'other'">
                                    <span v-html="formatTitle(scope.row.refer_frag)"></span>
                                   
                                </p>
                            </template>
                        </el-table-column>

                        <el-table-column align="center" :width="role == 'editor' ? '330' : '290'">
                            <div slot-scope="scope">
                                <div class="operation" style="">
                                    <el-button
                                        style="margin-left: 10px"
                                        @click="change(scope.row, 'Edit')"
                                        plain
                                        type="primary"
                                        size="mini"
                                        icon="el-icon-edit"
                                        >edit</el-button
                                    >
                                    <el-tooltip
                                        popper-class="tps"
                                        class="item"
                                        effect="light"
                                        content="Add one under this line"
                                        placement="top"
                                    >
                                        <el-button @click="addLine(scope.row, 'Add')" type="success" size="mini" plain>Add</el-button>
                                    </el-tooltip>
                                    <el-button
                                        type="warning"
                                        size="mini"
                                        plain
                                        :disabled="scope.$index != 0 ? false : true"
                                        @click="changeOrder(scope.row, 'up')"
                                        >↑</el-button
                                    >
                                    <el-button
                                        type="warning"
                                        size="mini"
                                        plain
                                        :disabled="scope.$index == chanFerForm.length - 1 ? true : false"
                                        @click="changeOrder(scope.row, 'down')"
                                        >↓</el-button
                                    >
                                    <el-button type="danger" icon="el-icon-delete" size="mini" style="" plain @click="deleteLine(scope.row)"
                                        >delete</el-button
                                    >
                                    <img
                                        v-if="role == 'editor' && scope.row.is_ai_check == 1"
                                        src="@/assets/img/ai.png"
                                        class="beautiful-gradient"
                                        style="width: 22px; height: 22px; position: absolute; right: 0px; top: 2px"
                                    />
                                </div>
                            </div>
                        </el-table-column>
                    </el-table>
                    <div class="bottomBtnBox btns" v-if="chanFerForm.length > 0 && role == 'editor'">
                        <el-button type="primary" plain @click="selectAllRef">Select all</el-button>
                        <el-button type="success" plain @click="toggleSelection">Select none</el-button>
                        <el-button type="danger" plain @click="deleteSomeRefs" :disabled="multipleSelection.length > 0 ? false : true"
                            >Delete</el-button
                        >
                    </div>
                    <div
                        class="bottomBtnBox btns"
                        v-if="chanFerForm.length > 0 && role == 'user'"
                        style="display: flex; align-items: center; justify-content: center"
                    >
                        <el-button style="margin-top: 20px auto" type="success" @click="sendEmail"
                            >Please confirm that all references have been revised</el-button
                        >
                    </div>
                </div>
                <!-- end -->
            </div>
            <br clear="both" />
            <!-- <p v-if="this.chanFerForm==''" style="text-align: center;color: #999;margin-top: 50px;">No references</p> -->
            <!-- 进度条 -->
            <div v-if="refProcess == 1" class="RefProBar">
                <div>
                    <el-progress :text-inside="true" :stroke-width="24" :percentage="refReal" :color="customColorMethod"></el-progress>
                    <p>
                        <img src="../../assets/img/Ip_spinner.gif" />
                        <span>{{ this.refReal }}%</span> completed, please wait...
                    </p>
                </div>
            </div>
            <!-- 编辑引用 -->
            <el-dialog
                :close-on-click-modal="false"
                destroy-on-close
                v-loading="addLoading"
                :title="dialogTitle + ' References'"
                :visible.sync="editboxVisible"
                width="1200px"
                @close="cancelSave"
            >
                <p class="yinyongPre c888" style="margin-bottom: 20px; color: #888; line-height: 24px">
                    You may add or modify the references. The system will automatically identify and retrieve the reference information.
                    Please note that if the reference type is set to “Other”, the “Parse” button will not be available.
                </p>

                <el-form :model="refenceForm" :rules="refenceFormrules" ref="refenceForm" label-width="150px" class="editForm mt10">
                    <!-- 内容开关 -->
                    <el-form-item label="Source:">
                        <el-select v-model="SourceType" placeholder="please pick">
                            <el-option v-for="item in sourceOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="Content:" required prop="content">
                        <div class="automatic-parsing-box">
                            <el-input
                                style="border: none"
                                class="automaticParsing"
                                type="textarea"
                                rows="5"
                                v-model="refenceForm.content"
                                placeholder=""
                            ></el-input>
                            <span v-if="isShowParsing" style="color: #409eff"
                                >We have detected updates to the reference content. You need to click the "Automatic parsing" button to
                                recognize them.</span
                            >
                        </div>
                    </el-form-item>

                    <div v-if="!isShowParsing && isShowParsingData && SourceType != 'other'">
                        <el-form-item style="margin: 0 0 30px">
                            <div class="line" style="border: 1px dashed #dcdfe6"></div>
                        </el-form-item>
                        <!-- Journal -->
                        <div v-show="SourceType == 'journal'">
                            <el-form-item label="Doi:" prop="doi">
                                <el-input v-model="refenceForm.doi">
                                    <el-button @click="gotoFormate" slot="append">Formate</el-button>
                                </el-input>
                                <p class="zhushi">
                                    You can click the 'Formate' on the right to automatically identify and quickly fill in all the current
                                    fields
                                </p>
                            </el-form-item>
                        </div>

                        <div v-show="SourceType != 'other'">
                            <el-form-item label="Author(s):" required prop="author">
                                <el-input
                                    v-model="refenceForm.author"
                                    placeholder="Patel NM, Stottlemyer BA, Gray MP, Boyce RD, Kane Gill SL"
                                ></el-input>
                                <p class="zhushi">
                                    Six or less authors are required to list all authors while more than six authors are required to list
                                    three of them with “et al.”
                                </p>
                            </el-form-item>
                            <el-form-item :label="SourceType == 'journal' ? 'Title:' : 'Book'" required prop="title">
                                <el-input
                                    v-if="SourceType == 'journal'"
                                    v-model="refenceForm.title"
                                    placeholder="eg: The role of autophagy in the treatment of osteoporosis by Chinese medicines (natural)"
                                ></el-input>
                                <p class="zhushi" v-if="SourceType == 'journal'">
                                    <span style="color: #409eff"
                                        >Automatically displayed after publication "."<span style="color: #ff0000ba; margin-left: 4px"
                                            >Don't add "."!</span
                                        ></span
                                    >
                                </p>
                                <el-input
                                    v-if="SourceType == 'book'"
                                    v-model="refenceForm.title"
                                    placeholder="eg: Traditional Medicine Research"
                                ></el-input>
                                <p v-if="SourceType == 'book'" class="zhushi">
                                    Full Name of Book
                                    <span style="color: #409eff; margin-left: 6px; display: none"
                                        >Automatically displayed after publication "."<span style="color: #ff0000ba; margin-left: 4px"
                                            >Don't add "."!</span
                                        ></span
                                    >
                                </p>
                            </el-form-item>
                            <el-form-item label="Publication Details:" required prop="dateno">
                                <div v-if="SourceType == 'journal'">
                                    <el-input v-model="refenceForm.dateno" placeholder="eg: 2023;8(9):49-62"></el-input>
                                    <p class="zhushi">
                                        Year;Volume(issue):Inclusive page numbers<span style="color: #409eff; margin-left: 6px"
                                            >Automatically displayed after publication "."<span style="color: #ff0000ba; margin-left: 4px"
                                                >Don't add "."!</span
                                            ></span
                                        >
                                    </p>
                                </div>
                                <div v-if="SourceType == 'book'">
                                    <el-input v-model="refenceForm.dateno" placeholder="eg: New York, NY:McGraw-Hill;2011"></el-input>
                                    <p class="zhushi">
                                        City, State (or Country if not in the US) of publisher:Publisher’s name;copyright year<span
                                            style="color: #409eff; display: none; margin-top: -10px"
                                            >Automatically displayed after publication "."<span style="color: #ff0000ba; margin-left: 4px"
                                                >Don't add "."!</span
                                            ></span
                                        >
                                    </p>
                                </div>
                            </el-form-item>
                        </div>
                        <div v-show="SourceType == 'journal'">
                            <el-form-item label="Journal:" required prop="joura">
                                <el-input v-model="refenceForm.joura" placeholder="eg: Tradit Med Res"></el-input>
                                <p class="zhushi">
                                    Abbreviated Journal Title
                                    <span style="color: #409eff; margin-left: 6px"
                                        >Automatically displayed after publication "."<span style="color: #ff0000ba; margin-left: 4px"
                                            >Don't add "."!</span
                                        >
                                    </span>
                                </p>
                            </el-form-item>
                            <el-form-item label="DOI/URL:" required prop="doilink">
                                <el-input v-model="refenceForm.doilink" placeholder="eg: 10.1002/cncr.30667"></el-input>
                                <p class="zhushi">
                                    <span style="color: #409eff"
                                        >Automatically displayed after publication "."<span style="color: #ff0000ba; margin-left: 4px"
                                            >Don't add "."!</span
                                        ></span
                                    >
                                </p>
                            </el-form-item>
                        </div>
                        <!-- Book -->
                        <div v-show="SourceType == 'book'">
                            <el-form-item label="ISBN:" required prop="isbn">
                                <el-input v-model="refenceForm.isbn"></el-input>
                                <p class="zhushi">
                                    <span style="color: #409eff; display: none"
                                        >Automatically displayed after publication "."<span style="color: #ff0000ba; margin-left: 4px"
                                            >Don't add "."!</span
                                        ></span
                                    >
                                </p>
                            </el-form-item>
                        </div>
                        <!-- others -->
                    </div>
                    <!-- <div v-if="!isShowParsing && isShowParsingData && SourceType == 'other'">
                    <el-form-item label="Doi:" prop="doi">
                        <el-input v-model="refenceForm.doi">

                        </el-input>

                    </el-form-item>
                </div> -->
                </el-form>

                <span slot="footer" class="dialog-footer">
                    <el-button @click="cancelSave">Cancel</el-button>
                    <el-button
                        v-if="isShowParsing"
                        type="primary"
                        style="background-color: #409eff !important; border-color: #409eff !important"
                        @click="getParsingData()"
                        >Automatic parsing</el-button
                    >

                    <el-button v-else type="primary" @click="dialogTitle == 'Edit' ? saveChange() : saveAdd()">Save</el-button>
                </span>
            </el-dialog>
            <!-- 复制word添加引用 -->
            <el-dialog
                title="Add References'"
                destroy-on-close
                :visible.sync="showEditor"
                width="800px"
                class="wordDia"
                z-index="1000"
                @close="showEditor = false"
                :close-on-click-modal="false"
            >
                <div>
                    <div class="logtips">
                        <p>Paste the contents of the wold file here, delete the carriage return at the end and click "Submit".</p>
                    </div>
                    <vue-ueditor-wrap v-model="wordText" :config="editorConfig" editor-id="editor-demo-01"></vue-ueditor-wrap>
                </div>
                <span slot="footer">
                    <el-button type="primary" plain @click="wordTextOp">Submit</el-button>
                </span>
            </el-dialog>
        </div>
    </div>
</template>

<script>
import VueUeditorWrap from 'vue-ueditor-wrap'; // ES6 Module
export default {
    data() {
        return {
            old_refence_content: '', // 原始参考文献内容
            old_refence_type: '',
            isShowParsingData: false,
            isShowParsing: false,
            ue: null,
            wordText: '',
            editorConfig: {
                UEDITOR_HOME_URL: '/UEditor/',
                serverUrl: ''
            },
            wordTextArr: [], // 识别出的word引用数组
            showEditor: false,
            dialogTitle: '',
            showB_step: 1,
            baseUrl: this.Common.baseUrl,
            mediaUrl: this.Common.mediaUrl,
            placeRef:
                'eg:\n[1]Kagabu M, Nagasawa T, Fukagawa D, et al. Immunotherapy for Uterine Cervical Cancer. Healthcare (Basel). 2019 Sep 17;7(3):108. PMID: 31533297; PMCID: PMC6787701.\nhttps://doi.org/10.3390/healthcare7030108\n\n[2]Small W Jr, Bacon MA, Bajaj A, et al. Cervical cancer: A global health crisis. Cancer. 2017 Jul 1;123(13):2404-2412. Epub 2017 May 2. PMID: 28464289.\nhttps://doi.org/10.1002/cncr.30667\n\n[3]Cohen PA, Jhingran A, Oaknin A, et al. Cervical cancer. Lancet. 2019 Jan 12;393(10167):169-182. PMID: 30638582.\nhttps://doi.org/10.1016/S0140-6736(18)32470-X',
            refAarray: '',
            refProcess: 0,
            SourceType: 'journal',
            sourceOptions: [
                {
                    value: 'journal',
                    label: 'journal'
                },
                {
                    value: 'book',
                    label: 'book'
                },
                {
                    value: 'other',
                    label: 'other'
                }
            ],
            // 引用表单
            refenceForm: {
                doi: '',
                p_article_id: null,
                p_refer_id: null, // 当前行一行的引用序号
                pre_p_refer_id: null, // 上一行
                refer_type: '', // 类型
                joura: '',
                author: '',
                doilink: '',
                dateno: '',
                isbn: '',
                content: '',
                title: ''
            },
            refenceFormrules: {
                // doi:[
                // { required: false, message: 'The Doi cannot be empty', trigger: 'blur' },
                // ],
                joura: [{ required: true, message: 'The Journal cannot be empty', trigger: 'blur' }],
                author: [{ required: true, message: 'The Author(s) cannot be empty', trigger: 'blur' }],
                title: [{ required: true, message: 'Please fill in this field', trigger: 'blur' }],
                doilink: [{ required: true, message: 'The doi/url cannot be empty', trigger: 'blur' }],
                dateno: [{ required: true, message: 'The Publication Details cannot be empty', trigger: 'blur' }],
                isbn: [{ required: true, message: 'The ISBN cannot be empty', trigger: 'blur' }],
                content: [{ required: true, message: 'The Content cannot be empty', trigger: 'blur' }]
            },
            addLoading: false,
            editboxVisible: false,
            multipleSelection: [] // 多选
        };
    },
    props: {
        p_article_id: {
            type: null,
            required: true
        },
        chanFerFormRepeatList: {
            type: Array,
            default: () => []
        },
        chanFerForm: {
            type: Array,
            required: true
        },
        gridData: {
            type: String,
            default: () => ''
        },
        role: {
            type: String,
            default: () => 'editor'
        }
    },
    methods: {
        
  formatTitle(title) {
    if (!title) return '';
    // 使用正则匹配，'gi' 表示全局匹配且不区分大小写
    // \b 确保是完整单词匹配，防止误伤含有这些字母的其他单词
    const reg = /\b(Retracted|Retraction)\b/gi;
    
    return title.replace(reg, (match) => {
      return `<span style="color: red; font-weight: bold;">${match}</span>`;
    });
  }
,
        getJournalDateno(dateno, type) {
            if (dateno && typeof dateno === 'string') {
                const hasInvalidColon = !dateno.includes(':') || (dateno.includes(':') && dateno.split(':').pop().trim() === '');

                if (hasInvalidColon) {
                    return type === 'title' ? 'text-highlight' : 'warn';
                }
            }
            return '';
        },
        getParsingInfo(data, index) {
            const targetSubArr = this.chanFerFormRepeatList.find((subArr) => subArr.includes(index));
            if (targetSubArr) {
                let warningText = 'Please note that ';
                const refElements = targetSubArr.map((ref, refIndex) => {
                    return `${ref + 1}`;
                });
                if (refElements.length > 0) {
                    if (refElements.length === 1) {
                        warningText += `ref. ${refElements[0]} is a duplicate.`;
                    } else {
                        const lastRef = refElements.pop(); // 取出最后一个 ref
                        warningText += `ref. ${refElements.join(', ')} and ${lastRef} are duplicates.`;
                    }
                }
                return warningText;
            }
        },
        handleContainerClick(e) {
            if (e.target.tagName === 'SPAN' && e.target.hasAttribute('data-ref')) {
                const ref = Number(e.target.getAttribute('data-ref')); // 获取存储的 ref 值
                this.handleClickRef(ref); // 触发实际逻辑
            }
        },

        handleClickRef(ref) {},
        getRepeatRefHtml() {
            let warningText = 'Please note that ';
            this.chanFerFormRepeatList.forEach((pair, index) => {
                let singlePairText = '';
                pair.forEach((ref, refIndex) => {
                    singlePairText += `<span style="font-weight: bold;color: #F56C6C;cursor: pointer;" data-ref="${ref}" >${
                        ref + 1
                    }</span>`;
                    if (refIndex !== pair.length - 1) {
                        singlePairText += ' and ';
                    }
                });
                warningText += `ref. ${singlePairText}`;
                if (index === this.chanFerFormRepeatList.length - 1) {
                    warningText += ' are duplicates.';
                } else {
                    warningText += ', and ';
                }
            });
            return warningText;
        },
        getParsingData() {
            if (this.refenceForm.content == '') {
                this.$message.error('The Content cannot be empty');
                return;
            }
            const loading = this.$loading({
                lock: true,
                text: 'Loading...',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
            this.$api
                .post('api/References/dealContent', {
                    content: this.refenceForm.content
                })
                .then((res) => {
                    loading.close();
                    this.isShowParsing = false;
                    (this.isShowParsingData = true), (this.refenceForm.joura = res.data.joura);
                    this.refenceForm.author = res.data.author;
                    this.refenceForm.dateno = res.data.dateno;
                    this.refenceForm.doilink = res.data.doilink;
                    this.refenceForm.doi = res.data.doi;
                    this.refenceForm.title = res.data.title;
                    this.refenceForm.isbn = this.refenceForm.refer_type == 'book' ? res.data.doilink : res.data.isbn;
                })
                .catch((err) => {
                    loading.close();
                    this.$message.error(err);
                });
        },

        getRefData(id) {
            return this.$api
                .post('api/References/get', {
                    account: localStorage.getItem('U_name'),
                    p_refer_id: id
                })
                .then((res) => {
                    if (res.status == 1) {
                        return res.data;
                    } 
                    throw res.msg;
                })
                .catch((err) => {
                    this.$message.error(err);
                    return Promise.reject(err);
                });
        },
        tableRowStyle({ row }) {
            if (row.is_repeat === 1) {
                return { backgroundColor: '#ffececa1' }; // 浅红色
            }
            return {};
        },
        init(e) {
            this.chanFerForm = e;
            this.bijiao();
            ////console.log('更新更新')
        },
        wordTextOp() {
            ////console.log(this.wordText)
            // 数据处理
            var pp = this.wordText.split('</p>');
            var ss = [];
            var re = /<[^>]+>/gi;
            var nbsp = /&nbsp;/gi;
            pp.forEach((element) => {
                element = element.replace(re, '');
                element = element.replace(nbsp, '');
                ss.push(element);
            });
            // 去掉最后一个空白数据
            if (ss[ss.length - 1].length <= 0) {
                this.wordTextArr = ss.slice(0, -1);
            } else {
                this.wordTextArr = ss;
            }
            this.wordTextArr.length > 0 ? this.wordSubmit() : this.$message.error('Please enter content in the editor before submitting!');
        },
        // 发送后台
        wordSubmit() {
            this.$api
                .post('api/Publish/addRefersByWord', {
                    contents: this.wordTextArr,
                    p_article_id: this.p_article_id
                })
                .then((res) => {
                    if (res.code == 0) {
                        this.showEditor = false;
                        this.wordTextArr = [];
                        this.wordText = '';
                        this.$message.success('successed!');
                        this.changeRefer();
                        this.showB_step = 2;
                    } else {
                        this.$message.error(res.msg);
                    }
                })
                .catch((err) => {
                    //console.log(err);
                });
        },
        showDialogSpecial() {
            // 拷贝文本方式添加
            this.showEditor = true;
        },
        bijiao() {
            if (this.chanFerForm.length > 0) {
                // 如果有值，则默认展示第二步的内容
                this.showB_step = 2;
            }
        },
        StepBNext(e) {
            if (e == 1) {
                this.$confirm('This will clear the current reference information, are you sure you want to do this?', 'Prompt', {
                    confirmButtonText: 'Sure',
                    cancelButtonText: 'Cancle',
                    type: 'warning'
                })
                    .then(() => {
                        this.clearRefences();
                    })
                    .catch(() => {});
            } else {
                this.showB_step = e;
            }
        },
        RefenceSelectionChange(val) {
            // //console.log(val,666666)
            this.multipleSelection = val;
            // //console.log(this.multipleSelection,'this.multipleSelection')
        },
        // 取消选择
        toggleSelection() {
            this.multipleSelection = [];
            this.$refs.multipleTable.clearSelection();
        },
        // 选中所有
        selectAllRef() {
            this.$refs.multipleTable.toggleAllSelection();
        },
        sendEmail() {
            this.$confirm('Are you sure you want to send an email to the Editor?', 'Tips', {
                confirmButtonText: 'Sure',
                cancelButtonText: 'Cancel',
                type: 'warning'
            }).then(() => {
                const loading = this.$loading({
                    lock: true,
                    text: 'please wait',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                this.$api
                    .post('api/References/finishSendEmail', {
                        article_id: this.$route.query.id
                    })
                    .then((res) => {
                        loading.close();
                        if (res.status == 1) {
                            this.$message.success('Email sent successfully!');
                        } else {
                            this.$message.error(res.msg);
                        }
                    })
                    .catch((err) => {
                        loading.close();
                    });
            });
        },

        // 删除部分引用
        deleteSomeRefs() {
            var ids = [];
            ids = this.multipleSelection.map((item) => {
                return item.p_refer_id;
            });
            this.$confirm('Are you sure you want to remove the selected references?', 'Tips', {
                confirmButtonText: 'Sure',
                cancelButtonText: 'Cancel',
                type: 'warning'
            })
                .then(() => {
                    const loading = this.$loading({
                        lock: true,
                        text: 'please wait',
                        spinner: 'el-icon-loading',
                        background: 'rgba(0, 0, 0, 0.7)'
                    });
                    this.$api
                        .post('api/Preaccept/delRefers', {
                            ids: ids
                        })
                        .then((res) => {
                            loading.close();
                            if (res.code == 0) {
                                //console.log(res);
                                this.changeRefer();
                            } else {
                                this.$message.error(res.msg);
                            }
                        })
                        .catch((err) => {
                            loading.close();
                            //console.log(err);
                        });
                })
                .catch(() => {});
        },
        // 清空引用数据
        clearRefences() {
            const loading = this.$loading({
                lock: true,
                text: 'please wait',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
            this.$api
                .post('api/Preaccept/discardRefersByParticleid', {
                    p_article_id: this.p_article_id
                })
                .then((res) => {
                    loading.close();
                    if (res.code == 0) {
                        this.refAarray = [];
                        this.showB_step = 1;
                    } else {
                        this.$message.error(res.msg);
                    }
                })
                .catch((err) => {
                    loading.close();
                    //console.log(err);
                });
        },
        StepBOper(e) {
            if (e == 1) {
                // 弹出新的页面粘贴DOI
                window.open(
                    'https://apps.crossref.org/SimpleTextQuery',
                    '_blank',
                    'width=900,height=600,toolbar=no,scrollbars=no,menubar=no,screenX=240,screenY=100'
                );
            } else if (e == 2) {
                // 发送转化为标准格式
                let refAarray_list = [];
                if (this.refAarray != '') {
                    refAarray_list = this.refAarray.split(/[\r\n\r\n]/);
                    for (var i = 0; i < refAarray_list.length; i++) {
                        if (refAarray_list[i] == ' ' || refAarray_list[i] == '') {
                            refAarray_list.splice(i, 1);
                            i = i - 1;
                        }
                        if (refAarray_list[i].indexOf('https://') == 0) {
                            refAarray_list[i - 1] = refAarray_list[i - 1] + refAarray_list[i];
                            refAarray_list.splice(i, 1);
                            i = i - 1;
                        }
                    }

                    // 参考文献接口
                    this.$api
                        .post('api/Production/freshRefers', {
                            refers: refAarray_list,
                            p_article_id: this.p_article_id
                        })
                        .then((res) => {
                            if (res.code == 0) {
                                // 获取进度百分比
                                this.refProcess = 1;
                                this.refReal = 0;
                                let timeRef = setInterval(() => {
                                    this.$api
                                        .post('api/Production/getFragBF', {
                                            p_article_id: this.p_article_id
                                        })
                                        .then((res) => {
                                            if (res.code == 0) {
                                                if (res.data.bf < 100) {
                                                    this.refReal = res.data.bf;
                                                    this.$forceUpdate();
                                                } else {
                                                    clearInterval(timeRef);
                                                    this.refProcess = 0;
                                                    this.$message.success('Successfully converted to standard format!');
                                                    this.changeRefer();
                                                    this.showB_step = 2;
                                                }
                                            } else {
                                                this.refProcess = 0;
                                                this.$message.error(res.msg);
                                            }
                                        })
                                        .catch((err) => {
                                            this.refProcess = 0;
                                            //console.log(err);
                                        });
                                }, 2000);
                            }
                        })
                        .catch((err) => {
                            //console.log(err);
                        });
                } else {
                    this.$message.error('Please fill in the content!');
                }
            } else if (e == 3) {
                window.open(`/References`, '_blank', 'width=900,height=600,scrollbars=no,resizable=no');
            }
        },

        customColorMethod(percentage) {
            if (percentage < 20) {
                return '#f95f30';
            } else if (percentage < 40) {
                return '#f6ac3d';
            } else if (percentage < 60) {
                return '#e6a23c';
            } else if (percentage < 80) {
                return '#afbd0d';
            } else {
                return '#79bd0d';
            }
        },
        referMark(e) {
            this.chanFerForm[e].edit_mark = 0;
            this.$forceUpdate();
        },

        // 5----参考文献修改最终结果
        ChanFerEditFrag(e, v) {
            e.article_id = this.acticleId;
            this.$api
                .post('api/Production/editReferFrag', e)
                .then((res) => {
                    if (res.code == 0) {
                        this.$message.success('Successfully modified the standard format!');
                        this.changeRefer();
                    } else {
                        this.$message.error(res.msg);
                    }
                })
                .catch((err) => {
                    //console.log(err);
                });
        },
        // 刷新组件
        refrashComp() {
            this.$emit('refrashComp', true);
        },
        // 重新获取参考文献
        changeRefer() {
            this.$emit('changeRefer', true);
        },
        // 向上合并某一项
        ChanFerMashUp(e) {
            ////console.log(e,'5555')
            this.$emit('ChanFerMashUp', e);
        },
        // 显示修改引用
        async change(row, optitle) {
            this.dialogTitle = optitle;
            this.isShowParsing = false;
            this.isShowParsingData = false;
            const loading = this.$loading({
                lock: true,
                text: 'Loading...',
                background: 'rgba(0, 0, 0, 0.7)'
            });
            try {
                var data = await this.getRefData(row.p_refer_id);
                this.SourceType = data.refer_type ? data.refer_type : '';

                this.refenceForm = {
                    doi: '',
                    p_article_id: null,
                    p_refer_id: row.p_refer_id, // 当前行一行的引用序号
                    pre_p_refer_id: null, // 上一行
                    refer_type: data.refer_type ? data.refer_type : '', // 类型

                    author: data.author ? data.author : '',
                    doilink: data.doilink ? data.doilink : '',
                    dateno: data.dateno ? data.dateno : '',
                    isbn: data.isbn ? data.isbn : '',
                    joura: data.joura ? data.joura : '',

                    content: data.deal_content ? data.deal_content : '',
                    title: data.title ? data.title : ''
                };

                this.old_refence_content = JSON.parse(JSON.stringify(data.deal_content));
                this.old_refence_type = JSON.parse(JSON.stringify(data.refer_type));
                if (this.SourceType == 'book') {
                    this.refenceForm.isbn = data.doilink ? data.doilink : '';
                }
                if (this.SourceType == 'other' || this.role == 'user') {
                    this.refenceForm.doi = data.refer_doi ? data.refer_doi : '';
                } else {
                    this.refenceForm.doi = '';
                }

                //console.log('this.refenceForm at line 883:', this.refenceForm)
                this.editboxVisible = true;
                this.$nextTick(() => {
                    // this.refenceForm.content = row.refer_frag;
                });
                loading.close();
            } catch (error) {
                loading.close();
            }
        },
        // 编辑引用
        saveChange() {
            var journalValid = false;
            var bookValid = false;
            var otherValid = false;
            if (this.SourceType == 'journal') {
                // Journal形式
                // var doi = ''
                var author = '';
                var title = '';
                var dateno = '';
                var joura = '';
                var doilink = '';
                // this.$refs['refenceForm'].validateField('doi',(callback)=>{
                // 	doi = callback
                // })
                this.$refs['refenceForm'].validateField('author', (callback) => {
                    author = callback;
                });
                this.$refs['refenceForm'].validateField('title', (callback) => {
                    title = callback;
                });
                this.$refs['refenceForm'].validateField('dateno', (callback) => {
                    dateno = callback;
                });
                this.$refs['refenceForm'].validateField('joura', (callback) => {
                    joura = callback;
                });
                this.$refs['refenceForm'].validateField('doilink', (callback) => {
                    doilink = callback;
                });
                author == '' && title == '' && dateno == '' && joura == '' && doilink == '' ? (journalValid = true) : '';
            } else if (this.SourceType == 'book') {
                // book 形式
                var author = '';
                var title = '';
                var dateno = '';
                var isbn = '';
                this.$refs['refenceForm'].validateField('author', (callback) => {
                    author = callback;
                });
                this.$refs['refenceForm'].validateField('title', (callback) => {
                    title = callback;
                });
                this.$refs['refenceForm'].validateField('dateno', (callback) => {
                    dateno = callback;
                });
                this.$refs['refenceForm'].validateField('isbn', (callback) => {
                    isbn = callback;
                });
                author == '' && title == '' && dateno == '' && isbn == '' ? (bookValid = true) : '';
            } else if (this.SourceType == 'other') {
                // others 形式
                var content = '';
                this.$refs['refenceForm'].validateField('content', (callback) => {
                    content = callback;
                });
                content == '' ? (otherValid = true) : '';
            }
            // //console.log(otherValid,99)

            if (journalValid || bookValid || otherValid) {
                // 有任意一个模式符合验证规则就提交
                this.editRefSave();
            }
        },
        //  提交引用修改
        editRefSave() {
            this.refenceForm.refer_type = this.SourceType;
            const loading = this.$loading({
                lock: true,
                text: 'Loading...',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });

            var form = { ...this.refenceForm };

            if (this.role == 'user') {
                form.article_id = this.$route.query.id;
            }
            this.$api
                .post('api/Preaccept/editRefer', form)
                .then((res) => {
                    if (res.code == 0) {
                        loading.close();
                        this.$message.success('successed！');
                        //this.getRefData()
                        this.changeRefer();
                        this.cancelSave();
                    } else if (res.code == 1) {
                        loading.close();
                        this.$message.error(res.msg);
                    } else {
                        loading.close();
                        this.$message.error(res.msg);
                    }
                })
                .catch((err) => {
                    loading.close();
                    this.$message.error(err);
                });
        },
        // 保存新增
        saveAdd() {
            var journalValid = false;
            var bookValid = false;
            var otherValid = false;
            if (this.SourceType == 'journal') {
                // Journal形式
                // var doi = ''
                var author = '';
                var title = '';
                var dateno = '';
                var joura = '';
                var doilink = '';
                // this.$refs['refenceForm'].validateField('doi',(callback)=>{
                //     doi = callback
                // })
                this.$refs['refenceForm'].validateField('author', (callback) => {
                    author = callback;
                });
                this.$refs['refenceForm'].validateField('title', (callback) => {
                    title = callback;
                });
                this.$refs['refenceForm'].validateField('dateno', (callback) => {
                    dateno = callback;
                });
                this.$refs['refenceForm'].validateField('joura', (callback) => {
                    joura = callback;
                });
                this.$refs['refenceForm'].validateField('doilink', (callback) => {
                    doilink = callback;
                });
                author == '' && title == '' && dateno == '' && joura == '' && doilink == '' ? (journalValid = true) : '';
            } else if (this.SourceType == 'book') {
                // book 形式
                var author = '';
                var title = '';
                var dateno = '';
                var isbn = '';
                this.$refs['refenceForm'].validateField('author', (callback) => {
                    author = callback;
                });
                this.$refs['refenceForm'].validateField('title', (callback) => {
                    title = callback;
                });
                this.$refs['refenceForm'].validateField('dateno', (callback) => {
                    dateno = callback;
                });
                this.$refs['refenceForm'].validateField('isbn', (callback) => {
                    isbn = callback;
                });
                author == '' && title == '' && dateno == '' && isbn == '' ? (bookValid = true) : '';
            } else if (this.SourceType == 'other') {
                // others 形式
                var content = '';
                this.$refs['refenceForm'].validateField('content', (callback) => {
                    content = callback;
                });
                content == '' ? (otherValid = true) : '';
            }
            // //console.log(otherValid,99)

            if (journalValid || bookValid || otherValid) {
                // 有任意一个模式符合验证规则就提交

                this.refenceForm.refer_type = this.SourceType;
                // //console.log(this.refenceForm,99)
                const loading = this.$loading({
                    lock: true,
                    text: 'Loading...',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                var form = { ...this.refenceForm };
                if (this.role == 'user') {
                    form.article_id = this.$route.query.id;
                }
                this.$api
                    .post(this.role == 'user' ? 'api/Preaccept/addRefer' : 'api/Preaccept/addReferByParticleid', form)
                    .then((res) => {
                        if (res.code == 0) {
                            loading.close();
                            this.$message.success('successed！');

                            this.changeRefer();
                            this.cancelSave();
                        } else if (res.code == 1) {
                            // doi 错误
                            loading.close();
                            this.$message.error(res.msg);
                        } else {
                            loading.close();
                            this.$message.error(res.msg);
                        }
                    })
                    .catch((err) => {
                        loading.close();
                        this.$message.error(err);
                    });
            } else {
                return false;
            }
        },
        cancelSave() {
            this.editboxVisible = false;
            // refenceForm
            // this.$refs['refenceForm'].clearValidate();
            // this.$refs['refenceForm'].resetFields();
            this.refenceForm.doi = '';
            this.dialogTitle = '';
        },
        // 格式化
        gotoFormate() {
            // this.$refs['refenceForm'].validateField('doi', (callback)=>{
            if (this.refenceForm.doi && this.refenceForm.doi != '') {
                const loading = this.$loading({
                    lock: true,
                    text: 'Loading...',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                this.$api
                    .post('/api/Preaccept/searchDoi', { doi: this.refenceForm.doi })
                    .then((res) => {
                        loading.close();
                        ////console.log(res)
                        if (res.code == 0) {
                            //this.tableData = res.data.refers
                            this.$nextTick(() => {
                                this.refenceForm.author = res.data.formate.author;
                                this.refenceForm.title = res.data.formate.title;
                                this.refenceForm.joura = res.data.formate.joura;
                                this.refenceForm.dateno = res.data.formate.dateno;
                                this.refenceForm.doilink = res.data.formate.doilink;
                            });
                        } else {
                            this.$message.error(res.msg);
                        }
                    })
                    .catch((e) => {
                        loading.close();
                        this.$message.error(e.msg);
                    });
            } else {
                //  //console.log('不合格')
                this.$message.error('The Doi cannot be empty!');
                return false;
            }
            // })
        },
        // 添加一行
        addLine(row, optitle) {
            this.dialogTitle = optitle;
            this.old_refence_type = '';
            this.old_refence_content = '';
            this.SourceType = 'journal';
            (this.refenceForm = {
                doi: '',
                p_article_id: this.p_article_id,
                p_refer_id: null, // 当前行一行的引用序号
                pre_p_refer_id: row.p_refer_id, // 上一行
                refer_type: '', // 类型
                joura: '',
                author: '',
                doilink: '',
                dateno: '',
                isbn: '',
                content: '',
                title: ''
            }),
                (this.isShowParsing = true);
            this.isShowParsingData = false;
            this.editboxVisible = true;

            this.$nextTick(() => {
                if (this.$refs['refenceForm']) {
                    this.$refs['refenceForm'].clearValidate(['content']);
                    this.$refs['refenceForm'].clearValidate(['doi']);
                }
            });
        },

        // 删除一行
        deleteLine(row) {
            this.$confirm('Are you sure you want to remove this reference?', 'Tips', {
                confirmButtonText: 'Sure',
                cancelButtonText: 'Cancel',
                type: 'warning'
            })
                .then(() => {
                    const loading = this.$loading({
                        lock: true,
                        text: 'Loading...',
                        spinner: 'el-icon-loading',
                        background: 'rgba(0, 0, 0, 0.7)'
                    });
                    this.$api
                        .post('api/Preaccept/delRefer', {
                            p_refer_id: row.p_refer_id
                        })
                        .then((res) => {
                            loading.close();
                            if (res.code == 0) {
                                this.$message.success('remove successed!');
                                this.changeRefer();
                                // this.getRefData()
                            } else {
                                this.$message.error(res.msg);
                            }
                        })
                        .catch((err) => {
                            loading.close();
                            this.$message.error(err);
                        });
                })
                .catch(() => {
                    loading.close();
                });
        },

        // 调整顺序
        changeOrder(row, opName) {
            let optitle = '';
            opName == 'up' ? (optitle = 'Move up this line?') : (optitle = 'Move down this line?');
            // this.$confirm(optitle, 'Tips', {
            // confirmButtonText: 'Sure',
            // cancelButtonText: 'Cancel',
            // type: 'warning'
            // }).then(() => {
            this.$api
                .post('api/Preaccept/sortRefer', {
                    p_refer_id: row.p_refer_id,
                    act: opName
                })
                .then((res) => {
                    if (res.code == 0) {
                        //	this.$message.success('successed!')
                        this.changeRefer();
                        // this.getRefData()
                    } else {
                        this.$message.error(res.msg);
                    }
                })
                .catch((err) => {
                    this.$message.error(err);
                });
            // this.$message({
            //     type: 'success',
            //     message: 'remove successed!'
            // });
            // }).catch(()=>{});
        }
    },
    components: {
        VueUeditorWrap
    },
    watch: {
        role: {
            handler(newVal, oldVal) {
                this.$nextTick(() => {
                    if (this.role == 'editor') {
                        this.showB_step = 1;
                    } else {
                        this.showB_step = 2;
                    }
                });
            },
            immediate: true,
            deep: true // 可以深度检测到 person 对象的属性值的变化
        },
        SourceType: {
            handler(newVal, oldVal) {
                this.$nextTick(() => {
                    this.refenceForm.refer_type = this.SourceType;
                    if (this.$refs['refenceForm']) {
                        this.$refs['refenceForm'].clearValidate();
                    }

                    if (
                        (this.SourceType != this.old_refence_type || this.refenceForm.content != this.old_refence_content) &&
                        this.SourceType != 'other'
                    ) {
                        this.isShowParsing = true;
                    } else {
                        this.isShowParsing = false;
                    }
                });
            },
            immediate: true,
            deep: true // 可以深度检测到 person 对象的属性值的变化
        },
        'refenceForm.content': {
            handler(newVal, oldVal) {
                if (this.SourceType != 'other') {
                    if (this.dialogTitle == 'Edit') {
                        if (this.refenceForm.content != this.old_refence_content) {
                            this.isShowParsing = true;
                        } else {
                            this.isShowParsing = false;
                        }
                    } else {
                        if (this.refenceForm.content == '' || this.refenceForm.content != this.old_refence_content) {
                            this.isShowParsing = true;
                        } else {
                            this.isShowParsing = false;
                        }
                    }
                } else {
                    this.isShowParsing = false;
                }
            },
            immediate: true, // 初始化时立即执行一次handler
            deep: true // 这里如果content是普通类型（如字符串），deep可以省略；如果content是对象，才需要deep: true
        }
    }
};
</script>

<style scoped>
/* 隐藏编辑器底部内容 */
/* /deep/ #edui1_bottombar{display: none;}  */
/* 编辑器高度 */
/* /deep/ #edui1_iframeholder{ height: 260px;}  */

.wordDia {
    max-height: 800px;
    overflow-y: scroll;
}

.logtips {
    margin-bottom: 15px;
    color: #666;
}

/* .itemIndex{position: relative;} */
.itemChanged {
    position: absolute;
    display: inline-block;
    background: #006699;
    color: #fff;
    padding: 5px;
    border-radius: 0 0 7px 7px;
    left: 0;
    top: 0;
}

.status {
    display: block;
    width: 36px;
    height: 36px;
    border-radius: 36px;
    font-size: 22px;
    line-height: 36px;
    color: #fff;
    text-align: center;
}

.status.ok {
    background: #a7e389;
}

.status.warn {
    background: #ffd192;
}

.status.float {
    display: inline-block;
}

.doiLink {
    color: #409eff;
}

.talkDialog {
    height: 500px;
    overflow-y: scroll;
}

.contactAuthor {
    margin-top: 50px;
    color: #8c939d;
}

.contactAuthor > p {
    font-size: 12px;
    margin-left: 0 !important;
}

.contactAuthor > p > .btnCliArt {
    color: #409eff;
}

.contactAuthor > h4 {
    margin-bottom: 10px;
}

.handle-box {
    margin-bottom: 20px;
}

.title_header {
    margin-bottom: 20px;
}

.tab_post {
    background-color: #fafafa;
    position: absolute;
    left: 25px;
    top: 60px;
    /* width: 220px; */
    z-index: 50;
}

.tab_post > div {
    margin-bottom: 30px;
    cursor: pointer;
    position: relative;
}

.tab_post > div h5 {
    padding: 10px 10px 0 0;
    margin-bottom: 5px;
    border-radius: 10px;
    font-size: 16px;
    color: #333;
    font-weight: bold;
    letter-spacing: -0.6px;
}

.tab_post > div h5 span {
    border: 2px solid #333;
    padding: 0 7px;
    margin: 0 5px 0 0;
    border-radius: 15px;
    font-size: 12px;
    display: inline-block;
}

.tab_post > div p {
    margin: 0 20px 0 33px;
    color: #999;
    font-size: 14px;
    line-height: 18px;
}

.tab_post > div .line {
    top: 50px;
    left: 11px;
    bottom: -25px;
    position: absolute;
    border: 1px dashed #999;
}

.tab_post > div:nth-child(7) .line {
    border: none;
}

.tab_post > div.P_style h5 {
    color: #006699;
}

.tab_post > div.P_style h5 span {
    background-color: #006699;
    border: 2px solid #006699;
    color: #fff;
}

.tab_post > div.P_style p {
    color: #333;
}

.tab_post > div.P_style .line {
    /* border-color: #006699; */
}

.scroll-item {
    margin: 0 30px 50px 255px;
}

.bor_style_onli {
    height: 700px;
    overflow-y: scroll;
    border: 2px solid #0066991a;
    background-color: #fff;
    border-radius: 5px;
    padding: 20px;
}

.bor_style_onli > h4 {
    margin: 0 0 20px 0;
    letter-spacing: -0.5px;
}

.captcha-img.el-switch.is-disabled {
    opacity: 1;
}

.captcha-img.el-switch.is-disabled .el-switch__core {
    cursor: pointer;
}

.message-title {
    cursor: pointer;
}

.guanSty {
    min-width: 1000px;
}

.guanSty .quill-editor {
    margin-bottom: 20px;
    /* height: 200px; */
}

.guanSty .ql-toolbar {
    border: 1px solid #dcdfe6 !important;
}

.guanSty .ql-container {
    min-height: 100px !important;
    border: 1px solid #dcdfe6 !important;
}

.guanSty .ql-editor {
    height: 100px;
}

.guanSty .upload-demo .el-upload {
    width: 55px;
    float: left;
    margin-left: 5px;
    border: none;
    text-align: left;
    height: 35px;
}

.guanSty .el-upload-list {
    margin-top: 4px;
    margin-left: 20px;
    float: left;
    width: 35px;
}

.guanSty .el-upload-list .el-upload-list__item {
    width: 30px !important;
}

.guanSty .el-upload-list .el-upload-list__item:hover {
    cursor: pointer;
}

.guanSty .el-upload-list .el-upload-list__item .el-upload-list__item-name {
    width: 30px;
}

.guanSty .el-upload-list .el-upload-list__item .el-upload-list__item-status-label {
    display: none;
}

.guanSty .el-upload-list__item:hover .el-icon-close {
    display: none;
}

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

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

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

.guanSty .avatar {
    width: 140px;
    height: 140px;
    display: block;
}

.guanSty .upload-demo .el-upload-list__item:first-child {
    margin-top: 0;
    width: 300px;
}

.suoshu_jigou .el-checkbox__label {
    white-space: normal;
}

.suoshu_jigou .el-checkbox__input {
    vertical-align: top;
    margin-top: 8px;
}

.liter_ture {
    position: relative;
    margin-top: 30px;
}

.chanSelLef {
    width: 100% !important;
    /* position: sticky; */
    top: 10px;
    height: auto;
}

.chanSelLef > p {
    font-size: 14px;
    color: #333;
    margin: 10px 0 30px 0;
    line-height: 22px;
}

.chanSelLef > div {
    margin: 0 0 20px 0;
}

.chanSelLef > div > h3 {
    font-size: 14px;
    letter-spacing: -0.5px;
    color: #999;
}

.chanSelLef > div > h3 > span {
    color: #fff;
    background-color: #999;
    padding: 2px 6px;
    margin: 0 10px 0 0;
}

.chanSelLef > div > div > p {
    font-size: 14px;
    color: #333;
    margin: 10px 0 0 32px;
    line-height: 24px;
}

.chanSelLef > div.C_style > h3 {
    color: #006699;
}

.chanSelLef > div.C_style > h3 > span {
    background-color: #006699;
}

.chanFerAll {
}

.chanFerAll .chanFerBtn {
    cursor: pointer;
}

.chanFerAll .ref_list:nth-child(2n) {
}

.chanFerAll .ref_list:nth-child(2n + 1) {
    background-color: #ecf5ff;
}

.ref_list {
    padding: 20px;
    position: relative;
}

.ref_list > b {
    position: absolute;
    top: 5px;
    left: 10px;
    font-size: 12px;
}

.ref_list > i {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 16px;
    color: #006699;
    cursor: pointer;
}

.ref_list > div:nth-child(1) {
    margin: 0 0 15px 0;
}

.ref_list > div:nth-child(1) input {
}

.ref_list > div:nth-child(1) button {
    float: right;
}

.ref_list > div:nth-child(2) {
    margin: 0 0 15px 0;
}

.ref_list > div.BG_yell {
    background-color: #fdf3e3;
    padding: 15px 0;
}

.RefProBar {
    position: absolute;
    background: rgba(0, 0, 0, 0.7);
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.RefProBar > div {
    width: 76%;
    position: absolute;
    top: 40%;
    left: 12%;
}

.RefProBar > div > p {
    color: #fff;
    margin: 20px 0 0 0;
}

.RefProBar > div > p > img {
    width: 30px;
    vertical-align: middle;
    margin: 0 10px 0 5px;
}

.RefProBar > div > p > span {
    font-size: 18px;
}

.upload-demo_6 {
    overflow: auto;
}

.upload-demo_6 .el-upload {
    margin-left: 0 !important;
    width: 150px !important;
    height: auto !important;
    text-align: center !important;
}

.upload-demo_6 .el-upload__tip {
    margin-left: 15px;
    float: left;
}

.typeA_MTxt > div > div {
    position: relative;
    border-bottom: 1px solid #d6e5ec;
    padding: 10px 0 12px 0;
}

.typeA_MTxt > div > div .el-button {
    position: absolute;
    right: 5px;
    top: -1px;
}

.typeA_MTxt > h5 {
    margin: 25px 0 15px 0;
    line-height: 18px;
    font-size: 13px;
    color: #bbb;
    font-weight: 400;
}

.bor_style_onli .load_pdf {
    margin-bottom: 20px;
}

.bor_style_onli .load_pdf > img {
    vertical-align: sub;
    margin: 0 15px 0 0;
}

.bor_style_onli .load_pdf a i:hover {
    color: #006699 !important;
    transform: scale(1.3);
}

.con_firm {
    font-size: 14px;
    line-height: 28px;
}

.con_firm b {
    margin-left: 5px;
}

.con_firm i {
    font-size: 18px;
    margin-right: 5px;
    vertical-align: text-bottom;
}

.aMesage {
    font-size: 14px;
    font-family: 'Helvetica Neue', Helvetica, Georgia, sans-serif;
    word-break: break-all;
}

.aMes_typ {
    line-height: 35px;
    border-bottom: 1px solid #f1f1f1;
    color: #7f0202;
    font-weight: bold;
}

.aMes_tit {
    color: #222;
    font-weight: bold;
    margin-top: 8px;
    line-height: 20px;
    font-family: 'Helvetica Neue', Helvetica, Georgia, sans-serif;
}

.aMes_autor {
    margin-top: 5px;
    font-size: 15px;
    font-family: Calibri;
}

.aMes_doi {
    margin-top: 8px;
}

.aMes_doi span {
    margin-left: 20px;
}

.aMes_asbimg {
    margin-top: 20px;
}

.aMes_asbimg img {
    float: left;
    width: 290px;
}

.aMes_asbimg div {
    float: left;
    font-family: Calibri;
    width: 430px;
    padding-left: 30px;
}

.aArticle {
    font-size: 14px;
    font-family: 'Helvetica Neue', Helvetica, Georgia, sans-serif;
    word-break: break-all;
}

.aArt_doi {
}

.aArt_tit {
    font-size: 16px;
    color: #333333;
    font-weight: bold;
    margin: 20px 0 15px 0;
    line-height: 24px;
}

.aArt_autor {
    margin-top: 5px;
    font-size: 15px;
    font-family: Calibri;
}

.aArt_autor img {
    width: 13px;
    margin-left: 3px;
}

.aArt_jigou {
    margin-top: 10px;
    line-height: 20px;
    font-family: Calibri;
}

.aArt_abst {
    margin-top: 30px;
}

.aArt_abst .titTop {
    border-bottom: 1px solid #ddd;
    margin-bottom: 20px;
}

.zhushi {
    color: #999;
    font-size: 12px;
}

.aArt_abst .titTop b {
    font-weight: normal;
    display: inline-block;
    padding: 8px 10px;
    border: 1px solid transparent;
    margin-bottom: -1px;
    border-radius: 4px 4px 0 0;
    cursor: pointer;
}

.aArt_abst .titTop b.Tab_col {
    border: 1px solid #ddd;
    border-bottom-color: #fff;
}

.aArt_abst .titHtml {
    letter-spacing: 0.03em;
    margin: 15px 10px 0 10px;
    color: #444;
    font-size: 15px;
    line-height: 1.4;
    word-break: break-word;
}

.aArt_abst > p {
    margin: 25px 10px 0 10px;
    text-align: justify;
    color: #666;
    font-size: 15px;
    line-height: 1.4;
    /* text-indent: 2.6rem; */
    word-break: break-word;
}

.aArt_abst .titHtml .MaxPicture {
    text-align: center;
}

.aArt_abst .titHtml .MaxPicture > img {
    margin-bottom: 10px;
}

.aArt_abst .titHtml .MaxPicture > font {
    display: block;
    margin: 0 auto;
    font-size: 13px;
}

.refTable th {
    background: red !important;
    color: #666;
}

.topBtnBox.btns {
    margin-bottom: 20px;
}

.bottomBtnBox.btns {
    margin-top: 20px;
}

.repeat-warning-row {
    background: red !important;
}

.liter_ture {
    height: calc(100% - 100px);
    /* display: flex;
    justify-content: space-between; */
    /* display: grid;
    grid-template-columns: 280px 1fr;
    grid-template-rows: minmax(100%, auto);
    gap: 20px; */
}

::v-deep .chanFerAll {
    width: 100% !important;
    padding-left: 10px;
    padding-top: 20px;
    border-top: 1px solid #d6e5ec;
    box-sizing: border-box;
}

::v-deep .chanFerAll > div {
    height: 100%;
}

::v-deep .chanFerAll > div > .el-textarea {
    /* height: 100%; */
    height: 100%;
}

::v-deep .chanFerAll > div > .el-textarea .el-textarea__inner {
    /* height: 100%; */
    height: 100% !important;
}

::v-deep .el-table-column--selection .cell {
    padding: 0 !important;
}

::v-deep .el-table--small {
    font-size: 13px !important;
}

.reference-item {
    line-height: 18px;
}

::v-deep .el-table .cell {
    padding: 0 !important;
}

.automatic-parsing-box {
    position: relative;
    padding-bottom: 24px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    color: #006699;
}

.automatic-parsing-box span {
    position: absolute;
    right: 14px;
    bottom: 1px;
    cursor: pointer;
}

::v-deep .automatic-parsing-box .automaticParsing .el-textarea__inner {
    border: none !important;
}

::v-deep.el-table--small .el-table__cell {
    padding-top: 4px;
    padding-bottom: 4px;
}

.operation {
    zoom: 0.9;
}

::v-deep .operation .el-button--mini {
    font-size: 14px !important;
    padding: 6px 10px !important;
}

.duplicateRefBox {
    color: #606266;
    margin-top: 0px;
    margin-bottom: 20px;

    background: #fef0f0;
    border: 1px solid #fbc4c4;
    padding: 4px 10px;
    font-size: 12px;
    border-radius: 3px;
    display: flex;
    align-items: center;
}
.wrongLine {
    color: #f15f44;
}
.Duplicate-item {
    position: absolute;

    left: 1px;
    top: calc((100% - 24px) / 2);
}
.beautiful-gradient {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.01);

    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 30px;
}
.text-highlight {
    background-color: rgb(252, 98, 93);
    background-color: rgb(252 98 93 / 68%);
    color: #333;
}
.template-info {
    margin-top: 20px;
    margin-bottom: 20px;
    background: rgb(244, 244, 245);
    border: 1px solid rgb(211, 212, 214);
    font-size: 14px;
    color: #606266;
    padding-left: 15px;
    border-radius: 4px;
    padding: 14px;
    box-sizing: border-box;
}
.template-title {
    /* font-size: 16px; */
    font-weight: bold;

    margin-bottom: 10px;
    color: #333;
    display: inline-block;
}
</style>
