GCLS_Page_Book_Component_NPC/src/components/Adult/preview/SentenceMulModule.vue

<!--  -->
<template>
  <div
    class="sentence-control"
    :class="[
      curQue.mp3_list && curQue.mp3_list.length > 0 && curQue.mp3_list[0].id
        ? 'hasmp3'
        : '',
    ]"
    v-if="isShowTemp"
  >
    <div
      class="out-audioLine-box"
      v-if="
        curQue.mp3_list && curQue.mp3_list.length > 0 && curQue.mp3_list[0].id
      "
    >
      <div class="aduioLine-box aduioLine-practice">
        <AudioLine
          audioId="fillInforAudioLine"
          :mp3="curQue.mp3_list[0].id"
          :getCurTime="getCurTime"
          :themeColor="themeColor"
          :ed="ed"
          type="audioLine"
          ref="fillInforAudioLine"
          @handleListenRead="handleListenRead"
        />
      </div>
    </div>
    <div
      :class="[
        'container-box',
        curQue.img_list &&
        curQue.img_list.length > 0 &&
        curQue.img_site == 'rightCenter'
          ? 'container-box-flex'
          : '',
      ]"
    >
      <div
        class="fill-img-box"
        v-if="
          curQue.img_list &&
          curQue.img_list.length > 0 &&
          curQue.img_site == 'top'
        "
      >
        <el-image
          :src="curQue.img_list[0].id"
          v-if="curQue.img_list[0].id"
          fit="scale-down"
          class="fill-img"
          :style="{ width: curQue.img_size + 'px' }"
        ></el-image>
      </div>
      <div
        v-if="judgeAnswer == 'standardAnswer'"
        :class="['container', curQue.sortType == 'row' ? 'ul-flex' : '']"
      >
        <div :class="['sent-option li-flex sent-option-standardAnswer']">
          <div
            :class="[
              'sent-option-items',
              itemsWidth == 780 ? 'sent-option-items-0' : 'sent-option-items-8',
            ]"
            v-for="(items, indexs) in userErrorList"
            :key="'sent-option-items' + judgeAnswer + indexs"
            :style="{
              width:
                curQue.sortType == 'col'
                  ? itemsWidth + 'px'
                  : Math.floor(780 / curQue.option.length) - 16 + 'px',
            }"
          >
            <div
              :class="[
                'horn-24',
                items.pyNumber &&
                items.pyNumber[0] > 0 &&
                curQue.pyPosition == 'top'
                  ? 'horn-hasPY'
                  : '',
              ]"
              v-if="
                curQue.mp3_list &&
                curQue.mp3_list.length > 0 &&
                curQue.mp3_list[0].id &&
                items.bg &&
                items.ed
              "
              :style="{
                height:
                  items.detail &&
                  items.detail.length > 0 &&
                  items.detail[0].maxFontsize
                    ? (items.detail[0].maxFontsize * 3) / 2 + 'px'
                    : '32px',
                marginTop:
                  items.detail &&
                  items.detail.length > 0 &&
                  items.detail[0].maxFontsize
                    ? ''
                    : '0px',
              }"
            >
              <AudioItem
                :itemBg="items.bg"
                :itemEd="items.ed"
                :curTime="curTime"
                :handleChangeTime="handleChangeTime"
                :stopAudioS="stopAudioS"
                :themeColor="themeColor"
              />
            </div>
            <div :class="['sent-stem', bgClassName]">
              <!-- 题干 -->
              <div class="stem-content">
                <!--  items.fn_check_list.judge_check || sdItem.fn_check_list.record_check.indexOf('normal') > -1
                  ? 'sent-main-138'
                  : '', -->
                <div
                  :class="[
                    'sent-main',
                    items.fn_check_list.judge_check.indexOf('col') > -1 ||
                    items.fn_check_list.short_check ||
                    sdItem.fn_check_list.record_check.indexOf('normal') > -1
                      ? 'sent-que-flex'
                      : '',
                    items.fn_check_list.radio_check.indexOf('row') > -1 ||
                    items.fn_check_list.checkbox_check.indexOf('row') > -1
                      ? 'sent-main-bottom'
                      : '',
                  ]"
                  v-for="(sdItem, sdIndex) in items.detail"
                  :key="'sent-option-items' + indexs + sdIndex"
                >
                  <div class="sent-que-box">
                    <div
                      class="sent-que"
                      v-for="(sddItem, sddIndex) in sdItem.detail"
                      :key="'sent-option-items' + indexs + sdIndex + sddIndex"
                      :style="{
                        paddingLeft:
                          sddItem.config.wordPadding.indexOf('left') > -1
                            ? '4px'
                            : '0px',
                        paddingRight:
                          sddItem.config.wordPadding.indexOf('right') > -1
                            ? '4px'
                            : '0px',
                      }"
                    >
                      <!-- 补全句子 -->
                      <OneSentenceTemp
                        :detail="sddItem"
                        :pyPosition="curQue.pyPosition"
                        :TaskModel="TaskModel"
                        :pyColor="curQue.pyColor"
                        :Bookanswer="userBookanswer[indexs]"
                        :judgeAnswer="judgeAnswer"
                        :correctAnswer="items.correct.complateArr"
                        :isInput="
                          items.fn_check_list.sent_check ==
                            'sentence_complete_input_chs' ||
                          items.fn_check_list.sent_check ==
                            'sentence_long_input_chs'
                        "
                        :fn_check_list="items.fn_check_list"
                        :bgColor="curQue.bgColor"
                        :pyNumber="items.pyNumber && items.pyNumber[sdIndex]"
                        :record_check="sdItem.fn_check_list.record_check"
                        :hengLeg="sdItem.hengLeg"
                        :maxFontsize="sdItem.maxFontsize"
                        :textIndent="sdItem.textindent"
                      />
                      <!-- <div class="en" v-if="sdItem.en">{{ sdItem.en }}</div> -->
                      <div
                        class="promax-box-div"
                        v-if="
                          sdItem.fn_check_list.record_check.indexOf('promax') >
                          -1
                        "
                      >
                        <Soundrecord
                          :type="
                            sdItem.fn_check_list.record_check
                              ? typeList[sdItem.fn_check_list.record_check]
                              : 'normal'
                          "
                          class="promax-box"
                          :TaskModel="TaskModel"
                          :tmIndex="sdIndex"
                          :answerRecordList="[]"
                        />
                      </div>
                    </div>
                  </div>
                  <div
                    ref="answerpart"
                    v-if="
                      items.fn_check_list.judge_check ||
                      sdItem.fn_check_list.record_check ||
                      items.fn_check_list.short_check ||
                      items.fn_check_list.radio_check.indexOf('col') > -1 ||
                      items.fn_check_list.checkbox_check.indexOf('col') > -1
                    "
                    :class="[
                      'answer-part',
                      items.pyNumber && items.pyNumber[1] > 0
                        ? 'answer-part-hasPY'
                        : '',
                      items.fn_check_list.judge_check ||
                      sdItem.fn_check_list.record_check
                        ? 'answer-part-138'
                        : '',
                    ]"
                  >
                    <!-- 短输入 -->
                    <div
                      :class="[
                        'short-part',
                        items.pyNumber && items.pyNumber[0] > 0
                          ? 'short-part-hasPY'
                          : '',
                        items.fn_check_list.is_short_auto
                          ? 'short-part-flex'
                          : '',
                      ]"
                      v-if="sdIndex == 0 && items.fn_check_list.short_check"
                    >
                      <ShortInputTemp
                        :doubleInput="items.correct.doubleInput"
                        :Bookanswer="userBookanswer[indexs]"
                        :TaskModel="TaskModel"
                        :is_short_auto="items.fn_check_list.is_short_auto"
                        :judgeAnswer="judgeAnswer"
                      />
                    </div>
                    <!-- 判断 -->
                    <div
                      :class="[
                        'judge-part',
                        items.fn_check_list.judge_check.indexOf('row') > -1
                          ? 'answer-part-padding-5'
                          : '',
                      ]"
                      v-if="sdIndex == 0 && items.fn_check_list.judge_check"
                    >
                      <JudgeTemp
                        :isRecord="items.fn_check_list.record_check"
                        :Bookanswer="userBookanswer[indexs]"
                        :judge_isNo="items.judge_isNo"
                        :TaskModel="TaskModel"
                        :Isexample="items.Isexample"
                        :judgeCorrectAnswer="items.correct.judge"
                        :judgeAnswer="judgeAnswer"
                      />
                    </div>
                    <!-- 多选题 -->
                    <div
                      :class="[
                        'short-part',
                        items.pyNumber && items.pyNumber[0] > 0
                          ? 'short-part-hasPY'
                          : '',
                      ]"
                      v-if="
                        sdIndex == 0 &&
                        items.fn_check_list.checkbox_check.indexOf('col') > -1
                      "
                    >
                      <OptionTemp
                        :option="items.checkbox_option"
                        :row="
                          items.fn_check_list.checkbox_check.indexOf('row') > -1
                        "
                        :Bookanswer="userBookanswer[indexs]"
                        :TaskModel="TaskModel"
                        type="checkbox"
                        :curQue="curQue"
                        :items="items"
                        :judgeAnswer="judgeAnswer"
                        :correctAnswer="items.correct"
                      />
                    </div>
                    <!-- 单选题 -->
                    <div
                      :class="[
                        'short-part',
                        items.pyNumber && items.pyNumber[0] > 0
                          ? 'short-part-hasPY'
                          : '',
                      ]"
                      v-if="
                        sdIndex == 0 &&
                        items.fn_check_list.radio_check.indexOf('col') > -1
                      "
                    >
                      <OptionTemp
                        :option="items.radio_option"
                        :row="
                          items.fn_check_list.radio_check.indexOf('row') > -1
                        "
                        :Bookanswer="userBookanswer[indexs]"
                        :correctAnswer="items.correct"
                        :TaskModel="TaskModel"
                        type="radio"
                        :curQue="curQue"
                        :items="items"
                        :judgeAnswer="judgeAnswer"
                      />
                    </div>
                    <!-- 录音 -->
                    <div
                      class="judge-part record-part"
                      v-if="
                        sdItem.fn_check_list.record_check &&
                        items.fn_check_list.sent_check !=
                          'sentence_long_input_chs'
                      "
                    >
                      <Soundrecord
                        :type="
                          sdItem.fn_check_list.record_check
                            ? typeList[sdItem.fn_check_list.record_check]
                            : 'normal'
                        "
                        :class="[
                          'record_' +
                            typeList[sdItem.fn_check_list.record_check],
                          'record-common',
                          items.fn_check_list.short_check
                            ? 'record-common-40'
                            : '',
                        ]"
                        :TaskModel="TaskModel"
                        :tmIndex="sdIndex"
                        :answerRecordList="[]"
                      />
                    </div>
                  </div>
                </div>
                <!-- 多选题 -->
                <div
                  class="select-que"
                  v-if="items.fn_check_list.checkbox_check.indexOf('row') > -1"
                  :style="{paddingLeft:items.detail&&items.detail[0]&&items.detail[0].textindent&&items.detail[0].detail&&items.detail[0].detail[0]?items.detail[0].detail[0].config.fontSize.replace('px','')*2+'px':'0'}"
                >
                  <OptionTemp
                    :option="items.checkbox_option"
                    :row="
                      items.fn_check_list.checkbox_check.indexOf('row') > -1
                    "
                    :Bookanswer="userBookanswer[indexs]"
                    :correctAnswer="items.correct"
                    :TaskModel="TaskModel"
                    type="checkbox"
                    :curQue="curQue"
                    :items="items"
                    :judgeAnswer="judgeAnswer"
                  />
                </div>
                <!-- 单选题 -->
                <div
                  class="select-que"
                  v-if="items.fn_check_list.radio_check.indexOf('row') > -1"
                  :style="{paddingLeft:items.detail&&items.detail[0]&&items.detail[0].textindent&&items.detail[0].detail&&items.detail[0].detail[0]?items.detail[0].detail[0].config.fontSize.replace('px','')*2+'px':'0'}"
                >
                  <OptionTemp
                    :option="items.radio_option"
                    :row="items.fn_check_list.radio_check.indexOf('row') > -1"
                    :Bookanswer="userBookanswer[indexs]"
                    :correctAnswer="items.correct"
                    :TaskModel="TaskModel"
                    type="radio"
                    :curQue="curQue"
                    :items="items"
                    :judgeAnswer="judgeAnswer"
                  />
                </div>
              </div>
            </div>
            <!-- 题干 -->
          </div>
        </div>
      </div>
      <div
        v-else
        :class="['container', curQue.sortType == 'row' ? 'ul-flex' : '']"
      >
        <div
          :class="[
            'sent-option',
            curQue.mp3_list &&
            curQue.mp3_list.length > 0 &&
            curQue.mp3_list[0].id
              ? 'sent-option-24'
              : '',
            curQue.sortType == 'row' ? 'sent-option-row' : 'li-flex',
          ]"
          v-for="(item, index) in curQue.option"
          :key="'sent-option' + index"
        >
          <div
            :class="[
              'sent-option-items',
              itemsWidth == 780 ? 'sent-option-items-0' : 'sent-option-items-8',
            ]"
            v-for="(itemO, indeO) in item"
            :key="'sent-option-items' + index + indeO"
            :style="{
              width: curQue.sortType == 'col' ? itemsWidth + 'px' : '100%',

            }"
          >
            <div
              :class="[
                'horn-24',
                itemO.pyNumber &&
                itemO.pyNumber[0] > 0 &&
                curQue.pyPosition == 'top'
                  ? 'horn-hasPY'
                  : '',
              ]"
              v-if="
                curQue.mp3_list &&
                curQue.mp3_list.length > 0 &&
                curQue.mp3_list[0].id &&
                itemO.bg &&
                itemO.ed
              "
              :style="{
                height:
                  itemO.detail &&
                  itemO.detail.length > 0 &&
                  itemO.detail[0].maxFontsize
                    ? (itemO.detail[0].maxFontsize * 3) / 2 + 'px'
                    : '32px',
                marginTop:
                  itemO.detail &&
                  itemO.detail.length > 0 &&
                  itemO.detail[0].maxFontsize
                    ? ''
                    : '0px',
              }"
            >
              <AudioItem
                :itemBg="itemO.bg"
                :itemEd="itemO.ed"
                :curTime="curTime"
                :handleChangeTime="handleChangeTime"
                :stopAudioS="stopAudioS"
                :themeColor="themeColor"
              />
            </div>
            <div :class="['sent-stem', bgClassName]">
              <div
                v-if="itemO.numbertotal"
                :class="[
                  'number-box number-box-hasmp3',
                  itemO.pyNumber &&
                  itemO.pyNumber[0] > 0 &&
                  curQue.pyPosition == 'top'
                    ? 'number-box-hasPY'
                    : '',
                  curQue.numberBg ? '' : 'number-box-nobg',
                ]"
                :style="{
                  height:
                    itemO.detail &&
                    itemO.detail.length > 0 &&
                    itemO.detail[0].maxFontsize
                      ? (itemO.detail[0].maxFontsize * 3) / 2 + 'px'
                      : '32px',
                  marginTop:
                    itemO.detail &&
                    itemO.detail.length > 0 &&
                    itemO.detail[0].maxFontsize
                      ? ''
                      : '0px',
                  fontSize: itemO.numberfontSize
                }"
              >
                {{itemO.numbertotal}}
              </div>
              <div class="stem-maincontent">
                <div>
                    <div
                    :class="[
                        'sent-main',
                    ]"
                    v-for="(sdItem, sdIndex) in itemO.detail"
                    :key="'sent-option-items' + index + indeO + sdIndex"
                    >
                    <div class="sent-que-box">
                        <div
                        class="sent-que"
                        v-for="(sddItem, sddIndex) in sdItem.detail"
                        :key="
                            'sent-option-items' +
                            index +
                            indeO +
                            sdIndex +
                            sddIndex
                        "
                        :style="{
                            paddingLeft:
                            sddItem.config.wordPadding.indexOf('left') > -1
                                ? '4px'
                                : '0px',
                            paddingRight:
                            sddItem.config.wordPadding.indexOf('right') > -1
                                ? '4px'
                                : '0px',
                        }"
                        >
                        <OneSentenceTemp
                            :detail="sddItem"
                            :pyPosition="curQue.pyPosition"
                            :TaskModel="TaskModel"
                            :pyColor="curQue.pyColor"
                            :Bookanswer="curQue.Bookanswer[index][indeO]"
                            :judgeAnswer="judgeAnswer"
                            :isInput="
                            false
                            "
                            :fn_check_list="itemO.fn_check_list"
                            :bgColor="curQue.bgColor"
                            :pyNumber="itemO.pyNumber && itemO.pyNumber[sdIndex]"
                            :record_check="sdItem.fn_check_list.record_check"
                            :hengLeg="sdItem.hengLeg"
                            :maxFontsize="sdItem.maxFontsize"
                            :textIndent="sdItem.textindent"
                        />
                        <div
                            class="promax-box-div"
                            v-if="
                            sdItem.fn_check_list.record_check.indexOf('promax') >
                            -1
                            "
                        >
                            <Soundrecord
                            :type="
                                sdItem.fn_check_list.record_check
                                ? typeList[sdItem.fn_check_list.record_check]
                                : 'normal'
                            "
                            class="promax-box"
                            :TaskModel="TaskModel"
                            :tmIndex="sdIndex"
                            :answerRecordList="
                                curQue.Bookanswer[index][indexs].recordList[sdIndex]
                            "
                            :index="index"
                            :indexs="indexs"
                            @handleWav="handleWav"
                            />
                        </div>
                        </div>
                    </div>
                    </div>
                </div>
                <div v-for="(items, indexs) in itemO.options" :key="indexs">
                    <div
                    :class="[
                        'sent-main',
                        items.fn_check_list.judge_check.indexOf('col') > -1 ||
                        items.fn_check_list.short_check ||
                        sdItem.fn_check_list.record_check.indexOf('normal') > -1
                        ? 'sent-que-flex'
                        : '',
                        items.fn_check_list.radio_check.indexOf('row') > -1 ||
                        items.fn_check_list.checkbox_check.indexOf('row') > -1
                        ? 'sent-main-bottom'
                        : '',
                    ]"
                    v-for="(sdItem, sdIndex) in items.detail"
                    :key="'sent-option-items' + index + indexs + sdIndex"
                    >
                    <div class="sent-que-box">
                        <div
                        class="sent-que"
                        v-for="(sddItem, sddIndex) in sdItem.detail"
                        :key="
                            'sent-option-items' +
                            index +
                            indexs +
                            sdIndex +
                            sddIndex
                        "
                        :style="{
                            paddingLeft:
                            sddItem.config.wordPadding.indexOf('left') > -1
                                ? '4px'
                                : '0px',
                            paddingRight:
                            sddItem.config.wordPadding.indexOf('right') > -1
                                ? '4px'
                                : '0px',
                        }"
                        >
                        <OneSentenceTemp
                            :detail="sddItem"
                            :pyPosition="curQue.pyPosition"
                            :TaskModel="TaskModel"
                            :pyColor="curQue.pyColor"
                            :Bookanswer="curQue.Bookanswer[index][indeO][indexs]"
                            :judgeAnswer="judgeAnswer"
                            :correctAnswer="items.correct.complateArr"
                            :isInput="
                            items.fn_check_list.sent_check ==
                                'sentence_complete_input_chs' ||
                            items.fn_check_list.sent_check ==
                                'sentence_long_input_chs'
                            "
                            :fn_check_list="items.fn_check_list"
                            :bgColor="curQue.bgColor"
                            :pyNumber="items.pyNumber && items.pyNumber[sdIndex]"
                            :record_check="sdItem.fn_check_list.record_check"
                            :hengLeg="sdItem.hengLeg"
                            :maxFontsize="sdItem.maxFontsize"
                            :textIndent="sdItem.textindent"
                        />
                        <div
                            class="promax-box-div"
                            v-if="
                            sdItem.fn_check_list.record_check.indexOf('promax') >
                            -1
                            "
                        >
                            <Soundrecord
                            :type="
                                sdItem.fn_check_list.record_check
                                ? typeList[sdItem.fn_check_list.record_check]
                                : 'normal'
                            "
                            class="promax-box"
                            :TaskModel="TaskModel"
                            :tmIndex="sdIndex"
                            :answerRecordList="
                                curQue.Bookanswer[index][indeO][indexs].recordList[sdIndex]
                            "
                            :index="index"
                            :indexs="indexs"
                            @handleWav="handleWav"
                            />
                        </div>
                        </div>
                    </div>
                    <div
                        ref="answerpart"
                        v-if="
                        items.fn_check_list.judge_check ||
                        sdItem.fn_check_list.record_check ||
                        items.fn_check_list.short_check ||
                        items.fn_check_list.radio_check.indexOf('col') > -1 ||
                        items.fn_check_list.checkbox_check.indexOf('col') > -1
                        "
                        :class="[
                        'answer-part',
                        items.pyNumber && items.pyNumber[1] > 0
                            ? 'answer-part-hasPY'
                            : '',
                        items.fn_check_list.judge_check ||
                        sdItem.fn_check_list.record_check
                            ? 'answer-part-138'
                            : '',
                        ]"
                    >
                        <div
                        :class="[
                            'short-part',
                            items.pyNumber && items.pyNumber[0] > 0
                            ? 'short-part-hasPY'
                            : '',
                            items.fn_check_list.is_short_auto
                            ? 'short-part-flex'
                            : '',
                        ]"
                        v-if="sdIndex == 0 && items.fn_check_list.short_check"
                        >
                        <ShortInputTemp
                            :doubleInput="items.correct.doubleInput"
                            :Bookanswer="curQue.Bookanswer[index][indeO][indexs]"
                            :TaskModel="TaskModel"
                            :is_short_auto="items.fn_check_list.is_short_auto"
                            :judgeAnswer="judgeAnswer"
                        />
                        </div>
                        <div
                        :class="[
                            'judge-part',
                            items.fn_check_list.judge_check.indexOf('row') > -1
                            ? 'answer-part-padding-5'
                            : '',
                        ]"
                        v-if="sdIndex == 0 && items.fn_check_list.judge_check"
                        >
                        <JudgeTemp
                            :isRecord="items.fn_check_list.record_check"
                            :Bookanswer="curQue.Bookanswer[index][indeO][indexs]"
                            :judge_isNo="items.judge_isNo"
                            :TaskModel="TaskModel"
                            :Isexample="items.Isexample"
                            :judgeCorrectAnswer="items.correct.judge"
                            :judgeAnswer="judgeAnswer"
                        />
                        </div>
                        <div
                        :class="[
                            'short-part',
                            items.pyNumber && items.pyNumber[0] > 0
                            ? 'short-part-hasPY'
                            : '',
                        ]"
                        v-if="
                            sdIndex == 0 &&
                            items.fn_check_list.checkbox_check.indexOf('col') > -1
                        "
                        >
                        <OptionTemp
                            :option="items.checkbox_option"
                            :row="
                            items.fn_check_list.checkbox_check.indexOf('row') > -1
                            "
                            :Bookanswer="curQue.Bookanswer[index][indeO][indexs]"
                            :TaskModel="TaskModel"
                            type="checkbox"
                            :curQue="curQue"
                            :items="items"
                            :judgeAnswer="judgeAnswer"
                        />
                        </div>
                        <div
                        :class="[
                            'short-part',
                            items.pyNumber && items.pyNumber[0] > 0
                            ? 'short-part-hasPY'
                            : '',
                        ]"
                        v-if="
                            sdIndex == 0 &&
                            items.fn_check_list.radio_check.indexOf('col') > -1
                        "
                        >
                        <OptionTemp
                            :option="items.radio_option"
                            :row="
                            items.fn_check_list.radio_check.indexOf('row') > -1
                            "
                            :Bookanswer="curQue.Bookanswer[index][indeO][indexs]"
                            :correctAnswer="items.correct"
                            :TaskModel="TaskModel"
                            type="radio"
                            :curQue="curQue"
                            :items="items"
                            :judgeAnswer="judgeAnswer"
                        />
                        </div>
                        <div
                        class="judge-part record-part"
                        v-if="
                            sdItem.fn_check_list.record_check &&
                            items.fn_check_list.sent_check !=
                            'sentence_long_input_chs'
                        "
                        >
                        <Soundrecord
                            :type="
                            sdItem.fn_check_list.record_check
                                ? typeList[sdItem.fn_check_list.record_check]
                                : 'normal'
                            "
                            :class="[
                            'record_' +
                                typeList[sdItem.fn_check_list.record_check],
                            'record-common',
                            items.fn_check_list.short_check
                                ? 'record-common-40'
                                : '',
                            ]"
                            :TaskModel="TaskModel"
                            :tmIndex="sdIndex"
                            :answerRecordList="
                            curQue.Bookanswer[index][indeO][indexs].recordList[sdIndex]
                            "
                            :index="index"
                            :indexs="indexs"
                            @handleWav="handleWav"
                        />
                        </div>
                    </div>
                    </div>
                    <div
                    class="select-que"
                    v-if="items.fn_check_list.checkbox_check.indexOf('row') > -1"
                    :style="{paddingLeft:items.detail&&items.detail[0]&&items.detail[0].textindent&&items.detail[0].detail&&items.detail[0].detail[0]?items.detail[0].detail[0].config.fontSize.replace('px','')*2+'px':'0'}"
                    >
                    <OptionTemp
                        :option="items.checkbox_option"
                        :row="
                        items.fn_check_list.checkbox_check.indexOf('row') > -1
                        "
                        :Bookanswer="curQue.Bookanswer[index][indeO][indexs]"
                        :correctAnswer="items.correct"
                        :TaskModel="TaskModel"
                        type="checkbox"
                        :curQue="curQue"
                        :items="items"
                        :judgeAnswer="judgeAnswer"
                    />
                    </div>
                    <div
                    class="select-que"
                    v-if="items.fn_check_list.radio_check.indexOf('row') > -1"
                    :style="{paddingLeft:items.detail&&items.detail[0]&&items.detail[0].textindent&&items.detail[0].detail&&items.detail[0].detail[0]?items.detail[0].detail[0].config.fontSize.replace('px','')*2+'px':'0'}"
                    >
                    <OptionTemp
                        :option="items.radio_option"
                        :row="items.fn_check_list.radio_check.indexOf('row') > -1"
                        :Bookanswer="curQue.Bookanswer[index][indeO][indexs]"
                        :correctAnswer="items.correct"
                        :TaskModel="TaskModel"
                        type="radio"
                        :curQue="curQue"
                        :items="items"
                        :judgeAnswer="judgeAnswer"
                    />
                    </div>
                </div>
              </div>
              
            </div>

          </div>
        </div>
      </div>
      <div
        class="fill-img-box"
        v-if="
          curQue.img_list &&
          curQue.img_list.length > 0 &&
          (curQue.img_site == 'rightCenter' || curQue.img_site == 'bottom')
        "
      >
        <el-image
          :src="curQue.img_list[0].id"
          v-if="curQue.img_list[0].id"
          fit="scale-down"
          class="fill-img"
          :style="{ width: curQue.img_size + 'px' }"
        ></el-image>
      </div>
    </div>
  </div>
</template>

<script>
import AudioLine from "./AudioLine.vue";
import AudioItem from "./components/AudioItem.vue";
import OneSentenceTemp from "./components/OneSentenceTemp.vue";
import JudgeTemp from "./components/JudgeTemp.vue";
import ShortInputTemp from "./components/ShortInputTemp.vue";
import NumberStyle from "./components/NumberStyle.vue";
import EditDiv from "./EditDiv.vue";
import Soundrecord from "./Soundrecord.vue"; // 录音模板
import OptionTemp from "./components/OptionTemp.vue";
export default {
  components: {
    AudioLine,
    AudioItem,
    NumberStyle,
    EditDiv,
    Soundrecord,
    OneSentenceTemp,
    JudgeTemp,
    ShortInputTemp,
    OptionTemp,
  },
  props: ["curQue", "themeColor", "TaskModel", "judgeAnswer"],
  data() {
    return {
      curTime: 0,
      stopAudioS: false,
      ed: null,
      userAnswer: {
        Isexample: false,
        completeInput: [],
        shortInput: "",
        longInput: "",
        doubleInput: [],
        judge: {},
        checkbox: {},
        radio: {},
        recordList: {},
        completeImage: [],
      },
      chsFhList: ["，", "。", "”", "：", "》", "？", "！", "；"],
      itemsWidth: 0,
      typeList: {
        sentence_record_mini_chs: "mini",
        sentence_record_normal_chs: "normal",
        sentence_record_pro_chs: "pro",
        sentence_record_promax_chs: "promax",
      },
      answerpart: [],
      userErrorList: [],
      userBookanswer: [],
      userErrorNumberTotal: 0,
    };
  },
  computed: {
    isShowTemp() {
      let _this = this;
      let bool = false;
      if (_this.curQue && _this.curQue.Bookanswer) {
        if (_this.judgeAnswer == "standardAnswer") {
          if (_this.userErrorNumberTotal > 0) {
            bool = true;
          } else {
            bool = false;
          }
        } else {
          bool = true;
        }
      }
      return bool;
    },
    bgClassName() {
      let className = "";
      if (this.curQue.bgColor == "grey") {
        className = "sent-stem-grey";
      } else if (this.curQue.bgColor == "white") {
        className = "sent-stem-white";
      }
      return className;
    },
  },
  watch: {},
  //方法集合
  methods: {
    getCurTime(curTime) {
      this.curTime = curTime * 1000;
    },
    //点击播放某个句子
    handleChangeTime(time, edTime) {
      let _this = this;
      _this.curTime = time;
      _this.stopAudioS = true;
      _this.$refs.fillInforAudioLine.onTimeupdateTime(time / 1000, true);
      _this.ed = edTime;
    },
    handleListenRead(playFlag) {
      this.stopAudioS = playFlag;
    },
    handleWav(list, tmIndex, index, indexs) {
      tmIndex = tmIndex ? tmIndex : 0;
      let resList = list.filter((item, index) => index == list.length - 1);
      this.$set(
        this.curQue.Bookanswer[index][indexs].recordList,
        tmIndex,
        resList
      );
    },
    handleData() {
      let Bookanswer = [];
      let itemLeg = 0;
      this.totalHasPy = false;
      let option = JSON.parse(JSON.stringify(this.curQue.option));
      let completeImage = [];
      option.forEach((itemO, indexO) => {
        Bookanswer.push([]);
        completeImage = [];
        itemLeg = itemO.length > itemLeg ? itemO.length : itemLeg;
        itemO.forEach((item,index)=>{
            Bookanswer[indexO].push([])
            // this.$set(Bookanswer[indexO][index],'optionsAnswer',[])
            if (this.curQue.wordTime && this.curQue.wordTime.length > 0) {
                let time = this.curQue.wordTime[item.index];
                if (time) {
                    item.ed = time.ed;
                    item.bg = time.bg;
                }
            }
            if(item.detail){
                item.detail.forEach(itemI=>{
                    itemI.detail.forEach(itemss=>{
                        if(itemss.wordsList&&itemss.wordsList.length>0){
                            itemss.wordsList.forEach(itemsss=>{
                                this.mergeWordSymbol(itemsss);
                            })
                        }
                    })
                    
                })
            }
            
            item.options.forEach((items, indexs) => {
                let userAnswer = JSON.parse(JSON.stringify(this.userAnswer));
                let correct = JSON.parse(JSON.stringify(items.correct));
                let complateArr = correct.completeInput.split("\n");
                complateArr.forEach((itemI, indexI) => {
                    if (itemI == "??" || itemI == "？？") {
                    complateArr[indexI] = "";
                    }
                });
                items.correct.complateArr = complateArr;
                this.curQue.option[indexO][index].options[indexs].correct.complateArr = complateArr;
                if (items.Isexample) {
                    userAnswer.Isexample = true;
                    userAnswer.recordList = {};
                }
                Bookanswer[indexO][index].push(userAnswer);
                let hengIndex = 0;
                items.pyNumber = [];

                items.detail.forEach((sdItem, sdIndex) => {
                    let isHasPY = 0;
                    let maxFontsize = 0;
                    sdItem.detail.forEach((sddItem) => {
                    if (sddItem.wordsList.length > 0) {
                        sddItem.wordsList.forEach((sItem, sIndex) => {
                        let reg = /_{2,}/g;
                        if (reg.test(sItem.chs)) {
                            sItem.index = sIndex;
                            sItem.isHeng = true;
                            sItem.hengIndex = hengIndex;
                            hengIndex++;
                        }
                        //补全句子
                        if (
                            !this.curQue.Bookanswer &&
                            (items.fn_check_list.sent_check ==
                            "sentence_complete_input_chs" ||
                            items.fn_check_list.sent_check ==
                                "sentence_long_input_chs")
                        ) {
                            let reg = /_{2,}/g;
                            if (reg.test(sItem.chs)) {
                            let bool = false;
                            if (sddItem.hasOwnProperty("input_Isexample")) {
                                bool = sddItem.input_Isexample;
                            } else {
                                bool = items.Isexample;
                            }
                            let obj = null;
                            if (!sddItem.input_tian) {
                                obj = {
                                answer:
                                    bool && complateArr[sItem.hengIndex]
                                    ? complateArr[sItem.hengIndex]
                                    : "",
                                userAnswerJudge:
                                    bool || !complateArr[sItem.hengIndex]
                                    ? ""
                                    : "[JUDGE##F##JUDGE]",
                                input_Isexample: bool ? true : false,
                                };
                                Bookanswer[indexO][index][indexs].completeInput.push(
                                JSON.parse(JSON.stringify(obj))
                                );
                            } else {
                                if (sddItem.hengLeg == "-1") {
                                completeImage.push(obj);
                                } else {
                                for (let i = 0; i < Number(sddItem.hengLeg); i++) {
                                    completeImage.push(obj);
                                }
                                }
                                Bookanswer[indexO][index][indexs].completeInput.push(
                                JSON.parse(JSON.stringify(completeImage))
                                );
                            }
                            }
                        }

                        this.mergeWordSymbol(sItem);
                        if (sItem.pinyin) {
                            isHasPY++;
                            this.totalHasPy = true;
                        }
                        let fontSize = JSON.parse(JSON.stringify(sItem.fontSize));
                        fontSize = Number(fontSize.replace("px", ""));
                        maxFontsize = fontSize > maxFontsize ? fontSize : maxFontsize;
                        });
                    } else {
                        if (sddItem.sentence) {
                        let fontSize = JSON.parse(
                            JSON.stringify(sddItem.config.fontSize)
                        );
                        fontSize = Number(fontSize.replace("px", ""));
                        maxFontsize = fontSize > maxFontsize ? fontSize : maxFontsize;
                        }
                    }
                    });
                    sdItem.maxFontsize = maxFontsize;
                    items.pyNumber.push(isHasPY);
                });
                if (!this.curQue.Bookanswer) {
                    //双输入/短输入
                    if (
                    items.fn_check_list.short_check == "sentence_double_input_chs"
                    ) {
                    items.correct.doubleInput.forEach((cItem) => {
                        let obj = {
                        correct:
                            items.Isexample && cItem.correct ? cItem.correct : "",
                        userAnswerJudge:
                            !items.Isexample && (cItem.correct || cItem.correct == "0")
                            ? "[JUDGE##F##JUDGE]"
                            : "",
                        };
                        Bookanswer[indexO][index][indexs].doubleInput.push(
                        JSON.parse(JSON.stringify(obj))
                        );
                    });
                    }
                    //判断
                    if (items.fn_check_list.judge_check) {
                    let judge_obj = {
                        correct:
                        items.Isexample && items.correct.judge
                            ? items.correct.judge
                            : "",
                        userAnswerJudge:
                        !items.Isexample && items.correct.judge
                            ? "[JUDGE##F##JUDGE]"
                            : "",
                    };
                    Bookanswer[indexO][index][indexs].judge = JSON.parse(
                        JSON.stringify(judge_obj)
                    );
                    }

                    //单选
                    if (items.fn_check_list.radio_check) {
                    let radio_obj = {
                        correct:
                        items.Isexample &&
                        (items.correct.radio || items.correct.radio === 0)
                            ? items.correct.radio
                            : "",
                        userAnswerJudge:
                        !items.Isexample &&
                        (items.correct.radio || items.correct.radio === 0)
                            ? "[JUDGE##F##JUDGE]"
                            : "",
                    };
                    Bookanswer[indexO][index][indexs].radio = JSON.parse(
                        JSON.stringify(radio_obj)
                    );
                    }

                    //多选
                    if (items.fn_check_list.checkbox_check) {
                    let checkbox_obj = {
                        correct:
                        items.Isexample &&
                        items.correct.checkbox &&
                        items.correct.checkbox.length > 0
                            ? items.correct.checkbox
                            : [],
                        userAnswerJudge:
                        !items.Isexample &&
                        items.correct.checkbox &&
                        items.correct.checkbox.length > 0
                            ? "[JUDGE##F##JUDGE]"
                            : "",
                    };
                    Bookanswer[indexO][index][indexs].checkbox = JSON.parse(
                        JSON.stringify(checkbox_obj)
                    );
                    }
                }

                items.radio_option.forEach((rItem, rIndex) => {
                    rItem.detail.pyNumber = [];
                    rItem.detail.wordsList.forEach((rpwItem) => {
                    let isHasPY2 = 0;
                    rpwItem.forEach((rpsItem) => {
                        this.mergeWordSymbol(rpsItem);
                        if (rpsItem.pinyin) {
                        isHasPY2++;
                        }
                    });
                    rItem.detail.pyNumber.push(isHasPY2);
                    });
                });
                items.checkbox_option.forEach((cItem, rIndex) => {
                    cItem.detail.pyNumber = [];
                    cItem.detail.wordsList.forEach((cpwItem) => {
                    let isHasPY3 = 0;
                    cpwItem.forEach((cpsItem) => {
                        this.mergeWordSymbol(cpsItem);
                        if (cpsItem.pinyin) {
                        isHasPY3++;
                        }
                    });
                    cItem.detail.pyNumber.push(isHasPY3);
                    });
                });
            });
            
        })
      })
      if (!this.curQue.Bookanswer) {
        this.$nextTick(() => {
          this.$set(
            this.curQue,
            "Bookanswer",
            JSON.parse(JSON.stringify(Bookanswer))
        );
        });
      } else {
        let BookanswerStr = JSON.stringify(this.curQue.Bookanswer);
        let errReg = /\[JUDGE##F##JUDGE\]/g;
        if (errReg.test(BookanswerStr)) {
          let errorArr = BookanswerStr.match(/\[JUDGE##F##JUDGE\]/g);
          this.userErrorNumberTotal = errorArr.length;
        }
      }

      this.$set(this.curQue, "option", option);
      let contentWidth = 780;
      if (this.curQue.img_list && this.curQue.img_list.length > 0) {
        contentWidth = 780 - this.curQue.img_size;
      }
      if(itemLeg==1){
        this.itemsWidth = 780
      }else{
        this.itemsWidth = Math.floor(contentWidth / itemLeg) - 16;
      }
      

      // 把答错的挑出来
      if (this.judgeAnswer == "standardAnswer") {
        this.userErrorList = [];
        this.userBookanswer = [];
        this.curQue.option.forEach((itemO, indexO) => {
          itemO.forEach((item,index)=>{
            item.options.forEach((items, indexs) => {
                let flag = false;
                // 多输入或者短输入
                items.correct.doubleInput.forEach((itemI, indexI) => {
                if (
                    itemI.correct &&
                    itemI.correct !=
                    this.curQue.Bookanswer[indexO][index][indexs].doubleInput[indexI]
                        .correct
                ) {
                    flag = true;
                }
                });

                // 句子填空
                items.correct.complateArr.forEach((itemI, indexI) => {
                if (
                    itemI &&
                    itemI !=
                    this.curQue.Bookanswer[indexO][index][indexs].completeInput[indexI]
                        .answer
                ) {
                    flag = true;
                }
                });

                // 句子判断
                if (
                items.correct.judge &&
                items.correct.judge !=
                    this.curQue.Bookanswer[indexO][index][indexs].judge.correct
                ) {
                flag = true;
                }

                // 句子单选
                if (
                items.correct.radio !== "" &&
                items.correct.radio !==
                    this.curQue.Bookanswer[indexO][index][indexs].radio.correct
                ) {
                flag = true;
                }
                // 句子多选
                if (
                items.correct &&
                items.correct.checkbox.length > 0 &&
                items.correct.checkbox.sort().toString() !=
                    this.curQue.Bookanswer[indexO][index][indexs].checkbox.correct
                    .sort()
                    .toString()
                ) {
                flag = true;
                }
                if (flag) {
                this.userErrorList.push(items);
                this.userBookanswer.push(this.curQue.Bookanswer[indexO][index][indexs]);
                }
            });
            
          })
          
        
        });
        console.log(this.userErrorList)
      }
    },
    //词和标点合一起
    mergeWordSymbol(sItem) {
      if (this.chsFhList.indexOf(sItem.chs) > -1) {
        sItem.isShow = false;
      } else {
        sItem.isShow = true;
      }
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    let _this = this;
    _this.handleData();
    _this.$nextTick(() => {
      if (_this.$refs.answerpart) {
        _this.$refs.answerpart.forEach((item) => {
          _this.answerpart.push(item.offsetWidth);
        });
      }
    });
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类

.sentence-control {
  width: 100%;
  box-sizing: border-box;
  border-radius: 8px;
  overflow: hidden;
  .out-audioLine-box {
    background: #f7f7f7;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  }
  .container-box {
    width: 100%;
    &-flex {
      display: flex;
      align-items: stretch;
    }
    &-auto {
      .fill-img-box {
        width: 100%;
      }
    }
    .fill-img-box {
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  .container {
    flex: 1;
    padding: 0;
    box-sizing: border-box;

    &.ul-flex {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .sent-option-24 {
        padding: 0 24px;
      }
    }
    .sent-option {
      &.li-flex {
        display: flex;
        margin: 0px;
        .sent-option-items {
          &-0 {
            margin: 8px 0; // 单列左右间距去掉
          }
          &-8 {
            margin-left: 8px;
            margin-right: 8px;
          }
        }
      }
      &-row {
        flex: 1;
      }
      &-standardAnswer {
        flex-flow: wrap;
      }
    }
    .sent-option-items {
      width: 100%;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      box-sizing: border-box;
      background: #ffffff;
      border: 1px solid rgba(0, 0, 0, 0.1);
      border-radius: 8px;
      margin: 8px 0;
      padding: 8px 12px;
      .number-box {
        width: 16px;
        height: 30px;
        border-radius: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 8px;
        margin-top: 3px;
        color: #000;
        // &-hasmp3 {
        //   margin-top: 8px;
        // }
        &-hasPY {
          margin-top: 21px;
        }
        &-nobg {
          width: 24px;
          justify-content: flex-end;
        }
      }
      > .number-box {
        margin-right: 16px;
      }
      .horn-24 {
        height: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 8px;
        margin-top: 3px;
        &.horn-hasPY {
          margin-top: 28px;
        }
      }
    }
    .sent-stem {
      flex: 1;
      display: flex;
      background: #fff;
      .stem-maincontent{
        flex: 1;
      }
      .stem-content {
        flex: 1;
      }
      .number-box {
        // &-hasPY {
        //   margin-top: 19px;
        // }
      }
      .sent-main {
        position: relative;
        width: 100%;
        display: flex;
        flex-wrap: wrap;

        box-sizing: border-box;
        &-138 {
          padding-right: 138px;
        }
        &-bottom {
          margin-bottom: 9px;
        }
      }
      .sent-que-box {
        display: flex;
        flex-wrap: wrap;
        padding: 4px 0;
      }
      .sent-que {
        &-flex {
          flex: 1;
          display: flex;
          justify-content: space-between;
          align-items: stretch;
        }
        .sentence-part {
          flex: 1;
        }
      }
      .answer-part {
        flex: 1;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        // padding-left: 16px;
        // &-hasPY {
        //   padding-top: 9px;
        // }
        // &.answer-part-138 {
        //   position: absolute;
        //   right: 0px;
        //   top: 1px;
        // }
        > div {
          margin-left: 8px;
        }
        .judge-part {
          &-padding-5 {
            padding: 5px 0 16px;
          }
        }
        .record-part {
          padding: 0;
        }
        .short-part {
          display: flex;
          align-items: center;
          margin-left: 0;
          &-flex {
            flex: 1;
          }
          // padding-top: 16px;
          // &-hasPY {
          //   padding-top: 24px;
          // }
        }
      }
    }
  }
  .record-common {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    border-radius: 8px;
    padding: 0 12px;
    margin: 0 auto;
    &-40 {
      height: 40px;
    }
  }
  // .record_mini {
  //   width: 68px;
  // }
  // .record_normal {
  //   width: 126px;
  // }
  .promax-box-div {
    width: 100%;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    border-radius: 0px 0px 8px 8px;
    .promax-box {
      width: 320px;
      height: 40px;
      border-radius: 20px;
      padding: 0 16px;
    }
  }
  &.hasmp3 {
    .sent-option {
      padding: 0px 16px;
    }
    &.sentence-control {
      background: #f7f7f7;
      border: 1px solid rgba(0, 0, 0, 0.1);
    }
  }
}
</style>
<style lang="scss">
.sentence-control{
    .answer-part{
        .OptionComponents-npc{
            ul{
                justify-content: flex-end;
            }
        }
    }
}
</style>