GCLS_Page_Book_Component_NPC/src/components/Adult/phonePreview/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"
          :baseSizePhone="baseSizePhone"
        />
      </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="baseSizePhone"
                        :textIndent="sdItem.textindent"
                      />
                      <template
                        v-if="
                          sddItem.img_list &&
                            sddItem.img_list.length > 0 &&
                            sddItem.img_list[0].id
                        "
                      >
                        <img
                          :src="sddItem.img_list[0].id"
                          class="sddItem_img_list"
                          :style="[imgStyle(sddItem)]"
                        />
                      </template>
                      <!-- <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="normal"
                          :TaskModel="TaskModel"
                          :tmIndex="sdIndex"
                          :answerRecordList="[]"
                          :baseSizePhone="baseSizePhone"
                        />
                      </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"
                        :baseSizePhone="baseSizePhone"
                      />
                    </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"
                        :baseSizePhone="baseSizePhone"
                      />
                    </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"
                        :baseSizePhone="baseSizePhone"
                      />
                    </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="[]"
                        :baseSizePhone="baseSizePhone"
                      />
                    </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"
                    :baseSizePhone="baseSizePhone"
                  />
                </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"
                    :baseSizePhone="baseSizePhone"
                  />
                </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="baseSizePhone"
                          :textIndent="sdItem.textindent"
                        />
                        <template
                          v-if="
                            sddItem.img_list &&
                              sddItem.img_list.length > 0 &&
                              sddItem.img_list[0].id
                          "
                        >
                          <img
                            :src="sddItem.img_list[0].id"
                            class="sddItem_img_list"
                            :style="[imgStyle(sddItem)]"
                          />
                        </template>
                        <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"
                            :modelType="curQue.type"
                            @handleWav="handleWav"
                            :baseSizePhone="baseSizePhone"
                          />
                        </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="baseSizePhone"
                          :textIndent="sdItem.textindent"
                        />
                        <template
                          v-if="
                            sddItem.img_list &&
                              sddItem.img_list.length > 0 &&
                              sddItem.img_list[0].id
                          "
                        >
                          <img
                            :src="sddItem.img_list[0].id"
                            class="sddItem_img_list"
                            :style="[imgStyle(sddItem)]"
                          />
                        </template>
                        <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="indexs"
                            :answerRecordList="
                              curQue.Bookanswer[index][indeO][indexs]
                                .recordList[sdIndex]
                            "
                            :index="index"
                            :indexs="indeO"
                            :sddIndex="sdIndex"
                            :modelType="curQue.type"
                            @handleWav="handleWav"
                            :baseSizePhone="baseSizePhone"
                          />
                        </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"
                          :baseSizePhone="baseSizePhone"
                        />
                      </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"
                          :baseSizePhone="baseSizePhone"
                        />
                      </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"
                          :baseSizePhone="baseSizePhone"
                        />
                      </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"
                          :baseSizePhone="baseSizePhone"
                        />
                      </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="indexs"
                          :answerRecordList="
                            curQue.Bookanswer[index][indeO][indexs].recordList[
                              sdIndex
                            ]
                          "
                          :index="index"
                          :indexs="indeO"
                          :sddIndex="sdIndex"
                          :modelType="curQue.type"
                          @handleWav="handleWav"
                          :baseSizePhone="baseSizePhone"
                        />
                      </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"
                      :baseSizePhone="baseSizePhone"
                    />
                  </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"
                      :baseSizePhone="baseSizePhone"
                    />
                  </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", "baseSizePhone"],
  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;
    },
    imgStyle() {
      return function(config) {
        let _this = this;
        let styleConfig = null;
        if (config.config && config.config.fontSize) {
          let sizeVal = config.config.fontSize.replace("px", "");
          styleConfig = {
            height: Number(sizeVal) * 1.5 + "px",
            width: Number(sizeVal) * 1.5 + "px"
          };
        }
        return styleConfig;
      };
    }
  },
  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, sddIndex) {
      tmIndex = tmIndex ? tmIndex : 0;
      index = index ? index : 0;
      indexs = indexs ? indexs : 0;
      let resList = list.filter((item, index) => index == list.length - 1);
      if (sddIndex || sddIndex === 0) {
        this.$set(
          this.curQue.Bookanswer[index][indexs][tmIndex].recordList,
          sddIndex,
          resList
        );
      } else {
        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 {
        font-size: 0;
        &-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>