<template>
    <div style="height: 100%">
        <div
            class="container"
            style="
                height: 100%;
                min-width: calc(1000px);
                width: calc(100%);
                background-color: #fafafa;
                padding: 0px 0 0 0;
                box-sizing: border-box;
                position: relative;
                box-sizing: border-box;
            "
        >
            <div
                class="right-side"
                style="
                    width: 240px;
                    float: left;
                    height: 100%;
                    background-color: #fff;
                    box-shadow: 0 1px 3px rgb(16 17 19 / 6%);
                    border-radius: 4px;
                    overflow-y: auto;
                "
            >
 

                <div class="unfetteredBox" style="height: 100%">
                    <commonCatalogue
                        :urlList="{
                            img: 'api/Preaccept/getMainImages',
                            table: 'api/Preaccept/getMainTables'
                        }"
                        :articleId="articleId"
                        :content="ManuscirptContent"
                        ref="commonWordHtmlTypeSetting"
                        @onDragStart="onDragStart"
                        @huifu="huifu"
                        @onAddComment="onAddComment"
                        @addImage="handleImageAdd"
                        @addTable="handleTableAdd"
                        @handlePaperclip="handlePaperclip"
                        @addComment="addCommentSetting"
                        @goToComment="goToComment"
                        @edit="handleImageEdit"
                        @goToListComment="goToListComment"
                        style="width: 100%; height: 100%; padding: 0 0px; box-sizing: border-box; background-color: #fff"
                    >
                    </commonCatalogue>
                    <input type="file" ref="fileInput" style="display: none" @change="handleFileChange" />
                </div>
            </div>
            <div style="width: 100%; width: calc(100% - 285px); float: right; height: calc(100% - 0px); background-color: #e4e9ed">
                <!-- <div class="toolbar">
                  <div class="toolbar_item" @click="handleImageAdd('img')">
                      <img src="@/assets/img/upload.png" style="object-fit: contain" />
                      <span>Add Figure </span>
                  </div>
                  <div class="toolbar_item" @click="handleTableAdd('table')">
                      <img src="@/assets/img/uploadTable.png" style="object-fit: contain" />
                      <span>Add Table </span>
                  </div>
              </div> -->

                <common-word
                  
                    v-if="htmlContent"
                    ref="commonWord"
                    :value="htmlContent"
                    :contentList="Main_List"
                    :comments="comments"
                    :wordStyle="wordStyle"
                    @onDrop="onDrop"
                    @saveContent="saveContent"
                    @editComment="editComment"
                    @loaded="loadedWord"
                    @onEdit="onEdit"
                    @addContent="onAddContent"
                   
                    @changeSort="changeSort"
                    @onDelete="onDelete"
                    @onDeletes="onDeletes"
                    @refresh="onRefresh"
                    @onComment="onComment"
                    @onAddComment="onAddComment"
                    @solveComment="solveComment"
                    @cancelSolveComment="cancelSolveComment"
                    @replyComment="replyComment"
                    @deleteComment="deleteComment"
                    @editProofreading="editProofreading"
                    @revokeProofreading="revokeProofreading"
                    @executeProofreading="executeProofreading"
                    @deleteProofreading="deleteProofreading"
                    @onEditTitle="onEditTitle"
                    @onAddRow="onAddRow"
                    @changeComment="changeComment"
                    style="width: calc(100%); height: calc(100%)"
                    :style="`100%`"
                >
                    <template slot="comment">
                        <div style="" class="commentList annotations"></div>
                    </template>
                </common-word>
            </div>
        </div>

        <!--添加/修改图片 -->
        <el-dialog :title="picStyle.visiTitle" :visible.sync="pictVisible" width="1200px" :close-on-click-modal="false">
            <el-form ref="editMes" :model="picStyle" label-width="150px">
                <el-form-item>
                    <span slot="label">
                        <font style="color: #f56c6c; margin-right: 5px">*</font>
                        Figure :
                    </span>
                    <el-upload
                        :data="{ article_id: articleId }"
                        class="avatar-uploader"
                        :action="baseUrl + 'api/Preaccept/up_img_mainImage'"
                        :show-file-list="false"
                        name="mainImage"
                        accept=".jpg,.jpeg,.png,.tif"
                        :on-success="handleAvatarSuccess"
                        :on-error="handleAvatarError"
                        :before-upload="beforeAvatarUpload"
                    >
                        <img v-if="picStyle && picStyle.picUrl" :src="mediaUrl + picStyle.picUrl" class="avatar" />
                        <i class="el-icon-plus avatar-uploader-icon" v-else></i>
                    </el-upload>
                </el-form-item>

                <el-form-item label="Figure Title :">
                    <common-content
                        :isAutomaticUpdate="true"
                        :value="picStyle.title"
                        @getContent="getContent"
                        @openLatexEditor="openLatexEditor"
                        v-if="pictVisible"
                        @updateChange="(res) => updateChange(res, 'imgTitle')"
                        :height="200"
                        ref="tinymceChildImgTitle"
                        style="margin-left: -115px"
                    ></common-content>
                </el-form-item>
                <el-form-item label="Figure Describe :">
                    <common-content
                        :isAutomaticUpdate="true"
                        :value="picStyle.note"
                        @getContent="getContent"
                        @openLatexEditor="openLatexEditor"
                        v-if="pictVisible"
                        @updateChange="(res) => updateChange(res, 'imgNote')"
                        :height="400"
                        ref="tinymceChildImgNote"
                        style="margin-left: -115px"
                    ></common-content>
                </el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button @click="pictVisible = false"> Cancel </el-button>
                <el-button type="primary" @click="savePic">
                    <i class="el-icon-finished" style="margin-right: 5px"></i>
                    Save Figure
                </el-button>
            </span>
        </el-dialog>

        <!-- 添加表格 -->
        <el-drawer
            title="我嵌套了表格!"
            class="editTableDialog"
            destroy-on-close
            v-if="threeVisible"
            :title="lineStyle.visiTitle"
            :visible.sync="threeVisible"
            :wrapperClosable="false"
            :close-on-click-modal="false"
            direction="rtl"
            size="80vw"
        >
            <el-form ref="editMes" :model="lineStyle" label-width="80px">
                <!-- <common-late-x></common-late-x> -->
                <!-- :id="`editor-${new Date().getTime()}-${lineStyle.am_id}-${lineStyle.amt_id}-title`" -->
                <el-form-item label="Title:">
                    <common-content
                        :id="`editor-${new Date().getTime()}-${lineStyle.am_id}-${lineStyle.amt_id}-title`"
                        :isAutomaticUpdate="true"
                        :value="lineStyle.title"
                        @getContent="getContent"
                        @openLatexEditor="openLatexEditor"
                        v-if="threeVisible"
                        @updateChange="(res) => updateChange(res, 'title')"
                        :height="120"
                        ref="tinymceChildTitle"
                        style="margin-left: -115px"
                    ></common-content>
                </el-form-item>
                <el-form-item label="Word">
                    <span slot="label">
                        <font style="color: #f56c6c; margin-right: 5px">*</font>
                        Table:
                    </span>
                    <common-table
                        @getContent="getContent"
                        v-if="threeVisible"
                        ref="commonTable"
                        @openLatexEditor="openLatexEditor"
                        :lineStyle="lineStyle"
                    ></common-table>
                </el-form-item>
                <el-form-item label="Note:">
                    <!-- :id="`editor-${new Date().getTime()}-${lineStyle.am_id}-${lineStyle.amt_id}-note`" -->
                    <common-content
                        :id="`editor-${new Date().getTime()}-${lineStyle.am_id}-${lineStyle.amt_id}-note`"
                        :isAutomaticUpdate="true"
                        :value="lineStyle.note"
                        @getContent="getContent"
                        @openLatexEditor="openLatexEditor"
                        v-if="threeVisible"
                        @updateChange="(res) => updateChange(res, 'note')"
                        :height="120"
                        ref="tinymceChildNote"
                    ></common-content>
                </el-form-item>
            </el-form>
            <p style="margin-top: 20px; text-align: right">
                <el-button @click="threeVisible = false"> Cancel </el-button>
                <el-button
                    type="primary"
                    plain
                    @click="handleSaveTable"
                    style="background-color: #006699 !important; background: #006699 !important; margin-right: 20px; color: #fff !important"
                >
                    save Table
                </el-button>
            </p>
        </el-drawer>
        <el-drawer
            title="我嵌套了表格!"
            class="editTableDialog"
            destroy-on-close
            v-if="tablesHtmlVisible"
            :title="lineStyle.visiTitle"
            :visible.sync="tablesHtmlVisible"
            :wrapperClosable="false"
            :close-on-click-modal="false"
            direction="rtl"
            size="80vw"
        >
            <div style="display: flex; flex-wrap: wrap; gap: 10px; justify-content: start">
                <div v-for="(item, i) in uploadWordTables" class="uploadWordTableBox">
                    <el-button @click="addUploadWordTable(item)" size="mini" class="insertTable"> 插入 </el-button>
                    <div class="thumbnailTableBox wordTableHtml table_Box pMain myeditabledivTable drop-target">
                        <p style="font-size: 12px; padding: 10px; box-sizing: border-box">Table {{ i + 1 }}</p>
                        <table border="1" :style="`width: 800px;zoom:${zoomNum};border-collapse: collapse; text-align: center`">
                            <tr
                                v-for="(row, i) in item.table_data"
                                :key="i"
                                :class="{ 'table-header-row': isHeaderRow(i, item.table_data) }"
                            >
                                <td
                                    style="font-size: 20px"
                                    v-for="(cell, i1) in row"
                                    :key="i1"
                                    :colspan="`${cell.colspan || 1}`"
                                    :rowspan="`${cell.rowspan || 1}`"
                                >
                                    <span v-html="cell.text"></span>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </el-drawer>
        <el-dialog
            destroy-on-close
            v-if="commentVisible"
            title="Comment"
            :visible.sync="commentVisible"
            width="600px"
            :close-on-click-modal="false"
        >
            <el-form ref="editMes" :model="commentForm" label-width="115px">
                <el-form-item label="Select Content:" v-if="commentForm.content">
                    <p
                        style="background: #eef0f4; line-height: 20px; padding: 10px; box-sizing: border-box"
                        v-html="commentForm.content"
                    ></p>
                </el-form-item>
                <el-form-item label="Word">
                    <span slot="label">
                        <font style="color: #f56c6c; margin-right: 5px">*</font>
                        Comment :
                    </span>

                    <tinymce
                        ref="tinymceChildComment"
                        @getContent="getContent"
                        :value="commentForm.remark"
                        class="paste-area text-container"
                        toolbar="bold italic subscript superscript clearButton "
                        style=""
                    ></tinymce>
                </el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button @click="commentVisible = false"> Cancel </el-button>
                <el-button type="primary" @click="handleSaveComment">
                    <!-- <i class="el-icon-finished" style="margin-right: 5px"></i> -->
                    Save Comment
                </el-button>
            </span>
        </el-dialog>
        <el-dialog
            destroy-on-close
            v-if="editVisible"
            title="Edit Content"
            :visible.sync="editVisible"
            width="1200px"
            :close-on-click-modal="false"
        >
            <el-form ref="editMes" :model="contentStyle" label-width="115px">
                <el-form-item label="Word">
                    <span slot="label">
                        <font style="color: #f56c6c; margin-right: 5px">*</font>
                        Content :
                    </span>
                    <common-content
                        :value="currentContent.content"
                        @getContent="getContent"
                        @openLatexEditor="openLatexEditor"
                        v-if="editVisible"
                        ref="commonContent"
                        style="margin-left: -115px"
                    ></common-content>
                </el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button @click="editVisible = false"> Cancel </el-button>
                <el-button type="primary" @click="handleSaveContent">
                    <!-- <i class="el-icon-finished" style="margin-right: 5px"></i> -->
                    Save
                </el-button>
            </span>
        </el-dialog>
        <el-dialog
            destroy-on-close
            v-if="addContentVisible"
            title="Add Content"
            :visible.sync="addContentVisible"
            width="1200px"
            :close-on-click-modal="false"
        >
            <el-form ref="editMes" :model="addContent" label-width="115px">
                <el-form-item label="Word">
                    <span slot="label">
                        <font style="color: #f56c6c; margin-right: 5px">*</font>
                        Content :
                    </span>
                    <common-content
                        :value="addContent.content"
                        @getContent="getContent"
                        @openLatexEditor="openLatexEditor"
                        v-if="addContentVisible"
                        ref="addContent"
                        style="margin-left: -115px"
                    ></common-content>
                </el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button @click="editVisible = false"> Cancel </el-button>
                <el-button type="primary" @click="handleSaveAddContent">
                    <!-- <i class="el-icon-finished" style="margin-right: 5px"></i> -->
                    Save
                </el-button>
            </span>
        </el-dialog>
       
        <common-late-x v-if="showLateX" @close="showLateX = false" @save="saveLateX" :LateXInfo="LateXInfo"></common-late-x>
    </div>
</template>

<script>
import commonCatalogue from '@/components/page/components/OnlineProofreading/catalogue.vue'

import bus from '@/components/common/bus';
import { del, isShallow } from 'vue';
import Tiff from 'tiff.js';
import { mediaUrl } from '@/common/js/commonJS.js'; // 引入通用逻辑
import Tinymce from '@/components/page/components/Tinymce';
import bottomTinymce from '@/components/page/components/Tinymce';
export default {
    data() {
        return {
            zoomNum: (window.innerWidth * 0.38) / 850,
            uploadWordTables: [],
            tablesHtmlVisible: false,
            tablesHtml: '',
            LateXInfo: {},
            isEditComment: false,
            showLateX: false,
            comments: [],
            remarkImageUrl: 'https://submission.tmrjournals.com/public/usericon/20241222/4e77ba3f29ce3cf798b36f24dc411b76.png',
            isFirstComponentLoaded: false,
            isWordComponentLoaded: false,
            currentContent: null,
            editVisible: false,
            currentId: null,
            ManuscirptContent: [],
            articleId: this.$route.query.id,
            isShowComment: false,
            urlList: {
                executeProofreading: 'api/Proofread/change',
                delete: 'api/Preaccept/delArticleMains',
                addRow: 'api/Preaccept/addBlankRow',
                addComment: 'api/Preaccept/createArticleMainCheckForEditor',
                editComment: 'api/Preaccept/editArticleMainCheck',
                solveComment: 'api/Preaccept/completeArticleMainCheckForAuthor',
                cancelSolveComment: 'api/Preaccept/rejectArticleMainCheckForEditor',
                deleteComment: 'api/Preaccept/delArticleMainCheckForEditor',
                replyComment: 'api/Preaccept/rejectArticleMainCheckForAuthor',
                content: 'api/Preaccept/getArticleMainsRecycle',
                huifuContent: 'api/Preaccept/replyArticleRecycle',
                editContent: 'api/Preaccept/editArticleMainsForAuthor',
                setPositioningTable: 'api/Preaccept/positioningTable',
                removePositioningTable: 'api/Preaccept/removeTable',
                setPositioningImage: 'api/Preaccept/positioningImage',
                removePositioningImage: 'api/Preaccept/removeImage',
                addImage: 'api/Preaccept/addMainImage',
                editImage: 'api/Preaccept/editMainImage',
                addTable: 'api/Preaccept/addMainTable',
                editTable: 'api/Preaccept/editMainTable'
            },
            wordStyle: `
          // p {
          // position: relative;
          // padding: 8px 15px;
          // min-height: 22px;
          // border: 2px dashed #fff;
          // border-radius: 5px;
          // color: #606266;
          // }
          // p {
          // font-size: 14px;
          // line-height: 22px;
          // }

          .imgBox .chNumer {
          position: absolute;
          top: -2px;
          right: -1px;
          border-radius: 3px;
          font-size: 10px;
          background-color: rgb(0 102 153 / 85%);
          color: #fff;
          padding: 0 6px;
          }

          .MaxPicture {
          text-align: center;
          }

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

          .font {
          display: block;
          margin: 0 auto;
          font-size: 13px;
          }
          .tableTitle{
              text-align:center!important;
              font-weight: bold;
          }
          `,
            tables: [],
            htmlContent: '',

            baseUrl: this.Common.baseUrl,
            // baseUrl: 'https://submission.tmrjournals.com/',
            // mediaUrl: this.Common.mediaUrl,//暂时注释2024121601
            mediaUrl: mediaUrl, //
            Art_Id: this.$route.query.id,
            Art_Doi: this.$route.query.doi,
            Art_web_Id: this.$route.query.artID,
            Art_P_Id: '',
            btnDisble: true,
            detailTitle: '',
            Main_List: [],
            txtStyle: {
                text: '',
                ChGtpTxt: ''
            },
            txtVisible: false,
            addContentVisible: false,
            editProofreadingContentVisible: false,
            proofreadingContent: {},
            addContent: {},
            lineStyle: {},
            lineStyle1: {},
            contentStyle: {},
            lineTable: [],
            threeVisible: false,
            picStyle: {},
            picStyle1: {},
            commentForm: {},
            commentVisible: false,
            pictVisible: false,
            typesettingType: 1,
            imagesList: [],
            exegesis: "The following contents'<b></b>,<i></i>'are necessary for the generation phase, please do not delete them!!!"
        };
    },
    components: {
        Tinymce,
        bottomTinymce,
        commonCatalogue
    },
    computed: {
        combinedValue() {
            // 将两个值组合成一个新的值，可以是字符串、数组、对象等
            // return `${this.isFirstComponentLoaded}-${this.isWordComponentLoaded}`;
        }
    },
    watch: {
        // 监听计算属性
        // combinedValue(newVal, oldVal) {
        //     console.log('value1 或 value2 发生变化');
        //     console.log('新值:', newVal);
        //     console.log('旧值:', oldVal);
        //     // 处理任意一个值变化的逻辑
        //     this.updateWordTiffImage(newVal);
        // }
    },

    directives: {
        // 注册一个局部的自定义指令 v-focus
        focus: {
            // 指令的定义
            inserted: function (el) {
                // 聚焦元素
                el.querySelector('textarea').focus();
            }
        }
    },
    async created() {
        // await this.$api.post('api/Proofread/proofRead', {
        //     article_id: this.$route.query.id
        // });
        localStorage.removeItem('scrollPosition');
        this.isShowEditComment();
        this.getDate();
        this.getCommentList();
        // this.loadDictionary().catch(console.error);
    },
    mounted() {},
    async activated() {
        // await this.$api.post('api/Proofread/proofRead', {
        //     article_id: this.$route.query.id
        // });
        this.isShowEditComment();
        this.getDate();
        this.getCommentList();
    },

    methods: {
        async copyArray(data) {
            try {
                // 将数组内容转换为字符串，使用换行符分隔
                const textToCopy = JSON.stringify(data);

                // 使用 Clipboard API 复制文本
                await navigator.clipboard.writeText(textToCopy);
                alert('数组内容已复制到剪贴板!');
            } catch (err) {
                console.error('复制失败:', err);
                alert('复制失败，请重试!');
            }
        },
        openLatexEditor(data) {
            this.showLateX = true;
            this.LateXInfo = data;
        },
        isShowEditComment() {
            if (localStorage.getItem('U_role')) {
                var identity = localStorage.getItem('U_role');
                if (identity.includes('editor')) {
                    this.isEditComment = true;
                } else {
                    this.isEditComment = false;
                }
            }
        },

        loadedWord() {
            this.isWordComponentLoaded = true;
        },
        // 监听第一个兄弟组件加载完毕
        // onFirstComponentLoaded(imagesList) {
        //     this.imagesList = [...imagesList];
        //     this.isFirstComponentLoaded = true;
        // },
        // updateWordTiffImage(data) {
        //     console.log('updateWordTiffImage at line 423:', data);

        //     if (this.isFirstComponentLoaded && this.isWordComponentLoaded) {
        //         this.imagesList.forEach((e) => {
        //             if (e.dataUrl) {
        //                 this.$nextTick(() => {
        //                     this.$refs.commonWord.replacePlaceholderImage(e.ami_id, e.dataUrl);
        //                 });
        //             }
        //         });
        //     }
        // },
        handleSaveContent() {
            this.$refs.commonContent.getTinymceContent('content');
        },
        handleSaveAddContent() {
            this.$refs.addContent.getTinymceContent('addcontent');
        },
        handleSaveEditProofreadingContent() {
            this.$refs.addContent.getTinymceContent('addcontent');
        },

        async getContent(type, content) {
            if (type == 'content') {
                content = this.$commonJS.transformHtmlString(content);
                var div = document.createElement('div');
                div.innerHTML = content; // 将 HTML 字符串加载到 div 中
                // 替换所有 <strong> 为 <b>
                var strongTags = div.getElementsByTagName('strong');
                for (var i = 0; i < strongTags.length; i++) {
                    var bTag = document.createElement('b');
                    bTag.innerHTML = strongTags[i].innerHTML; // 保留内容
                    strongTags[i].parentNode.replaceChild(bTag, strongTags[i]);
                }
                // 替换所有 <em> 为 <i>
                var emTags = div.getElementsByTagName('em');
                for (var i = 0; i < emTags.length; i++) {
                    var iTag = document.createElement('i');
                    iTag.innerHTML = emTags[i].innerHTML; // 保留内容
                    emTags[i].parentNode.replaceChild(iTag, emTags[i]);
                }

                // 获取最终修改后的 HTML
                content = div.innerHTML;

                this.saveContent(content, this.currentContent.am_id);
            } else if (type == 'addcontent') {
                var hasTable = /<table[\s\S]*?>[\s\S]*?<\/table>/i.test(content);

                if (hasTable) {
                    this.$message({
                        type: 'warning',
                        message: 'Table content is not supported!'
                    });
                    return false;
                }
                var list = this.$commonJS.cleanAndParseWordContent(content);
                console.log('list at line 569:', list);

                this.saveContentList(list, this.currentId);
            } else if (type == 'table') {
                this.saveTable(content);
            } else if (type == 'comment') {
                this.addComment(content);
            }
        },
        async saveContent(content, am_id) {
            var that = this;
            var str = content.replace(/^<p>\s*(.*?)\s*<\/p>$/, '$1').trim();
           
            str = await that.$commonJS.decodeHtml(str);

            await that.$api
                .post(that.urlList.editContent, {
                    am_id: am_id,
                    content: str
                })
                .then(async (res) => {
                    if (res.code == 0) {
                        this.editVisible = false;
                        this.getDate();
                        this.getCommentList();
                    }
                });
        },
        async saveContentList(content, am_id) {
            if (content.length == 0) {
                this.$message({
                    type: 'warning',
                    message: 'Please enter the content!'
                });
            }

            await this.$api
                .post('api/Preaccept/addMoreRow', {
                    article_id: this.articleId,
                    am_id: am_id,
                    rows: content
                })
                .then(async (res) => {
                    if (res.code == 0) {
                        this.addContentVisible = false;
                        this.getDate();
                        this.getCommentList();
                    }
                });
        },
        isHeaderRow(rowIndex, table) {
            var table = table;

            var head = table[0];

            return rowIndex < head[0].rowspan; // 假设前两行是表头
        },
        deleteComment(comment, index) {
            console.log('comment at line 480:', comment);
            if (this.isEditComment) {
                this.$confirm(this.$t('commonTable.removeAnnotations'), 'Prompt', {
                    confirmButtonText: 'Submit',
                    cancelButtonText: 'Cancel',
                    type: 'warning'
                })
                    .then(() => {
                        this.$api
                            .post(this.urlList.deleteComment, {
                                amc_id: comment.amc_id
                            })
                            .then((res) => {
                                if (res.code == 0) {
                                    this.getDate();
                                    this.getCommentList();
                                } else {
                                    this.$message.error(res.msg);
                                }
                            });
                        // this.comments.splice(index, 1); // 删除评论
                    })
                    .catch(() => {});
            }
        },
        saveLateX(data) {
            console.log('data at line 735:', data);
            const { editorId, wmathId, latex } = data;
            const newLatex = latex ? latex.trim() : '';
            if (!editorId || !wmathId) return;
            const targetEditor = tinymce.get(editorId);
            if (!targetEditor) return;
            const targetWmath = targetEditor.dom.select(`wmath[data-id="${wmathId}"]`, targetEditor.getBody())[0];
            if (targetWmath) {
                if (!newLatex) {
                    // ❌ 删除公式
                    targetEditor.dom.remove(targetWmath);
                } else {
                    // ✅ 更新公式
                    targetWmath.setAttribute('data-latex', newLatex);
                    targetWmath.innerHTML = newLatex;

                    setTimeout(() => {
                        if (typeof renderMathJax === 'function') {
                            // this.window.renderMathJax(editorId);
                        }
                    }, 10);
                }
            }
        },
        async huifu(id) {
            var that = this;
            await this.$confirm(this.$t('commonTable.reContent'), 'Prompt', {
                confirmButtonText: 'Submit',
                cancelButtonText: 'Cancel',
                type: 'warning'
            })
                .then(async () => {
                    var that = this;
                    await that.$api
                        .post(that.urlList.huifuContent, {
                            am_id: id
                        })
                        .then(async (res) => {
                            if (res.code == 0) {
                                this.getDate();
                            }
                        });
                })
                .catch((err) => {
                    console.log('err at line 466:', err);
                });
        },
        async getManuscirptContent() {
            var that = this;
            await that.$api
                .post(that.urlList.content, {
                    article_id: this.articleId
                })
                .then(async (res) => {
                    if (res.code == 0) {
                        this.ManuscirptContent = res.data.list;
                        // this.$refs.commonWordHtmlTypeSetting.getCommentList();
                    }
                });
        },
        changeComment() {
            this.isShowComment = !this.isShowComment;
        },

        // 编辑评论，显示文本框
        goToListComment(id, type) {
            var am_id;
            if (type == 'img') {
                am_id = this.Main_List.find((item) => item.ami_id == id).am_id;
            } else {
                am_id = this.Main_List.find((item) => item.amt_id == id).am_id;
            }
            if (am_id) {
                this.goToComment(am_id);
            }
        },
        goToComment(mainId) {
            this.$nextTick(() => {
                this.$refs.commonWord.goToComment(mainId);
            });
        },
        getTables(tables, html) {
            this.tables = data.map((e, i) => ({ ...e, p_main_table_id: 2141 + i, p_article_id: 2141 }));
            this.tablesHtml = html;
        },
        onDragStart(event, image, index, type) {
            if (type == 'img') {
                event.dataTransfer.setData('image', JSON.stringify({ ...image }));
                event.dataTransfer.setData('imageIndex', index);
            } else {
                event.dataTransfer.setData('table', JSON.stringify({ table: image.table, amt_id: image.amt_id, title: image.title }));
                event.dataTransfer.setData('tableIndex', index);
            }
        },
        async onDelete(dataId) {
            var dataInfo = this.Main_List.find((item) => item.am_id == dataId);

            var type = '';
            if (dataInfo.type == 1) {
                type = 'img';
            } else if (dataInfo.type == 2) {
                type = 'table';
            } else if (dataInfo.type == 0) {
                type = 'content';
            }

            await this.$confirm(this.$t('commonTable.removeContent'), 'Prompt', {
                confirmButtonText: 'Submit',
                cancelButtonText: 'Cancel',
                type: 'warning'
            })
                .then(async () => {
                    var that = this;
                    var url = '';
                    switch (type) {
                        case 'table':
                            url = that.urlList.removePositioningTable;
                            break;
                        case 'img':
                            url = that.urlList.removePositioningImage;
                            break;
                        case 'content':
                            url = that.urlList.delete;
                            break;
                    }
                    await that.$api
                        .post(url, {
                            am_id: dataId
                        })
                        .then(async (res) => {
                            if (res.code == 0) {
                                setTimeout(() => {
                                    that.getDate();
                                    that.getCommentList();
                                    if (type == 'img') {
                                        that.$refs.commonWordHtmlTypeSetting.refresh('img');
                                    } else {
                                        that.$refs.commonWordHtmlTypeSetting.refresh('table');
                                    }

                                    that.$forceUpdate();
                                });
                            }
                        });
                    // this.Main_List.splice(
                    //     this.Main_List.findIndex((item) => item.p_main_id == dataId),
                    //     1
                    // );
                })
                .catch((err) => {
                    console.log('err at line 466:', err);
                });
        },
        async onDeletes(dataId) {
            await this.$confirm(this.$t('commonTable.removeContent'), 'Prompt', {
                confirmButtonText: 'Submit',
                cancelButtonText: 'Cancel',
                type: 'warning'
            })
                .then(async () => {
                    var that = this;
                    await that.$api
                        .post('/api/Preaccept/delMoreArticleMains', {
                            ids: dataId
                        })
                        .then(async (res) => {
                            if (res.code == 0) {
                                setTimeout(() => {
                                    that.getDate();
                                    that.getCommentList();
                                    that.$refs.commonWordHtmlTypeSetting.refresh('img');
                                    that.$refs.commonWordHtmlTypeSetting.refresh('table');
                                    that.$forceUpdate();
                                });
                            }
                        });
                    // this.Main_List.splice(
                    //     this.Main_List.findIndex((item) => item.p_main_id == dataId),
                    //     1
                    // );
                })
                .catch((err) => {
                    console.log('err at line 466:', err);
                });
        },
        async changeSort(type, id) {
            var that = this;
            await that.$api
                .post(type == 'up' ? '/api/Preaccept/upArticleMain' : '/api/Preaccept/downArticleMain', {
                    am_id: id
                })
                .then(async (res) => {
                    if (res.code == 0) {
                        setTimeout(() => {
                            that.getDate();
                            that.getCommentList();

                            that.$forceUpdate();
                        });
                    }
                });
        },
        async addCommentSetting(content) {
            console.log('content at line 602:', content);
            await this.$api
                .post(this.urlList.addComment, {
                    am_id: content.am_id,
                    remark: content.remark
                })
                .then(async (res) => {
                    if (res.code == 0) {
                        this.$forceUpdate();
                        // this.commentVisible = false;
                        // this.getDate()
                        this.$nextTick(() => {
                            this.$refs.commonWordHtmlTypeSetting.getCommentList();
                        });
                    } else {
                        this.$message.error(res.msg);
                    }
                })
                .catch((err) => {
                    this.$message.error(err.msg);
                });
        },
        async addComment(content) {
            console.log('content at line 603:', this.commentForm);
            var str = content.replace(/^<p>(.*?)<\/p>$/, '$1') ? content.replace(/^<p>(.*?)<\/p>$/, '$1') : '';
            if (str == '') {
                this.$message({
                    type: 'warning',
                    message: 'Please enter the Comment!'
                });
                return;
            }

            if (this.commentForm.type == 'user') {
                await this.$api
                    .post(this.urlList.replyComment, {
                        amc_id: this.commentForm.amc_id,
                        author_remark: str
                    })
                    .then(async (res) => {
                        if (res.code == 0) {
                            this.$forceUpdate();
                            this.commentVisible = false;
                            this.getDate();
                            this.getCommentList();
                            this.$nextTick(() => {});
                        } else {
                            this.$message.error(res.msg);
                        }
                    })
                    .catch((err) => {
                        this.$message.error(err.msg);
                    });
            } else {
                var data = {};
                if (this.commentForm.amc_id) {
                    data = {
                        amc_id: this.commentForm.amc_id,

                        remark: str
                    };
                } else {
                    data = {
                        article_id: this.articleId,
                        am_id: this.commentForm.am_id,
                        content: this.commentForm.content,
                        remark: str
                    };
                }
                await this.$api
                    .post(this.commentForm.amc_id ? this.urlList.editComment : this.urlList.addComment, { ...data })
                    .then(async (res) => {
                        if (res.code == 0) {
                            this.$forceUpdate();
                            this.commentVisible = false;
                            this.getDate();
                            this.getCommentList();
                            this.$nextTick(() => {});
                        } else {
                            this.$message.error(res.msg);
                        }
                    })
                    .catch((err) => {
                        this.$message.error(err.msg);
                    });
            }
        },
        async onComment(dataId) {
            var data = this.Main_List.find((item) => item.am_id == dataId);
            if (data && data.remark) {
                this.$alert(
                    `<p style="display:flex;"><img   src="${this.remarkImageUrl}" alt="" style="width:20px;height:20px;margin-right:10px;"/><span style=" overflow-wrap: break-word;width:calc(100% - 50px)"> ${data.remark}</span></p>`,
                    'Annotations',
                    {
                        confirmButtonText: 'OK',
                        dangerouslyUseHTMLString: true, // 启用 HTML 渲染
                        callback: (action) => {}
                    }
                );
            }
        },
        onRefresh() {
            this.getDate();
            this.getCommentList();
        },
        editComment(comment, type) {
            console.log('comment at line 813:', comment);
            this.commentForm = {
                ...comment,
                type: type,
                remark: type == 'user' ? comment.author_remark : comment.remark
            };
            console.log('this.commentForm at line 815:', this.commentForm);
            this.commentVisible = true;
        },
        async onAddComment(data) {
            var form = this.Main_List.find((item) => item.am_id == data.mainId);
            this.commentForm = {
                ...form,
                content: data.label ? data.label : '',
                remark: '',
                type: 'add',
                role: 'editor'
            };
            this.commentVisible = true;
        },
        async replyComment(data) {
            this.commentForm = {
                ...data,
                remark: data.author_remark,
                type: 'user'
            };
            this.commentVisible = true;
        },
        async onEditTitle(data) {
            var url;
            switch (data.value) {
                case 0:
                    url = 'api/Preaccept/changeNormal';
                    break;
                case 1:
                    url = 'api/Preaccept/changeH1';
                    break;
                case 2:
                    url = 'api/Preaccept/changeH2';
                    break;
                case 3:
                    url = 'api/Preaccept/changeH3';
                    break;
            }

            console.log('data at line 739:', data);
            await this.$api
                .post(url, {
                    am_id: data.mainId
                })
                .then(async (res) => {
                    this.getDate();
                    this.getCommentList();
                })
                .catch((err) => {
                    this.$message.error(err.msg);
                });
        },
        handlePaperclip() {
            this.uploadWordTables = [];
            this.$refs.fileInput.click();
        },
        handleFileChange(event) {
            var that = this;
            const loading = this.$loading({
                lock: true,
                text: 'Loading...',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
            // 处理文件上传并传递回调函数
            this.$commonJS.handleFileUpload(event, function (tables) {
                console.log('tables at line 1138:', tables);
                if (tables.length == 0) {
                    loading.close();
                    that.$message({
                        type: 'warning',
                        message: 'No table found!'
                    });
                    return false;
                }

                // 使用 Promise.all 等待所有表格解析完成
                Promise.all(
                    tables.map((table) => {
                        return new Promise((resolve, reject) => {
                            // 解析每个表格
                            that.$commonJS.parseTableToArray(table, (tableList) => {
                                resolve({ table_data: tableList, html_data: '' });
                            });
                        });
                    })
                )
                    .then((result) => {
                        // 所有表格的解析完成后，处理结果
                        that.uploadWordTables = result;
                        loading.close();
                        that.tablesHtmlVisible = true;
                    })
                    .catch((error) => {
                        loading.close();
                        console.error('Error processing tables:', error);
                    });
            });
            const file = event.target.files[0];
            if (file) {
                // 处理文件逻辑
            }

            // 关键：重置 input 的值
            event.target.value = '';
        },

        async onAddRow(mainId) {
     
            await this.$api
                .post(this.urlList.addRow, {
                    am_id: mainId,
                    article_id: this.articleId
                })
                .then(async (res) => {
                    if(res.code == 0){
                          this.getDate();
                   
                    this.getCommentList();
                    }else{
                        this.$message.error(res.msg);
                    }
                  
                })
                .catch((err) => {
                    this.$message.error(err.msg);
                });
        },
        async solveComment(data) {
            await this.$api
                .post(this.urlList.solveComment, {
                    amc_id: data.amc_id
                })
                .then(async (res) => {
                    if (res.code == 0) {
                        this.getDate();
                        this.getCommentList();
                    } else {
                        this.$message.error(res.msg);
                    }
                })
                .catch((err) => {
                    this.$message.error(err.msg);
                });
        },

        async executeProofreading(data) {
            console.log('data at line 1225:', data);

            await this.$api
                .post(this.urlList.executeProofreading, {
                    am_id: data.am_id,
                    record_id: data.id,
                    state: 1,
                    article_id: this.$route.query.id
                })
                .then(async (res) => {
                    if (res.status == 1) {
                        this.getDate();
                        this.getCommentList();
                    } else {
                        this.$message.error(res.msg);
                    }
                })
                .catch((err) => {
                    this.$message.error(err.msg);
                });
        },
        async revokeProofreading(data) {
            console.log('data at line 1225:', data);

            await this.$api
                .post(this.urlList.executeProofreading, {
                    am_id: data.am_id,
                    record_id: data.id,
                    state: 2,
                    article_id: this.$route.query.id
                })
                .then(async (res) => {
                    if (res.status == 1) {
                        this.getDate();
                        this.getCommentList();
                    } else {
                        this.$message.error(res.msg);
                    }
                })
                .catch((err) => {
                    this.$message.error(err.msg);
                });
        },
        async editProofreading(data) {
            console.log('data at line 1225:', data);
        },
        deleteProofreading(data, index) {
            console.log('comment at line 480:', data);
           
        },

        async cancelSolveComment(data) {
            await this.$api
                .post(this.urlList.cancelSolveComment, {
                    amc_id: data.amc_id
                })
                .then(async (res) => {
                    if (res.code == 0) {
                        this.getDate();
                        this.getCommentList();
                    } else {
                        this.$message.error(res.msg);
                    }
                })
                .catch((err) => {
                    this.$message.error(err.msg);
                });
        },
        clearButton() {
            var deleteButtons = document.querySelectorAll('.wordButtonContainer');
            deleteButtons.forEach(function (button) {
                button.remove(); // 移除每个 wordButtonContainer 按钮
            });
        },
        handleImageAdd(type) {
            this.picStyle = { note: '', picUrl: '', title: '' };
            this.picStyle.visiTitle = 'Add Figure';
            this.pictVisible = true;
        },
        handleTableAdd(type) {
            this.lineStyle = { note: '', table_data: '', html_data: '' };
            this.lineStyle.visiTitle = 'Add Table';
            this.threeVisible = true;
        },
        addUploadWordTable(data) {
            this.lineStyle = { note: '', table: data.table_data, html_data: data.html_data };

            this.lineStyle.visiTitle = 'Add Table';
            this.threeVisible = true;
        },
        handleImageEdit(data, type) {
            if (type == 'img') {
                var extension = data.url.split('.').pop().toLowerCase();
                this.picStyle = {};
                this.picStyle = { ...data, extension: extension, picUrl: data.url };
                this.picStyle.visiTitle = 'Edit Figure';
                this.pictVisible = true;
            } else if (type == 'table') {
                this.lineStyle = {};
                this.lineStyle = {
                    ...data,
                    table: JSON.parse(data.table_data),
                    html_data: data.html_data,
                    note: data.note,
                    title: data.title
                };
                this.lineStyle.visiTitle = 'Edit Table';
                this.threeVisible = true;
            }
        },
        updateChange(content, type) {
            // console.log('content at line 1154:', content);
            // console.log('content at line 976:', content);
            var str = this.$commonJS.transformHtmlString(content);
            if (type == 'imgNote') {
                this.picStyle1.note = str;
            } else if (type == 'imgTitle') {
                this.picStyle1.title = str;
            } else {
                this.lineStyle1[type] = str;
            }
        },
        onEdit(dataId) {
            this.currentContent = {};
            this.picStyle = {};
            this.lineStyle = {};
            this.currentId = null;
            this.clearButton();
            var data = this.Main_List.find((item) => item.am_id == dataId);
            // console.log('data at line 667:', data);
            if (data.type == 1) {
                var extension = data.image.url.split('.').pop().toLowerCase();
                if (extension == 'tif') {
                    const imgElement = document.querySelector(`[data-img-id="${data.ami_id}"]`);
                    if (imgElement) {
                        // 获取图片的 src
                        data.dataUrl = imgElement.src;
                    }
                } else if (['jpg', 'jpeg', 'png'].includes(extension)) {
                } else {
                }
                this.currentContent = { ...data, extension: extension };
                this.picStyle = { ...data, extension: extension, picUrl: data.image.url, note: data.image.note, title: data.image.title };
                this.picStyle.visiTitle = 'Edit Figure';
                this.pictVisible = true;
            } else if (data.type == 2) {
                this.currentContent = { ...data };
                this.lineStyle = {
                    ...data,
                    table: JSON.parse(data.table.table_data),
                    html_data: data.table.html_data,
                    note: data.table.note,
                    title: data.table.title
                };
                this.lineStyle.visiTitle = 'Edit Table';
                this.threeVisible = true;
            } else {
                data.content = data.content.replace(/<span[^>]*>/g, '').replace(/<\/span>/g, ''); // 去除span标签
                this.currentContent = data;

                this.editVisible = true;
                this.currentId = dataId;
            }
        },
        onAddContent(dataId) {
            this.addContentVisible = true;
            this.addContent = {};

            this.currentId = dataId;
        },
       
        async onDrop(event, dataId) {
            if (event.dataTransfer.getData('image')) {
                const draggedImage = JSON.parse(event.dataTransfer.getData('image'));
                const draggedImageIndex = JSON.parse(event.dataTransfer.getData('imageIndex'));
                this.$nextTick(async () => {
                    await this.$api
                        .post(this.urlList.setPositioningImage, {
                            am_id: dataId,
                            ami_id: draggedImage.ami_id
                        })
                        .then(async (res) => {
                            if (res.code == 0) {
                                this.getDate();
                                this.$nextTick(() => {
                                    this.$refs.commonWordHtmlTypeSetting.refresh('img');
                                });
                                this.$forceUpdate();
                            } else {
                                this.$message.error(res.msg);
                            }
                        })
                        .catch((err) => {
                            this.$message.error(err.msg);
                        });
                });
                // this.Main_List.splice(index + 1, 0, draggedImage);
                // this.$nextTick(() => {
                //     this.$refs.commonWordHtmlTypeSetting.changeIsHidden(draggedImageIndex, true, 'img');
                // });
            } else {
                const draggedtable = JSON.parse(event.dataTransfer.getData('table'));

                this.$nextTick(async () => {
                    await this.$api
                        .post(this.urlList.setPositioningTable, {
                            am_id: dataId,
                            amt_id: draggedtable.amt_id
                        })
                        .then(async (res) => {
                            if (res.code == 0) {
                                this.getDate();
                                this.$nextTick(() => {
                                    this.$refs.commonWordHtmlTypeSetting.refresh('table');
                                });
                                this.$forceUpdate();
                            } else {
                                this.$message.error(res.msg);
                            }
                        })
                        .catch((err) => {
                            this.$message.error(err.msg);
                        });
                });

                // const draggedtableIndex = JSON.parse(event.dataTransfer.getData('tableIndex'));

                // this.Main_List.splice(index + 1, 0, draggedtable);
                // console.log('this.Main_List.splice at line 447:', this.Main_List);
            }

            // this.getWord();
        },
        getCommentList() {
            this.$api
                .post('api/Preaccept/getArticleMainCheckList', {
                    article_id: this.articleId
                })
                .then((res) => {
                    this.comments = res.data.list;
                    // this.positionAnnotations();
                });
        },
        getWord() {
            
            this.htmlContent = 'true';
        
        },
        // 获取数据
        async getDate() {
           
            this.imagesList = [];
            let urlLInk = '';
            let urlTask = {};
            if (this.Art_Id != undefined) {
                urlLInk = 'api/Preaccept/getArticleMainsNew';
                urlTask.article_id = this.Art_Id;
            }
            const loading = this.$loading({
                lock: true,
                text: 'Loading...',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });

            // 获取文章信息
            await this.$api
                .post(urlLInk, urlTask)
                .then(async (res) => {
                    if (res.code == 0) {
                        this.Main_List = res.data.list.map(e=>{
                            e.checked = false;
                            return e;
                        });
                        this.getManuscirptContent();
                        for (let i = 0; i < this.Main_List.length; i++) {
                            this.Main_List[i].text = this.Main_List[i].content;
                            this.Main_List[i].getnum = 0;
                            // this.Main_List[i].checked = false;
                        }

                        // setTimeout(async () => {
                        this.$nextTick(async () => {
                            await this.getWord();
                           
                          
                            loading.close();
                        });
                        // }, 1000);
                    } else {
                        this.$message.error(res.msg);
                        loading.close();
                    }
                })
                .catch((err) => {
                    this.$message.error(err);
                    loading.close();
                });
        },

        // 修改段落/图片
        MTxtEdit(val, num) {
            this.picStyle = JSON.parse(JSON.stringify(val));
            this.picStyle.picUrl = this.picStyle.content;
            this.picStyle.imageUrl = this.baseUrl + 'public/mainimg/' + this.picStyle.content;
            this.picStyle.visiTitle = 'Edit Figure';
            this.pictVisible = true;
        },

        // 转化为gpt标准格式
        trsanGtp() {
            if (this.btnDisble) {
                this.btnDisble = false;
                this.$api
                    .post('api/Production/mainGptcheck', {
                        p_main_id: this.txtStyle.p_main_id
                    })
                    .then((res) => {
                        if (res.code == 0) {
                            this.txtStyle.ChGtpTxt = res.data.content;
                            this.btnDisble = true;
                            // this.$forceUpdate()
                            this.$message.success('Converting success!');
                        } else {
                            this.btnDisble = true;
                            this.$message.error('Converting fail!');
                        }
                    })
                    .catch((err) => {
                        this.btnDisble = true;
                        this.$message.error('Converting fail!');
                    });
            } else {
                this.$message.warning('Converting, please wait!');
            }
        },

        // 替换Gtp生成的内容
        replceChGpr(val) {
            this.txtStyle.text = JSON.parse(JSON.stringify(this.txtStyle.ChGtpTxt));
        },

        // 确定保存段落修改
        saveTxt() {
            this.$api
                .post('api/Production/editProductionMain', {
                    p_main_id: this.txtStyle.p_main_id,
                    content: this.txtStyle.text
                })
                .then((res) => {
                    if (res.code == 0) {
                        this.$message.success('Successfully edit text!');
                        this.txtVisible = false;
                        this.getDate();
                        // this.Main_List[this.txtStyle.index].text = JSON.parse(JSON.stringify(this.txtStyle.text))
                    } else {
                        this.$message.error(res.msg);
                    }
                })
                .catch((err) => {
                    this.$message.error(err);
                });
        },

        // 图片段落
        MTxtPic(val, num) {
            this.picStyle.pre_type = 'img';
            // this.picStyle.body = val.p_main_img_id;

            this.picStyle.p_article_id = this.Art_P_Id;
            this.picStyle.titleBot = '';
            this.picStyle.note = '';
            this.picStyle.width = '500';
            this.picStyle.picUrl = '';
            this.picStyle.imageUrl = '';
            this.picStyle.visiTitle = 'Insert Picture Backward';
            this.pictVisible = true;
        },

        // 确定保存图片
        async savePic() {
            this.picStyle.picUrl;

            var str = this.picStyle1.note ? await this.$commonJS.decodeHtml(this.picStyle1.note) : '';
            var titleStr = this.picStyle1.title ? await this.$commonJS.decodeHtml(this.picStyle1.title) : '';
            if (this.picStyle.visiTitle == 'Edit Figure') {
                this.$api
                    .post(this.urlList.editImage, {
                        ami_id: this.picStyle.ami_id,
                        url: this.picStyle.picUrl,
                        note: str,
                        title: titleStr
                    })
                    .then((res) => {
                        if (res.code == 0) {
                            this.$message.success('Successfully edit Figure!');
                            this.pictVisible = false;
                            this.$nextTick(() => {
                                this.getDate();
                                this.getCommentList();
                                this.$forceUpdate();
                            });

                            this.$refs.commonWordHtmlTypeSetting.refresh('img');
                        } else {
                            this.$message.error(res.msg);
                        }
                    })
                    .catch((err) => {
                        this.$message.error(err);
                    });
            } else {
                this.$api
                    .post(this.urlList.addImage, {
                        article_id: this.articleId,
                        url: this.picStyle.picUrl,
                        note: str,
                        title: titleStr
                    })
                    .then((res) => {
                        if (res.code == 0) {
                            this.$message.success('Successfully Add Figure!');
                            this.pictVisible = false;
                            this.getDate();
                            this.$refs.commonWordHtmlTypeSetting.refresh('img');
                        } else {
                            this.$message.error(res.msg);
                        }
                    })
                    .catch((err) => {
                        this.$message.error(err);
                    });
            }
        },
        handleSaveTable() {
            this.$nextTick(() => {
                this.$refs.commonTable.getTableContent('table');
            });
        },
        handleSaveComment() {
            this.$nextTick(() => {
                this.$refs.tinymceChildComment.getContent('comment');
            });
        },
        async saveTable(content) {
            const cleanTableData = (tableList) => {
                if (tableList.length == 0) {
                    return [];
                } else {
                    // 假设第一行是表头，保存表头
                    const header = tableList[0];

                    // 从第二行开始，移除与表头相同的行
                    const cleanedTable = tableList.filter((row, index) => {
                        // 如果是第一行，则保留
                        if (index === 0) return true;

                        // 比较当前行的每个单元格与表头是否相同
                        const isHeaderRow = row.every((cell, cellIndex) => {
                            return cell.text === header[cellIndex].text;
                        });

                        return !isHeaderRow; // 只保留与表头不同的行
                    });

                    return cleanedTable;
                }
            };
            var cleanedTableList = content.table ? content.table : [];

            cleanedTableList = cleanTableData(content.table);
            var strTitle = this.lineStyle1.title ? this.lineStyle1.title : '';

            var strNote = this.lineStyle1.note ? this.lineStyle1.note : '';
            if (strNote != '') {
                strNote = await this.$commonJS.decodeHtml(strNote);
            }
            if (strTitle != '') {
                strTitle = await this.$commonJS.decodeHtml(strTitle);
            }
            const loading = this.$loading({
                lock: true,
                text: 'Loading...',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
            if (content && cleanedTableList && cleanedTableList.length > 0) {
                if (this.lineStyle.visiTitle == 'Edit Table') {
                    this.$api
                        .post(this.urlList.editTable, {
                            amt_id: this.lineStyle.amt_id,
                            table_data: JSON.stringify(cleanedTableList),
                            html_data: content.html_data,
                            note: strNote,
                            title: strTitle
                        })
                        .then((res) => {
                            if (res.code == 0) {
                                this.$message.success('Successfully edit Table!');
                                this.threeVisible = false;
                                setTimeout(() => {
                                    this.getDate();
                                    this.getCommentList();
                                    this.$refs.commonWordHtmlTypeSetting.refresh('table');
                                });
                            } else {
                                this.$message.error(res.msg);
                                loading.close();
                            }
                        })
                        .catch((err) => {
                            this.$message.error(err);
                            loading.close();
                        });
                } else {
                    this.$api
                        .post(this.urlList.addTable, {
                            article_id: this.articleId,
                            table_data: JSON.stringify(cleanedTableList),
                            html_data: content.html_data,
                            note: strNote,
                            title: strTitle
                        })
                        .then((res) => {
                            if (res.code == 0) {
                                this.$message.success('Successfully Add Table!');
                                this.threeVisible = false;
                                this.getDate();
                                loading.close();
                                this.$refs.commonWordHtmlTypeSetting.refresh('table');
                            } else {
                                this.$message.error(res.msg);
                                loading.close();
                            }
                        })
                        .catch((err) => {
                            this.$message.error(err);
                            loading.close();
                        });
                }
            } else {
                this.$message.error('Please fill in the table content!');
                loading.close();
            }
        },
        async removeEvent(row) {
            //   const type = await VXETable.modal.confirm('您确定要删除该数据?')
            const $table = this.$refs.xTable;
            //   if (type === 'confirm') {
            $table.remove(row);
            //   }
        },
        async insertEvent(row) {
            const $table = this.$refs.xTable;
            const record = {};
            const { row: newRow } = await $table.insertAt(record, row);
            await $table.setEditCell(newRow, 'name');
        },
        // 表格段落
        MTxtTable(val, num) {
            this.lineStyle.textarea = '';
            this.lineStyle.titleCon = '';
            this.lineTable = [];
            this.lineStyle = {};
            this.threeVisible = true;

            this.$forceUpdate();
        },

        // 表格转化
        CopyExcelToTable() {
            if (this.lineStyle.textarea == '') {
                this.$message.error('Please fill in the table content!');
                return;
            }

            let txtRows = this.lineStyle.textarea.split('\n');
            let txtColum = [];
            for (let i = 0; i < txtRows.length; i++) {
                if (txtRows[i] != '') {
                    let columns = txtRows[i].split('\t');
                    let dataone = [];
                    for (let j = 0; j < columns.length; j++) {
                        dataone.push(columns[j]);
                    }
                    txtColum.push(dataone);
                }
            }
            let arrwithNumer = Math.floor(100 / txtColum[0].length) - 2;
            this.lineStyle.arrwith = [];
            for (let i = 0; i < txtColum[0].length; i++) {
                this.lineStyle.arrwith.push(arrwithNumer);
            }
            this.lineTable = txtColum;
        },

        // 推送
        pushOnline() {
            // 二次确认
            this.$confirm('Are you sure you want to push it to the official website?', 'Tips', {
                type: 'warning'
            })
                .then(() => {
                    this.$api
                        .post('api/Production/pushMainToWeb', {
                            article_id: this.Art_web_Id,
                            p_article_id: this.Art_P_Id
                        })
                        .then((res) => {
                            if (res.code == 0) {
                                this.$message.success('Successfully push!');
                                this.getDate();
                                if (this.Art_Doi != undefined) {
                                    this.$router.push({
                                        path: 'comArtHtmlEdit',
                                        query: {
                                            artID: this.Art_web_Id
                                        }
                                    });
                                }
                            } else {
                                this.$message.error(res.msg);
                            }
                        })
                        .catch((err) => {
                            this.$message.error(err);
                        });
                })
                .catch(() => {});
        },

        // 上传图片
        handleAvatarSuccess(res, file) {
            if (res.code == 0) {
                this.picStyle.picUrl = res.data.upurl;

                this.$forceUpdate();
            } else {
                this.$message.error(res.msg);
            }
            this.picStyle.imageUrl = URL.createObjectURL(file.raw);
        },
        handleAvatarError(res, file) {},
        beforeAvatarUpload(file) {
            // const isLt2M = file.size / 1024 / 1024 < 10;
            // if (!isLt2M) {
            //     this.$message.error('Picture size cannot exceed 10M!');
            // }
            // return isLt2M;
            const isValidFormat = ['image/jpeg', 'image/png', 'image/tiff'].includes(file.type);
            if (!isValidFormat) {
                this.$message.error(this.$t('commonTable.uploadImageInfo'));
            }
            return isValidFormat; // 返回false将阻止文件上传
        },
        positionAnnotations() {
            this.$nextTick(() => {
                this.comments.forEach((item) => {
                    const contentElement = document.querySelector('[remark-main-id="' + item.am_id + '"]');
                    const annotationElement = document.querySelector('[data-target="main-' + item.am_id + '"]');
                    if (contentElement && annotationElement) {
                        const rect = contentElement.getBoundingClientRect();
                        annotationElement.style.position = 'absolute';
                        annotationElement.style.top = `${rect.top}px`;
                    }
                });
            });
        }
    }
};
</script>

<style scoped>
.lineStyle {
    border-top: 1px solid #0066994d;
    padding: 20px 20px 40px 20px;
}

.lineStyle > div {
}

.lineStyle > div span.title {
    font-size: 14px;
    color: #606266;
    margin: 0px 10px 0px 0px;
}

.lineStyle > div font.mark {
    font-size: 14px;
    color: #606266;
    margin: 0px 0px 0px 10px;
}

.lineStyle .styArry {
    display: inline-block;
    margin: 15px 40px 0 0;
}

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

.lineAll {
    margin: 0 auto;
}

.lineAll .lineTit {
    padding: 0 0 20px 0;
    font-size: 14px;
}

.lineAll .lineTit:nth-child(1) {
    border-top: 2px solid #333333;
    border-bottom: 1px solid #333333;
    padding: 10px 0;
    font-weight: bold;
}

.lineAll .lineTit:nth-child(2) {
    padding-top: 20px;
}

.lineAll .lineTit:nth-last-child(1) {
    border-bottom: 2px solid #333333;
}

.lineAll .lineTit > div {
    line-height: 22px;
    vertical-align: middle;
    display: inline-block;
    padding: 0 1%;
}

.man_Title {
    background-color: #fff;
    margin: 0 0 10px 0;
    border-bottom: 1px solid #dde1eb;
    box-shadow: 0 5px 5px -2px rgb(134 134 134);
    padding: 12px 25px 8px 25px;
    font-size: 16px;
    line-height: 24px;
    color: #333;
    position: relative;
}

.man_Title button {
    position: absolute;
    top: 10px;
    right: 10px;
}

.type_MTxt {
    background-color: #fff;
    padding: 0 10px 10px 10px;
    box-shadow: 0 1px 3px rgb(16 17 19 / 6%);
    position: relative;
}

.type_MTxt > div {
    position: relative;
    padding: 8px 15px;
    min-height: 22px;
    border: 2px dashed red;
    border-radius: 5px;
    color: #606266;
}
.type_MTxt > div:hover {
    background-color: rgb(0 102 153 / 10%);
    border: 2px dashed rgb(0 102 153 / 50%);
}
/* .type_MTxt > .imgBox:hover {
  background-color: rgb(0 102 153 / 10%);
  border: 2px dashed rgb(0 102 153 / 50%);
} */

.type_MTxt > div > p {
    font-size: 14px;
    line-height: 22px;
}

.type_MTxt > .imgBox .chNumer {
    position: absolute;
    top: -2px;
    right: -1px;
    border-radius: 3px;
    font-size: 10px;
    background-color: rgb(0 102 153 / 85%);
    color: #fff;
    padding: 0 6px;
}

.type_MTxt > div .MaxPicture {
    text-align: center;
}

.type_MTxt > div .MaxPicture > img {
    margin-bottom: 10px;
}

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

.MaxBtn {
    position: absolute;
    right: 0;
    top: -1px;
    color: #fff;
    border-radius: 50px;
    font-size: 15.5px;
    padding: 6px 7px;
    display: none;
    opacity: 0.75;
}

.MaxBtn {
    display: block;
}

.MaxBtn:hover {
    opacity: 1;
    cursor: pointer;
}

.type_Gbtn {
    color: #fff;
    border-color: #006699;
    background: #006699;
    width: 30%;
    text-align: center;
    padding: 8px 0;
    font-size: 14px;
    border-radius: 8px;
    font-weight: 500;
    margin: 0 auto;
}

.type_Gbtn:hover {
    box-shadow: 0 4px 14px rgb(0 102 153 / 30%);
    cursor: pointer;
}

.type_CHar {
    position: relative;
    border-left: 4px solid rgba(0 102 153 / 20%);
    border-radius: 5px;
    padding: 20px 25px 15px 20px;
    background-color: #fff;
    margin: 20px 0 0 0;
    font-size: 14px;
    line-height: 22px;
    box-shadow: 0 1px 10px rgb(0 102 153 / 20%);
}

.type_CHar .chReple {
    position: absolute;
    top: -1px;
    right: 1px;
    border-radius: 3px;
    font-size: 10px;
    background-color: rgb(223 109 11);
    opacity: 0.85;
    color: #fff;
    padding: 1px 10px;
}

.type_CHar .chReple:hover {
    opacity: 1;
    cursor: pointer;
}

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

.avatar-uploader_small {
    height: 100px;
}

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

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

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

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

.avatar {
    width: 120px;
    height: 120px;
    display: block;
}
.unfetteredBox {
    display: flex;
    flex-wrap: wrap;

    padding: 0;
    box-sizing: border-box;
}
.unfetteredBox .image {
    margin-top: 10px;
    box-shadow: rgba(16, 17, 19, 0.5) 0px 1px 3px;
    margin-right: 10px;
    height: 60px;
    width: 60px;
    border-radius: 4px;

    overflow: hidden;
}

::v-deep .wordTableHtml table span blue {
    color: rgb(0, 130, 170) !important;
}
::v-deep .wordTableHtml table span blue sup {
    color: rgb(0, 130, 170) !important;
}
::v-deep .wordTableHtml table span blue sub {
    color: rgb(0, 130, 170) !important;
}
.toolbar {
    display: flex;
    align-items: center;
    width: 100%;
    background-color: #fff;
    border-bottom: none;
    box-shadow: 0 2px 2px -2px rgba(34, 47, 62, 0.1), 0 8px 8px -4px rgba(34, 47, 62, 0.07);
    padding: 4px 0;
    height: 50px;
    box-sizing: border-box;
    transition: box-shadow 0.5s;

    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    z-index: 2;
}
.toolbar .toolbar_item {
    width: auto;
    color: #767c82;
    font-size: 14px;
    padding: 0 11px 0 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    line-height: 24px;
    background-color: #fff;
}

.toolbar .toolbar_item img {
    width: 24px;
    height: 24px;
    margin-right: 6px;
    margin-top: -2px;
}
::v-deep .el-dialog__body {
    padding: 10px 20px !important;
}
.editFormPizhu {
    display: flex;
    margin-bottom: 20px;
}
.editFormPizhu img {
    margin-right: 10px;
}
.go-content-box {
    background-color: #f2f3f5;
}
.commentList {
    width: 350px !important;

    padding: 15px;
    position: relative;
    box-sizing: border-box;
    /* background-color: #fafafa; */
    background-color: #fafafa;
    box-shadow: 0 1px 3px rgb(16 17 19 / 6%);
}

/* 为整个页面的滚动条设置样式 */
::-webkit-scrollbar {
    width: 8px; /* 垂直滚动条的宽度 */
    height: 8px; /* 水平滚动条的高度 */
}

/* 滚动条轨道样式 */
::-webkit-scrollbar-track {
    background: #f1f1f1; /* 滚动条轨道颜色 */
    border-radius: 10px; /* 轨道圆角 */
}

/* 滚动条滑块样式 */
::-webkit-scrollbar-thumb {
    background: #888; /* 滚动条滑块颜色 */
    border-radius: 10px; /* 滑块圆角 */
}

/* 滑块在悬停时的样式 */
::-webkit-scrollbar-thumb:hover {
    background: #555; /* 滑块悬停时的颜色 */
}
.uploadWordTableBox {
    width: 38vw;
    position: relative;
    height: auto;
    overflow: hidden;
    padding: 10px;
    box-sizing: border-box;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 12px 0px;
}
::v-deep .el-drawer__header {
    margin-bottom: 0;
    padding: 15px;
}
.uploadWordTableBox .insertTable {
    /* display: none; */
    position: absolute;
    right: 10px;
}
.uploadWordTableBox:hover {
    background-color: #0066990d;
    /* display: block !important; */
}
</style>
