<template>
    <div class="liter_ture" style="height: calc(100% - 20px)">
        <div class="handle-box">
            <!-- <el-input v-model="queryForm.doi" placeholder="Please enter Doi..." style="width: 200px"></el-input>
            <el-button type="primary" plain @click="init" style="margin-left: 15px">
                <i class="el-icon-search" style="margin-right: 5px"></i>{{ $t('citeList.search') }}
            </el-button> -->

            <el-button plain type="success" @click="showDialogSpecial" icon="el-icon-plus">{{ $t('citeList.add') }}</el-button>
            <el-button @click="refresh()" type="primary" icon="el-icon-refresh" style="float: right">
                {{ $t('citeList.refresh') }}
            </el-button>
        </div>

        <!-- <p style="text-indent: 2em"> -->

        <!-- </p> -->
        <div class="chanFerAll">
            <!-- 新的 -->

            <el-table
                :data="citeList"
                class="refTable"
                ref="multipleTable"
                @selection-change="RefenceSelectionChange"
                empty-text="New messages (0)"
                :stripe="false"
                :highlight-current-row="false"
                align="center"
            >
                <el-table-column type="index" label="No." width="55" align="center">
                    <template slot-scope="scope">
                        <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 != '') ||
                                    (scope.row.refer_type == 'other' && scope.row.refer_frag != '' && scope.row.refer_frag.length > 15)
                                "
                            >
                                <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="$t('citeList.articleInfo')">
                    <template slot-scope="scope">
                        <div>
                            <p v-if="scope.row.doi">
                                <span :style="`display: inline-block; width: ${tableWidth}px; color: #333; font-weight: 600`">Doi：</span
                                ><a class="doiLink" v-if="scope.row.doi" :href="`http://doi.org/${scope.row.doi}`" target="_blank">{{
                                    scope.row.doi
                                }}</a>
                            </p>
                            <p v-if="scope.row.author">
                                <span :style="`display: inline-block; width: ${tableWidth}px; color: #333; font-weight: 600`"
                                    >{{ $t('citeList.author') }}：</span
                                >{{ scope.row.author }}
                            </p>
                            <p v-if="scope.row.journal_name">
                                <span :style="`display: inline-block; width: ${tableWidth}px; color: #333; font-weight: 600`"
                                    >{{ $t('citeList.journalTitle') }}：</span
                                >{{ scope.row.journal_name }}
                            </p>
                            <p v-if="scope.row.article_name">
                                <span :style="`display: inline-block; width: ${tableWidth}px; color: #333; font-weight: 600`"
                                    >{{ $t('citeList.articleTitle') }}：</span
                                >{{ scope.row.article_name }}
                            </p>

                            <!-- <p style="margin-top: 8px">
                                    <a class="doiLink" v-if="scope.row.doilink" :href="scope.row.doilink" target="_blank">{{
                                        scope.row.doilink
                                    }}</a>
                                </p> -->
                        </div>
                    </template>
                </el-table-column>
                <el-table-column :label="$t('citeList.publicationTime')" width="60" align="center">
                    <template slot-scope="scope">
                        <p>{{ scope.row.vol }}</p>
                    </template>
                </el-table-column>
                <el-table-column :label="$t('citeList.is_wos')" width="80" align="center">
                    <template slot-scope="scope">
                        <span v-if="scope.row.is_wos == 0">{{ $t('citeList.is_china0') }}</span>
                        <p v-if="scope.row.is_wos == 1">{{ $t('citeList.yes') }}</p>
                        <p v-if="scope.row.is_wos == 2">{{ $t('citeList.no') }}</p>
                    </template>
                </el-table-column>
                <!-- <el-table-column :label="$t('citeList.date')" width="90" align="center">
                        <template slot-scope="scope">
                            {{ scope.row.date ? scope.row.date : '' }}
                        </template>
                    </el-table-column> -->
                <el-table-column :label="$t('citeList.factor')" width="80" align="center">
                    <template slot-scope="scope">
                        <span>{{ scope.row.factor ? scope.row.factor : '' }}</span>
                    </template>
                </el-table-column>

                <el-table-column :label="$t('citeList.is_china')" width="80" align="center">
                    <template slot-scope="scope">
                        <span v-if="scope.row.is_china == 0">{{ $t('citeList.is_china0') }}</span>
                        <span v-else-if="scope.row.is_china == 1">{{ $t('citeList.is_china1') }}</span>
                        <span v-else-if="scope.row.is_china == 2">{{ $t('citeList.is_china2') }}</span>
                        <span v-else></span>
                    </template>
                </el-table-column>

                <el-table-column align="center" width="160">
                    <!-- icon="el-icon-edit" -->
                    <div slot-scope="scope">
                        <el-button style="" @click="change(scope.row, 'Edit')" plain type="primary" size="mini">{{
                            $t('citeList.edit')
                        }}</el-button>
                        <el-button style="margin-left: 10px" @click="handleDelete(scope.row)" plain type="danger" size="mini">{{
                            $t('citeList.delete')
                        }}</el-button>
                    </div>
                </el-table-column>
            </el-table>

            <!-- end -->
        </div>
        <br clear="both" />
        <!-- <p v-if="this.citeList==''" 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
            v-loading="addLoading"
            :title="dialogTitle == 'Add' ? $t('citeList.add') : $t('citeList.edit')"
            :visible.sync="editboxVisible"
            width="1000px"
            :close-on-click-modal="false"
            @close="cancelSave"
        >
            <div class="yinyongPre c888" style="margin-bottom: 20px !important; color: #888; line-height: 24px; margin-top: -20px">
                <p>{{ $t('citeList.addInfo') }}</p>
            </div>

            <el-form :model="refenceForm" :rules="refenceFormrules" ref="refenceForm" label-width="150px" class="editForm mt10">
                <div>
                    <el-form-item label="Doi:" prop="doi" required>
                        <div v-if="doi_num == 1" style="display: flex; align-items: center; justify-content: space-between">
                            <div style="width: calc(100% - 100px)">{{ refenceForm.doi }}</div>

                            <el-button v-if="this.dialogTitle == 'Add'" type="primary" @click="reset()" icon="el-icon-refresh"
                                >ReSet</el-button
                            >
                        </div>

                        <div v-else>
                            <el-input v-model="refenceForm.doi" @change="changeDoi" @blur="chekDoi()">
                                <el-button @click="gotoFormate" slot="append">{{ $t('citeList.dialogQueryButton') }}</el-button>
                            </el-input>
                            <p class="zhushi">
                                {{ $t('citeList.dialogQueryButtonInfo') }}
                            </p>
                        </div>
                    </el-form-item>
                </div>
                <div>
                    <!-- 中间部分 -->

                    <el-form-item :label="$t('citeList.articleTitle')" required prop="article_name">
                        <p v-if="this.doi_num == 1 && doiForm.article_name && doiForm.article_name != ''">{{ refenceForm.article_name }}</p>
                        <el-input
                            v-else
                            :disabled="doiForm.article_name && doiForm.article_name != ''"
                            v-model="refenceForm.article_name"
                        ></el-input>
                    </el-form-item>

                    <el-form-item :label="$t('citeList.journalTitle')" required prop="journal_name">
                        <p v-if="this.doi_num == 1 && doiForm.journal_name && doiForm.journal_name != ''">{{ refenceForm.journal_name }}</p>
                        <el-input
                            v-else
                            :disabled="doiForm.journal_name && doiForm.journal_name != ''"
                            v-model="refenceForm.journal_name"
                        ></el-input>
                    </el-form-item>
                    <el-form-item :label="`${$t('citeList.author')}:`" prop="author">
                        <p v-if="this.doi_num == 1 && doiForm.author && doiForm.author != ''">{{ refenceForm.author }}</p>
                        <data v-else>
                            <el-input
                                v-model="refenceForm.author"
                                placeholder="Patel NM, Stottlemyer BA, Gray MP, Boyce RD, Kane Gill SL"
                            ></el-input>
                            <p class="zhushi">
                                {{ $t('citeList.authorInfo') }}
                            </p></data
                        >
                    </el-form-item>

                    <el-form-item :label="`${$t('citeList.publicationTime')}:`" required prop="vol">
                        <p v-if="this.doi_num == 1 && doiForm.vol && doiForm.vol != ''">{{ refenceForm.vol }}</p>

                        <el-input v-else v-model="refenceForm.vol" placeholder=""></el-input>
                        <!-- <el-input v-model="refenceForm.vol" placeholder="eg: 2023;8(9):49-62"></el-input> -->
                        <!-- <p class="zhushi">{{ $t('citeList.publicationTimeInfo') }}</p> -->
                    </el-form-item>
                    <el-form-item :label="$t('citeList.is_wos')" prop="is_wos">
                        <el-select v-model="refenceForm.is_wos" style="width: 100%" placeholder="">
                            <el-option v-for="item in is_wosList" :key="item.value" :label="item.title" :value="item.value"> </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item :label="$t('citeList.factor')" prop="factor">
                        <el-input-number v-model="refenceForm.factor" :precision="2" :step="0.1" :min="0"></el-input-number>
                    </el-form-item>
                    <el-form-item :label="$t('citeList.is_china')" prop="is_china">
                        <el-select v-model="refenceForm.is_china" placeholder="" style="width: 100%">
                            <el-option
                                v-for="item in is_chinaList"
                                controls-position="right"
                                :key="item.value"
                                :label="item.title"
                                :value="item.value"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                </div>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancelSave">{{ $t('citeList.cancel') }}</el-button>
                <el-button type="primary" @click="saveChange">{{ $t('citeList.save') }}</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import VueUeditorWrap from 'vue-ueditor-wrap'; // ES6 Module
export default {
    data() {
        return {
            tableWidth: !localStorage.getItem('langs') || localStorage.getItem('langs') == 'en' ? 100 : 70,
            queryForm: {},
            is_wosList: [
                { title: this.$t('citeList.yes'), value: 1 },
                { title: this.$t('citeList.no'), value: 2 },
                { title: this.$t('citeList.is_china0Info'), value: 0 }
            ],
            is_chinaList: [
                { title: this.$t('citeList.yes'), value: 1 },
                { title: this.$t('citeList.no'), value: 2 },
                { title: this.$t('citeList.is_china0Info'), value: 0 }
            ],
            citeList: [],
            doiForm: {}, //doi查询信息
            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: '', // 类型
                // journal_name: '',

                // isbn: '',
                // content: '',
                // title: ''
            },
            refenceFormrules: {
                doi: [{ required: false, message: this.$t('citeList.rulesDoiInfo'), trigger: 'blur' }],
                journal_name: [{ required: true, message: this.$t('citeList.rulesJournalInfo'), trigger: 'blur' }],
                // author: [{ required: true, message: this.$t('citeList.rulesAuthorInfo'), trigger: 'blur' }],
                vol: [{ required: true, message: this.$t('citeList.rulesVolInfo'), trigger: 'blur' }],
                article_name: [{ required: true, message: this.$t('citeList.rulesArticleInfo'), 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: [], // 多选
            doi_num: 0,
            urlList: {
                list: 'api/Publish/getArticleCites',
                refresh: 'api/Publish/refreshCite', //自动更新引用信息
                getDoiInfo: 'api/Publish/raboDataByDoi', //doi信息
                add: 'api/Publish/addPublicArticleCite', //添加
                edit: 'api/Publish/editArticleCite', //编辑
                delete: 'api/Publish/delArticleCite' //删除
            }
        };
    },
    props: {
        p_article_id: {
            type: null,
            required: true
        }
    },

    created() {
        this.init();
    },
    methods: {
        changeDoi() {
            // this.doiForm={
            // 	doi:''
            // }
            // console.log('this.doiForm at line 346:', this.doiForm,this.refenceForm)
        },
        init() {
            const loading = this.$loading({
                lock: true,
                text: 'Loading...',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
            this.$api
                .post(this.urlList.list, {
                    ...this.queryForm,
                    article_id: this.$route.query.article_id
                })
                .then((res) => {
                    this.citeList = res.data.list;
                    // this.Total = res.data.count;
                    loading.close();
                })
                .catch((err) => {
                    console.log(err);
                    loading.close();
                });
        },
        handleDelete(row) {
            this.$confirm(this.$t('citeList.deleteInfo'), this.$t('citeList.tip'), {
                type: 'warning'
            })
                .then(() => {
                    this.$api
                        .post(this.urlList.delete, { article_cite_id: row.article_cite_id })
                        .then((res) => {
                            if (res.code == 0) {
                                this.$message.success(res.msg);
                                this.init();
                            } else {
                                this.$message.error(res.msg);
                            }
                        })
                        .catch((err) => {
                            this.$message.error(err);
                        });
                })
                .catch(() => {});
        },
        refresh() {
            const loading = this.$loading({
                lock: true,
                text: 'Loading...',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
            this.$api
                .post(this.urlList.refresh, { article_id: this.$route.query.article_id, journal_id: this.$route.query.journal_id })
                .then((res) => {
                    setTimeout(() => {
                        this.init();
                        loading.close();
                    }, 200);
                })
                .catch((err) => {
                    console.log(err);
                    loading.close();
                });
        },
        reset() {
            this.showDialogSpecial();
        },
        showDialogSpecial() {
            this.doi_num = 0;
            this.doiForm = {};
            this.refenceForm = {};
            // 拷贝文本方式添加
            this.dialogTitle = 'Add';
            this.editboxVisible = true;
            this.$nextTick(() => {
                this.$refs['refenceForm'].clearValidate();
            });
        },
        bijiao() {
            if (this.citeList.length > 0) {
                // 如果有值，则默认展示第二步的内容
                this.showB_step = 2;
            }
        },

        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();
        },

        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';
            }
        },

        // 刷新组件
        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.doiForm = { ...row };
            this.refenceForm = { ...this.refenceForm, ...this.doiForm };
            this.doi_num = 1;
            this.editboxVisible = true;
        },
        // 编辑引用
        saveChange() {
            var journalValid = false;

            var doi = '';
            var article_name = '';
            var journal_name = '';

            this.$refs['refenceForm'].validateField('doi', (callback) => {
                doi = callback;
            });
            this.$refs['refenceForm'].validateField('article_name', (callback) => {
                article_name = callback;
            });

            this.$refs['refenceForm'].validateField('journal_name', (callback) => {
                journal_name = callback;
            });

            doi == '' && article_name == '' && journal_name == '' ? (journalValid = true) : '';

            if (journalValid) {
                if (JSON.stringify(this.doiForm) == '{}') {
                    var message = this.$t('citeList.dialogQueryButtonInfo');
                    this.$message.error(message);
                    return false;
                }
                this.addLoading = true;
                this.$api
                    .post(this.dialogTitle == 'Add' ? this.urlList.add : this.urlList.edit, {
                        ...this.refenceForm,
                        article_id: this.$route.query.article_id,
                        journal_id: this.$route.query.journal_id
                    })
                    .then((res) => {
                        if (res.code == 0) {
                            this.addLoading = false;
                            this.$message.success('successed！');

                            this.cancelSave();
                            this.init();
                        } else if (res.code == 1) {
                            // doi 错误
                            this.addLoading = false;
                            this.$message.error(res.msg);
                        } 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.doiForm = {};
            this.doi_num = 0;
            this.refenceForm.doi = '';
            this.dialogTitle = '';
        },
        chekDoi() {
            this.gotoFormate();
        },
        // 格式化
        gotoFormate() {
            // this.$refs['refenceForm'].validateField('doi', (callback)=>{
            if (this.refenceForm.doi && this.refenceForm.doi != '') {
                this.addLoading = true;
                this.$api
                    .post(this.urlList.getDoiInfo, { doi: this.refenceForm.doi })
                    .then((res) => {
                        console.log('res at line 833:', res);
                        this.addLoading = false;
                        //console.log(res)
                        if (res.code == 0) {
                            //this.tableData = res.data.refers
                            this.$nextTick(() => {
                                // if (res.data.result) {
                                this.doi_num = 1;
                                var result = res.data;
                                console.log('result at line 595:', result);
                                this.doiForm = {
                                    doi: this.refenceForm.doi,

                                    article_name: result.article_title ? result.article_title : '',
                                    journal_name: result.journal_title ? result.journal_title : '',
                                    vol: result.vol ? result.vol : '',
                                    author: result.author ? result.author : ''
                                };

                                this.refenceForm = { ...this.refenceForm, ...this.doiForm };
                                // }
                            });
                        } else {
                            this.doi_num = 2;

                            this.doiForm = {
                                doi: this.refenceForm.doi
                            };
                            this.$message.error(res.msg);
                        }
                    })
                    .catch((e) => {
                        this.doi_num = 2;
                        this.$message.error(e.msg);
                        this.addLoading = false;
                    });
            } else {
                //  console.log('不合格')
                this.$message.error(this.$t('citeList.rulesDoiInfo'));
            }
            // })
        },
        // 添加一行
        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.article_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: 20px;
}

.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: 100%;
}

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