GCLS_Page_Book_Component_NPC/src/components/Adult/phonePreview/components/SentenceTemp.vue

<!--  -->
<template>
  <div
    :class="[
      'sentence-temp',
      sentenceTempOption,
      sentType == 'option' ? 'sentence-temp-option' : ''
    ]"
    v-if="detail"
  >
    <template v-if="detail.wordsList && detail.wordsList.length > 0">
      <div
        :class="[
          'RLC-sentence',
          sentType == 'option' ? 'RLC-sentence-option' : '',
          detail.pyNumber && detail.pyNumber[index] > 0
            ? 'RLC-sentence-hasPY'
            : ''
        ]"
        v-for="(item, index) in detail.wordsList"
        :key="'wordsList' + index"
      >
        <div
          class="RLC-words"
          v-for="(pItem, pIndex) in item"
          :key="'wordsList' + pIndex"
          :class="[
            pItem.chs == '“' ? 'textRight' : 'textCenter',
            detail.pyNumber && detail.pyNumber[index] > 0
              ? 'RLC-words-hasPY'
              : ''
          ]"
          :style="{
            paddingLeft:
              pItem.wordPadding.indexOf('left') > -1 ||
              (detail.pyNumber && detail.pyNumber[index] > 0)
                ? '2px'
                : '0px',
            paddingRight:
              pItem.wordPadding.indexOf('right') > -1 ||
              (detail.pyNumber && detail.pyNumber[index] > 0)
                ? '2px'
                : '0px'
          }"
        >
          <template v-if="pItem.isShow">
            <template
              v-if="
                item[pIndex + 1] &&
                  item[pIndex + 1].chs &&
                  chsFhList.indexOf(item[pIndex + 1].chs) > -1
              "
            >
              <span class="RLC-words-box">
                <span
                  v-if="
                    detail.pyNumber &&
                      detail.pyNumber[index] > 0 &&
                      pyPosition == 'top'
                  "
                  class="RLC-pinyin"
                  :class="[
                    pyColor == 'black' ? 'RLC-pinyin-black' : '',
                    pyColor == 'grey' ? 'RLC-pinyin-grey' : '',
                    pyColor == 'sub' ? 'RLC-pinyin-sub' : '',
                    pItem.pinyin && noFont.indexOf(pItem.pinyin) > -1
                      ? 'noFont'
                      : ''
                  ]"
                  :style="{ fontSize: baseSizePhone - 2 + 'px' }"
                  >{{ pItem.pinyin | handlePY }}</span
                >
                <template v-if="!pItem.isHeng">
                  <span
                    :class="[
                      'RLC-chs',

                      sentType == 'option' ? 'RLC-chs-option' : ''
                    ]"
                    :style="{
                      fontSize: baseSizePhone + 6 + 'px',
                      color: pItem.fontColor,
                      fontFamily: pItem.fontFamily
                    }"
                    v-html="pItem.chs"
                  ></span>
                </template>
                <template v-else>
                  <template v-if="isInput">
                    <!-- [optionIndex][optionItemIndex] -->
                    <EditDiv
                      :id="
                        'sentenceTemp_' +
                          Math.random()
                            .toString(36)
                            .substr(2) +
                          '_' +
                          index
                      "
                      class="answer-input"
                      :class="[Isexample ? 'answer-input-example' : '']"
                      v-model="Bookanswer.completeInput[pItem.hengIndex]"
                      :canEdit="
                        TaskModel == 'ANSWER' ? false : Isexample ? false : true
                      "
                      :style="{
                        'min-width': detail.hengList[index]
                          ? detail.hengList[index] * 60 + 'px'
                          : '120px',
                        textAlign: detail.hengList[index] ? 'center' : 'left',
                        fontSize: baseSizePhone + 6 + 'px'
                      }"
                    />
                  </template>
                  <template v-else>
                    <span
                      v-if="pItem.chs != '#'"
                      class="RLC-chs"
                      :style="{
                        fontSize: baseSizePhone + 6 + 'px',
                        color: pItem.fontColor,
                        fontFamily: pItem.fontFamily
                      }"
                      :class="[
                        pItem.chs != '“' && pItem.padding ? 'padding' : '',

                        sentType == 'option' ? 'RLC-chs-option' : ''
                      ]"
                      v-html="pItem.chs"
                    ></span>
                  </template>
                </template>
                <span
                  v-if="
                    detail.pyNumber &&
                      detail.pyNumber[index] > 0 &&
                      pyPosition == 'bottom'
                  "
                  class="RLC-pinyin"
                  :class="[
                    pyColor == 'black' ? 'RLC-pinyin-black' : '',
                    pyColor == 'grey' ? 'RLC-pinyin-grey' : '',
                    pyColor == 'sub' ? 'RLC-pinyin-sub' : '',
                    noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : ''
                  ]"
                  :style="{ fontSize: baseSizePhone - 2 + 'px' }"
                  >{{ pItem.pinyin | handlePY }}</span
                >
              </span>
              <span class="RLC-words-box" v-if="item[pIndex + 1]">
                <span
                  v-if="
                    detail.pyNumber &&
                      detail.pyNumber[index] > 0 &&
                      pyPosition == 'top'
                  "
                  class="RLC-pinyin"
                  :class="[
                    pyColor == 'black' ? 'RLC-pinyin-black' : '',
                    pyColor == 'grey' ? 'RLC-pinyin-grey' : '',
                    pyColor == 'sub' ? 'RLC-pinyin-sub' : '',
                    noFont.indexOf(item[pIndex + 1].pinyin) > -1 ? 'noFont' : ''
                  ]"
                  style="text-align: left"
                  :style="{ fontSize: baseSizePhone - 2 + 'px' }"
                  >{{ item[pIndex + 1].pinyin | handlePY }}</span
                >

                <span
                  :class="[
                    'RLC-chs',

                    sentType == 'option' ? 'RLC-chs-option' : ''
                  ]"
                  :style="{
                    fontSize: baseSizePhone + 6 + 'px',
                    color: item[pIndex + 1].fontColor,
                    fontFamily: item[pIndex + 1].fontFamily
                  }"
                  v-html="item[pIndex + 1].chs"
                ></span>

                <span
                  v-if="
                    detail.pyNumber &&
                      detail.pyNumber[index] > 0 &&
                      pyPosition == 'bottom'
                  "
                  class="RLC-pinyin"
                  :class="[
                    pyColor == 'black' ? 'RLC-pinyin-black' : '',
                    pyColor == 'grey' ? 'RLC-pinyin-grey' : '',
                    pyColor == 'sub' ? 'RLC-pinyin-sub' : '',
                    noFont.indexOf(item[pIndex + 1].pinyin) > -1 ? 'noFont' : ''
                  ]"
                  style="text-align: left"
                  :style="{ fontSize: baseSizePhone - 2 + 'px' }"
                  >{{ item[pIndex + 1].pinyin | handlePY }}</span
                >
              </span>
              <span
                class="RLC-words-box"
                v-if="
                  item[pIndex + 2] &&
                    item[pIndex + 2].chs &&
                    chsFhList.indexOf(item[pIndex + 2].chs) > -1
                "
              >
                <span
                  v-if="
                    detail.pyNumber &&
                      detail.pyNumber[index] > 0 &&
                      pyPosition == 'top'
                  "
                  :class="[
                    'RLC-pinyin',
                    pyColor == 'black' ? 'RLC-pinyin-black' : '',
                    pyColor == 'grey' ? 'RLC-pinyin-grey' : '',
                    pyColor == 'sub' ? 'RLC-pinyin-sub' : '',
                    noFont.indexOf(item[pIndex + 2].pinyin) > -1 ? 'noFont' : ''
                  ]"
                  style="text-align: left"
                  :style="{ fontSize: baseSizePhone - 2 + 'px' }"
                  >{{ item[pIndex + 2].pinyin }}</span
                >
                <span
                  :class="[
                    'RLC-chs',
                    sentType == 'option' ? 'RLC-chs-option' : ''
                  ]"
                  :style="{
                    fontSize: baseSizePhone + 6 + 'px',
                    color: item[pIndex + 2].fontColor,
                    fontFamily: item[pIndex + 2].fontFamily
                  }"
                  v-html="item[pIndex + 2].chs"
                ></span>
                <span
                  v-if="
                    detail.pyNumber &&
                      detail.pyNumber[index] > 0 &&
                      pyPosition == 'bottom'
                  "
                  :class="[
                    'RLC-pinyin',
                    pyColor == 'black' ? 'RLC-pinyin-black' : '',
                    pyColor == 'grey' ? 'RLC-pinyin-grey' : '',
                    pyColor == 'sub' ? 'RLC-pinyin-sub' : '',
                    noFont.indexOf(item[pIndex + 2].pinyin) > -1 ? 'noFont' : ''
                  ]"
                  style="text-align: left"
                  :style="{ fontSize: baseSizePhone - 2 + 'px' }"
                  >{{ item[pIndex + 2].pinyin }}</span
                >
              </span>
            </template>

            <!--下一个元素不是标点-->
            <template v-else>
              <span
                v-if="
                  detail.pyNumber &&
                    detail.pyNumber[index] > 0 &&
                    pyPosition == 'top'
                "
                class="RLC-pinyin"
                :class="[
                  pItem.chs != '“' && pItem.padding ? 'padding' : '',
                  pyColor == 'black' ? 'RLC-pinyin-black' : '',
                  pyColor == 'grey' ? 'RLC-pinyin-grey' : '',
                  pyColor == 'sub' ? 'RLC-pinyin-sub' : '',
                  noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : ''
                ]"
                :style="{ fontSize: baseSizePhone - 2 + 'px' }"
                >{{ pItem.pinyin | handlePY }}</span
              >
              <template v-if="!pItem.isHeng">
                <span
                  v-if="pItem.chs != '#'"
                  class="RLC-chs"
                  :style="{
                    fontSize: baseSizePhone + 6 + 'px',
                    color: pItem.fontColor,
                    fontFamily: pItem.fontFamily
                  }"
                  :class="[
                    pItem.chs != '“' && pItem.padding ? 'padding' : '',
                    sentType == 'option' ? 'RLC-chs-option' : ''
                  ]"
                  v-html="pItem.chs"
                ></span>
              </template>
              <template v-else>
                <template v-if="isInput">
                  <!-- [optionIndex][optionItemIndex] -->
                  <EditDiv
                    :id="
                      'sentenceTemp_' +
                        Math.random()
                          .toString(36)
                          .substr(2) +
                        '_' +
                        index
                    "
                    class="answer-input"
                    :class="[Isexample ? 'answer-input-example' : '']"
                    v-model="Bookanswer.completeInput[pItem.hengIndex]"
                    :canEdit="
                      TaskModel == 'ANSWER' ? false : Isexample ? false : true
                    "
                    :style="{
                      'min-width':
                        detail.hengList[index] && detail.hengList[index] > -1
                          ? detail.hengList[index] * 60 + 'px'
                          : '120px',
                      textAlign: detail.hengList[index] ? 'center' : 'left',
                      fontSize: baseSizePhone + 6 + 'px'
                    }"
                  />
                </template>
                <template v-else>
                  <span
                    v-if="pItem.chs != '#'"
                    class="RLC-chs"
                    :style="{
                      fontSize: baseSizePhone + 6 + 'px',
                      color: pItem.fontColor,
                      textAlign: 'left',
                      fontFamily: pItem.fontFamily
                    }"
                    :class="[
                      pItem.chs != '“' && pItem.padding ? 'padding' : '',

                      sentType == 'option' ? 'RLC-chs-option' : ''
                    ]"
                    v-html="pItem.chs"
                  ></span>
                </template>
              </template>
              <span
                v-if="
                  detail.pyNumber &&
                    detail.pyNumber[index] > 0 &&
                    pyPosition == 'bottom'
                "
                class="RLC-pinyin"
                :class="[
                  pItem.chs != '“' && pItem.padding ? 'padding' : '',
                  pyColor == 'black' ? 'RLC-pinyin-black' : '',
                  pyColor == 'grey' ? 'RLC-pinyin-grey' : '',
                  pyColor == 'sub' ? 'RLC-pinyin-sub' : '',
                  noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : ''
                ]"
                :style="{ fontSize: baseSizePhone - 2 + 'px' }"
                >{{ pItem.pinyin | handlePY }}</span
              >
            </template>
          </template>
        </div>
      </div>
    </template>
    <template v-else-if="detail.sentenceArr && detail.sentenceArr.length > 0">
      <div
        class="sentence"
        v-for="(item, index) in detail.sentenceArr"
        :key="'sentenceArr' + index"
        v-html="item"
        :style="{ fontSize: baseSizePhone + 6 + 'px' }"
      ></div>
    </template>
    <template v-else-if="detail.sentence">
      <div
        class="sentence"
        v-html="detail.sentence"
        style="white-space: pre-wrap"
        :style="{ fontSize: baseSizePhone + 6 + 'px' }"
      ></div>
    </template>
  </div>
</template>

<script>
import EditDiv from "../EditDiv.vue";
export default {
  components: { EditDiv },
  props: [
    "detail",
    "pyPosition",
    "pyColor",
    "TaskModel",
    "Bookanswer",
    "isInput",
    "Isexample",
    "sentType",
    "baseSizePhone"
  ],
  filters: {
    handlePY(pinyin) {
      let reg = /_{2,}/g;
      let py = "";
      if (reg.test(pinyin)) {
        py = "";
      } else {
        py = pinyin;
      }
      return py;
    }
  },
  data() {
    return {
      noFont: ["~", "!", "@", "#", "$", "%", "^", "&", "*", "(", ")", "/"],
      chsFhList: ["，", "。", "”", "：", "》", "？", "！", "；"],
      enFhList: [",", ".", ";", "?", "!", ":", ">", "<"]
    };
  },
  computed: {
    sentenceTempOption() {
      let classname = "";
      if (this.sentType != "option") {
        classname = "sentence-temp-24";
      }
      return classname;
    }
  },
  watch: {},
  //方法集合
  methods: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    // console.log(this.detail);
    // console.log(this.Bookanswer);
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
.sentence-temp {
  //   padding: 9px 0;
  .RLC-sentence {
    clear: both;
    overflow: hidden;
    padding: 7px 0;
    &-option {
      padding: 8px 0;
    }
    &-hasPY {
      padding: 3px 0;
    }
  }
  .RLC-words {
    float: left;
    &-box {
      float: left;
      > span {
        display: block;

        &.padding {
          padding: 0 3px;
        }
      }
    }
    &-hasPY {
      padding: 4px 0;
    }
    &.textLeft {
      text-align: left;
    }
    &.textCenter {
      text-align: center;
    }
    &.textRight {
      text-align: right;
    }
    > span {
      display: block;

      &.padding {
        padding: 0 3px;
      }
    }
    .answer-input {
      min-height: 32px;
      box-sizing: border-box;
      border: 0;
      border-bottom: 1px rgba(0, 0, 0, 0.45) solid;
      background: 0 0;
      min-width: 120px;
      outline: 0;
      text-align: left;
      font-family: "FZJCGFKTK";
      font-size: 24px;
      color: rgba(0, 0, 0, 0.45);

      box-sizing: border-box;
      color: #000000;
      line-height: 30px;
      &.answer-input-example {
        color: #ff3f3f;
      }
    }
  }
  .RLC-pinyin {
    font-family: "Sans-GBNPC";
    font-weight: normal;
    font-size: 12px;
    line-height: 12px;
    color: #000000;
    height: 12px;
    &-black {
      color: #000;
    }
    &-grey {
      color: rgba(0, 0, 0, 0.3);
    }
    &-sub {
      //@include font_color("sub_color");
    }
    &.noFont {
      font-family: initial;
    }
    &.textLeft {
      text-align: left;
    }
  }
  .RLC-chs {
    font-family: "FZJCGFKTK";
    font-size: 20px;
    line-height: 1.4;
    color: #000000;
    &.RLC-en {
      font-family: "robot";
    }
    &-pinyin {
      font-family: "Sans-GBNPC";
    }
    &.active {
      background: rgba(60, 200, 99, 0.2);
    }
    &.wordActive {
      color: #de4444;
    }
  }
  .sentence {
    font-family: "FZJCGFKTK";
    font-style: normal;
    font-weight: normal;
    font-size: 24px;
    line-height: 1.4;
    color: #000000;
    padding: 7px 0;
  }
}
.sentence-temp-24 {
  .RLC-chs {
    font-size: 24px;
  }
}
.sentence-temp-option {
  .sentence {
    font-size: 20px;
    line-height: 1.4;
  }
}
</style>