<template>
    <div class="liter_ture">
        <div class="chanSelLef">
            <!-- 1 -->
            <div :class="showB_step == 1 ? 'C_style' : ''">
                <h3><span>1</span>Check References and Doi</h3>
                <div v-if="showB_step == 1">
                    <p>
                        You need to 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, then paste the references part of the
                        <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>
                        to get the new references part, please paste the new one into the input box.
                    </p>
                    <el-button @click="StepBNext(2)" plain type="primary" style="width: 85%; margin: 15px 0px 0px 30px; 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.</p>
                    <p style="background-color: #fdf3e3; padding: 10px; margin: 10px 0 0 30px">
                        The references with yellow background are problematic, so you can check and correct them yourself.
                    </p>
                    <el-button @click="StepBNext(1)" type="primary" plain style="width: 85%; margin: 15px 0px 0px 30px; 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>

            <!-- 临时 -->
            <p style="text-indent: 2em"><el-button type="text" @click="showDialogSpecial">Special way to add</el-button></p>
        </div>

        <!-- end -->
        <div class="chanFerAll">
            <div v-if="showB_step == 1">
                <el-input v-model="refAarray" type="textarea" rows="20" 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="topBtnBox btns" v-if="chanFerForm.length > 0">
                    <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="55"></el-table-column>
                    <el-table-column type="index" label="No." width="70" align="center">
                        <template slot-scope="scope">
                            <i v-if="scope.row.is_change == 1" class="itemChanged"></i>
							<el-tooltip class="item" effect="dark" content="Duplicate references" placement="top">
								<img
                                src="../../assets/img/repeat.png"
                                v-if="scope.row.is_repeat == 1"
                                alt=""
                                style="width: 24px; height: 24px; float: left"
                            />
    </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"
                                v-if="
                                    (scope.row.refer_type == 'journal' && scope.row.doilink != '') ||
                                    (scope.row.refer_type == 'book' && scope.row.isbn != '')
                                "
                            >
                                <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'">
                                <p>
                                    {{ scope.row.author }}&nbsp;{{ scope.row.title }}. &nbsp;<em>{{ scope.row.joura }}</em
                                    >&nbsp; {{ scope.row.dateno }}.<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'">
                                <p>{{ scope.row.author }}&nbsp;{{ scope.row.title }}.&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" style="text-align: left" v-if="scope.row.refer_type == 'other'">
                                {{ scope.row.refer_frag }}
                            </p>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" width="360">
                        <div slot-scope="scope">
                            <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="float: right"
                                plain
                                @click="deleteLine(scope.row)"
                                >delete</el-button
                            >
                        </div>
                    </el-table-column>
                </el-table>
                <div class="bottomBtnBox btns" v-if="chanFerForm.length > 0">
                    <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>
            <!-- 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"
            v-loading="addLoading"
            :title="dialogTitle + ' References'"
            :visible.sync="editboxVisible"
            width="800px"
            @close="cancelSave"
        >
            <p class="yinyongPre c888" style="margin-bottom: 20px; color: #888; line-height: 24px">
                Now you are starting to add or modify this reference. If this reference has a DOI, you can directly copy it into the DOI
                input box and submit it. If this reference doesn’t have the DOI, please turn on the No DOI button, and write all details of
                this reference according to the hints.
            </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>
                <!-- 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>
                <el-form-item>
                    <div class="line"></div>
                </el-form-item>
                <!-- 中间部分 -->
                <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 v-show="SourceType == 'other'">
                    <el-form-item label="Content:" required prop="content">
                        <el-input
                            type="textarea"
                            rows="5"
                            v-model="refenceForm.content"
                            placeholder="please refer to the AMA manual of style (10th ed.)"
                        ></el-input>
                    </el-form-item>
                </div>
            </el-form>
            <!-- <el-form  :model="refenceLinkForm" :rules="refenceLinkFormrules" ref="refenceLinkForm" label-width="80px" class="editForm mt10">                     
									<el-form-item label="Author(s):" required prop="author" >
										<el-input  v-model="refenceLinkForm.author" placeholder=""></el-input>
									</el-form-item> 
									<span>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”</span>
									<el-form-item label="title:" required prop="title" >
										<el-input  v-model="refenceLinkForm.title" placeholder="eg: Tradit Med Res"></el-input>
									</el-form-item> 
									<el-form-item label="Source:" required prop="joura" >
										<el-input  v-model="refenceLinkForm.joura" placeholder="eg:Healthcare (Basel)."></el-input>
									</el-form-item>
									<el-form-item label="Publication Details:" required prop="dateno" >
										<el-input  v-model="refenceLinkForm.dateno" placeholder="eg: 2023;8(9):49-62"></el-input>
									</el-form-item>
									<span>Year;Volume(issue):Inclusive page numbers.</span>
									<el-form-item label="doilink:" required prop="doilink" >
										<el-input  v-model="refenceLinkForm.doilink" placeholder="eg:https://doi.org/10.1002/cncr.30667"></el-input>
									</el-form-item>
								</el-form>             -->
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancelSave">Cancel</el-button>
                <el-button type="primary" @click="saveChange" v-if="dialogTitle == 'Edit'">Save</el-button>
                <el-button type="primary" @click="saveAdd" v-else>Save</el-button>
            </span>
        </el-dialog>
        <!-- 复制word添加引用 -->
        <el-dialog
            title="Add References'"
            :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>
</template>

<script>
import VueUeditorWrap from 'vue-ueditor-wrap'; // ES6 Module
export default {
    data() {
        return {
            ue: null,
            wordText: '',
            editorConfig: {
                // 访问 UEditor 静态资源的根路径，可参考 https://hc199421.gitee.io/vue-ueditor-wrap/#/faq
                UEDITOR_HOME_URL: '/UEditor/',
                // serverUrl: "//ueditor.zhenghaochuan.com/cos",
                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
        },
        chanFerForm: {
            type: Array,
            required: true
        },
        gridData: {
            type: String,
            required: true
        }
    },
    methods: {
		tableRowStyle({ row }) {
    if (row.is_repeat === 1) {
      return { backgroundColor: '#ffecec' };  // 浅红色
    }
    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();
        },
        // 删除部分引用
        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.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);
                                        });
                                }, 3000);
                            }
                        })
                        .catch((err) => {
                            console.log(err);
                        });
                } else {
                    this.$message.error('Please fill in the content!');
                }
            }
        },

        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);
        },
        // 显示修改引用
        change(row, optitle) {
            this.dialogTitle = optitle;
            this.editboxVisible = true;
            // console.log(this.refenceForm.content,55555)
            this.$nextTick(() => {
                // console.log(row,'row')
                this.refenceForm.doi = row.refer_doi;
                this.refenceForm.p_refer_id = row.p_refer_id;
                this.SourceType = row.refer_type;
                this.refenceForm.author = row.author;
                this.refenceForm.title = row.title;
                this.refenceForm.joura = row.joura;
                this.refenceForm.dateno = row.dateno;
                this.refenceForm.doilink = row.doilink;
                this.refenceForm.content = row.refer_frag;
                this.refenceForm.joura = row.joura;
                this.refenceForm.isbn = row.isbn;
            });
        },
        // 编辑引用
        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;
            this.addLoading = true;
            console.log(this.refenceForm);

            this.$api
                .post('api/Preaccept/editRefer', this.refenceForm)
                .then((res) => {
                    if (res.code == 0) {
                        this.addLoading = false;
                        this.$message.success('successed！');
                        //this.getRefData()
                        this.changeRefer();
                        this.cancelSave();
                    } else if (res.code == 1) {
                        this.addLoading = false;
                        this.$message.error(res.msg);
                    } else {
                        this.$message.error(res.msg);
                    }
                })
                .catch((err) => {
                    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)
                this.addLoading = true;
                this.$api
                    .post('api/Preaccept/addReferByParticleid', this.refenceForm)
                    .then((res) => {
                        if (res.code == 0) {
                            this.addLoading = false;
                            this.$message.success('successed！');
                            //this.getRefData()
                            this.changeRefer();
                            this.cancelSave();
                        } else if (res.code == 1) {
                            // doi 错误
                            this.addLoading = false;
                            this.$message.error(res.msg);
                            //  this.getRefData()
                            // this.cancelSave()
                        } else {
                            this.$message.error(res.msg);
                        }
                    })
                    .catch((err) => {
                        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.addLoading = true;
                this.$api
                    .post('/api/Preaccept/searchDoi', { doi: this.refenceForm.doi })
                    .then((res) => {
                        this.addLoading = false;
                        //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) => {
                        this.$message.error(e.msg);
                        this.addLoading = false;
                    });
            } else {
                //  console.log('不合格')
                this.$message.error('The Doi cannot be empty!');
            }
            // })
        },
        // 添加一行
        addLine(row, optitle) {
            // console.log(row)
            this.dialogTitle = optitle;
            // this.$refs['refenceForm'].clearValidate()
            this.editboxVisible = true;
            this.refenceForm.pre_p_refer_id = row.p_refer_id;
            this.refenceForm.p_article_id = this.p_article_id;

            // this.refenceLinkForm.pre_p_refer_id = row.p_refer_id
            //this.refenceLinkForm.article_id = this.$route.query.id

            this.$nextTick(() => {
                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(() => {
                    this.$api
                        .post('api/Preaccept/delRefer', {
                            p_refer_id: row.p_refer_id
                        })
                        .then((res) => {
                            if (res.code == 0) {
                                this.$message.success('remove successed!');
                                this.changeRefer();
                                // this.getRefData()
                            } else {
                                this.$message.error(res.msg);
                            }
                        })
                        .catch((err) => {
                            this.$message.error(err);
                        });
                })
                .catch(() => {
                    // this.$message({
                    //     type: 'info',
                    //     message: '已取消删除'
                    // });
                });
        },

        // 调整顺序
        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: {
        SourceType: {
            handler(newVal, oldVal) {
                this.$nextTick(() => {
                    // console.log('清空验证信息')
                    //  this.$refs['refenceLinkForm'].clearValidate()
                    this.$refs['refenceForm'].clearValidate();
                    // this.$refs['refenceForm'].resetFields()     // 表单重置
                });
            },
            // immediate: true,
            deep: true // 可以深度检测到 person 对象的属性值的变化
        }
    }
};
</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: 7px;
    border-radius: 0 0 7px 7px;
    left: 0;
    top: 0;
}
.status {
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 40px;
    font-size: 22px;
    line-height: 40px;
    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 {
    float: left;
    width: 24%;
    margin: 0 50px 0 0;
}

.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 {
    float: left;
    position: relative;
    width: 70.5%;
}

.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;
}
</style>
