eep_page/src/views/book/courseware/create/components/question/article/Article.vue

<template>
  <ModuleBase ref="base" :type="data.type">
    <template #content>
      <!-- eslint-disable max-len -->
      <div v-loading="loading" class="article-wrapper">
        <el-input v-model="data.content" placeholder="输入" type="textarea" />

        <span class="tips">输入课文文本后，请先点击生成分词</span>
        <el-button type="primary" @click="handleChangeContent">生成分词</el-button>
        <template v-if="data.detail.length > 0">
          <div class="new-btn-box">
            <p>文本内容</p>
            <div>
              <a @click="checkArticle">分词和拼音</a>
              <a @click="editWordsFlag = !editWordsFlag">生词和气泡</a>
              <a @click="handleMultilingual">多语种翻译</a>
              <MultilingualFill
                :visible.sync="multilingualVisible"
                :text="multilingualText"
                :translations="data.multilingual"
                @SubmitTranslation="handleMultilingualTranslation"
              />
            </div>
          </div>
          <div class="new-btn-box">
            <p>音频内容</p>
            <div>
              <SelectUpload label="" type="audio" :isNormal="true" @uploadSuccess="uploadAudioSuccess" />
              <el-button :loading="autoLoading" @click="handleAutoAudio">生成音频</el-button>
              <template v-if="data.mp3_list.length === 0">
                <el-tooltip class="item" effect="dark" content="请先设置音频" placement="top">
                  <el-button disabled style="margin-left: 0">校对字幕</el-button>
                </el-tooltip>
              </template>
              <template v-else>
                <template v-if="data.wordTime && data.wordTime.length > 0">
                  <a type="text" @click="againWordTime">重新生成字幕</a>
                  <a size="medium" @click="openCheckSubtitles('句子')">句子字幕</a>
                  <a size="medium" @click="compareTime('文字')">文字字幕</a>
                </template>
                <template v-else>
                  <a v-if="!isWordTime" size="medium" @click="createWordTimes">自动生成字幕节点</a>
                  <p v-else>字幕节点生成中...请等待</p>
                </template>
              </template>
            </div>
          </div>
          <div v-if="data.mp3_list.length > 0" class="upload-file">
            <div class="file-name">
              <span>
                <SvgIcon icon-class="note" size="12" />
                <span>{{ data.mp3_list[0].name }}</span>
              </span>
            </div>
            <SvgIcon icon-class="delete-black" size="12" @click="removeFile" />
            <ResourcesOperate :data="data.mp3_list[0]" />
          </div>
          <div class="new-btn-box">
            <p>多媒体内容</p>
            <div>
              <a @click="picArticle">上传图片</a>
              <a @click="picArticle">上传视频</a>
            </div>
          </div>
          <div class="table-rich-toolbar" v-if="articleAttrib">
            <el-select
              v-model="articleAttrib.font"
              placeholder="请选择"
              style="width: 130px"
              @change="handleChangeStyles"
            >
              <el-option v-for="{ value, label } in fontFamilyList" :key="value" :label="label" :value="value" />
            </el-select>
            <el-select
              v-model="articleAttrib.font_size"
              placeholder="请选择"
              style="width: 130px"
              @change="data.unified_attrib.font_size = articleAttrib.font_size"
            >
              <el-option
                v-for="(value, index) in 16"
                :key="index"
                :label="6 + value * 2 + 'pt'"
                :value="6 + value * 2 + 'pt'"
              />
            </el-select>
            <el-form :model="articleAttrib" inline>
              <el-form-item label="文字颜色">
                <el-color-picker v-model="articleAttrib.text_color" @change="handleChangeStyles" />
              </el-form-item>
            </el-form>
            <span :class="[data.other_attrib.isUnderline ? 'active' : '']" @click="setActiveTextStyle('underline')">
              <SvgIcon icon-class="underline" size="20" />
            </span>
            <span :class="[data.other_attrib.isBold ? 'active' : '']" @click="setActiveTextStyle('bold')">
              <SvgIcon icon-class="font-bold" size="20" />
            </span>
            <!-- <span
            :class="[data.other_attrib.isItalic ? 'active' : '']"
            @click="data.other_attrib.isItalic = !data.other_attrib.isItalic"
          >
            <SvgIcon icon-class="font-italic" size="20" />
          </span> -->
            <span
              :class="[data.other_attrib.isStrikethrough ? 'active' : '']"
              @click="setActiveTextStyle('line-through')"
            >
              <SvgIcon icon-class="strikethrough" size="20" />
            </span>
            <span :class="[data.other_attrib.border === 'dotted' ? 'active' : '']">
              <SvgIcon icon-class="borderDotted" title="下划虚线" size="16" @click="setActiveTextStyle('border')" />
            </span>
            <span
              :class="[articleAttrib.align === 'LEFT' ? 'active' : '']"
              @click="setActiveTextStyle('align', 'LEFT')"
            >
              <SvgIcon icon-class="align-left" size="20" />
            </span>
            <span
              :class="[articleAttrib.align === 'MIDDLE' ? 'active' : '']"
              @click="setActiveTextStyle('align', 'MIDDLE')"
            >
              <SvgIcon icon-class="align-center" size="20" />
            </span>
            <span
              :class="[articleAttrib.align === 'RIGHT' ? 'active' : '']"
              @click="setActiveTextStyle('align', 'RIGHT')"
            >
              <SvgIcon icon-class="align-right" size="20" />
            </span>
          </div>
        </template>

        <!-- <div v-if="data.content" class="btn-box">
          <a @click="handleChangeContent">生成分词</a>
          <a @click="checkArticle">文章校对</a>
          <a @click="picArticle">添加图片</a>
          <a @click="editWordsFlag = !editWordsFlag">编辑生词短语气泡</a>
          <template v-if="data.wordTime && data.wordTime.length > 0">
            <a type="text" @click="againWordTime">重新生成字幕时间</a>
            <a size="medium" @click="openCheckSubtitles('句子')">校对句子字幕时间</a>
            <a size="medium" @click="compareTime('文字')">校对文字字幕时间</a>
          </template>
          <template v-else>
            <a v-if="!isWordTime" size="medium" @click="createWordTimes">自动生成字幕节点</a>
            <p v-else>字幕节点生成中...请等待</p>
          </template>
          <el-button @click="handleMultilingual">课文多语言</el-button>
          <MultilingualFill
            :visible.sync="multilingualVisible"
            :text="multilingualText"
            :translations="data.multilingual"
            @SubmitTranslation="handleMultilingualTranslation"
          />
        </div> -->
      </div>

      <template v-if="data.detail.length > 0">
        <el-divider content-position="left"
          >预览效果<el-button
            v-show="data.detail.length > 0"
            type="text"
            icon="el-icon-refresh"
            title="刷新"
            class="refresh-pinyin-btn"
            @click.native="handleChangeContent"
        /></el-divider>
        <div v-for="(item, index) in data.detail" :key="index" class="text">
          <div class="text-item">
            <span
              class="word"
              :style="{
                fontSize: articleAttrib.font_size,
              }"
            >
              &nbsp;&nbsp;&nbsp;&nbsp;
            </span>
          </div>
          <div class="text-item">
            <span
              class="word"
              :style="{
                fontSize: articleAttrib.font_size,
              }"
            >
              &nbsp;&nbsp;&nbsp;&nbsp;
            </span>
          </div>
          <template v-for="(witem, windex) in item.wordsList">
            <div
              v-for="(wItem, wIndex) in witem"
              :key="windex + '-' + wIndex"
              class="text-item"
              :style="{
                textAlign: wIndex === 0 ? 'left' : '',
              }"
            >
              <span
                class="pinyin"
                :style="{
                  fontSize: articleAttrib.pinyin_size,
                }"
                v-if="isEnable(data.property.view_pinyin)"
                @click="selectItem(wItem, wIndex)"
                >{{
                  wIndex === 0 && data.property.is_first_sentence_first_hz_pinyin_first_char_upper_case === 'true'
                    ? wItem.pinyin_up
                    : wItem.pinyin
                }}</span
              >
              <span
                class="word"
                :style="{
                  fontFamily: wItem.fontFamily,
                  textDecoration: wItem.textDecoration,
                  borderBottom: wItem.border === 'dotted' ? '1px dotted' : '',
                  fontWeight: wItem.fontWeight,
                  color:
                    wItem.matchNotesObj.con && wItem.matchNotesObj.notesColor
                      ? wItem.matchNotesObj.notesColor
                      : wItem.color,
                  fontSize: articleAttrib.font_size,
                }"
                @click="matchItemNotes(wItem)"
                >{{ wItem.chs }}</span
              >
            </div>
          </template>
        </div>
      </template>
      <el-dialog
        v-if="dialogFlag"
        :visible.sync="dialogFlag"
        :show-close="false"
        :close-on-click-modal="false"
        :modal-append-to-body="false"
        :modal="false"
        width="250px"
        class="article-checkpinyin-dialog"
      >
        <div class="check-box">
          <div class="content">
            <div class="words-box">
              <span class="pinyin">
                {{ itemActiveIndex === 0 ? itemActive.pinyin_up : itemActive.pinyin }}
              </span>
              <span class="words">
                {{ itemActive.chs }}
              </span>
            </div>
          </div>
          <!-- <el-input v-model="checkPinyinInput" type="text" class="checkPinyinInput" /> -->
          <el-select
            v-model="checkPinyinInput"
            placeholder="请输入"
            filterable
            allow-create
            default-first-option
            class="checkPinyinInput"
          >
            <el-option v-for="item in pinyinList" :key="item.pinyin" :value="item.pinyin.replace(/,/g, '')">
              <span style="float: left">{{ item.pinyin.replace(/,/g, '') }}</span>
              <span style="float: right; font-size: 13px; color: #8492a6">{{
                item.storage_type === 1 ? '机构库' : item.storage_type === 2 ? '全域库' : '个人库'
              }}</span>
            </el-option>
          </el-select>
          <p class="tips">一到四声分别用数字1-4表示。拼音间用空格隔开，儿化音输入r，如“活儿”输入“huor2”。</p>
          <div class="btn-box">
            <el-button type="info" size="small" @click="cancleDialog">取消</el-button>
            <el-button type="primary" size="small" @click="surePinyin">保存</el-button>
          </div>
        </div>
      </el-dialog>
      <el-dialog
        v-if="showArticleFlag"
        :visible.sync="showArticleFlag"
        :show-close="true"
        :close-on-click-modal="true"
        :modal-append-to-body="true"
        :append-to-body="true"
        :lock-scroll="true"
        width="80%"
        class="practiceBox"
      >
        <CheckArticle
          ref="CheckArticle"
          :data="data"
          @saveWord="saveWord"
          @savePinyin="savePinyin"
          @saveStyle="saveStyle"
        />
      </el-dialog>
      <el-dialog title="校对字幕时间" :visible.sync="compareShow" width="50%" :before-close="handleClose" top="0">
        <CompareTime
          :data="compareData"
          :type="compareType"
          :changewords-result-list="changewordsResultList"
          :open-check-subtitles="openCheckSubtitles"
        />
        <span slot="footer" class="dialog-footer">
          <el-button @click="handleClose">取 消</el-button>
          <el-button :loading="compareloading" type="primary" @click="saveCompare">确 定</el-button>
        </span>
      </el-dialog>
      <!-- <el-dialog title="" :visible.sync="editWordsFlag" width="80%" :close-on-click-modal="true" top="0"> -->
      <template v-if="editWordsFlag">
        <div class="tabs-box">
          <a :class="[editWordIndex === 0 ? 'active' : '']" @click="editWordIndex = 0">生词</a>
          <a :class="[editWordIndex === 2 ? 'active' : '']" @click="editWordIndex = 2">其他词汇</a>
          <a :class="[editWordIndex === 1 ? 'active' : '']" @click="editWordIndex = 1">气泡</a>
        </div>
        <NewWord
          v-if="editWordIndex === 0"
          key="new_word"
          :data-new-word="data.new_word_list"
          :unified-attrib="data.unified_attrib ? data.unified_attrib : null"
          @sureNewWords="sureNewWords"
        />

        <Notes
          v-if="editWordIndex === 1"
          key="notes"
          :data-notes="data.notes_list"
          :unified-attrib="data.unified_attrib ? data.unified_attrib : null"
          @sureNotes="sureNotes"
          @handleSyncCon="handleSyncCon"
        />
        <NewWord
          v-if="editWordIndex === 2"
          :data-new-word="data.other_word_list"
          :unified-attrib="data.unified_attrib ? data.unified_attrib : null"
          @sureNewWords="sureOtherNewWords"
        />
      </template>

      <!-- </el-dialog> -->
      <!-- 添加图片 -->
      <el-dialog
        v-if="showPicArticleFlag"
        :visible.sync="showPicArticleFlag"
        :show-close="true"
        :close-on-click-modal="true"
        :modal-append-to-body="true"
        :append-to-body="true"
        :lock-scroll="true"
        width="80%"
        class="practiceBox"
      >
        <CheckPic :data="data" />
      </el-dialog>
      <CheckSubtitles
        v-if="visible"
        :visible.sync="visible"
        :audio-id="data.mp3_list[0] && data.mp3_list[0].file_id ? data.mp3_list[0].file_id : ''"
        :option-list="subtitleList"
        @saveSubtitles="saveSubtitles"
      />
      <!-- 关联注释 -->
      <el-dialog
        v-if="matchNoteFlag"
        :visible.sync="matchNoteFlag"
        :show-close="true"
        :close-on-click-modal="false"
        :modal-append-to-body="false"
        :modal="false"
        width="600px"
        class="article-matchNotes-dialog"
        :title="matchNotesObj.id ? '编辑气泡' : '添加气泡'"
      >
        <div class="matchNotes-box">
          <RichText
            v-if="matchNotesObj.isRich"
            ref="richText"
            v-model="matchNotesObj.con"
            :font-size="'14pt'"
            :font-family="data.unified_attrib?.font"
            :font-color="data.unified_attrib?.text_color"
            toolbar="fontselect fontsizeselect forecolor backcolor | underline | bold italic strikethrough alignleft aligncenter alignright image media link"
          />
          <el-input v-else v-model="matchNotesObj.con" type="textarea" rows="5"></el-input>
          <div class="matchNotes-color">
            <span>气泡颜色<el-color-picker v-model="matchNotesObj.notesColor"></el-color-picker></span>
            <span @click="matchNotesObj.isRich = !matchNotesObj.isRich"
              ><SvgIcon icon-class="change" size="16" />切换文本模式</span
            >
          </div>
          <div class="btn-box">
            <el-button type="info" size="small" @click="cancleMatchNotesDialog">删除</el-button>
            <el-button type="primary" size="small" @click="sureMatchNotes">保存</el-button>
          </div>
        </div>
      </el-dialog>
    </template>
  </ModuleBase>
</template>

<script>
import ModuleMixin from '../../common/ModuleMixin';
import SelectUpload from '@/views/book/courseware/create/components/common/SelectUpload.vue';
import CheckArticle from './CheckArticle.vue';
import CompareTime from './CompareTime.vue';
import NewWord from './NewWord.vue';
import Notes from './Notes.vue';
import CheckPic from './CheckPic.vue';
import CheckSubtitles from '@/views/book/courseware/create/components/question/voice_matrix/CheckSubtitles.vue';
import ResourcesOperate from '../../common/ResourcesOperate.vue';

import { getArticleData } from '@/views/book/courseware/data/article';
import { fontFamilyList } from '@/views/book/courseware/data/table';
import { TextToAudioFile } from '@/api/app';
import { isEnable } from '@/views/book/courseware/data/common';
import {
  segSentences,
  BatchSegContent,
  getWordTime,
  prepareTranscribe,
  fileToBase64Text,
  getWordTimes,
} from '@/api/article';
const Base64 = require('js-base64').Base64;
import cnchar from 'cnchar';
import { toolGetWordPinyinCorrectionList } from '@/api/pinyinCorrection';
import { PinyinBuild_OldFormat } from '@/api/book';
import { getRandomNumber } from '@/utils';

export default {
  name: 'ArticlePage',
  components: {
    SelectUpload,
    CheckArticle,
    CompareTime,
    NewWord,
    Notes,
    CheckPic,
    CheckSubtitles,
    ResourcesOperate,
  },
  mixins: [ModuleMixin],
  data() {
    return {
      fontFamilyList,
      isEnable,
      data: getArticleData(),
      showArticleFlag: false, // 校对文章
      showPicArticleFlag: false, // 添加图片
      toneList: [' ', 'ˉ', 'ˊ', 'ˇ', 'ˋ'],
      loading: false,
      isWordTime: false,
      compareType: '', // 校对类型
      compareIndex: null, // 校对句子索引
      compareShow: false,
      compareData: null,
      compareloading: false,
      editWordsFlag: false,
      editWordIndex: 0,
      multilingualText: '',
      autoLoading: false,
      visible: false,
      subtitleList: [],
      itemActive: null,
      itemActiveIndex: null,
      dialogFlag: false,
      checkPinyinInput: '',
      oldInput: '',
      tableData: [
        ['ā', 'á', 'ǎ', 'à', 'a'],
        ['ō', 'ó', 'ǒ', 'ò', 'o'],
        ['ē', 'é', 'ě', 'è', 'e'],
        ['ī', 'í', 'ǐ', 'ì', 'i'],
        ['ū', 'ú', 'ǔ', 'ù', 'u'],
        ['ǖ', 'ǘ', 'ǚ', 'ǜ', 'ü'],
        ['Ā', 'Á', 'Â', 'À', 'A'],
        ['Ō', 'Ó', 'Ô', 'Ò', 'O'],
        ['Ē', 'É', 'Ê', 'È', 'E'],
        ['Ī', 'Í', 'Î', 'Ì', 'I'],
        ['Ū', 'Ú', 'Û', 'Ù', 'U'],
        ['n', 'ń', 'ň', 'ǹ', 'n'],
        ['m̄', 'ḿ', 'm', 'm̀', 'm'],
      ],
      pinyinList: [], // 拼音校正列表
      articleAttrib: null,
      matchNoteItem: null, // 选中关联注释的词
      matchNoteFlag: false,
    };
  },
  watch: {
    'data.content': 'handleMindMap',
    'data.unified_attrib': {
      handler(val) {
        if (val) {
          let oldAttrib = this.data.other_attrib;
          this.articleAttrib = JSON.parse(JSON.stringify(val));
          if (oldAttrib.oldFont && oldAttrib.oldFont !== val.font) {
            this.$set(this.articleAttrib, 'font', oldAttrib.oldFont);
          }
          if (oldAttrib.oldColor && oldAttrib.oldColor !== val.text_color) {
            this.$set(this.articleAttrib, 'text_color', oldAttrib.oldColor);
          }
          if (oldAttrib.align && oldAttrib.align !== val.align) {
            this.$set(this.articleAttrib, 'align', oldAttrib.align);
          }

          // this.handleChangeStyles();
        }
      },
      deep: true,
      immediate: true,
    },
    // 'data.unified_attrib.font': {
    //   handler(val) {
    //     if (val) {
    //       this.handleChangeStyles();
    //     }
    //   },
    //   deep: true,
    //   immediate: true,
    // },
    // 'data.unified_attrib.text_color': {
    //   handler(val) {
    //     if (val) {
    //       this.handleChangeStyles();
    //     }
    //   },
    //   deep: true,
    //   immediate: true,
    // },
    // 'data.unified_attrib.align': {
    //   handler(val) {
    //     if (val) {
    //       this.handleChangeStyles();
    //     }
    //   },
    //   deep: true,
    //   immediate: true,
    // },
  },
  created() {},
  methods: {
    // 全局样式变化
    handleChangeStyles() {
      if (this.articleAttrib.font !== this.data.other_attrib.oldFont) {
        this.data.other_attrib.oldFont = this.articleAttrib.font;
        this.data.detail.forEach((item) => {
          item.wordsList.forEach((items) => {
            items.forEach((itemss) => {
              itemss.fontFamily = this.articleAttrib.font;
            });
          });
        });
      }
      if (this.articleAttrib.text_color !== this.data.other_attrib.oldColor) {
        this.data.other_attrib.oldColor = this.articleAttrib.text_color;
        this.data.detail.forEach((item) => {
          item.wordsList.forEach((items) => {
            items.forEach((itemss) => {
              itemss.color = this.articleAttrib.text_color;
            });
          });
        });
      }
      if (this.articleAttrib.align !== this.data.other_attrib.oldAlign) {
        this.data.other_attrib.oldAlign = this.articleAttrib.align;
        this.data.detail.forEach((item) => {
          item.paraAlign =
            this.articleAttrib.align === 'RIGHT' ? 'right' : this.articleAttrib.align === 'MIDDLE' ? 'center' : 'left';
        });
      }
    },
    // 解析输入内容
    handleChangeContent() {
      if (this.data.content.trim()) {
        if (this.data.detail.length === 0) {
          this.handleResetSet();
        } else {
          this.$confirm('重新生成分词会重置课文内拼音、气泡、字幕和图片视频附件，确定执行此操作吗？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          })
            .then(() => {
              this.handleResetSet();
              this.data.notes_list.option = [];
              this.isWordTime = false;
              this.data.wordTime = [];
            })
            .catch(() => {});
        }

        // 分句
        // let sentenceList = []; // 句子按段数组
        // let data = {
        //   textList,
        // };
        // segSentences(data)
        //   .then((res) => {
        //     let result = res.data.result;
        //     sentenceList = JSON.parse(JSON.stringify(res.data.result));
        //     result.forEach((item, index) => {
        //       let sentenceListBase64 = [];
        //       this.data.detail[index].sentences = item;
        //       item.forEach((items) => {
        //         sentenceListBase64.push(Base64.encode(items));
        //       });
        //       // 分词
        //       BatchSegContent({ textList: sentenceListBase64 })
        //         .then((res) => {
        //           let list = res.data.result.list;
        //           this.data.detail[index].segList = list;
        //           this.setWordsList(list, index);
        //           if (index === result.length - 1) {
        //             this.handleSenWord();
        //             this.loading = false;
        //           }
        //         })
        //         .catch(() => {
        //           this.loading = false;
        //         });
        //     });
        //   })
        //   .catch(() => {
        //     this.loading = false;
        //   });
      }
    },
    // 重置分词结构
    handleResetSet() {
      this.loading = true;
      this.data.detail = [];
      let contentArr = this.data.content.split('\n');
      let textList = [];
      let contentStr = '';
      let detailItem = {
        paraIndex: 0,
        para: '',
        sentences: [],
        segList: [],
        seg_words: [],
        wordsList: [],
        timeList: [],
        isTitle: false,
        sentencesEn: [],
        paraAlign: this.articleAttrib
          ? this.articleAttrib.align === 'RIGHT'
            ? 'right'
            : this.articleAttrib.align === 'MIDDLE'
              ? 'center'
              : 'left'
          : 'left',
        remark: {
          chs: '',
          en: '',
          heightNumber: null,
          img_list: [],
          widthNumber: null,
          chsBg: '#988ed6',
          enBg: '#fff',
        },
        sourceList: [],
        sourcePosition: 'after',
        heightNumber: null,
        widthNumber: null,
      };
      // 分段
      contentArr.forEach((item, index) => {
        if (item.trim()) {
          detailItem.para = item;
          detailItem.paraIndex = index;
          this.data.detail.push(JSON.parse(JSON.stringify(detailItem)));

          let str = Base64.encode(item);
          textList.push(str);
          contentStr += item.trim() + '\n';
        }
      });
      BatchSegContent({
        text: contentStr,
        is_build_pinyin: 'true',
        is_custom_fc: 'false',
        is_vocabulary_pinyin_lt: 'true',
        is_fill_punctuation_mark: 'true',
        is_fill_space: 'true',
      })
        .then((res) => {
          this.loading = false;
          if (res.status === 1) {
            res.paragraph_list.forEach((item, index) => {
              let sentenceList = []; // 句子按段数组
              let segList = []; // 句子分词结果
              item.forEach((items) => {
                let sentence = items.reduce((acc, itemss) => `${acc + itemss.text}`, '');
                let seg = items.map((itemss) => itemss.text);
                sentenceList.push(sentence);
                segList.push(seg);
              });
              this.data.detail[index].sentences = sentenceList;
              this.data.detail[index].segList = segList;
              this.setWordsList(item, index);
            });
            this.handleSenWord();
          }
        })
        .catch(() => {
          this.loading = false;
        });
    },
    // 处理句子和词的关系
    handleSenWord() {
      this.data.sentence_list_mp = [];
      this.data.detail.forEach((item) => {
        item.sentences.forEach((items, indexs) => {
          let word_list = [];

          item.segList[indexs].forEach((itemw) => {
            word_list.push({
              word: itemw,
            });
          });
          let obj = {
            sentence: items,
            word_list,
          };
          this.data.sentence_list_mp.push(obj);
        });
      });
    },
    setWordsList(list, paraIndex) {
      let wordsList = [];
      list.forEach((item, index) => {
        let sentArr = [];

        item.map((sItem) => {
          // let toneStr = [];
          // for (let i = 0; i < sItem.length; i++) {
          //   const pattern = /[\u4e00-\u9fa5]/;
          //   if (cnchar.isCnChar(sItem[i]) && !pattern.test(cnchar.spell(sItem[i], 'low', 'tone'))) {
          //     toneStr.push(this.toneList[cnchar.spellInfo(cnchar.spell(sItem[i], 'low', 'tone')).tone]);
          //   } else {
          //     toneStr.push(' ');
          //   }
          // }

          let obj = {
            chs: sItem.text,
            pinyin: sItem.pinyin,
            pinyin_up: sItem.pinyin_up,
            pinyin_tone: sItem.pinyin_tone,
            fontFamily: this.articleAttrib ? this.articleAttrib.font : '楷体',
            textDecoration: this.data.other_attrib
              ? this.data.other_attrib.isUnderline
                ? this.data.other_attrib.isUnderline
                : this.data.other_attrib.isStrikethrough
                  ? this.data.other_attrib.isStrikethrough
                  : ''
              : '',
            fontWeight: this.data.other_attrib ? this.data.other_attrib.isBold : '',
            border: this.data.other_attrib ? this.data.other_attrib.border : '',
            color: this.articleAttrib ? this.articleAttrib.text_color : '',
            matchWords: '',
            matchNotes: '',
            notesColor: '',
            img: [],
            imgPosition: 'after',
            matchNotesObj: {
              number: '',
              con: '',
              pinyin: '',
              interpret: '',
              note: '',
              notesColor: '#8206BF',
              id: '',
              isRich: true,
              matchNotes: sItem.text,
            },
          };
          sentArr.push(obj);
        });
        wordsList.push(sentArr);
      });
      this.data.detail[paraIndex].wordsList = wordsList;
    },
    uploadAudioSuccess(fileList) {
      if (fileList.length > 0) {
        const { file_name: name, file_url: temporary_url, file_id, media_duration } = fileList[0];
        this.data.mp3_list = [
          {
            name,
            media_duration,
            temporary_url,
            url: file_id,
            file_id,
          },
        ];
        this.data.file_id_list = [file_id];
      }
    },
    removeFile() {
      this.$confirm('是否删除当前文件？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.data.mp3_list = [];
          this.data.file_id_list = [];
          this.isWordTime = false;
          this.data.wordTime = [];
        })
        .catch(() => {});
    },
    // 校对文章
    checkArticle() {
      let verseList = [];
      this.data.detail.forEach((item) => {
        verseList = verseList.concat(item.sentences);
      });
      if (verseList.length > 0) {
        this.showArticleFlag = true;
      } else {
        this.$message.warning('请先生成分词');
      }
    },
    saveWord(saveArr) {
      BatchSegContent({
        text: this.data.content,
        is_build_pinyin: 'true',
        is_custom_fc: 'true',
        is_vocabulary_pinyin_lt: 'true',
        is_fill_punctuation_mark: 'true',
        is_fill_space: 'true',
        fc_paragraph_list: saveArr,
      }).then((res) => {
        if (res.status === 1) {
          res.paragraph_list.forEach((item, index) => {
            let sentenceList = []; // 句子按段数组
            let segList = []; // 句子分词结果
            let sentenceStr = [];
            let para = '';
            let wordsList = [];
            item.forEach((items) => {
              let sentence = items.reduce((acc, itemss) => `${acc + itemss.text}`, '');
              let sentenceS = items.reduce((acc, itemss) => `${acc + itemss.text}&nbsp;&nbsp;`, '');
              let seg = items.map((itemss) => itemss.text);
              para += items.map((itemss) => itemss.text);
              sentenceList.push(sentence);
              sentenceStr.push(sentenceS);
              segList.push(seg);
              let sentArr = [];
              items.forEach((sItem) => {
                let obj = {
                  chs: sItem.text,
                  pinyin: sItem.pinyin,
                  pinyin_up: sItem.pinyin_up,
                  pinyin_tone: sItem.pinyin_tone,
                  fontFamily: this.articleAttrib ? this.articleAttrib.font : '楷体',
                  textDecoration: this.data.other_attrib
                    ? this.data.other_attrib.isUnderline
                      ? this.data.other_attrib.isUnderline
                      : this.data.other_attrib.isStrikethrough
                        ? this.data.other_attrib.isStrikethrough
                        : ''
                    : '',
                  fontWeight: this.data.other_attrib ? this.data.other_attrib.isBold : '',
                  border: this.data.other_attrib ? this.data.other_attrib.border : '',
                  color: this.articleAttrib ? this.articleAttrib.text_color : '',
                  matchWords: '',
                  matchNotes: '',
                  notesColor: '',
                  img: [],
                  imgPosition: 'after',
                  matchNotesObj: {
                    number: '',
                    con: '',
                    pinyin: '',
                    interpret: '',
                    note: '',
                    notesColor: '#8206BF',
                    id: '',
                    isRich: true,
                    matchNotes: sItem.text,
                  },
                };
                sentArr.push(obj);
              });
              wordsList.push(sentArr);
            });
            if (this.data.detail[index]) {
              this.data.detail[index].segList = segList;
              this.data.detail[index].para = para;
              this.data.detail[index].sentenceStr = sentenceStr;
              this.data.detail[index].sentences = sentenceList;
              this.data.detail[index].wordsList = wordsList;
            } else {
              let obj = {
                paraIndex: index,
                para,
                sentences: sentenceList,
                segList: segList,
                seg_words: [],
                wordsList,
                timeList: [],
                isTitle: false,
                sentencesEn: [],
                sentenceStr,
                paraAlign: this.articleAttrib
                  ? this.articleAttrib.align === 'RIGHT'
                    ? 'right'
                    : this.articleAttrib.align === 'MIDDLE'
                      ? 'center'
                      : 'left'
                  : 'left',
                remark: {
                  chs: '',
                  en: '',
                  heightNumber: null,
                  img_list: [],
                  widthNumber: null,
                  chsBg: '#988ed6',
                  enBg: '#fff',
                },
                sourceList: [],
                sourcePosition: 'after',
                heightNumber: null,
                widthNumber: null,
              };
              this.data.detail.push(obj);
            }
          });
          this.$refs.CheckArticle.refreshData();
        }
      });
      this.$message.success('保存成功，请校对拼音');
      this.handleSenWord();
    },
    // 保存拼音
    savePinyin(paraIndex, sentenceIndex, wordIndex, pinyin) {
      if (this.data.pinyin_type === 'tone') {
        this.data.detail[paraIndex].wordsList[sentenceIndex][wordIndex].pinyin_tone = pinyin;
      } else if (wordIndex === 0) {
        this.data.detail[paraIndex].wordsList[sentenceIndex][wordIndex].pinyin_up = pinyin;
      } else {
        this.data.detail[paraIndex].wordsList[sentenceIndex][wordIndex].pinyin = pinyin;
      }
    },
    saveStyle(
      paraIndex,
      sentenceIndex,
      wordIndex,
      fontFamily,
      textDecoration,
      fontWeight,
      border,
      color,
      matchWords,
      matchNotes,
      notesColor,
      img,
      imgPosition,
    ) {
      this.data.detail[paraIndex].wordsList[sentenceIndex][wordIndex].fontFamily = fontFamily;
      this.data.detail[paraIndex].wordsList[sentenceIndex][wordIndex].textDecoration = textDecoration;
      this.data.detail[paraIndex].wordsList[sentenceIndex][wordIndex].fontWeight = fontWeight;
      this.data.detail[paraIndex].wordsList[sentenceIndex][wordIndex].border = border;
      this.data.detail[paraIndex].wordsList[sentenceIndex][wordIndex].color = color;
      this.data.detail[paraIndex].wordsList[sentenceIndex][wordIndex].matchWords = matchWords;
      this.data.detail[paraIndex].wordsList[sentenceIndex][wordIndex].matchNotes = matchNotes;
      this.data.detail[paraIndex].wordsList[sentenceIndex][wordIndex].notesColor = notesColor;
      this.data.detail[paraIndex].wordsList[sentenceIndex][wordIndex].img = img;
      this.data.detail[paraIndex].wordsList[sentenceIndex][wordIndex].imgPosition = imgPosition;
    },
    // 保存校对
    saveCompare() {
      this.compareloading = false;
      // this.data.wordTime = this.compareData;
      this.handleClose();
      // this.compareloading = true;
      // compareSenTenceTime({ matchList: JSON.stringify(this.compareData) })
      //   .then((res) => {
      //     this.compareloading = false;
      //     this.data.wordTime = res.data.result;
      //   })
      //   .catch(() => {
      //     this.compareloading = false;
      //   });
    },
    // 校对时间
    compareTime(type) {
      this.compareType = type;
      this.compareData = JSON.parse(JSON.stringify(this.data.wordTime));
      this.compareShow = true;
    },
    handleClose() {
      this.compareShow = false;
      this.compareData = null;
      this.compareType = '';
    },
    // 校对每个字的时间
    changewordsResultList(index, item) {
      this.data.wordTime[index].wordsResultList = JSON.parse(JSON.stringify(item));
    },
    againWordTime() {
      this.isWordTime = false;
      this.data.wordTime = [];
    },
    createWordTimes() {
      let _this = this;
      let verseList = [];
      if (_this.data.mp3_list && _this.data.mp3_list.length > 0 && _this.data.mp3_list[0].file_id) {
        if (_this.data.content) {
          _this.data.detail.forEach((item) => {
            verseList = verseList.concat(item.sentences);
          });
          if (verseList.length > 0) {
            _this.isWordTime = true;
            let data = {
              audio_file_id: _this.data.mp3_list[0].file_id,
              text: _this.data.content,
              text_type: 'line_text_list',
              line_text_list: verseList,
            };
            getWordTimes(data).then((res) => {
              _this.data.wordTime = res.data.result;
              _this.isWordTime = false;
            });
          } else {
            this.$message.warning('请先生成分词');
          }
        }
      } else {
        _this.$message.warning('请先上传音频');
        _this.loading = false;
      }
    },
    createWordTime() {
      let _this = this;
      this.getfillLiu().then(() => {
        if (_this.data.taskId) {
          let verseList = [];
          _this.data.detail.forEach((item) => {
            verseList = verseList.concat(item.sentences);
          });
          if (verseList.length > 0) {
            _this.isWordTime = true;
            let data = {
              taskId: _this.data.taskId,
              verseList: JSON.stringify(verseList),
              matchType: 'chinese',
              language: 'ch',
            };
            getWordTime(data).then((res) => {
              _this.data.wordTime = res.data.result;
              _this.isWordTime = false;
            });
          }
        } else {
          _this.$message.warning('请先上传音频');
          _this.loading = false;
        }
      });
    },
    // 得到文件流
    getfillLiu() {
      this.loading = true;
      let _this = this;
      return new Promise(function (resolve, reject) {
        if (_this.data.mp3_list && _this.data.mp3_list.length > 0 && _this.data.mp3_list[0].file_id) {
          let id = _this.data.mp3_list[0].file_id;
          let data = {
            file_id: id,
          };
          fileToBase64Text(data).then((res) => {
            let taskIddata = {
              fileName: _this.data.mp3_list[0].name,
              speechBase64: res.base64_text,
              language: 'ch',
            };
            prepareTranscribe(taskIddata)
              .then((ress) => {
                _this.$set(_this.data, 'taskId', ress.data.taskId);
                _this.loading = false;
                resolve();
              })
              .catch(() => {
                _this.loading = false;
              });
          });
        } else {
          _this.$message.warning('请先上传音频');
          _this.loading = false;
        }
      });
    },
    sureNewWords(data) {
      this.data.new_word_list = data;
    },
    sureOtherNewWords(data) {
      this.data.other_word_list = data;
    },
    sureNotes(data) {
      this.data.notes_list = data;
    },
    handleMindMap() {
      // 思维导图数据
      let node_list = [];
      node_list.push({
        name: this.data.content,
        id: Math.random().toString(36).substring(2, 12),
      });
      this.data.mind_map.node_list = node_list;
    },
    handleMultilingual() {
      this.multilingualText = '';
      let flag = false;
      this.data.detail.forEach((item) => {
        if (item.para) {
          if (item.sentences && item.sentences.length > 0) {
            flag = true;
          }
          item.sentences.forEach((items) => {
            this.multilingualText += `<p>${items}<p>`;
          });
        } else {
          this.multilingualText += '<p>&nbsp;</p>';
        }
        // this.multilingualText += item.para ? '<p>' + item.para + '<p>' : '<p>&nbsp;</p>';
      });
      if (flag) {
        this.multilingualVisible = true;
      } else {
        this.$message.warning('请先生成分词');
      }
    },
    // 点击插入图片按钮
    picArticle() {
      let verseList = [];
      this.data.detail.forEach((item) => {
        verseList = verseList.concat(item.sentences);
      });
      if (verseList.length > 0) {
        this.showPicArticleFlag = true;
      } else {
        this.$message.warning('请先生成分词');
      }
    },
    // 自动生成音频
    handleAutoAudio() {
      this.autoLoading = true;
      TextToAudioFile({
        text: this.data.content,
        voice_type: this.data.property.voice_type,
        emotion: this.data.property.emotion,
        speed_ratio: this.data.property.speed_ratio,
        sentence_interval: 1000,
      })
        .then(({ status, file_id, file_url }) => {
          this.autoLoading = false;
          if (status === 1) {
            this.data.mp3_list = [
              {
                name: '自动生成课文音频.mp3',
                media_duration: 0,
                temporary_url: file_url,
                url: file_id,
                file_id,
              },
            ];
            this.data.file_id_list = [file_id];
          }
        })
        .catch(() => {
          this.autoLoading = false;
        });
    },
    /**
     * 打开校对字幕
     */
    openCheckSubtitles(type, index) {
      this.compareType = type;
      // this.compareData = JSON.parse(JSON.stringify(this.data.wordTime));
      // this.compareShow = true;
      if (this.data.mp3_list.length === 0) {
        return this.$message.warning('请先上传音频文件');
      }
      this.subtitleList = [];
      if (this.compareType === '句子') {
        this.data.wordTime.forEach((item, index) => {
          let obj = {
            content: item.onebest,
            lrc_data: {
              begin_time: item.bg,
              end_time: item.ed,
            },
          };
          this.subtitleList.push(obj);
        });
      } else {
        this.compareIndex = index;
        this.data.wordTime[index].wordsResultList.forEach((item, index) => {
          let obj = {
            content: item.wordsName,
            lrc_data: {
              begin_time: item.wordBg,
              end_time: item.wordEd,
            },
          };
          this.subtitleList.push(obj);
        });
      }
      this.visible = true;
    },
    /**
     * 保存字幕
     * @param {Array} dataList
     */
    saveSubtitles(dataList) {
      if (this.compareType === '句子') {
        this.data.wordTime.forEach((item, index) => {
          item.bg = dataList[index] ? dataList[index].lrc_data.begin_time : 0;
          item.ed = dataList[index] ? dataList[index].lrc_data.end_time : 0;
        });
      } else {
        this.data.wordTime[this.compareIndex].wordsResultList.forEach((item, index) => {
          item.wordBg = dataList[index] ? dataList[index].lrc_data.begin_time : 0;
          item.wordEd = dataList[index] ? dataList[index].lrc_data.end_time : 0;
        });
      }
    },
    selectItem(item, index) {
      this.itemActive = item;
      this.itemActiveIndex = index;
      this.pinyinList = [];
      toolGetWordPinyinCorrectionList({
        word: item.chs,
      })
        .then((res) => {
          if (res.status === 1) {
            this.pinyinList = res.pinyin_correction_list;
          }
          this.dialogFlag = true;
        })
        .catch(() => {
          this.dialogFlag = true;
        });

      this.checkPinyinInput = '';
    },
    cancleDialog() {
      this.itemActive = null;
      this.checkPinyinInput = '';
      this.oldInput = '';
      this.dialogFlag = false;
    },
    surePinyin() {
      this.oldInput = JSON.parse(JSON.stringify(this.checkPinyinInput.trim()));
      if (this.oldInput) {
        this.handleReplaceTone(this.checkPinyinInput.trim());
      } else {
        this.itemActive.pinyin = ' ';
        this.itemActive.pinyin_up = ' ';
        this.$message.success('保存成功');
        // this.itemActive = null;
        this.dialogFlag = false;
      }
    },
    handleReplaceTone(e) {
      let _this = this;
      _this.$nextTick(() => {
        let value = e;
        _this.resArr = [];
        if (value) {
          let valueArr = [];
          value.replace(/\s+/g, ' ');
          valueArr = value.split(' ');
          //   let reg = /\s+/g;
          //   valueArr = value.split(reg);

          valueArr.forEach((item, index) => {
            if (this.data.pinyin_type === 'tone') {
              this.resArr.push([
                {
                  con: this.toneList[Number(item)],
                },
              ]);
            } else {
              this.handleValue(item);
            }
          });
          let str = '';
          setTimeout(() => {
            _this.resArr.forEach((item) => {
              str += ' ';
              item.forEach((sItem) => {
                if (sItem.number && sItem.con) {
                  let number = Number(sItem.number);
                  let con = sItem.con;
                  let word = _this.addTone(number, con);
                  str += word;
                } else if (sItem.number) {
                  str += sItem.number;
                } else if (sItem.con) {
                  str += ` ${sItem.con} `;
                }
              });
            });
            this.checkPinyinInput = str.trim();

            this.itemActive.pinyin = this.checkPinyinInput.replace(/\s+/g, '');
            this.itemActive.pinyin_up = this.checkPinyinInput.replace(/\s+/g, '');
            this.$message.success('保存成功');
            // this.itemActive = null;
            this.checkPinyinInput = '';
            this.oldInput = '';
            this.dialogFlag = false;
          }, 10);
        }
      });
    },
    handleValue(valItem) {
      let reg = /\d/;
      let reg2 = /[A-Za-z]+\d/g;
      let numList = [];
      let valArr = valItem.split('');
      if (reg2.test(valItem)) {
        for (let i = 0; i < valArr.length; i++) {
          let item = valItem[i];
          if (reg.test(item)) {
            let numIndex = numList.length === 0 ? 0 : numList[numList.length - 1].index;
            let con = valItem.substring(numIndex, i);
            con = con.replace(/\d/g, '');
            let obj = {
              index: i,
              number: item,
              con,
              isTran: true,
            };
            numList.push(obj);
          }
        }
      } else {
        numList = [];
      }
      if (numList.length === 0) {
        this.resArr.push([{ con: valItem }]);
      } else {
        this.resArr.push(numList);
      }
    },
    addTone(number, con) {
      let _this = this;
      let zmList = ['a', 'o', 'e', 'i', 'u', 'v', 'A', 'O', 'E', 'I', 'U', 'n', 'm'];
      if (number) {
        for (let i = 0; i < zmList.length; i++) {
          let zm = zmList[i];
          if (con.indexOf(zm) > -1) {
            let zm2 = _this.tableData[i][number - 1];
            if (con.indexOf('iu') > -1) {
              zm2 = _this.tableData[4][number - 1];
              con = con.replace('u', zm2);
            } else if (con.indexOf('ui') > -1) {
              zm2 = _this.tableData[3][number - 1];
              con = con.replace('i', zm2);
            } else if (
              con.indexOf('yv') > -1 ||
              con.indexOf('jv') > -1 ||
              con.indexOf('qv') > -1 ||
              con.indexOf('xv') > -1
            ) {
              zm2 = _this.tableData[4][number - 1];
              con = con.replace('v', zm2);
            } else {
              con = con.replace(zm, zm2);
            }

            break;
          }
        }
      }
      return con;
    },
    // 设置样式
    setActiveTextStyle(type, val) {
      let style = this.data.other_attrib;
      if (type === 'underline') {
        style.isUnderline = style.isUnderline === 'underline' ? '' : 'underline';
        if (style.isUnderline === 'underline') {
          style.isStrikethrough = '';
        }
        this.data.detail.forEach((item) => {
          item.wordsList.forEach((items) => {
            items.forEach((itemss) => {
              itemss.textDecoration = style.isUnderline;
            });
          });
        });
      } else if (type === 'bold') {
        style.isBold = style.isBold === 'bold' ? '' : 'bold';
        this.data.detail.forEach((item) => {
          item.wordsList.forEach((items) => {
            items.forEach((itemss) => {
              itemss.fontWeight = style.isBold;
            });
          });
        });
      } else if (type === 'line-through') {
        style.isStrikethrough = style.isStrikethrough === 'line-through' ? '' : 'line-through';
        if (style.isStrikethrough === 'line-through') {
          style.isUnderline = '';
        }
        this.data.detail.forEach((item) => {
          item.wordsList.forEach((items) => {
            items.forEach((itemss) => {
              itemss.textDecoration = style.isStrikethrough;
            });
          });
        });
      } else if (type === 'border') {
        style.border = style.border === 'dotted' ? '' : 'dotted';
        this.data.detail.forEach((item) => {
          item.wordsList.forEach((items) => {
            items.forEach((itemss) => {
              itemss.border = style.border;
            });
          });
        });
      } else if (type === 'align') {
        style.align = val;
        this.articleAttrib.align = val;
        this.data.detail.forEach((item) => {
          item.paraAlign =
            this.articleAttrib.align === 'RIGHT' ? 'right' : this.articleAttrib.align === 'MIDDLE' ? 'center' : 'left';
        });
      }
    },
    // 点击汉字打开关联注释弹窗
    matchItemNotes(item) {
      if (!item.matchNotesObj.id) {
        item.matchNotesObj.id = getRandomNumber();
      }
      this.matchNotesObj = item.matchNotesObj;
      this.matchNoteFlag = true;
    },
    cancleMatchNotesDialog() {
      this.$confirm('确定要删除此条气泡吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.handleSyncCon(this.matchNotesObj, 'delete');
          let index = this.data.notes_list.option.findIndex((items) => items.id === this.matchNotesObj.id);
          this.data.notes_list.option.splice(index, 1);
          this.matchNoteFlag = false;
        })
        .catch(() => {});
    },
    // 确定关联注释
    sureMatchNotes() {
      let index = this.data.notes_list.option.findIndex((items) => items.id === this.matchNotesObj.id);
      if (index > -1) {
        this.data.notes_list.option[index] = this.matchNotesObj;
      } else {
        this.data.notes_list.option.push(this.matchNotesObj);
      }
      this.matchNoteFlag = false;
      this.editWordsFlag = true;
      this.editWordIndex = 1;
    },
    async handleBlurCon() {
      let text = this.matchNotesObj.con.replace(/<[^>]+>/g, '');
      if (text) {
        this.matchNotesObj.pinyin = await this.handlePinyins(
          text,
          this.data.notes_list.property.is_first_sentence_first_hz_pinyin_first_char_upper_case,
        );
      }
    },
    // 自动生成拼音
    handlePinyins(text, flag) {
      let data = {
        text: text,
        is_rich_text: 'false',
        is_first_sentence_first_hz_pinyin_first_char_upper_case: flag ? flag : 'false',
        is_fill_space: 'false',
        is_custom_fc: 'false',
      };
      return new Promise((resolve, reject) => {
        PinyinBuild_OldFormat(data).then((res) => {
          if (res.parsed_text) {
            let mergedData = '';
            res.parsed_text.paragraph_list.map((outerArr, i) =>
              outerArr.map((innerArr, j) =>
                innerArr.map((newItem, k) => {
                  mergedData += newItem.pinyin + ' ';
                }),
              ),
            );
            resolve(mergedData);
          }
        });
      });
    },
    // 在气泡列表里修改了内容，同步detail的内容
    handleSyncCon(obj, type) {
      this.data.detail.forEach((item) => {
        item.wordsList.forEach((items) => {
          items.forEach((itemss) => {
            if (itemss.matchNotesObj.id === obj.id) {
              if (type === 'delete') {
                itemss.matchNotesObj = {
                  number: '',
                  con: '',
                  pinyin: '',
                  interpret: '',
                  note: '',
                  notesColor: '#8206BF',
                  id: '',
                  isRich: true,
                  matchNotes: itemss.chs,
                };
              } else {
                itemss.matchNotesObj = obj;
              }
            }
          });
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.article-wrapper {
  display: flex;
  flex-direction: column;
  row-gap: 16px;
  align-items: flex-start;
}

.upload-file {
  display: flex;
  column-gap: 12px;
  align-items: center;

  .file-name {
    display: flex;
    column-gap: 14px;
    align-items: center;
    justify-content: space-between;
    max-width: 360px;
    padding: 8px 12px;
    font-size: 14px;
    color: #1d2129;
    background-color: #f7f8fa;

    span {
      display: flex;
      column-gap: 14px;
      align-items: center;
    }
  }

  .svg-icon {
    cursor: pointer;
  }
}

.btn-box {
  display: flex;
  flex-flow: wrap;
  gap: 10px;

  a {
    padding: 5px 16px;
    font-size: 14px;
    line-height: 22px;
    color: #4e5969;
    cursor: pointer;
    background: #f2f3f5;
    border-radius: 2px;
  }

  p {
    margin: 0;
  }
}

.new-btn-box {
  p {
    margin: 0 0 10px;
    font-size: 14px;
    font-weight: bold;
    color: #333;
  }

  > div {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  a {
    display: block;
    padding: 6px 14px;
    font-size: 13px;
    color: #000;
    cursor: pointer;
    background: #fff;
    border: 1px solid #d9d9d9;
    border-radius: 4px;

    &:hover {
      color: #1890ff;
      border-color: #1890ff;
    }
  }

  :deep .el-button {
    padding: 6px 14px;
    font-size: 13px;
    line-height: 1.5;
    color: #000;
    cursor: pointer;
    background: #fff;
    border: 1px solid #d9d9d9;
    border-radius: 4px;

    &:hover {
      color: #1890ff;
      border-color: #1890ff;
    }

    &.is-disabled {
      color: #ccc;
      border-color: #e8e8e8;
    }
  }
}

.tips {
  margin: 0;
  font-size: 12px;
  color: #e82d2d;
}

.tabs-box {
  display: flex;
  column-gap: 12px;
  margin: 12px 0;

  a {
    padding: 5px 16px;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px; /* 157.143% */
    color: #4e5969;
    cursor: pointer;
    border-radius: 100px;

    &.active {
      color: #165dff;
      background: #f2f3f5;
    }
  }
}

.text {
  display: flex;
  flex-flow: wrap;

  .text-item {
    padding: 0 1px;
    text-align: center;
    cursor: pointer;
  }

  .pinyin {
    display: block;
    font-family: 'PINYIN-B';
    white-space: pre;
  }

  .word {
    display: block;
  }
}

.table-rich-toolbar {
  display: flex;
  gap: 5px;

  /* align-items: center; */

  :deep .el-form-item--small.el-form-item {
    margin: 0 5px 0 0;
  }

  :deep .el-form-item__label {
    padding-right: 3px;
  }

  > span {
    height: 30px;
    padding: 5px 6px;
    color: #222f3e;
    cursor: pointer;
    border-radius: 5px;

    &:hover {
      background: #cce2fa;
    }

    &.active {
      background: #a6ccf7;
    }
  }
}
</style>
<style lang="scss">
.article-matchNotes-dialog {
  .el-dialog__header,
  .el-dialog__body {
    padding: 5px 10px;
  }

  .btn-box {
    display: block;
    padding: 5px 0;
    text-align: right;

    .el-button {
      padding: 2px 12px;
      font-size: 12px;
      line-height: 20px;
    }
  }

  .matchNotes-color {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 5px;

    span {
      display: flex;
      gap: 3px;
      align-items: center;
      cursor: pointer;
    }

    .el-color-picker--small {
      height: 16px;
    }

    .el-color-picker__trigger {
      width: 16px;
      height: 16px;
      padding: 0;
      border: none;
    }
  }
}

.article-checkpinyin-dialog {
  .el-dialog__header {
    padding: 0;
  }

  .el-dialog__body {
    padding: 0;
  }

  .el-input__inner {
    text-align: center;
    background: #f3f3f3;
  }

  .check-box {
    padding: 24px;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 25%);

    .content {
      display: flex;
      align-items: center;
      justify-content: center;

      .words-box {
        color: #000;
        text-align: center;

        .words {
          display: block;
          font-size: 28px;
          font-weight: 400;
          line-height: 40px;
        }

        .pinyin {
          display: block;
          height: 20px;
          font-family: 'League';
          font-size: 20px;
          font-weight: 400;
          line-height: 1;
        }
      }
    }

    .checkPinyinInput {
      margin: 16px 0 8px;
    }

    .tips {
      margin: 0 0 24px;
      font-size: 12px;
      font-weight: 400;
      line-height: 18px;
      color: #a0a0a0;
    }

    .btn-box {
      display: block;
      text-align: right;

      .el-button {
        padding: 2px 12px;
        font-size: 12px;
        line-height: 20px;
      }
    }
  }
}
</style>