<template>
    <div v-loading.fullscreen.lock="holeLoading">
        <div class="container" v-loading="importIoading" element-loading-text="In the process of importing, please wait">
            <div v-if="tableData.length == 0">
                <!-- 没有引用时 -->
                <!-- <div class="noneData">            
            <img src="../../assets/img/noneData.png" alt="" class="icon_img">
            <p class="nodatatext">TMR did not identify an available article citation in your latest uploaded document</p>             
          </div> -->
                <el-row :gutter="20">
                    <!-- 教程 -->
                    <el-col>
                        <div class="whoDo mt20">
                            <div>
                                <h2>
                                    What should I do
                                    <el-tooltip class="item" effect="light" content="click for more help" placement="right">
                                        <span class="el-icon-warning-outline help" @click="showHelp"></span>
                                    </el-tooltip>
                                </h2>
                                <p class="mt10 c666">you can add a citation in the following way.</p>
                                <ul>
                                    <!-- 文件上传的形式 -->
                                    <li>
                                        <div class="mt20">
                                            <h4>
                                                Add in bulk by uploading excel files &nbsp;&nbsp;
                                                <!-- <el-button class="inlinebutton" type="primary" plain size="mini" @click="showUpload">Add</el-button> -->
                                            </h4>
                                            <p class="mt10 c666">
                                                Before uploading the file, you need to download the template file,
                                                <a
                                                    href="https://submission.tmrjournals.com/public/system/refer.xlsx"
                                                    download="refer"
                                                    target="_blank"
                                                    class="downloadbtn"
                                                    >click download</a
                                                >
                                                ,to add your references to the template file, and upload it.
                                            </p>
                                            <div v-if="uploadVisible">
                                                <div class="uploadBox">
                                                    <el-upload
                                                        ref="uploadFile"
                                                        class="upload-demo up_newstyle mt10"
                                                        :action="upload_manuscirpt"
                                                        accept=".xlsx"
                                                        name="referFile"
                                                        :before-upload="beforeupload_manuscirpt"
                                                        :on-error="uperr_coverLetter"
                                                        :on-success="upSuccess_manuscirpt"
                                                        :limit="1"
                                                        :on-exceed="alertlimit"
                                                        :on-remove="removefilemanuscirpt"
                                                        :file-list="fileL_manuscirpt"
                                                    >
                                                        <div class="el-upload__text" @click="clearUploadedFile">
                                                            <em>Upload</em>
                                                        </div>
                                                    </el-upload>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <!-- 文本域 -->
                                    <!-- <li>
                        <div class="mt20">
                            <h4>Add in bulk by text field &nbsp;&nbsp;&nbsp;<el-button @click="addText" class="inlinebutton" type="primary" plain size="mini">Add</el-button></h4> 
                            <div v-if="textareaVisible">
                                <el-input class="textarea mt10"
                                type="textarea"
                                :rows="3"
                                placeholder="Put your reference entry here"
                                v-model="textarea">
                                </el-input>
                                <el-button class="mt10" icon="el-icon-check" type="primary" size="mini" @click="importText()">Import</el-button>
                            </div>
                        </div> 
                    </li> -->
                                </ul>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </div>
            <!-- 有引用数据-->
            <div v-else>
                <div class="topInfo">
                    <h3>Dear {{ user_name }}</h3>
                    <p class="mt10">Please check and modify the reference’s information on this page with the following instructions:</p>
                    <ul class="mt20">
                        <li>
                            <p>
                                - Please modify the reference in the
                                <span class="status warn float"><i class="el-icon-warning-outline"></i></span>
                                status, moving the reference information from
                                <span class="status warn float"><i class="el-icon-warning-outline"></i></span> status to
                                <span class="status ok float"><i class="el-icon-circle-check"></i></span> status.
                            </p>
                        </li>
                        <li>
                            <p>
                                - If you find the number of reference is disorder for technical reason, please click the
                                <el-button type="warning" size="mini" plain>↑</el-button>
                                and
                                <el-button type="warning" size="mini" plain>↓</el-button> behind each piece of information to adjust the
                                order of the data.
                            </p>
                        </li>
                        <li>
                            <p>
                                - Please click <el-button type="success" size="mini" plain>Add</el-button> to add another line of reference
                                information after this row.
                            </p>
                        </li>
                        <li>
                            <p>
                                - If you want to discard all references and import a new batch of reference information, please click
                                <el-button type="text" @click="removeAll">Delete and re-import</el-button>.
                            </p>
                        </li>
                        <li>
                            <p style="display: flex; align-items: center">
                                - Please note that if this status exists,
                                <span>
                                    <img
                                        src="../../assets/img/repeat.png"
                                        alt=""
                                        style="width: 24px; height: 24px; margin-left: 5px; margin-right: 5px"
                                    />
                                </span>
                                it indicates that the current reference is duplicated .
                            </p>
                        </li>
                        <li>
                            <p>
                                - Please do not forget to recheck all references in the
                                <span class="status ok float"><i class="el-icon-circle-check"></i></span> status,especially abbreviated
                                journal title.
                            </p>
                        </li>
                    </ul>
                </div>
                <div class="refenceCentent mt20">
                    <el-table
                        :data="tableData"
                        ref="multipleTable"
                        :row-style="tableRowStyle"
                        empty-text="New messages (0)"
                        :show-header="false"
                        :stripe="false"
                        :highlight-current-row="false"
                    >
                        <el-table-column type="index" label="No." width="60" align="center">
                            <template slot-scope="scope">
                                <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="left">
                            <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 == tableData.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>
            </div>
        </div>
        <!-- 修改引用 -->
        <el-dialog
            v-loading="addLoading"
            :title="dialogTitle + ' References'"
            :visible.sync="editboxVisible"
            width="800px"
            @close="cancelSave"
        >
            <p class="yinyongPre c888">
                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>
                        <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.</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.</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.</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.</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>
                    </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>
                    </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>
        <!-- 帮助信息 -->
        <el-dialog title="Any questions or Help" :visible.sync="helpVisible" width="500px">
            <div>
                <p class="mt20" style="line-height: 28px">
                    If you experience any problems, <br />
                    please contact us by publisher@tmrjournals.com
                </p>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="helpVisible = false" type="primary">OK</el-button>
            </span>
        </el-dialog>
        <!-- 临时引用信息 -->
        <el-dialog title="Reference List" :visible.sync="linVisible" width="800px">
            <div class="refenceCentent mt20" v-if="Tempredable.length > 0">
                <el-table
                    :data="Tempredable"
                    ref="tempredableTable"
                    max-height="400px"
                    empty-text="New messages (0)"
                    :show-header="false"
                    :stripe="false"
                    :highlight-current-row="false"
                >
                    <el-table-column type="index" label="No." width="55" align="center"></el-table-column>
                    <el-table-column label="Title" align="left">
                        <template slot-scope="scope">
                            <p style="text-align: left">
                                <!-- <el-badge is-dot :hidden="scope.row.author_act==1?false:true" class="item"> -->
                                {{ scope.row.content }}<br /><el-link type="primary">{{ scope.row.doi }}</el-link>
                                <!-- </el-badge> -->
                            </p>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="shuoming mt20">
                    <p class="c888">
                        <i class="el-icon-message-solid"></i>&nbsp;&nbsp;The above is the citation data identified according to your
                        uploaded file, you can choose to import, or discard this data and upload again.
                    </p>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="abandon">Abandon and Reimport</el-button>
                <el-button type="primary" @click="importText">Import</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            user_name: localStorage.getItem('U_relname'),
            holeLoading: false, // 进入页面的loading
            importIoading: false,
            baseUrl: this.Common.baseUrl,
            addLoading: false,
            SourceType: 'journal',
            sourceOptions: [
                {
                    value: 'journal',
                    label: 'journal'
                },
                {
                    value: 'book',
                    label: 'book'
                },
                {
                    value: 'other',
                    label: 'other'
                }
            ],
            // 引用数据列表
            tableData: [],
            // 临时引用列表
            Tempredable: [],
            editboxVisible: false,
            helpVisible: false,
            uploadVisible: true,
            linVisible: false,
            textarea: '',
            textareaVisible: false,
            fileL_manuscirpt: [],
            form: {
                referFile: ''
            },
            // 引用表单
            refenceForm: {
                doi: '',
                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' }]
            },
            // 引用表单
            //   refenceLinkForm:{
            //     author:'',
            //     title:'',
            //     joura:'',
            //     dateno:'',
            //     doilink:'',
            //     pre_p_refer_id:null, // 当前行一行的引用序号,
            //     article_id: null,
            //     p_refer_id: null,

            //   },
            //   refenceLinkFormrules:{
            //     author:[
            //     { required: true, message: 'The author cannot be empty', trigger: 'blur' },
            //     ],
            //     title:[
            //     { required: true, message: 'The title cannot be empty', trigger: 'blur' },
            //     ],
            //     dateno:[
            //     { required: true, message: 'The dateno cannot be empty', trigger: 'blur' },
            //     ],
            //     doilink:[
            //     { required: true, message: 'The doilink cannot be empty', trigger: 'blur' },
            //     ]
            //   },
            dialogTitle: ''
        };
    },
    created() {
        this.openFullScreen1();
        this.getRefData();
        this.holeLoading = true;
    },
    methods: {
        tableRowStyle({ row }) {
            if (row.is_repeat === 1) {
                return { backgroundColor: '#ffecec' }; // 浅红色
            }
            return {};
        },
        // 格式化
        gotoFormate() {
            // this.$refs['refenceForm'].validateField('doi', (callback)=>{
            if (this.refenceForm.doi != '') {
                this.holeLoading = true;
                this.$api
                    .post('/api/Preaccept/searchDoi', { doi: this.refenceForm.doi })
                    .then((res) => {
                        this.holeLoading = false;
                        // console.log(res)
                        if (res.code == 0) {
                            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.holeLoading = false;
                    });
            } else {
                this.$message.error('The Doi cannot be empty!');
            }
            // })
        },
        // 全页面加载动画
        openFullScreen1() {
            this.holeLoading = true;
        },
        // 获取引用文献信息
        getRefData() {
            this.$api
                .post('api/Preaccept/getArticleReferences', { article_id: this.$route.query.id })
                .then((res) => {
                    console.log(res);
                    if (res.code == 0 && res.data.refers.length > 0) {
                        this.tableData = res.data.refers;
                    }
                    this.holeLoading = false;
                })
                .catch((err) => {
                    console.log(err);
                });
        },
        // 放弃导入数据
        abandon() {
            this.form.referFile = '';
            this.fileL_manuscirpt = [];
            this.linVisible = false;
            this.Tempredable = [];
        },
        // 显示帮助信息
        showHelp() {
            this.helpVisible = true;
        },
        // 导入文本域
        importText() {
            this.linVisible = false;
            this.importIoading = true;
            //console.log(this.form.referFile,'referFile')
            this.$api
                .post('api/Preaccept/addRefersByExcel', {
                    article_id: this.$route.query.id,
                    referFile: this.form.referFile
                })
                .then((res) => {
                    if (res.code == 0) {
                        this.$message.success('Import succeeded');
                        this.linVisible = false;
                        this.Tempredable = [];
                        this.importIoading = false;
                        // 有可以可用的文献数据，刷新当前页面
                        // location.reload() // 刷新本页面
                        this.getRefData();
                    }
                })
                .catch((err) => {
                    console.log(err);
                });
        },
        // 文本域添加
        addText() {
            this.textareaVisible = true;
            this.uploadVisible = false;
        },
        showUpload() {
            this.textareaVisible = false;
            this.uploadVisible = true;
        },
        // 显示修改引用
        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;
            });
        },

        // 取消保存
        cancelSave() {
            this.editboxVisible = false;
            // refenceForm
            this.$refs['refenceForm'].clearValidate();
            this.$refs['refenceForm'].resetFields();
            this.refenceForm.doi = '';
            this.dialogTitle = '';
        },

        // 编辑引用
        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.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/addRefer', this.refenceForm)
                    .then((res) => {
                        if (res.code == 0) {
                            this.addLoading = false;
                            this.$message.success('successed！');
                            this.getRefData();
                            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;
            }
        },
        beforeupload_manuscirpt(file) {
            let flieArr = file.name.split('.');
            let fileSuffix = flieArr[flieArr.length - 1];
            console.log(fileSuffix);

            // return false
            if (fileSuffix != 'xlsx') {
                this.$message.error('Only excel and compressed files can be uploaded(.xlsx)');
                return false;
            }
            // const ismau =
            //     file.type === 'application/msword' ||
            //     file.type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' ||
            //     file.type === 'application/x-zip-compressed' ||
            //     file.name.split('.')[1] === 'rar';
            // if (!ismau) {
            //     this.$message.error('Only word and compressed files(.doc,.docx,.rar,.zip)');
            // }
            // return ismau;
        },
        uperr_coverLetter(err) {
            this.$message.error('Upload error');
        },
        upSuccess_manuscirpt(res, file) {
            if (res.code == 0) {
                this.form.referFile = res.upurl;
                this.fileL_manuscirpt = [{}];
                this.fileL_manuscirpt[0].name = 'referFile';
                this.fileL_manuscirpt[0].url = res.upurl;
                if (res.refers.length > 0) {
                    this.Tempredable = res.refers;
                    this.linVisible = true;
                }
            } else {
                this.$message.error('service error: ' + res.msg);
            }
        },
        //超出传送文件个数限制
        alertlimit() {
            this.$message.error('The maximum number of uploaded files has been exceeded');
        },
        removefilemanuscirpt(file, fileList) {
            this.form.referFile = '';
            this.fileL_manuscirpt = [];
            this.$message.success('Deletion succeeded!');
            // this.$api
            // 	.post('api/Article/delArticleFile', {
            // 		file_id: this.form.manuscirptId
            // 	})
            // 	.then((res) => {
            // 		if (res.code == 0) {
            // 			this.$message.success('Deletion succeeded!');
            // 		} else {
            // 			this.$message.error(res.msg);
            // 		}
            // 	});
        },
        clearUploadedFile() {
            this.$refs['uploadFile'].clearFiles();
        },
        // 清空引用文献
        removeAll() {
            this.$confirm('Are you sure you want to empty the reference?', 'Tips', {
                confirmButtonText: 'Sure',
                cancelButtonText: 'Cancel',
                type: 'warning'
            })
                .then(() => {
                    this.$api
                        .post('api/Preaccept/discardRefers', {
                            article_id: this.$route.query.id
                        })
                        .then((res) => {
                            if (res.code == 0) {
                                this.$message.success('success！');
                                location.reload(); // 刷新本页面
                            } else {
                                this.$message.error(res.msg);
                            }
                        })
                        .catch((err) => {
                            this.$message.error(err);
                        });
                })
                .catch(() => {});
        },
        // 添加一行
        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.article_id = this.$route.query.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.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.getRefData();
                    } else {
                        this.$message.error(res.msg);
                    }
                })
                .catch((err) => {
                    this.$message.error(err);
                });
            // this.$message({
            //     type: 'success',
            //     message: 'remove successed!'
            // });
            // }).catch(()=>{});
        }
    },
    computed: {
        upload_manuscirpt: function () {
            // return this.baseUrl + 'api/Article/up_file/type/manuscirpt';
            return this.baseUrl + 'api/Preaccept/up_refer_file';
        }
    },
    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>
.line {
    border: 1px dashed #ebebeb;
    margin: 15px 0;
}
.tip {
    background: #e6effb;
    padding: 2px;
    font-style: normal;
    border-radius: 10px;
}
.wrongLine {
    color: #f15f44;
}
.doiLink {
    color: #409eff;
}
.editForm {
    background-color: #f9f9f9;
    padding: 20px 0;
    padding-right: 20px;
}
.yinyongPre {
    line-height: 28px;
    margin-bottom: 20px;
}
.shuoming {
    font-size: 14px;
    line-height: 26px;
}
.shuoming i {
    color: #f5bf6d;
}
.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;
}
.topInfo {
    padding: 20px;
}
.topInfo ul {
    padding-left: 30px;
}
.topInfo ul li {
    margin-top: 10px;
}
.downloadbtn {
    font-weight: bold;
    color: #409eff !important;
}
.uploadBox {
    width: 400px;
}
.el-upload__text {
    width: 80px;
    height: 80px;
    text-align: center;
    line-height: 80px;
}
.help {
    font-size: 18px;
    color: #f5bf6d;
    cursor: pointer;
}
.el-alert__title {
    font-size: 26px;
}
.mt20 {
    margin-top: 20px;
}
.content_box {
    padding: 15px 10px;
    border: 3px dashed #eff6ff;
}
.flexbox {
    display: flex;
}
p {
    color: #333;
    font-size: 14px;
}
.mt10 {
    margin-top: 10px;
}
.more {
    font-weight: bold;
}
.noneData {
    margin: 30px 0;
    padding: 20px;
    border: 3px dashed #f8f8f8;
}
.noneData img {
    display: block;
    margin: 10px auto;
    opacity: 0.5;
    width: 100px;
}
.nodatatext {
    color: #666;
    text-align: center;
}
.zhushi {
    color: #999;
    font-size: 12px;
}
.whoDo {
    background: #eef7f9;
    padding: 30px;
}

.whoDo ul {
    padding-left: 20px;
}
.helpcontent {
    color: #888;
    margin-top: 150px;
}
.helpcontent p {
    color: inherit;
    font-size: 12px;
}
.c666 {
    color: #666;
}
.c888 {
    color: #888;
}

/deep/ .el-table tr:nth-child(2n) {
    background: #fff;
}
</style>
