<template>
  <div class="wordDetailModule wordDetailChs">
    <div class="module-inner">
      <div class="top" v-if="data">
        <div class="operation">
          <div>
            <template v-if="optionRes && optionRes.length > 0">
              <!-- <img
                src="../../../../assets/icon/starline-16-normal-Black.png"
                alt=""
                v-if="!notshowNext"
              /> -->
              <img
                style="margin-right: 8px"
                src="@/assets/word_detail/Left-16-normal-Black.png"
                alt=""
                @click="lastDetail"
                v-if="!notshowNext"
              />
              <img
                src="@/assets/word_detail/Right-16-normal-Black.png"
                alt=""
                @click="nextDetail"
                v-if="!notshowNext"
              />
            </template>
            <img
              style="margin-right: 0"
              @click="closeWordShow"
              src="@/assets/word_detail/Cross-16-normal-Black.png"
              alt=""
            />
          </div>
        </div>
        <div class="wordDetail" v-if="data.new_word_str">
          <div
            :class="[
              'bwc-Strockplay',
              themeColor == 'green' ? 'green-border' : themeColor == 'red' ? 'red-border' : 'brown-border',
            ]"
            v-if="data.new_word_str.length <= 4"
          >
            <div class="strockplay" v-for="(conItem, conindex) in data.new_word_str" :key="'new_word_' + conindex">
              <Strockplayredline
                :key="conItem + detailIndex + conindex"
                :Book_text="conItem"
                :playStorkes="true"
                :targetDiv="'bwcHanziIntp' + conItem + conindex"
                :wordNum="data.new_word_str.length"
                :themeColor="themeColor"
              />
              <div
                :class="['bwc-line', themeColor == 'green' ? 'green-bg' : themeColor == 'red' ? 'red-bg' : 'brown-bg']"
                v-if="conindex < data.new_word_str.length - 1"
              ></div>
            </div>
          </div>
          <p
            v-else
            :class="[
              'bwc-tolength',
              themeColor == 'green' ? 'green-border' : themeColor == 'red' ? 'red-border' : 'brown-border',
            ]"
          >
            <span v-for="(item, index) in data.new_word_str" :key="index">{{ item }}</span>
          </p>
          <div class="wordInfor">
            <div class="yinpin">
              <span class="pinyintext" v-html="data.pinyin.toLowerCase()"></span>
              <template v-if="data.newWordMp3">
                <Audio :mp3="data.newWordMp3" :themeColor="themeColor" :bg="bg" :ed="ed" />
              </template>
              <template v-else-if="data.mp3_list && data.mp3_list[0] && data.mp3_list[0].id">
                <Audio :mp3="data.mp3_list[0].id" :themeColor="themeColor" />
              </template>
              <template v-else-if="data.mp3Url">
                <Audio :mp3="data.mp3Url" :themeColor="themeColor" :bg="bg" :ed="ed" />
              </template>
            </div>
            <p class="jieshu" v-html="data.definition_list"></p>
          </div>
        </div>
        <div class="zhedie-white">
          <div class="merge" v-loading="loading3">
            <div class="topTitle">
              <div class="left">
                <!-- <div
                  @click="cutLiju(0)"
                  :class="[lijuIndex == 0 ? 'sele' : '']"
                >
                  <span> 全部 </span>
                  <span
                    v-if="
                      list1.sentence_list &&
                        list2.sentence_list &&
                        list3.sentence_list
                    "
                  >
                    {{
                      list1.sentence_list.length +
                        list2.sentence_list.length +
                        list3.sentence_list.length
                    }}
                  </span>
                </div> -->
                <div
                  @click="cutLiju(1)"
                  v-if="list1.sentence_list && list1.sentence_list.length > 0"
                  :class="[lijuIndex == 1 ? 'sele' : '']"
                >
                  <span> 本课例句 </span>
                  <span>{{ list1.sentence_list.length }} </span>
                </div>
                <div
                  @click="cutLiju(2)"
                  v-if="list2.sentence_list && list2.sentence_list.length > 0"
                  :class="[lijuIndex == 2 ? 'sele' : '']"
                >
                  <span> 本书例句 </span>
                  <span>
                    {{ list2.sentence_list.length }}
                  </span>
                </div>
                <div
                  @click="cutLiju(3)"
                  v-if="list3.sentence_list && list3.sentence_list.length > 0"
                  :class="[lijuIndex == 3 ? 'sele' : '']"
                >
                  <span>本套例句</span>
                  <span>{{ list3.sentence_list.length }}</span>
                </div>
              </div>
              <!-- <div class="right">
                <div
                  @click="cutPattern(0)"
                  :class="[lijuPatternIndex == 0 ? 'sele' : '']"
                >
                  引语模式
                </div>
                <div
                  @click="cutPattern(1)"
                  :class="[lijuPatternIndex == 1 ? 'sele' : '']"
                >
                  KWIC模式
                </div>
              </div> -->
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="cut-area" style="display: none"></div>
  </div>
</template>

<script>
import Strockplayredline from './Strockplayredline.vue';
import Audio from '../../voice_matrix/components/AudioRed.vue';
import { GetBookWebSIContent } from '@/api/app';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    Strockplayredline,
    Audio,
  },
  props: [
    'data',
    'changeDetailIndex',
    'closeWord',
    'detailIndex',
    'notshowNext',
    'getWordLiju',
    'optionRes',
    'themeColor',
    'isSuccess',
    'currentTreeID',
    'type',
    'bg',
    'ed',
  ],
  data() {
    //这里存放数据
    return {
      height: '',
      margintop: '',
      wordShow: true,
      wordShow2: false,
      wordShow3: false,
      list1: [],
      list2: [],
      list3: [],
      allList: [],
      isShow: false,
      old_word: '',
      loading1: false,
      loading2: false,
      loading3: false,
      dataDetail: null,
      lijuIndex: 1,
      lijuPatternIndex: 0,
      CurrentList: [],
      sortIndex: 0,
      chsFhList: ['，', '。', '”', '：', '》', '？', '！', '；'],
      punctuationList: ['(', ')', '……', '（', '）', '…', '/'], // 标点数组
    };
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中数据变化
  watch: {
    data: {
      handler: function (val, oldVal) {
        const _this = this;
        if (val) {
          _this.initData();
          // if (_this.type == 'newWordDetail') {
          //   _this.getChineseInfo();
          // }
        }
      },
      // 深度观察监听
      deep: true,
    },
  },
  //方法集合
  methods: {
    // 切换 例句
    cutLiju(index, type) {
      if (index == this.lijuIndex && !type) {
        return;
      }
      this.lijuIndex = index;
      if (this.lijuPatternIndex == 0) {
        if (index == 0) {
          this.CurrentList = JSON.parse(JSON.stringify(this.allList.sentence_list));
        } else if (index == 1) {
          this.CurrentList = JSON.parse(JSON.stringify(this.list1.sentence_list));
        } else if (index == 2) {
          this.CurrentList = JSON.parse(JSON.stringify(this.list2.sentence_list));
        } else if (index == 3) {
          this.CurrentList = JSON.parse(JSON.stringify(this.list3.sentence_list));
        }
      } else {
        let key = '';
        if (this.sortIndex == 0) {
          key = 'sentence_list_sort_left';
        } else if (this.sortIndex == 1) {
          key = 'sentence_list_sort_min';
        } else if (this.sortIndex == 2) {
          key = 'sentence_list_sort_right';
        } else {
          key = 'sentence_list';
        }
        if (index == 0) {
          this.CurrentList = JSON.parse(JSON.stringify(this.allList[key]));
        } else if (index == 1) {
          this.CurrentList = JSON.parse(JSON.stringify(this.list1[key]));
        } else if (index == 2) {
          this.CurrentList = JSON.parse(JSON.stringify(this.list2[key]));
        } else if (index == 3) {
          this.CurrentList = JSON.parse(JSON.stringify(this.list3[key]));
        }
      }
    },
    playAudio() {},
    // 关闭单词详情
    closeWordShow() {
      this.closeWord(false);
    },
    // 上一个单词详情
    lastDetail() {
      if (this.detailIndex == 0) {
        this.$message.warning('当前已经是第一个');
        return;
      }
      this.changeDetailIndex('last');
    },
    // 下一个单词详情
    nextDetail() {
      let _this = this;

      if (_this.detailIndex == _this.optionRes.length - 1) {
        this.$message.warning('当前已经是最后一个了 ');
        return;
      }
      _this.changeDetailIndex('next');
    },
    viewIntp() {
      this.loading1 = true;
      this.loading2 = true;
      this.loading3 = true;
      let Mname = 'book-courseware_manager-GetCoursewareWordExampleSentenceList_Sort';
      // 获取本课的 本教材的 本套的 的例句
      GetBookWebSIContent(Mname, {
        courseware_id: this.currentTreeID, // 课件id
        word: this.data.new_word, //生词
        search_scope: 0, //检索范围0 本课件  1本教材 2本套
        is_contain_word_variants: false,
        is_filter_repetitive_sentence: 'true',
        book_publish_status: 1,
        sort_mode: 'ASCENT',
        compare_mode: 'SOURCE',
        book_id_list: [],
        is_contain_word_variants: false,
        is_contain_stat_data: false,
        sentence_fc_length_min: -1,
        sentence_fc_length_max: -1,
      })
        .then((res) => {
          this.allList = {
            sentence_list: [],
            sentence_list_sort_left: [],
            sentence_list_sort_mid: [],
            sentence_list_sort_right: [],
          };
          this.loading1 = false;
          this.list1 = res;
          if (res.sentence_list.length > 0) {
            this.list1.sentence_list = this.handleExample(res.sentence_list);
            // this.list1.sentence_list_sort_left = this.handleExample(
            //   res.sentence_list_sort_left,
            //   "left"
            // );
            // this.list1.sentence_list_sort_mid = this.handleExample(
            //   res.sentence_list_sort_mid,
            //   "mid"
            // );

            // this.list1.sentence_list_sort_right = this.handleExample(
            //   res.sentence_list_sort_right,
            //   "right"
            // );

            this.allList.sentence_list = this.allList.sentence_list.concat(this.list1.sentence_list);
            // this.allList.sentence_list_sort_left = this.allList.sentence_list_sort_left.concat(
            //   this.list1.sentence_list_sort_left
            // );
            // this.allList.sentence_list_sort_mid = this.allList.sentence_list_sort_mid.concat(
            //   this.list1.sentence_list_sort_mid
            // );
            // this.allList.sentence_list_sort_right = this.allList.sentence_list_sort_right.concat(
            //   this.list1.sentence_list_sort_right
            // );
          }
          GetBookWebSIContent(Mname, {
            courseware_id: this.currentTreeID, // 课件id
            word: this.data.new_word, //生词
            search_scope: 1, //检索范围0 本课件  1本教材 2本套
            is_contain_word_variants: false,
            is_filter_repetitive_sentence: 'true',
            book_publish_status: 1,
            sort_mode: 'ASCENT',
            compare_mode: 'SOURCE',
            book_id_list: [],
            is_contain_word_variants: false,
            is_contain_stat_data: false,
            sentence_fc_length_min: -1,
            sentence_fc_length_max: -1,
          })
            .then((res) => {
              this.loading2 = false;
              this.list2 = res;
              if (res.sentence_list.length > 0) {
                this.list2.sentence_list = this.handleExample(res.sentence_list);
                // this.list2.sentence_list_sort_left = this.handleExample(
                //   res.sentence_list_sort_left,
                //   "left"
                // );
                // this.list2.sentence_list_sort_mid = this.handleExample(
                //   res.sentence_list_sort_mid,
                //   "mid"
                // );
                // this.list2.sentence_list_sort_right = this.handleExample(
                //   res.sentence_list_sort_right,
                //   "right"
                // );
                this.allList.sentence_list = this.allList.sentence_list.concat(this.list2.sentence_list);
                // this.allList.sentence_list_sort_left = this.allList.sentence_list_sort_left.concat(
                //   this.list2.sentence_list_sort_left
                // );
                // this.allList.sentence_list_sort_mid = this.allList.sentence_list_sort_mid.concat(
                //   this.list2.sentence_list_sort_mid
                // );
                // this.allList.sentence_list_sort_right = this.allList.sentence_list_sort_right.concat(
                //   this.list2.sentence_list_sort_right
                // );
              }

              GetBookWebSIContent(Mname, {
                courseware_id: this.currentTreeID, // 课件id
                word: this.data.new_word, //生词
                search_scope: 2, //检索范围0 本课件  1本教材 2本套
                is_contain_word_variants: false,
                is_filter_repetitive_sentence: 'true',
                book_publish_status: 1,
                sort_mode: 'ASCENT',
                compare_mode: 'SOURCE',
                book_id_list: [],
                is_contain_word_variants: false,
                is_contain_stat_data: false,
                sentence_fc_length_min: -1,
                sentence_fc_length_max: -1,
              })
                .then((res) => {
                  this.list3 = res;
                  if (res.sentence_list.length > 0) {
                    this.list3.sentence_list = this.handleExample(res.sentence_list);
                    // this.list3.sentence_list_sort_left = this.handleExample(
                    //   res.sentence_list_sort_left,
                    //   "left"
                    // );
                    // this.list3.sentence_list_sort_mid = this.handleExample(
                    //   res.sentence_list_sort_mid,
                    //   "mid"
                    // );
                    // this.list3.sentence_list_sort_right = this.handleExample(
                    //   res.sentence_list_sort_right,
                    //   "right"
                    // );

                    this.allList.sentence_list = this.allList.sentence_list.concat(this.list3.sentence_list);
                    // this.allList.sentence_list_sort_left = this.allList.sentence_list_sort_left.concat(
                    //   this.list3.sentence_list_sort_left
                    // );
                    // this.allList.sentence_list_sort_mid = this.allList.sentence_list_sort_mid.concat(
                    //   this.list3.sentence_list_sort_mid
                    // );
                    // this.allList.sentence_list_sort_right = this.allList.sentence_list_sort_right.concat(
                    //   this.list3.sentence_list_sort_right
                    // );
                  }
                  this.CurrentList = JSON.parse(JSON.stringify(this.allList.sentence_list));
                  this.loading3 = false;
                })
                .catch((err) => {
                  this.loading3 = false;
                });
            })
            .catch((err) => {
              this.loading3 = false;
            });
        })
        .catch((err) => {
          this.loading3 = false;
        });
    },
    // handleExample(list) {
    //   // let list1Ora = JSON.parse(JSON.stringify(_this.data.list1))
    //   list = list.map((item, index) => {
    //     let sentence = JSON.parse(JSON.stringify(item.sentence));
    //     let res = "";
    //     for (let i = 0; i < item.position_list.length; i++) {
    //       let part1 = "";
    //       let part2 = "";
    //       let part3 = "";
    //       if (item.position_list.length > 1) {
    //         if (i == 0) {
    //           part1 = sentence.substring(0, item.position_list[i].begin);
    //           part2 = sentence.substring(
    //             item.position_list[i].begin,
    //             item.position_list[i].end
    //           );
    //           part3 = sentence.substring(
    //             item.position_list[i].end,
    //             item.position_list[i + 1].begin
    //           );
    //         } else if (i == item.position_list.length - 1) {
    //           part2 = sentence.substring(
    //             item.position_list[i].begin,
    //             item.position_list[i].end
    //           );
    //           part3 = sentence.substring(item.position_list[i].end);
    //         } else {
    //           part2 = sentence.substring(
    //             item.position_list[i].begin,
    //             item.position_list[i].end
    //           );
    //           part3 = sentence.substring(
    //             item.position_list[i].end,
    //             item.position_list[i + 1].begin
    //           );
    //         }
    //       } else {
    //         part1 = sentence.substring(0, item.position_list[i].begin);
    //         part2 = sentence.substring(
    //           item.position_list[i].begin,
    //           item.position_list[i].end
    //         );
    //         part3 = sentence.substring(item.position_list[i].end);
    //       }
    //       res +=
    //         part1 + '<span style="color:#DE4444;">' + part2 + "</span>" + part3;
    //     }
    //     item.res = res;
    //     return item;
    //   });
    //   return list;
    // },
    handleExample(list, type) {
      if (list.length > 0) {
        list = list.map((item, index) => {
          let str = item.source_courseware_name_path;
          item.show_source_courseware_name_path = str.slice(0, 8) + '...';
          if (type == 'left') {
            let sentence = JSON.parse(JSON.stringify(item.sentence));
            let arr = JSON.parse(JSON.stringify(item.sentence_fc_list));
            arr.forEach((items, indexs) => {
              if (indexs == item.sentence_fc_list_word_index) {
                arr[indexs] = `<span style=color:#DE4444;font-weight:700;>${arr[indexs]}</span>`;
              }
            });
            let data = this.changefiveword(arr, item.sentence_fc_list_word_index, type);
            item.resArr = data;
          } else if (type == 'right') {
            let sentence = JSON.parse(JSON.stringify(item.sentence));
            let arr = JSON.parse(JSON.stringify(item.sentence_fc_list));
            arr.forEach((items, indexs) => {
              if (indexs == item.sentence_fc_list_word_index) {
                arr[indexs] = `<span style=color:#DE4444;font-weight:700;>${arr[indexs]}</span>`;
              }
            });
            let data = this.changefiveword(arr, item.sentence_fc_list_word_index, type);
            item.resArr = data;
          } else if (type == 'mid') {
            let sentence = JSON.parse(JSON.stringify(item.sentence));
            let arr = JSON.parse(JSON.stringify(item.sentence_fc_list));
            arr.forEach((items, indexs) => {
              if (indexs == item.sentence_fc_list_word_index) {
                arr[indexs] = `<span style=color:#DE4444;font-weight:700;>${arr[indexs]}</span>`;
              }
            });
            let data = this.changefiveword(arr, item.sentence_fc_list_word_index, type);
            item.resArr = data;
          } else {
            let newsentence = JSON.parse(JSON.stringify(item.sentence));
            let res = '';
            for (let i = 0; i < item.position_list.length; i++) {
              let part1 = '';
              let part2 = '';
              let part3 = '';
              if (item.position_list.length > 1) {
                if (i == 0) {
                  part1 = newsentence.substring(0, item.position_list[i].begin);
                  part2 = newsentence.substring(item.position_list[i].begin, item.position_list[i].end);
                  part3 = newsentence.substring(item.position_list[i].end, item.position_list[i + 1].begin);
                } else if (i == item.position_list.length - 1) {
                  part2 = newsentence.substring(item.position_list[i].begin, item.position_list[i].end);
                  part3 = newsentence.substring(item.position_list[i].end);
                } else {
                  part2 = newsentence.substring(item.position_list[i].begin, item.position_list[i].end);
                  part3 = newsentence.substring(item.position_list[i].end, item.position_list[i + 1].begin);
                }
              } else {
                part1 = newsentence.substring(0, item.position_list[i].begin);
                part2 = newsentence.substring(item.position_list[i].begin, item.position_list[i].end);
                part3 = newsentence.substring(item.position_list[i].end);
              }
              res += part1 + '<span style="color:#DE4444;">' + part2 + '</span>' + part3;
            }
            item.res = res;
          }
          return item;
        });
        return list;
      } else {
        return [];
      }
    },
    changefiveword(arr, index, type) {
      let num = 6;
      let colorIndex = 0;
      let colorList = ['#4D7EFF', '#A4430F', '#9342C5', '#FF8718', '#1DAA91'];
      for (let i = 1; i < num; i++) {
        if (type == 'left') {
          if (index - i >= 0) {
            if (this.chsFhList.indexOf(arr[index - i]) == -1) {
              arr[index - i] = `<span style=color:${colorList[colorIndex]};>${arr[index - i]}</span>`;
              colorIndex++;
            } else {
              num++;
            }
          }
        } else if (type == 'right') {
          if (index + i <= arr.length - 1) {
            if (this.chsFhList.indexOf(arr[index + i]) == -1) {
              arr[index + i] = `<span style=color:${colorList[colorIndex]};>${arr[index + i]}</span>`;
              colorIndex++;
            } else {
              num++;
            }
          }
        }
      }
      let newarr = [];
      let arr1 = [];
      let arr2 = [];
      let arr3 = [];
      arr.forEach((item, i) => {
        if (i < index) {
          arr1.push(item);
        } else if (i == index) {
          arr2.push(item);
        } else {
          arr3.push(item);
        }
      });
      newarr.push(arr1);
      newarr.push(arr2);
      newarr.push(arr3);
      return newarr;
      //       arr[indexs - 1] = `<span style=color:#4D7EFF;>${
      //   arr[indexs - 1]
      // }</span>`;
      // arr[indexs - 2] = `<span style=color:#1DAA91;>${
      //   arr[indexs - 2]
      // }</span>`;
      // arr[indexs - 3] = `<span style=color:#A4430F;>${
      //   arr[indexs - 3]
      // }</span>`;
      // arr[indexs - 4] = `<span style=color:#DE4444;>${
      //   arr[indexs - 4]
      // }</span>`;
      // arr[indexs - 5] = `<span style=color:#DE4444;>${
      //   arr[indexs - 5]
      // }</span>`;
    },
    initData() {
      // 去掉生词里的标点
      let new_word_str = '';
      for (let i = 0; i < this.data.new_word.length; i++) {
        if (/[\u4E00-\u9FA5\uF900-\uFA2D]/.test(this.data.new_word[i])) {
          new_word_str += this.data.new_word[i];
        }
      }
      this.data.new_word_str = new_word_str;
      this.viewIntp();
    },
    handleChangeTab(flag) {
      this[flag] = !this[flag];
    },
    getChineseInfo() {
      let _this = this;
      let data = {
        query: _this.data.new_word,
      };
      // getHZChineseInfo(data).then((res) => {
      //   _this.dataDetail = res.data.result;
      //   _this.handleChineseDetail();
      // });
    },
    // 处理数据
    handleChineseDetail() {
      let _this = this;
      if (_this.dataDetail) {
        _this.dataDetail.forEach((item) => {
          if (item.request.queryType == 'entity') {
            // 读音
            item.response.entity.forEach((items) => {
              items.attrs.forEach((itemss) => {
                if (itemss.key == 'pronunciation') {
                  // 音频
                  let Mname = 'tool-TextToVoiceFile';
                  // getContentFile(Mname, {
                  //   text: this.word.detail.new_word,
                  // }).then((res) => {
                  //   _this.mp3Url = res.file_url;
                  // });
                  // _this.data.mp3Url = itemss.objects[0]["@value"]
                  //   ? itemss.objects[0]["@value"]
                  //   : "";
                }
              });
            });
          }
        });
      }
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    let _this = this;
    _this.initData();
    if (_this.type == 'newWordDetail') {
      // _this.getChineseInfo();
    }
  },
  //生命周期-创建之前
  beforeCreated() {},
  //生命周期-挂载之前
  beforeMount() {},
  //生命周期-更新之前
  beforUpdate() {},
  //生命周期-更新之后
  updated() {},
  //生命周期-销毁之前
  beforeDestory() {},
  //生命周期-销毁完成
  destoryed() {},
  //如果页面有keep-alive缓存功能，这个函数会触发
  activated() {},
};
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
.wordDetailModule {
  z-index: 999;
  width: 100%;
  overflow-y: scroll;

  .module-inner {
    padding: 30px 0;

    > div {
      width: 788px;
      padding: 16px 32px 40px;
      margin: 0 auto;
      background: #fff;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 15%);

      .operation {
        height: 16px;
        margin-bottom: 8px;

        div {
          display: flex;
          align-items: center;
          justify-content: flex-end;

          > :nth-child(1) {
            margin-right: 24px;
          }

          > :nth-child(2) {
            margin-right: 8px;
          }

          > :nth-child(3) {
            margin-right: 24px;
          }
        }

        img {
          width: 16px;
          height: 16px;
          cursor: pointer;
        }
      }
    }
  }

  .module-bottom {
    width: 788px;
    margin-top: 16px;
  }

  .top {
    padding-top: 16px;

    .wordDetail {
      display: flex;
      align-items: flex-start;
      justify-content: flex-start;
      width: 100%;
      margin-bottom: 16px;

      .bwc-Strockplay {
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 130px;
        height: 130px;
        margin-right: 37px;
        margin-bottom: 16px;
        overflow: hidden;
        border-radius: 8px;

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

          .collect-icon {
            position: absolute;
            right: 4px;
            bottom: 4px;
            width: 16px;
            cursor: pointer;
          }
        }

        .bwc-line {
          width: 2px;
          height: 128px;
        }

        .red-bg {
          background: #ff5757;
        }

        .green-bg {
          background: #24b99e;
        }

        .brown-bg {
          background: #bd8865;
        }
      }

      .bwc-tolength {
        padding: 40px 0;
        margin: 0 37px 16px 0;
        font-family: '楷体';
        font-size: 30px;
        line-height: 1.5;
        color: #404040;
        text-align: center;
        border: 2px solid #d47064;
        border-radius: 8px;
      }

      .red-border {
        border: 2px solid #ff5757;
      }

      .green-border {
        border: 2px solid #24b99e;
      }

      .brown-border {
        border: 2px solid #bd8865;
      }

      .wordInfor {
        flex: 1;

        .yinpin {
          display: flex;
          align-items: center;
          justify-content: flex-start;
          width: fit-content;
          margin-bottom: 16px;

          .pinyintext {
            display: flex;
            align-items: center;
            margin-right: 8px;
            font-family: 'GB-PINYINOK-B';
            font-size: 20px;
            line-height: 30px;
            color: #2c2c2c;
            word-break: normal;
          }

          .content-voices {
            width: 16px;
          }
        }
      }

      p {
        margin: 0;
      }

      .word {
        font-size: 24px;
        font-weight: bold;
        line-height: 28px;
        color: #000;
      }

      .jieshu {
        margin-top: 16px;
        font-size: 16px;
        line-height: 19px;
        color: #000;
      }
    }

    .zhedie-white {
      width: 100%;
      margin: 0 auto;

      > div {
        margin-bottom: 24px;
      }

      .topTitle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 8px 12px 0;
        background: #fff !important;
        border: 1px solid rgba(0, 0, 0, 10%);
        border-radius: 4px 4px 0 0;

        > :nth-child(1) {
          font-size: 16px;
          font-weight: 500;
          line-height: 150%;
          color: rgba(0, 0, 0, 85%);
        }

        > :nth-child(2) {
          display: flex;
          align-items: center;
          font-size: 14px;
          font-weight: normal;
          line-height: 22px;
          color: rgba(0, 0, 0, 85%);
          cursor: pointer;
        }

        img {
          width: 16px;
          height: 16px;
          margin-left: 4px;
        }

        .rotate {
          animation-name: firstrotate;
          animation-timing-function: linear;
          animation-direction: 2s;
          animation-fill-mode: both;
        }
      }

      .liju {
        padding-right: 24px;
        padding-bottom: 16px;
        background: #f7f7f7;
        border: 1px solid rgba(0, 0, 0, 10%);
        border-top: none;
        border-radius: 0 0 4px 4px;

        .liju_main {
          > div {
            display: flex;
            padding-top: 16px;
            margin-left: 8px;

            > :nth-child(1) {
              margin-right: 6px;
              font-family: '楷体';
              line-height: 24px;
              text-align: right;
            }

            p {
              margin: 0;
              font-family: '楷体';
              font-size: 16px;
              line-height: 24px;
              color: rgba(0, 0, 0, 85%);
            }

            .p2 {
              font-size: 12px;
              line-height: 20px;
              color: rgba(0, 0, 0, 85%);
              opacity: 0.3;
            }
          }
        }
      }

      .merge {
        .topTitle {
          .left {
            display: flex;
            align-items: flex-end;
            height: 100%;
            font-size: 12px;

            > div {
              padding: 0 12px 8px;
              cursor: pointer;

              > :nth-child(1) {
                margin-right: 4px;
                color: #000;
              }

              > :nth-child(2) {
                color: rgba(0, 0, 0, 50%);
              }
            }

            .sele {
              border-bottom: 1px solid #ff5757;

              > :nth-child(1) {
                color: #ff5757;
              }

              > :nth-child(2) {
                color: rgba(255, 87, 87, 50%);
              }
            }
          }

          .right {
            display: flex;
            width: 144px;
            height: 28px;
            padding: 2px;
            background: #eee;
            border-radius: 4px;

            > div {
              width: 76px;
              height: 24px;
              line-height: 24px;
              color: #888;
              text-align: center;
              cursor: pointer;
            }

            .sele {
              color: #000;
              background: #fff;
              box-shadow: 0 2px 2px rgba(0, 0, 0, 8%);
            }
          }
        }

        .KWIC_liju {
          padding-top: 16px;

          > div {
            margin-left: 24px;
          }

          .sort_dv {
            display: flex;
            margin-left: 24px;

            span {
              display: inline-block;
              display: flex;
              align-items: center;
              justify-content: center;
              width: 28px;
              height: 28px;
              margin-right: 8px;
              cursor: pointer;
              background: #fff;
              border-radius: 4px;
            }

            .sele {
              background: #f0f0f0;
            }

            .sort {
              img {
                width: 14px;
                height: 12px;
              }
            }

            .down {
              img {
                width: 16px;
                height: 16px;
              }
            }
          }

          .liju_main {
            margin-top: 24px;

            > div {
              display: flex;
              height: 26px;
              padding: 0;
              margin-top: 0;

              > div {
                display: flex;
              }

              > :nth-child(1) {
                justify-content: flex-end;
                width: 16px;
                margin-right: 16px;
              }

              .p1 {
                width: 117px;

                // white-space: nowrap;
                // overflow: hidden;
                // text-overflow: ellipsis;
                font-size: 12px;
              }

              .p2 {
                display: flex;
                justify-content: center;
                width: 469px;
                height: 22px;
                margin-left: 16px;
                overflow: hidden;
                font-family: '楷体';
                font-size: 14px;
                font-weight: 400;
                line-height: 22px;
                color: #000;
                white-space: nowrap;
                opacity: 1;

                > :nth-child(1) {
                  // direction: rtl;
                  // unicode-bidi: plaintext;
                  // text-align: right;
                  display: flex;
                  justify-content: end;
                  width: 224px;
                  overflow: hidden;
                  white-space: nowrap;
                }

                > :nth-child(3) {
                  width: 224px;
                  overflow: hidden;
                  text-align: left;
                  white-space: nowrap;
                  direction: ltr;
                  unicode-bidi: plaintext;
                }
              }
            }
          }
        }
      }
    }
  }

  .bottom {
    padding-bottom: 23px;
    margin-top: 16px;

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

      //   text-align: right;
      margin-right: 16px;
      font-size: 14px;
      line-height: 16px;
      color: #000;
      opacity: 0.2;

      img {
        width: 24px;
        margin-left: 24px;
      }
    }

    .wordDetail {
      width: 538px;
      padding-bottom: 23px;
      margin-left: 40px;
      border-bottom: 1px solid rgba(0, 0, 0, 10%);

      p {
        margin: 0;
      }

      .word {
        font-size: 24px;
        font-weight: bold;
        line-height: 28px;
        color: #000;
      }

      .yinpin {
        display: flex;
        margin-top: 16px;
        font-size: 16px;
        line-height: 150%;
        color: #000;

        > div {
          display: flex;
          align-items: center;
          height: 24px;

          > :nth-child(1) {
            margin-right: 5px;
          }
        }

        > :nth-child(2) {
          margin-left: 27px;
        }

        img {
          width: 24px;
          height: 24px;
          margin-left: 10px;
          cursor: pointer;
        }
      }

      .jieshu {
        display: flex;
        margin-top: 16px;
        font-size: 16px;
        line-height: 150%;
        color: #000;

        > :nth-child(1) {
          width: 30px;
        }

        :nth-child(2) {
          width: 524px;
        }
      }
    }
  }
}
</style>
<style lang="scss">
.el-tooltip__popper,
.is-dark {
  z-index: 99999 !important;
}

.NPC-Big-Book-preview-red {
  .wordDetailChs {
    .zhedie-white {
      .topTitle {
        box-sizing: border-box;
        height: 40px;
        background: #fff !important;
        border: 1px solid rgba(0, 0, 0, 10%);
        border-radius: 8px 8px 0 0;
      }
    }
  }
}

.NPC-Big-Book-preview-green {
  .wordDetailChs {
    .zhedie-white {
      .topTitle {
        box-sizing: border-box;
        height: 40px;
        background: #fff !important;
        border: 1px solid rgba(0, 0, 0, 10%);
        border-radius: 8px 8px 0 0;
      }
    }
  }
}

.NPC-Big-Book-preview-brown {
  .wordDetailChs {
    .zhedie-white {
      .topTitle {
        box-sizing: border-box;
        height: 40px;
        background: #fff !important;
        border: 1px solid rgba(0, 0, 0, 10%);
        border-radius: 8px 8px 0 0;
      }
    }
  }
}
</style>
