<template>
  <div class="doTask">
    <!-- <div class="dt_back" @click.stop="back()">返回</div> -->
    <bar :num="1" @cutPage="back(1)">
      <template v-slot:title>
        <div class="dt_time" v-if="!isSubmit">
          <div class="dt_t_title">
            <svg width="20" height="20" viewBox="0 0 20 20" fill="#17C469" xmlns="http://www.w3.org/2000/svg">
              <path
                fill-rule="evenodd"
                clip-rule="evenodd"
                d="M3.75 11.25C3.75 7.79822 6.54822 5 10 5C11.7319 5 13.2984 5.70364 14.431 6.84218C15.5559 7.97295 16.25 9.52981 16.25 11.25C16.25 14.7018 13.4518 17.5 10 17.5C6.54822 17.5 3.75 14.7018 3.75 11.25ZM10 3.75C5.85786 3.75 2.5 7.10786 2.5 11.25C2.5 15.3921 5.85786 18.75 10 18.75C14.1421 18.75 17.5 15.3921 17.5 11.25C17.5 9.56177 16.9417 8.00315 16.0004 6.74983C16.0236 6.73236 16.0458 6.71307 16.0669 6.69194L17.3169 5.44194C17.561 5.19786 17.561 4.80214 17.3169 4.55806C17.0729 4.31398 16.6771 4.31398 16.4331 4.55806L15.1831 5.80806C15.1795 5.81166 15.1759 5.81529 15.1724 5.81896C13.8273 4.53761 12.0051 3.75 10 3.75Z"
              />
              <path
                fill-rule="evenodd"
                clip-rule="evenodd"
                d="M7 1.875C7 1.52982 7.33579 1.25 7.75 1.25H12.25C12.6642 1.25 13 1.52982 13 1.875C13 2.22018 12.6642 2.5 12.25 2.5H7.75C7.33579 2.5 7 2.22018 7 1.875Z"
              />
              <path
                fill-rule="evenodd"
                clip-rule="evenodd"
                d="M10 7.5C10.3452 7.5 10.625 7.77982 10.625 8.125V11.25C10.625 11.5952 10.3452 11.875 10 11.875C9.65482 11.875 9.375 11.5952 9.375 11.25V8.125C9.375 7.77982 9.65482 7.5 10 7.5Z"
              />
            </svg>
            <span>计时器</span>
          </div>
          <div class="dt_t_time">{{ showTime }}</div>
        </div>
        <div v-else>
          题目回顾
        </div>
      </template>
      <!-- <template v-slot:changeChapter v-if="!isSubmit">
        <div class="dt_m_l_h_changeChapter" @click.stop="changeChapterFn()">

          <span>切换</span>
        </div>
      </template> -->
    </bar>
    <div class="dt_main" v-if="!isSubmit">
      <!-- <div class="dt_m_head">
        <div class="dt_m_h_left">
          <div class="dt_m_h_chapter">{{ taskMessage.title }}</div>
          <div class="dt_m_h_message">
            {{ taskMessage.grade }}<span>|</span>{{ taskMessage.semester }}<span>|</span>{{ taskMessage.edition
            }}<span>|</span>{{ taskMessage.subject }}
          </div>
        </div>
        <div class="dt_m_h_right">
          <div class="dt_m_b_r_time">
            <div class="dt_m_b_r_t_head">
              <svg width="20" height="20" viewBox="0 0 20 20" fill="#fff" xmlns="http://www.w3.org/2000/svg">
                <path
                  fill-rule="evenodd"
                  clip-rule="evenodd"
                  d="M3.75 11.25C3.75 7.79822 6.54822 5 10 5C11.7319 5 13.2984 5.70364 14.431 6.84218C15.5559 7.97295 16.25 9.52981 16.25 11.25C16.25 14.7018 13.4518 17.5 10 17.5C6.54822 17.5 3.75 14.7018 3.75 11.25ZM10 3.75C5.85786 3.75 2.5 7.10786 2.5 11.25C2.5 15.3921 5.85786 18.75 10 18.75C14.1421 18.75 17.5 15.3921 17.5 11.25C17.5 9.56177 16.9417 8.00315 16.0004 6.74983C16.0236 6.73236 16.0458 6.71307 16.0669 6.69194L17.3169 5.44194C17.561 5.19786 17.561 4.80214 17.3169 4.55806C17.0729 4.31398 16.6771 4.31398 16.4331 4.55806L15.1831 5.80806C15.1795 5.81166 15.1759 5.81529 15.1724 5.81896C13.8273 4.53761 12.0051 3.75 10 3.75Z"
                />
                <path
                  fill-rule="evenodd"
                  clip-rule="evenodd"
                  d="M7 1.875C7 1.52982 7.33579 1.25 7.75 1.25H12.25C12.6642 1.25 13 1.52982 13 1.875C13 2.22018 12.6642 2.5 12.25 2.5H7.75C7.33579 2.5 7 2.22018 7 1.875Z"

                />
                <path
                  fill-rule="evenodd"
                  clip-rule="evenodd"
                  d="M10 7.5C10.3452 7.5 10.625 7.77982 10.625 8.125V11.25C10.625 11.5952 10.3452 11.875 10 11.875C9.65482 11.875 9.375 11.5952 9.375 11.25V8.125C9.375 7.77982 9.65482 7.5 10 7.5Z"
                />
              </svg>
              <span>计时器</span>
            </div>

            <div class="dt_m_b_r_t_showTime">
              <span>{{ showTime }}</span>
            </div>
          </div>
        </div> 
      </div> -->
      <div class="dt_m_box">
        <div class="dt_m_b_left">
          <!-- <div class="dt_m_b_l_head">
            <div class="dt_m_l_h_title" v-text="taskMessage.title"></div>
          </div> -->
          <!-- <div class="dt_m_b_l_title">{{ classTitle }}</div> -->
          <div class="dt_m_b_l_task">
            <div class="dt_m_b_l_t_head">
              <div>{{ typeof taskList[showTaskIndex].answer == 'object' ? '多选题' : '单选题' }}</div>
              <span
                ><span>{{ showTaskIndex + 1 }}</span
                >/{{ taskList.length }}</span
              >
            </div>
            <div class="dt_m_b_l_t_title">
              {{ showTaskIndex + 1 }}.{{ taskList[showTaskIndex].teststitle }}
              <div class="titleImage" v-if="taskList[showTaskIndex].imageUrl">
                <img :src="taskList[showTaskIndex].imageUrl" />
              </div>
            </div>
            <div class="dt_m_b_l_t_choseList">
              <div
                :class="[
                  'dt_m_b_l_t_cl_item',
                  typeof taskList[showTaskIndex].answer == 'object'
                    ? taskList[showTaskIndex].answer2.includes(index)
                      ? 'dt_m_b_l_t_cl_itemActive'
                      : ''
                    : taskList[showTaskIndex].answer2 === index
                    ? 'dt_m_b_l_t_cl_itemActive'
                    : ''
                ]"
                v-for="(item, index) in taskList[showTaskIndex].checkList"
                @click.stop="choseAnswer(index)"
                :key="showTaskIndex + '-' + index"
              >
                <div>
                  <span></span>
                </div>
                <span v-if="item.imgType == 1"
                  ><span>{{ choseList[index] }}.</span><img :src="item.src"
                /></span>
                <span v-else
                  ><span>{{ choseList[index] }}.{{ item }}</span></span
                >
                <!-- @click.stop="$hevueImgPreview(item.src)" -->
              </div>
            </div>
            <div class="dt_m_b_l_t_btnArea">
              <span class="dt_m_b_l_t_ba_btn1" v-if="this.showTaskIndex !== 0" @click.stop="changeTask('prev')"
                >上一题</span
              >

              <span
                class="dt_m_b_l_t_ba_btn2"
                v-if="!(this.showTaskIndex == taskList.length - 1)"
                @click.stop="changeTask('next')"
                >下一题</span
              >

              <span
                class="dt_m_b_l_t_ba_btn2"
                v-if="this.showTaskIndex == taskList.length - 1"
                @click.stop="submitTask()"
                >提交</span
              >
            </div>
          </div>
          <div class="dt_m_b_l_bottom">
            <div class="dt_m_b_l_b_seekAssist" v-show="!showSeekAssist" @click.stop="seekAssist()">
              <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path
                  d="M16.0911 7.91C16.0911 4.394 13.1601 1.563 9.60806 1.727C6.44706 1.873 3.87806 4.432 3.72106 7.593C3.59906 10.037 4.89706 12.189 6.86206 13.3V15.434C6.86206 15.911 7.24906 16.299 7.72706 16.299H12.0801C12.5571 16.299 12.9451 15.912 12.9451 15.434V13.3C14.8221 12.237 16.0911 10.222 16.0911 7.91Z"
                  fill="#AECCFE"
                />
                <path
                  d="M10.2181 1.729C10.4281 1.807 11.9881 2.424 13.2791 3.889C15.2841 6.165 15.2821 9.617 13.2351 11.856C12.9801 12.135 12.6881 12.412 12.3561 12.682C12.1591 12.842 12.0411 13.08 12.0411 13.333V15.047C12.0411 15.241 11.9011 15.407 11.7091 15.432C11.6531 15.439 11.5921 15.443 11.5251 15.443H7.95805C7.43905 15.443 7.17406 15.443 7.05206 15.189C7.12906 15.763 6.45606 16.227 8.51006 16.227H11.7931C11.7581 16.252 11.7191 16.276 11.6741 16.298H12.0781C12.2001 16.298 12.3151 16.273 12.4201 16.227H12.4961L12.4891 16.194C12.6261 16.12 12.7406 16.0102 12.8203 15.8764C12.9001 15.7426 12.9421 15.5898 12.9421 15.434V13.3C14.8211 12.238 16.0901 10.222 16.0901 7.91C16.0911 4.597 13.4891 1.894 10.2181 1.729Z"
                  fill="#3681FC"
                />
                <path
                  d="M7.76294 7.91C7.76294 8.19089 7.81827 8.46904 7.92576 8.72856C8.03326 8.98807 8.19081 9.22387 8.38944 9.4225C8.58806 9.62112 8.82386 9.77868 9.08338 9.88617C9.3429 9.99367 9.62104 10.049 9.90194 10.049C10.1828 10.049 10.461 9.99367 10.7205 9.88617C10.98 9.77868 11.2158 9.62112 11.4144 9.4225C11.6131 9.22387 11.7706 8.98807 11.8781 8.72856C11.9856 8.46904 12.0409 8.19089 12.0409 7.91C12.0409 7.6291 11.9856 7.35095 11.8781 7.09144C11.7706 6.83192 11.6131 6.59612 11.4144 6.3975C11.2158 6.19887 10.98 6.04131 10.7205 5.93382C10.461 5.82632 10.1828 5.771 9.90194 5.771C9.62104 5.771 9.3429 5.82632 9.08338 5.93382C8.82386 6.04131 8.58806 6.19887 8.38944 6.3975C8.19081 6.59612 8.03326 6.83192 7.92576 7.09144C7.81827 7.35095 7.76294 7.6291 7.76294 7.91Z"
                  fill="#FFAF77"
                />
                <path
                  d="M9.78495 9.95702C10.0519 9.97802 10.3139 9.98802 10.5669 9.99102C11.5139 9.77102 12.2199 8.92302 12.2199 7.90902C12.2199 6.72702 11.2619 5.77002 10.0809 5.77002C9.93995 5.77002 9.80295 5.78402 9.66895 5.81002L9.94795 5.97402C9.94795 5.97402 11.1929 6.75002 11.1929 7.84102C11.1929 8.93302 10.4069 9.72802 9.78495 9.95702Z"
                  fill="#E67F36"
                />
                <path
                  d="M12.442 7.91009C12.442 6.51009 11.303 5.37109 9.90301 5.37109C8.50301 5.37109 7.36401 6.51009 7.36401 7.91009C7.36401 9.17409 8.29301 10.2251 9.50301 10.4181V13.9381C9.50301 14.1591 9.68201 14.3381 9.90301 14.3381C10.124 14.3381 10.303 14.1591 10.303 13.9381V10.4181C11.513 10.2251 12.442 9.17409 12.442 7.91009ZM9.90201 9.64909C8.94301 9.64909 8.16301 8.86909 8.16301 7.91009C8.16301 6.95109 8.94301 6.17109 9.90201 6.17109C10.861 6.17109 11.641 6.95109 11.641 7.91009C11.641 8.86909 10.861 9.64909 9.90201 9.64909Z"
                  fill="#211D38"
                />
                <path
                  d="M12.0781 16.6981H7.72611C7.02911 16.6981 6.46111 16.1311 6.46111 15.4341V13.5291C4.39811 12.2651 3.20011 10.0051 3.32111 7.57311C3.48811 4.22611 6.24111 1.48211 9.59011 1.32711C11.4111 1.24311 13.1381 1.88811 14.4521 3.14311C15.7671 4.39911 16.4921 6.09211 16.4921 7.90911C16.4921 10.2011 15.2921 12.3331 13.3431 13.5281V15.4331C13.3431 16.1311 12.7761 16.6981 12.0781 16.6981ZM9.90511 2.12011C9.81311 2.12011 9.72011 2.12211 9.62711 2.12611C6.68611 2.26211 4.26711 4.67211 4.12111 7.61211C4.01111 9.81811 5.13711 11.8641 7.05911 12.9511C7.12065 12.986 7.17184 13.0366 7.20749 13.0978C7.24314 13.1589 7.26199 13.2283 7.26211 13.2991V15.4331C7.26211 15.6891 7.47011 15.8971 7.72711 15.8971H12.0801C12.3361 15.8971 12.5451 15.6891 12.5451 15.4331V13.3001C12.5451 13.1561 12.6231 13.0231 12.7481 12.9521C14.5651 11.9251 15.6931 9.99311 15.6931 7.91011C15.6931 6.31311 15.0571 4.82611 13.9011 3.72211C12.8121 2.68311 11.4021 2.12011 9.90511 2.12011Z"
                  fill="#211D38"
                />
                <path
                  d="M4.6361 9.55986C4.5271 9.55986 4.4261 9.48786 4.3951 9.37786C4.2271 8.78086 4.1581 8.15986 4.1891 7.53186C4.2071 7.17586 4.2581 6.82186 4.3421 6.47786C4.3751 6.34386 4.4121 6.20986 4.4541 6.07986C4.46416 6.04857 4.4803 6.01957 4.50159 5.99454C4.52288 5.9695 4.5489 5.94891 4.57817 5.93395C4.60743 5.91899 4.63936 5.90996 4.67213 5.90737C4.70489 5.90478 4.73784 5.90868 4.7691 5.91886C4.9001 5.96086 4.9731 6.10186 4.9301 6.23386C4.8921 6.35186 4.8581 6.47386 4.8281 6.59586C4.7521 6.90986 4.7051 7.23286 4.6891 7.55686C4.6601 8.13086 4.7241 8.69786 4.8771 9.24286C4.9141 9.37586 4.8371 9.51386 4.7041 9.55086C4.6811 9.55686 4.6591 9.55986 4.6361 9.55986ZM5.1211 5.41986C5.0801 5.41986 5.0381 5.40986 5.0001 5.38786C4.97137 5.37193 4.94607 5.35049 4.92565 5.32478C4.90522 5.29906 4.89007 5.26956 4.88106 5.23798C4.87205 5.2064 4.86935 5.17335 4.87314 5.14072C4.87692 5.1081 4.8871 5.07654 4.9031 5.04786C5.2636 4.40034 5.74536 3.82827 6.3221 3.36286C6.4291 3.27586 6.5871 3.29286 6.6741 3.39986C6.7611 3.50686 6.7441 3.66486 6.6371 3.75186C6.1071 4.18086 5.6711 4.69886 5.3401 5.29186C5.2941 5.37286 5.2091 5.41986 5.1211 5.41986ZM7.5241 3.19586C7.4321 3.19586 7.3431 3.14486 7.2991 3.05586C7.2381 2.93186 7.2891 2.78186 7.4131 2.72086C7.6881 2.58586 7.9781 2.47186 8.2731 2.38186C8.4051 2.34186 8.5451 2.41686 8.5851 2.54886C8.6251 2.68086 8.5501 2.82086 8.4181 2.86086C8.1491 2.94186 7.8851 3.04586 7.6341 3.16986C7.5991 3.18786 7.5611 3.19586 7.5241 3.19586Z"
                  fill="white"
                />
                <path
                  d="M12.7521 18.612H7.0521C6.8311 18.612 6.6521 18.433 6.6521 18.212C6.6521 17.991 6.8311 17.812 7.0521 17.812H12.7521C12.9731 17.812 13.1521 17.991 13.1521 18.212C13.1521 18.433 12.9731 18.612 12.7521 18.612Z"
                  fill="#211D38"
                />
                <path
                  d="M8.51611 7.9342C8.50411 7.9342 8.49211 7.9332 8.47911 7.9312C8.44659 7.92645 8.41532 7.91533 8.3871 7.89848C8.35888 7.88163 8.33427 7.85937 8.31466 7.83299C8.29506 7.80661 8.28086 7.77662 8.27287 7.74473C8.26488 7.71285 8.26326 7.67971 8.26811 7.6472C8.32011 7.2922 8.44511 7.0272 8.68411 6.7602C8.70588 6.73519 8.7324 6.71475 8.76214 6.70009C8.79188 6.68543 8.82423 6.67683 8.85733 6.67479C8.89042 6.67275 8.92359 6.67732 8.9549 6.68822C8.98621 6.69912 9.01505 6.71614 9.03972 6.73829C9.06439 6.76045 9.08441 6.78728 9.09861 6.81724C9.11281 6.84721 9.12091 6.87969 9.12243 6.91281C9.12396 6.94594 9.11888 6.97903 9.10749 7.01017C9.09611 7.04131 9.07864 7.06987 9.05611 7.0942C8.88511 7.2852 8.80011 7.4662 8.76211 7.7192C8.75417 7.77878 8.72484 7.83345 8.67958 7.87301C8.63432 7.91256 8.57622 7.93431 8.51611 7.9342Z"
                  fill="white"
                />
                <path
                  d="M4.24707 14.5559C4.22293 14.5019 4.18838 14.4532 4.14541 14.4125C4.10243 14.3719 4.05187 14.3401 3.99661 14.3191C3.94135 14.298 3.88248 14.288 3.82336 14.2897C3.76425 14.2914 3.70604 14.3047 3.65207 14.3289L3.35107 14.4639L3.21607 14.1629C3.19193 14.1089 3.15738 14.0602 3.11441 14.0195C3.07143 13.9789 3.02087 13.9471 2.96561 13.9261C2.91035 13.905 2.85148 13.895 2.79236 13.8967C2.73325 13.8983 2.67504 13.9117 2.62107 13.9359C2.39407 14.0379 2.29307 14.3039 2.39407 14.5309L2.52907 14.8319L2.22807 14.9669C2.00107 15.0689 1.90007 15.3349 2.00107 15.5619C2.03662 15.6411 2.09434 15.7084 2.16726 15.7556C2.24019 15.8028 2.3252 15.8279 2.41207 15.8279C2.47307 15.8279 2.53607 15.8149 2.59607 15.7889L2.89707 15.6539L3.03207 15.9549C3.06762 16.0341 3.12534 16.1014 3.19826 16.1486C3.27119 16.1958 3.3562 16.2209 3.44307 16.2209C3.50407 16.2209 3.56707 16.2079 3.62707 16.1819C3.85407 16.0799 3.95507 15.8139 3.85407 15.5869L3.71907 15.2859L4.02007 15.1509C4.12895 15.1019 4.21398 15.0118 4.25653 14.9003C4.29908 14.7887 4.29568 14.6649 4.24707 14.5559Z"
                  fill="#FFAF77"
                />
                <path
                  d="M15.677 15.1852C15.677 15.3578 15.7456 15.5234 15.8677 15.6455C15.9898 15.7676 16.1553 15.8362 16.328 15.8362C16.5007 15.8362 16.6662 15.7676 16.7883 15.6455C16.9104 15.5234 16.979 15.3578 16.979 15.1852C16.979 15.0125 16.9104 14.8469 16.7883 14.7249C16.6662 14.6028 16.5007 14.5342 16.328 14.5342C16.1553 14.5342 15.9898 14.6028 15.8677 14.7249C15.7456 14.8469 15.677 15.0125 15.677 15.1852Z"
                  fill="#E2E5F1"
                />
              </svg>

              <span>求助</span>
            </div>
            <div class="dt_m_b_l_b_changeChapter" @click.stop="changeChapterFn()">
              <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path
                  d="M13.9583 9.52832L10.8203 12.6663L9.87729 11.7237L10.7393 10.862L3.01562 10.8617V9.52832H13.9583ZM6.15362 3.52832L7.09629 4.47099L6.23429 5.33299H13.9583V6.66632H3.01562L6.15362 3.52832Z"
                  fill="black"
                  fill-opacity="0.6"
                />
              </svg>

              <span>切换</span>
            </div>

            <div class="dt_m_b_l_b_save" @click.stop="saveTask()">
              <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path
                  fill-rule="evenodd"
                  clip-rule="evenodd"
                  d="M3 2.5C3 2.22386 3.22386 2 3.5 2H11.5C11.6326 2 11.7598 2.05268 11.8536 2.14645L14.8536 5.14645C14.9473 5.24021 15 5.36739 15 5.5V13.5C15 13.7761 14.7761 14 14.5 14H3.5C3.22386 14 3 13.7761 3 13.5V2.5ZM4 3V13H5.5V10.5C5.5 10.2239 5.72386 10 6 10H12C12.2761 10 12.5 10.2239 12.5 10.5V13H14V5.70711L11.2929 3H4ZM11.5 13V11H6.5V13H11.5ZM5.5 8V5H6.5V8H5.5Z"
                  fill="black"
                  fill-opacity="0.6"
                />
              </svg>

              <span>保存</span>
            </div>
            <div class="dt_m_b_l_b_answerSheet" @click.stop="showTaskListSheet = true">
              <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path
                  fill-rule="evenodd"
                  clip-rule="evenodd"
                  d="M2.5 2.5C2.5 2.22386 2.72386 2 3 2H14C14.2761 2 14.5 2.22386 14.5 2.5V13.5C14.5 13.7761 14.2761 14 14 14H3C2.72386 14 2.5 13.7761 2.5 13.5V2.5ZM3.5 3V13H13.5V3H3.5Z"
                  fill="black"
                  fill-opacity="0.6"
                />
                <path
                  fill-rule="evenodd"
                  clip-rule="evenodd"
                  d="M7.74631 5.08406L6.06066 6.76971C5.96689 6.86348 5.83972 6.91616 5.70711 6.91616C5.5745 6.91616 5.44732 6.86348 5.35355 6.76971L4.5 5.91616L5.20711 5.20905L5.70711 5.70905L7.0392 4.37695L7.74631 5.08406Z"
                  fill="black"
                  fill-opacity="0.6"
                />
                <path
                  fill-rule="evenodd"
                  clip-rule="evenodd"
                  d="M5.9 9.39961C5.56863 9.39961 5.3 9.66824 5.3 9.99961C5.3 10.331 5.56863 10.5996 5.9 10.5996C6.23137 10.5996 6.5 10.331 6.5 9.99961C6.5 9.66824 6.23137 9.39961 5.9 9.39961ZM4.5 9.99961C4.5 9.22641 5.1268 8.59961 5.9 8.59961C6.6732 8.59961 7.3 9.22641 7.3 9.99961C7.3 10.7728 6.6732 11.3996 5.9 11.3996C5.1268 11.3996 4.5 10.7728 4.5 9.99961Z"
                  fill="black"
                  fill-opacity="0.6"
                />
                <path
                  fill-rule="evenodd"
                  clip-rule="evenodd"
                  d="M8.5 5.5H12.5V6.5H8.5V5.5Z"
                  fill="black"
                  fill-opacity="0.6"
                />
                <path
                  fill-rule="evenodd"
                  clip-rule="evenodd"
                  d="M8.5 9.5H12.5V10.5H8.5V9.5Z"
                  fill="black"
                  fill-opacity="0.6"
                />
              </svg>
              <span>答题卡</span>
              <div>
                <span>{{ showTaskIndex + 1 }}</span
                >/{{ taskList.length }}
              </div>
            </div>
          </div>
        </div>
        <!-- <div class="dt_m_b_right">
          

          <div class="dt_m_b_r_taskList">
            <div class="dt_m_b_r_tl_head">
              <div>
                <svg
                  width="16"
                  height="16"
                  viewBox="0 0 16 16"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    fill-rule="evenodd"
                    clip-rule="evenodd"
                    d="M2 2.5C2 2.22386 2.22386 2 2.5 2H13.5C13.7761 2 14 2.22386 14 2.5V13.5C14 13.7761 13.7761 14 13.5 14H2.5C2.22386 14 2 13.7761 2 13.5V2.5ZM3 3V13H13V3H3Z"
                    fill="#E67F36"
                  />
                  <path
                    fill-rule="evenodd"
                    clip-rule="evenodd"
                    d="M7.24631 5.08406L5.56066 6.76971C5.46689 6.86348 5.33972 6.91616 5.20711 6.91616C5.0745 6.91616 4.94732 6.86348 4.85355 6.76971L4 5.91616L4.70711 5.20905L5.20711 5.70905L6.5392 4.37695L7.24631 5.08406Z"
                    fill="#E67F36"
                  />
                  <path
                    fill-rule="evenodd"
                    clip-rule="evenodd"
                    d="M5.4 9.4001C5.06863 9.4001 4.8 9.66873 4.8 10.0001C4.8 10.3315 5.06863 10.6001 5.4 10.6001C5.73137 10.6001 6 10.3315 6 10.0001C6 9.66873 5.73137 9.4001 5.4 9.4001ZM4 10.0001C4 9.2269 4.6268 8.6001 5.4 8.6001C6.1732 8.6001 6.8 9.2269 6.8 10.0001C6.8 10.7733 6.1732 11.4001 5.4 11.4001C4.6268 11.4001 4 10.7733 4 10.0001Z"
                    fill="#E67F36"
                  />
                  <path
                    fill-rule="evenodd"
                    clip-rule="evenodd"
                    d="M8 5.5H12V6.5H8V5.5Z"
                    fill="#E67F36"
                  />
                  <path
                    fill-rule="evenodd"
                    clip-rule="evenodd"
                    d="M8 9.5H12V10.5H8V9.5Z"
                    fill="#E67F36"
                  />
                </svg>

                <span>答题卡</span>
              </div>

              <div>
                共{{ taskList.length }}道题
                <span>|</span>
                合计100分
              </div>
            </div>
            <div class="dt_m_b_r_tl_boxList">
              <span
                v-for="(item, index) in taskList"
                :key="index"
                :class="[
                  isDoTask(index) ? 'isDoTask' : '',
                  showTaskIndex == index ? 'inDoTask' : ''
                ]"
                @click.stop="showTaskIndex = index"
                >{{ index + 1 }}</span
              >
            </div>
            <div class="dt_m_b_r_tl_bottom">
              <div><span class="isDoTask"></span>已答</div>

              <div><span class="inDoTask"></span>当前</div>

              <div><span></span>未答</div>
            </div>
          </div>

          <div class="dt_m_b_r_bottom">
            <div
              @click.stop="saveTask()"
              v-if="!isDoAllTask && this.showTaskIndex != taskList.length - 1"
            >
              保存
            </div>
            <div
              @click.stop="submitTask()"
              v-if="isDoAllTask || this.showTaskIndex == taskList.length - 1"
            >
              确认提交
            </div>
          </div>
        </div> -->
      </div>

      <!-- <div class="dt_m_bottom">
        <div class="dt_m_b_head">
          <div class="dt_m_b_h_title">
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path
                fill-rule="evenodd"
                clip-rule="evenodd"
                d="M2 2.5C2 2.22386 2.22386 2 2.5 2H13.5C13.7761 2 14 2.22386 14 2.5V13.5C14 13.7761 13.7761 14 13.5 14H2.5C2.22386 14 2 13.7761 2 13.5V2.5ZM3 3V13H13V3H3Z"
                fill="#E67F36"
              />
              <path
                fill-rule="evenodd"
                clip-rule="evenodd"
                d="M7.24631 5.08406L5.56066 6.76971C5.46689 6.86348 5.33972 6.91616 5.20711 6.91616C5.0745 6.91616 4.94732 6.86348 4.85355 6.76971L4 5.91616L4.70711 5.20905L5.20711 5.70905L6.5392 4.37695L7.24631 5.08406Z"
                fill="#E67F36"
              />
              <path
                fill-rule="evenodd"
                clip-rule="evenodd"
                d="M5.4 9.4001C5.06863 9.4001 4.8 9.66873 4.8 10.0001C4.8 10.3315 5.06863 10.6001 5.4 10.6001C5.73137 10.6001 6 10.3315 6 10.0001C6 9.66873 5.73137 9.4001 5.4 9.4001ZM4 10.0001C4 9.2269 4.6268 8.6001 5.4 8.6001C6.1732 8.6001 6.8 9.2269 6.8 10.0001C6.8 10.7733 6.1732 11.4001 5.4 11.4001C4.6268 11.4001 4 10.7733 4 10.0001Z"
                fill="#E67F36"
              />
              <path fill-rule="evenodd" clip-rule="evenodd" d="M8 5.5H12V6.5H8V5.5Z" fill="#E67F36" />
              <path fill-rule="evenodd" clip-rule="evenodd" d="M8 9.5H12V10.5H8V9.5Z" fill="#E67F36" />
            </svg>

            <span>答题卡</span>
          </div>

          <div class="dt_m_b_r_tl_bottom">
            <div><span class="isDoTask"></span>已答</div>
            <div><span></span>未答</div>
            <div><span class="inDoTask"></span>当前</div>
          </div>
        </div>

        <div class="dt_m_b_taskList">
          <div class="dt_m_b_r_tl_boxList">
            <span
              v-for="(item, index) in taskList"
              :key="index"
              :class="[isDoTask(index) ? 'isDoTask' : '', showTaskIndex == index ? 'inDoTask' : '']"
              @click.stop="showTaskIndex = index"
              >{{ index + 1 }}</span
            >
          </div>
        </div>
      </div> -->
    </div>
    <div class="dt_dialogBackground" v-if="showSeekAssist"></div>
    <div class="dt_character2" v-if="!showSeekAssist && !isSubmit">
      <img :src="characterList.find(i => userInfo.choseCharacter === i.index).image" />
    </div>
    <div class="dt_character" v-if="showSeekAssist">
      <img :src="characterList.find(i => userInfo.choseCharacter === i.index).image" />

      <div class="dt_c_message" v-if="showSeekAssist">
        <!-- <span class="dt_c_m_characterName">{{
          characterList.find(i => userInfo.choseCharacter === i.index)
            ? characterList.find(i => userInfo.choseCharacter === i.index).name
            : 'AI'
        }}</span> -->

        <!--  -->
        <div class="dt_c_m_head">
          <div>
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path
                d="M16.0911 7.91C16.0911 4.394 13.1601 1.563 9.60806 1.727C6.44706 1.873 3.87806 4.432 3.72106 7.593C3.59906 10.037 4.89706 12.189 6.86206 13.3V15.434C6.86206 15.911 7.24906 16.299 7.72706 16.299H12.0801C12.5571 16.299 12.9451 15.912 12.9451 15.434V13.3C14.8221 12.237 16.0911 10.222 16.0911 7.91Z"
                fill="#AECCFE"
              />
              <path
                d="M10.2181 1.729C10.4281 1.807 11.9881 2.424 13.2791 3.889C15.2841 6.165 15.2821 9.617 13.2351 11.856C12.9801 12.135 12.6881 12.412 12.3561 12.682C12.1591 12.842 12.0411 13.08 12.0411 13.333V15.047C12.0411 15.241 11.9011 15.407 11.7091 15.432C11.6531 15.439 11.5921 15.443 11.5251 15.443H7.95805C7.43905 15.443 7.17406 15.443 7.05206 15.189C7.12906 15.763 6.45606 16.227 8.51006 16.227H11.7931C11.7581 16.252 11.7191 16.276 11.6741 16.298H12.0781C12.2001 16.298 12.3151 16.273 12.4201 16.227H12.4961L12.4891 16.194C12.6261 16.12 12.7406 16.0102 12.8203 15.8764C12.9001 15.7426 12.9421 15.5898 12.9421 15.434V13.3C14.8211 12.238 16.0901 10.222 16.0901 7.91C16.0911 4.597 13.4891 1.894 10.2181 1.729Z"
                fill="#3681FC"
              />
              <path
                d="M7.76294 7.91C7.76294 8.19089 7.81827 8.46904 7.92576 8.72856C8.03326 8.98807 8.19081 9.22387 8.38944 9.4225C8.58806 9.62112 8.82386 9.77868 9.08338 9.88617C9.3429 9.99367 9.62104 10.049 9.90194 10.049C10.1828 10.049 10.461 9.99367 10.7205 9.88617C10.98 9.77868 11.2158 9.62112 11.4144 9.4225C11.6131 9.22387 11.7706 8.98807 11.8781 8.72856C11.9856 8.46904 12.0409 8.19089 12.0409 7.91C12.0409 7.6291 11.9856 7.35095 11.8781 7.09144C11.7706 6.83192 11.6131 6.59612 11.4144 6.3975C11.2158 6.19887 10.98 6.04131 10.7205 5.93382C10.461 5.82632 10.1828 5.771 9.90194 5.771C9.62104 5.771 9.3429 5.82632 9.08338 5.93382C8.82386 6.04131 8.58806 6.19887 8.38944 6.3975C8.19081 6.59612 8.03326 6.83192 7.92576 7.09144C7.81827 7.35095 7.76294 7.6291 7.76294 7.91Z"
                fill="#FFAF77"
              />
              <path
                d="M9.78495 9.95702C10.0519 9.97802 10.3139 9.98802 10.5669 9.99102C11.5139 9.77102 12.2199 8.92302 12.2199 7.90902C12.2199 6.72702 11.2619 5.77002 10.0809 5.77002C9.93995 5.77002 9.80295 5.78402 9.66895 5.81002L9.94795 5.97402C9.94795 5.97402 11.1929 6.75002 11.1929 7.84102C11.1929 8.93302 10.4069 9.72802 9.78495 9.95702Z"
                fill="#E67F36"
              />
              <path
                d="M12.442 7.91009C12.442 6.51009 11.303 5.37109 9.90301 5.37109C8.50301 5.37109 7.36401 6.51009 7.36401 7.91009C7.36401 9.17409 8.29301 10.2251 9.50301 10.4181V13.9381C9.50301 14.1591 9.68201 14.3381 9.90301 14.3381C10.124 14.3381 10.303 14.1591 10.303 13.9381V10.4181C11.513 10.2251 12.442 9.17409 12.442 7.91009ZM9.90201 9.64909C8.94301 9.64909 8.16301 8.86909 8.16301 7.91009C8.16301 6.95109 8.94301 6.17109 9.90201 6.17109C10.861 6.17109 11.641 6.95109 11.641 7.91009C11.641 8.86909 10.861 9.64909 9.90201 9.64909Z"
                fill="#211D38"
              />
              <path
                d="M12.0781 16.6981H7.72611C7.02911 16.6981 6.46111 16.1311 6.46111 15.4341V13.5291C4.39811 12.2651 3.20011 10.0051 3.32111 7.57311C3.48811 4.22611 6.24111 1.48211 9.59011 1.32711C11.4111 1.24311 13.1381 1.88811 14.4521 3.14311C15.7671 4.39911 16.4921 6.09211 16.4921 7.90911C16.4921 10.2011 15.2921 12.3331 13.3431 13.5281V15.4331C13.3431 16.1311 12.7761 16.6981 12.0781 16.6981ZM9.90511 2.12011C9.81311 2.12011 9.72011 2.12211 9.62711 2.12611C6.68611 2.26211 4.26711 4.67211 4.12111 7.61211C4.01111 9.81811 5.13711 11.8641 7.05911 12.9511C7.12065 12.986 7.17184 13.0366 7.20749 13.0978C7.24314 13.1589 7.26199 13.2283 7.26211 13.2991V15.4331C7.26211 15.6891 7.47011 15.8971 7.72711 15.8971H12.0801C12.3361 15.8971 12.5451 15.6891 12.5451 15.4331V13.3001C12.5451 13.1561 12.6231 13.0231 12.7481 12.9521C14.5651 11.9251 15.6931 9.99311 15.6931 7.91011C15.6931 6.31311 15.0571 4.82611 13.9011 3.72211C12.8121 2.68311 11.4021 2.12011 9.90511 2.12011Z"
                fill="#211D38"
              />
              <path
                d="M4.6361 9.55986C4.5271 9.55986 4.4261 9.48786 4.3951 9.37786C4.2271 8.78086 4.1581 8.15986 4.1891 7.53186C4.2071 7.17586 4.2581 6.82186 4.3421 6.47786C4.3751 6.34386 4.4121 6.20986 4.4541 6.07986C4.46416 6.04857 4.4803 6.01957 4.50159 5.99454C4.52288 5.9695 4.5489 5.94891 4.57817 5.93395C4.60743 5.91899 4.63936 5.90996 4.67213 5.90737C4.70489 5.90478 4.73784 5.90868 4.7691 5.91886C4.9001 5.96086 4.9731 6.10186 4.9301 6.23386C4.8921 6.35186 4.8581 6.47386 4.8281 6.59586C4.7521 6.90986 4.7051 7.23286 4.6891 7.55686C4.6601 8.13086 4.7241 8.69786 4.8771 9.24286C4.9141 9.37586 4.8371 9.51386 4.7041 9.55086C4.6811 9.55686 4.6591 9.55986 4.6361 9.55986ZM5.1211 5.41986C5.0801 5.41986 5.0381 5.40986 5.0001 5.38786C4.97137 5.37193 4.94607 5.35049 4.92565 5.32478C4.90522 5.29906 4.89007 5.26956 4.88106 5.23798C4.87205 5.2064 4.86935 5.17335 4.87314 5.14072C4.87692 5.1081 4.8871 5.07654 4.9031 5.04786C5.2636 4.40034 5.74536 3.82827 6.3221 3.36286C6.4291 3.27586 6.5871 3.29286 6.6741 3.39986C6.7611 3.50686 6.7441 3.66486 6.6371 3.75186C6.1071 4.18086 5.6711 4.69886 5.3401 5.29186C5.2941 5.37286 5.2091 5.41986 5.1211 5.41986ZM7.5241 3.19586C7.4321 3.19586 7.3431 3.14486 7.2991 3.05586C7.2381 2.93186 7.2891 2.78186 7.4131 2.72086C7.6881 2.58586 7.9781 2.47186 8.2731 2.38186C8.4051 2.34186 8.5451 2.41686 8.5851 2.54886C8.6251 2.68086 8.5501 2.82086 8.4181 2.86086C8.1491 2.94186 7.8851 3.04586 7.6341 3.16986C7.5991 3.18786 7.5611 3.19586 7.5241 3.19586Z"
                fill="white"
              />
              <path
                d="M12.7521 18.612H7.0521C6.8311 18.612 6.6521 18.433 6.6521 18.212C6.6521 17.991 6.8311 17.812 7.0521 17.812H12.7521C12.9731 17.812 13.1521 17.991 13.1521 18.212C13.1521 18.433 12.9731 18.612 12.7521 18.612Z"
                fill="#211D38"
              />
              <path
                d="M8.51611 7.9342C8.50411 7.9342 8.49211 7.9332 8.47911 7.9312C8.44659 7.92645 8.41532 7.91533 8.3871 7.89848C8.35888 7.88163 8.33427 7.85937 8.31466 7.83299C8.29506 7.80661 8.28086 7.77662 8.27287 7.74473C8.26488 7.71285 8.26326 7.67971 8.26811 7.6472C8.32011 7.2922 8.44511 7.0272 8.68411 6.7602C8.70588 6.73519 8.7324 6.71475 8.76214 6.70009C8.79188 6.68543 8.82423 6.67683 8.85733 6.67479C8.89042 6.67275 8.92359 6.67732 8.9549 6.68822C8.98621 6.69912 9.01505 6.71614 9.03972 6.73829C9.06439 6.76045 9.08441 6.78728 9.09861 6.81724C9.11281 6.84721 9.12091 6.87969 9.12243 6.91281C9.12396 6.94594 9.11888 6.97903 9.10749 7.01017C9.09611 7.04131 9.07864 7.06987 9.05611 7.0942C8.88511 7.2852 8.80011 7.4662 8.76211 7.7192C8.75417 7.77878 8.72484 7.83345 8.67958 7.87301C8.63432 7.91256 8.57622 7.93431 8.51611 7.9342Z"
                fill="white"
              />
              <path
                d="M4.24707 14.5559C4.22293 14.5019 4.18838 14.4532 4.14541 14.4125C4.10243 14.3719 4.05187 14.3401 3.99661 14.3191C3.94135 14.298 3.88248 14.288 3.82336 14.2897C3.76425 14.2914 3.70604 14.3047 3.65207 14.3289L3.35107 14.4639L3.21607 14.1629C3.19193 14.1089 3.15738 14.0602 3.11441 14.0195C3.07143 13.9789 3.02087 13.9471 2.96561 13.9261C2.91035 13.905 2.85148 13.895 2.79236 13.8967C2.73325 13.8983 2.67504 13.9117 2.62107 13.9359C2.39407 14.0379 2.29307 14.3039 2.39407 14.5309L2.52907 14.8319L2.22807 14.9669C2.00107 15.0689 1.90007 15.3349 2.00107 15.5619C2.03662 15.6411 2.09434 15.7084 2.16726 15.7556C2.24019 15.8028 2.3252 15.8279 2.41207 15.8279C2.47307 15.8279 2.53607 15.8149 2.59607 15.7889L2.89707 15.6539L3.03207 15.9549C3.06762 16.0341 3.12534 16.1014 3.19826 16.1486C3.27119 16.1958 3.3562 16.2209 3.44307 16.2209C3.50407 16.2209 3.56707 16.2079 3.62707 16.1819C3.85407 16.0799 3.95507 15.8139 3.85407 15.5869L3.71907 15.2859L4.02007 15.1509C4.12895 15.1019 4.21398 15.0118 4.25653 14.9003C4.29908 14.7887 4.29568 14.6649 4.24707 14.5559Z"
                fill="#FFAF77"
              />
              <path
                d="M15.677 15.1852C15.677 15.3578 15.7456 15.5234 15.8677 15.6455C15.9898 15.7676 16.1553 15.8362 16.328 15.8362C16.5007 15.8362 16.6662 15.7676 16.7883 15.6455C16.9104 15.5234 16.979 15.3578 16.979 15.1852C16.979 15.0125 16.9104 14.8469 16.7883 14.7249C16.6662 14.6028 16.5007 14.5342 16.328 14.5342C16.1553 14.5342 15.9898 14.6028 15.8677 14.7249C15.7456 14.8469 15.677 15.0125 15.677 15.1852Z"
                fill="#E2E5F1"
              />
            </svg>

            <span>求助</span>
          </div>
          <span class="dt_c_m_closeIcon" @click.stop="showSeekAssist = false">
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path
                d="M7 0C3.14049 0 0 3.14001 0 7C0 10.86 3.14001 14 7 14C10.8595 14 14 10.86 14 7C14 3.14001 10.86 0 7 0ZM9.8555 9.156C10.0505 9.352 10.05 9.668 9.85451 9.863C9.75702 9.96 9.62951 10.009 9.50152 10.009C9.37301 10.009 9.24502 9.96001 9.14751 9.86201L6.9975 7.7055L4.84051 9.83951C4.74302 9.93552 4.61599 9.98401 4.48899 9.98401C4.36001 9.98401 4.2315 9.9345 4.1335 9.83551C3.9395 9.639 3.941 9.32299 4.13751 9.1285L6.292 6.9975L4.14549 4.844C3.95049 4.64849 3.951 4.332 4.14649 4.137C4.342 3.94149 4.65798 3.94251 4.85349 4.13799L7.00298 6.29399L9.15998 4.16001C9.35597 3.96552 9.67297 3.9675 9.86698 4.16401C10.0615 4.36052 10.0595 4.67701 9.86298 4.87101L7.70851 7.00199L9.8555 9.156Z"
                fill="#E0EAFB"
              />
            </svg>
          </span>
        </div>

        <div class="dt_c_m_message">
          <span v-text="seekAssistMessage"></span>
          <!-- 这题选：<span>{{
            typeof taskList[showTaskIndex].answer == 'object'
              ? taskList[showTaskIndex].answer.map(i => choseList[i]).join('、')
              : choseList[taskList[showTaskIndex].answer]
          }}</span> -->
        </div>
        <div class="dt_c_m_btnArea">
          <span class="dt_c_m_btn1" @click.stop="doNotKnow()">不太明白</span>
          <span class="dt_c_m_btn2" @click.stop="showSeekAssist = false">好，继续做题→</span>
        </div>
      </div>
    </div>
    <div class="dt_isSubmit" v-if="isSubmit">
      <!-- <div class="dt_m_b_l_head">
        <div class="dt_m_b_l_h_left">八年级>上学期>人教版</div>
      </div> -->
      <!-- <div class="dt_m_b_l_title">{{ taskMessage.title }}</div>
      <div class="dt_is_statistics">
        <img src="../../assets/images/pocAiClassroom/taskSuccess.png" alt="" />
        <el-rate class="dt_is_s_star" v-model="star" allow-half disabled></el-rate>
        <div class="dt_is_s_message">
          <span>总计题目：{{ showMessage.total }}</span>
          <span>总答对数量：{{ showMessage.right }}</span>
          <span>正确率：{{ showMessage.accuracy }}%</span>
        </div>

        <div class="dt_is_s_taskList">
          <span
            v-for="(item, index) in taskList"
            @click.stop="goDoTask(index)"
            :class="[
              typeof item.answer === 'object'
                ? item.answer2.length != 0
                  ? isTrueTask(index).no.length == 0 && isTrueTask(index).yes.length == item.answer.length
                    ? 'isDoYes'
                    : 'isDoNo'
                  : 'isNoDo'
                : item.answer2 !== ''
                ? item.answer === item.answer2
                  ? 'isDoYes'
                  : 'isDoNo'
                : 'isNoDo'
            ]"
            :key="index"
            >{{ index + 1 }}</span
          >
        </div>
      </div>

      <div class="dt_is_taskList">
        <div class="dt_is_tl_head">
          <span>题目回顾</span>
          <div>
            <span @click.stop="onlyShowMistake = !onlyShowMistake">只显示错题</span>
            <el-switch v-model="onlyShowMistake" style="transform: scale(1,1);"></el-switch>
          </div>
        </div>

        <div class="dt_is_tl_taskBox">
          <div
            class="dt_is_tl_tb_item"
            v-for="(item, index) in taskList"
            :ref="'taskItem' + index + 'Ref'"
            :key="index"
            v-if="
              !onlyShowMistake ||
                (typeof item.answer === 'object'
                  ? !(isTrueTask(index).no.length == 0 && isTrueTask(index).yes.length == item.answer.length)
                  : item.answer !== item.answer2)
            "
          >
            <span class="dt_is_tl_tb_i_title"
              >{{ typeof item.answer == 'object' ? '【多选题】' : '【单选题】' }}{{ index + 1 }}.{{
                item.teststitle
              }}</span
            >
            <div class="titleImage" v-if="item.imageUrl">
              <img :src="item.imageUrl" />
            </div>

            <div class="dt_is_tl_tb_i_choseList">
              <span v-for="(item2, index2) in item.checkList" :key="index + '-' + index2">
                <span v-if="item2.imgType == 1"
                  >{{ choseList[index2] }}<span>.</span><img :src="item2.src" @click.stop="$hevueImgPreview(item2.src)"
                /></span>
                <span v-else
                  ><span>{{ choseList[index2] }}.{{ item2 }}</span></span
                >
              </span>
            </div>

            <div class="dt_is_tl_tb_i_answer">
              <div>
                你的答案：<span v-if="typeof item.answer === 'object'">
                  <span
                    v-for="(item3, index3) in item.answer2"
                    :key="index + '+' + index3"
                    :style="item.answer.includes(item3) ? 'color:#75BD42' : 'color:#FF5B5B'"
                    >{{ choseList[item3] }}{{ index3 == item.answer2.length - 1 ? '' : '、' }}</span
                  > </span
                ><span v-else :style="item.answer === item.answer2 ? 'color:#75BD42' : 'color:#FF5B5B'">{{
                  choseList[item.answer2]
                }}</span>
              </div>

              <div>
                正确答案：<span style="color:#75BD42">{{
                  typeof item.answer === 'object'
                    ? item.answer.map(i => choseList[i]).join('、')
                    : choseList[item.answer]
                }}</span>
              </div>
            </div>

            <div class="dt_is_tl_tb_i_analyze">
              <div>答案解析：<span v-text="item.analyze"></span></div>
            </div>
          </div>
        </div>
      </div> -->
      <div class="dt_is_top">
        <div class="dt_is_t_head">
          <div class="dt_is_t_h_left">
            <img :src="require('../../assets/images/pocAiClassroom/isSubmitTask.png')" />
            <div>
              <div>练习完成</div>
              <span><el-rate v-model="showMessage.star" allow-half disabled></el-rate></span>
            </div>
          </div>
          <div class="dt_is_t_h_right">
            <div>{{ showMessage.accuracy }}%</div>
            <span>正确率</span>
          </div>
        </div>

        <div
          class="dt_is_t_taskItem"
          v-for="(item, index) in taskList"
          :key="index"
          :ref="'taskItem' + index + 'Ref'"
          v-if="
            !onlyShowMistake ||
              (typeof item.answer === 'object'
                ? !(isTrueTask(index).no.length == 0 && isTrueTask(index).yes.length == item.answer.length)
                : item.answer !== item.answer2)
          "
        >
          <div class="dt_is_t_ti_head">
            <div>{{ typeof item.answer == 'object' ? '多选题' : '单选题' }}</div>
            <span
              ><span>{{ index + 1 }}</span
              >/{{ taskList.length }}</span
            >
          </div>

          <div class="dt_is_t_ti_title">{{ index + 1 }}.{{ item.teststitle }}</div>

          <div class="dt_is_t_ti_image" v-if="item.imageUrl">
            <img :src="item.imageUrl" />
          </div>

          <div class="dt_is_t_ti_choseList">
            <div
              :class="[
                'dt_is_t_ti_cl_item',
                typeof item.answer == 'object'
                  ? item.answer.includes(index2)
                    ? item.answer2.includes(index2)
                      ? 'dt_is_t_ti_cl_itemChoseYes'
                      : 'dt_is_t_ti_cl_itemChoseNo'
                    : item.answer2.includes(index2)
                    ? 'dt_is_t_ti_cl_itemChoseError'
                    : ''
                  : item.answer === index2
                  ? item.answer === item.answer2
                    ? 'dt_is_t_ti_cl_itemChoseYes'
                    : 'dt_is_t_ti_cl_itemChoseNo'
                  : item.answer2 === index2
                  ? 'dt_is_t_ti_cl_itemChoseError'
                  : ''
              ]"
              v-for="(item2, index2) in item.checkList"
              :key="index + '-' + index2"
            >
              <div>
                <span></span>
              </div>
              <span v-if="item2.imgType == 1"
                ><span>{{ choseList[index2] }}.</span><img :src="item2.src"
              /></span>
              <span v-else
                ><span>{{ choseList[index2] }}.{{ item2 }}</span></span
              >

              <span class="dt_is_t_ti_cl_i_Yes">
                <svg width="19" height="16" viewBox="0 0 19 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path
                    d="M6.072 10.3278L2.5464 6.7998L0 9.34501L6.072 15.4182L18.1452 3.3462L15.6 0.799805L6.072 10.3278Z"
                    fill="#0E9D52"
                  />
                </svg>
              </span>
              <span class="dt_is_t_ti_cl_i_No">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path
                    d="M14.4824 12.0962L20.8574 18.4712L18.4709 20.8577L12.0959 14.4827L5.72093 20.8577L3.33368 18.4712L9.70868 12.0962L3.26318 5.64995L5.64968 3.2627L12.0959 9.70894L18.5422 3.2627L20.9287 5.6492L14.4824 12.0954V12.0962Z"
                    fill="#C71919"
                  />
                </svg>
              </span>
              <!-- {{ item.answer===index2?item.answer===item.answer2?'【对的】':'【没选对的】':item.answer2===index2?'【选错了】':'【默认】' }} -->
              <!-- @click.stop="$hevueImgPreview(item.src)" -->
            </div>
          </div>
        </div>
      </div>
      <div class="dt_is_bottom">
        <div class="dt_is_b_left">
          <el-switch v-model="onlyShowMistake" style="transform: scale(1,1);"></el-switch>
          <span @click.stop="onlyShowMistake = !onlyShowMistake">只显示错题</span>
        </div>

        <div class="dt_is_b_right">
          <svg
            width="17"
            height="16"
            viewBox="0 0 17 16"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
            @click="showIsSubmitTaskListSheet = true"
          >
            <path
              fill-rule="evenodd"
              clip-rule="evenodd"
              d="M2.5 2.5C2.5 2.22386 2.72386 2 3 2H14C14.2761 2 14.5 2.22386 14.5 2.5V13.5C14.5 13.7761 14.2761 14 14 14H3C2.72386 14 2.5 13.7761 2.5 13.5V2.5ZM3.5 3V13H13.5V3H3.5Z"
              fill="black"
              fill-opacity="0.6"
            />
            <path
              fill-rule="evenodd"
              clip-rule="evenodd"
              d="M7.74631 5.08406L6.06066 6.76971C5.96689 6.86348 5.83972 6.91616 5.70711 6.91616C5.5745 6.91616 5.44732 6.86348 5.35355 6.76971L4.5 5.91616L5.20711 5.20905L5.70711 5.70905L7.0392 4.37695L7.74631 5.08406Z"
              fill="black"
              fill-opacity="0.6"
            />
            <path
              fill-rule="evenodd"
              clip-rule="evenodd"
              d="M5.9 9.39961C5.56863 9.39961 5.3 9.66824 5.3 9.99961C5.3 10.331 5.56863 10.5996 5.9 10.5996C6.23137 10.5996 6.5 10.331 6.5 9.99961C6.5 9.66824 6.23137 9.39961 5.9 9.39961ZM4.5 9.99961C4.5 9.22641 5.1268 8.59961 5.9 8.59961C6.6732 8.59961 7.3 9.22641 7.3 9.99961C7.3 10.7728 6.6732 11.3996 5.9 11.3996C5.1268 11.3996 4.5 10.7728 4.5 9.99961Z"
              fill="black"
              fill-opacity="0.6"
            />
            <path
              fill-rule="evenodd"
              clip-rule="evenodd"
              d="M8.5 5.5H12.5V6.5H8.5V5.5Z"
              fill="black"
              fill-opacity="0.6"
            />
            <path
              fill-rule="evenodd"
              clip-rule="evenodd"
              d="M8.5 9.5H12.5V10.5H8.5V9.5Z"
              fill="black"
              fill-opacity="0.6"
            />
          </svg>
          <span @click="showIsSubmitTaskListSheet = true">答题卡</span>
        </div>
      </div>
    </div>
    <van-action-sheet v-model="showTaskListSheet">
      <div class="taskListArea">
        <div class="tla_head">
          <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path
              fill-rule="evenodd"
              clip-rule="evenodd"
              d="M2.5 2.5C2.5 2.22386 2.72386 2 3 2H14C14.2761 2 14.5 2.22386 14.5 2.5V13.5C14.5 13.7761 14.2761 14 14 14H3C2.72386 14 2.5 13.7761 2.5 13.5V2.5ZM3.5 3V13H13.5V3H3.5Z"
              fill="black"
              fill-opacity="0.6"
            />
            <path
              fill-rule="evenodd"
              clip-rule="evenodd"
              d="M7.74631 5.08406L6.06066 6.76971C5.96689 6.86348 5.83972 6.91616 5.70711 6.91616C5.5745 6.91616 5.44732 6.86348 5.35355 6.76971L4.5 5.91616L5.20711 5.20905L5.70711 5.70905L7.0392 4.37695L7.74631 5.08406Z"
              fill="black"
              fill-opacity="0.6"
            />
            <path
              fill-rule="evenodd"
              clip-rule="evenodd"
              d="M5.9 9.39961C5.56863 9.39961 5.3 9.66824 5.3 9.99961C5.3 10.331 5.56863 10.5996 5.9 10.5996C6.23137 10.5996 6.5 10.331 6.5 9.99961C6.5 9.66824 6.23137 9.39961 5.9 9.39961ZM4.5 9.99961C4.5 9.22641 5.1268 8.59961 5.9 8.59961C6.6732 8.59961 7.3 9.22641 7.3 9.99961C7.3 10.7728 6.6732 11.3996 5.9 11.3996C5.1268 11.3996 4.5 10.7728 4.5 9.99961Z"
              fill="black"
              fill-opacity="0.6"
            />
            <path
              fill-rule="evenodd"
              clip-rule="evenodd"
              d="M8.5 5.5H12.5V6.5H8.5V5.5Z"
              fill="black"
              fill-opacity="0.6"
            />
            <path
              fill-rule="evenodd"
              clip-rule="evenodd"
              d="M8.5 9.5H12.5V10.5H8.5V9.5Z"
              fill="black"
              fill-opacity="0.6"
            />
          </svg>
          <span>答题卡</span>
          <div>
            <span>{{ showTaskIndex + 1 }}</span
            >/{{ taskList.length }}
          </div>
        </div>
        <div class="tla_taskList">
          <span
            v-for="(item, index) in taskList"
            :key="index"
            :class="[isDoTask(index) ? 'isDoTask' : '', showTaskIndex == index ? 'inDoTask' : '']"
            @click.stop="choseShowTaskIndex(index)"
            >{{ index + 1 }}</span
          >
        </div>
        <div class="tla_bottom">
          <div class="dt_m_b_r_tl_bottom">
            <div><span class="isDoTask"></span>已答</div>

            <div><span class="inDoTask"></span>当前</div>

            <div><span></span>未答</div>
          </div>
          <div class="tla_b_right">
            <span>{{ showTaskIndex + 1 }}</span
            >/{{ taskList.length }}
            <!-- <div>共{{ taskList.length }}道题</div>
            <span></span>
            <div>合计100分</div> -->
          </div>
        </div>
      </div>
    </van-action-sheet>

    <van-action-sheet v-model="showIsSubmitTaskListSheet">
      <div class="taskListArea" v-if="isSubmit">
        <div class="tla_head">
          <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path
              fill-rule="evenodd"
              clip-rule="evenodd"
              d="M2.5 2.5C2.5 2.22386 2.72386 2 3 2H14C14.2761 2 14.5 2.22386 14.5 2.5V13.5C14.5 13.7761 14.2761 14 14 14H3C2.72386 14 2.5 13.7761 2.5 13.5V2.5ZM3.5 3V13H13.5V3H3.5Z"
              fill="black"
              fill-opacity="0.6"
            />
            <path
              fill-rule="evenodd"
              clip-rule="evenodd"
              d="M7.74631 5.08406L6.06066 6.76971C5.96689 6.86348 5.83972 6.91616 5.70711 6.91616C5.5745 6.91616 5.44732 6.86348 5.35355 6.76971L4.5 5.91616L5.20711 5.20905L5.70711 5.70905L7.0392 4.37695L7.74631 5.08406Z"
              fill="black"
              fill-opacity="0.6"
            />
            <path
              fill-rule="evenodd"
              clip-rule="evenodd"
              d="M5.9 9.39961C5.56863 9.39961 5.3 9.66824 5.3 9.99961C5.3 10.331 5.56863 10.5996 5.9 10.5996C6.23137 10.5996 6.5 10.331 6.5 9.99961C6.5 9.66824 6.23137 9.39961 5.9 9.39961ZM4.5 9.99961C4.5 9.22641 5.1268 8.59961 5.9 8.59961C6.6732 8.59961 7.3 9.22641 7.3 9.99961C7.3 10.7728 6.6732 11.3996 5.9 11.3996C5.1268 11.3996 4.5 10.7728 4.5 9.99961Z"
              fill="black"
              fill-opacity="0.6"
            />
            <path
              fill-rule="evenodd"
              clip-rule="evenodd"
              d="M8.5 5.5H12.5V6.5H8.5V5.5Z"
              fill="black"
              fill-opacity="0.6"
            />
            <path
              fill-rule="evenodd"
              clip-rule="evenodd"
              d="M8.5 9.5H12.5V10.5H8.5V9.5Z"
              fill="black"
              fill-opacity="0.6"
            />
          </svg>
          <span>答题卡</span>
          <div>
            <span>{{ showTaskIndex + 1 }}</span
            >/{{ taskList.length }}
          </div>
        </div>
        <div class="tla_taskList">
          <span
            v-for="(item, index) in taskList"
            @click.stop="goDoTask(index)"
            :class="[
              typeof item.answer === 'object'
                ? item.answer2.length != 0
                  ? isTrueTask(index).no.length == 0 && isTrueTask(index).yes.length == item.answer.length
                    ? 'isDoYes'
                    : 'isDoError'
                  : 'isNoDo'
                : item.answer2 !== ''
                ? item.answer === item.answer2
                  ? 'isDoYes'
                  : 'isDoError'
                : 'isNoDo'
            ]"
            :key="index"
            >{{ index + 1 }}</span
          >
        </div>
        <div class="tla_bottom">
          <div class="dt_m_b_r_tl_bottom">
            <div><span class="isDoError"></span>错题</div>

            <div><span class="isDoYes"></span>答对</div>
            <div><span></span>未答</div>
          </div>
          <div class="tla_b_right">
            <div>共{{ taskList.length }}道题</div>
            <span></span>
            <div>合计100分</div>
          </div>
        </div>
      </div>
    </van-action-sheet>

    <van-action-sheet v-model="changeChapterSheet">
      <div class="chapterListHead">切换</div>
      <div class="chapterList">
        <div class="sd_b_list">
          <div class="sd_b_l_item" v-for="(item, index) in classList" :key="index">
            <div class="sd_b_i_title" @click.stop="item.open = !item.open">
              <span>{{ item.title }}</span>
              <svg
                width="16"
                height="16"
                viewBox="0 0 16 16"
                :style="item.open ? 'transform:rotate(0deg)' : 'transform:rotate(90deg)'"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M3.54004 6.45977L4.45928 5.54053L7.99966 9.08091L11.54 5.54053L12.4593 6.45977L7.99966 10.9194L3.54004 6.45977Z"
                  fill="black"
                  fill-opacity="0.4"
                />
              </svg>
            </div>
            <div class="sd_b_i_list" v-if="item.open">
              <div
                :class="[
                  'sd_b_i_l_item',
                  type == `${index}-${index2}` ? 'sd_b_i_listActive' : '',
                  item2.disabled ? 'sd_b_i_listDisabled' : ''
                ]"
                v-for="(item2, index2) in item.allClass"
                :key="index + '-' + index2"
                @click.stop="changeChapter(`${index}-${index2}`, item2)"
              >
                <span>第{{ index2 + 1 }}节 {{ item2.title }}</span>
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path
                    d="M5 12L9.2929 16.2929C9.68342 16.6834 10.3166 16.6834 10.7071 16.2929L19.0001 8"
                    stroke="#3681FC"
                    stroke-width="3"
                    stroke-linecap="round"
                  />
                </svg>
              </div>
            </div>
          </div>
        </div>
      </div>
    </van-action-sheet>

    <van-popup v-model="disabledShow" round :close-on-click-overlay="false">
      <div class="disabledShowBox">
        <div class="dsb_top">
          <div class="dsb_top_title">提交成功</div>
          <div class="dsb_top_content">已提交您当前的练习进度，将会在下次进入练习时自动为您跳转至题目回顾</div>
        </div>
        <div class="dsb_bottom">
          <span @click.stop="back()">回到首页</span>
          <span @click.stop="topicReview()">题目回顾</span>
        </div>
      </div>
    </van-popup>

    <van-popup v-model="disabledShow2" round :close-on-click-overlay="false">
      <div class="disabledShowBox">
        <div class="dsb_top">
          <div class="dsb_top_title">提示</div>
          <div class="dsb_top_content">當前答題結果未保存，是否確認返回</div>
        </div>
        <div class="dsb_bottom2">
          <span @click.stop="disabledShow2 = false">取消</span>
          <span @click.stop="back(2)">确认</span>
          <span @click.stop="saveAndBack()">保存并返回</span>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { Dialog } from 'vant'
import bar from './component/bar.vue'
import { v4 as uuidv4 } from 'uuid'
import { aiRoleChatRequest2 } from '@/api/pocAiClassroom'
export default {
  components: {
    bar
  },
  data() {
    return {
      disabledShow: false,
      disabledShow2: false,
      isDoTaskCanShowDialog: false,
      showTaskIndex: 0,
      time: 0,
      time2: 0,
      startTime: 0,
      timer: null,
      userId: this.$store.state.user.userinfo.userid,
      org: this.$store.state.user.userinfo.org,
      oid: this.$store.state.user.userinfo.organizeid,
      showSeekAssist: false,
      showTaskListSheet: false,
      seekAssistMessage: '', //求助内容
      choseList: [
        'A',
        'B',
        'C',
        'D',
        'E',
        'F',
        'G',
        'H',
        'I',
        'J',
        'K',
        'L',
        'M',
        'N',
        'O',
        'P',
        'Q',
        'R',
        'S',
        'T',
        'U',
        'V',
        'W',
        'X',
        'Y',
        'Z'
      ],
      taskList: [],
      taskMessage: {
        chapter: '第一章',
        grade: '小八',
        semester: '上学期',
        edition: '人教版',
        subject: '物理',
        title: '第四课 生物'
      },

      isSubmit: false,
      star: 4,
      onlyShowMistake: false,
      userInfo: {
        userName: '科科',
        grade: 7,
        userAvatar: '',
        choseCharacter: 0
      },
      characterList: [
        {
          index: 0,
          image: require('../../assets/images/pocAiClassroom/character1.png'),
          name: '圆鼓鼓的大胖鱼',
          personality: '心思细腻，能够敏锐捕捉到别人的需求，喜欢支持和鼓励他人，富有耐心'
        },
        {
          index: 1,
          image: require('../../assets/images/pocAiClassroom/character2.png'),
          name: '迷人的大反派2',
          personality: '心思细腻，能够敏锐捕捉到别人的需求，喜欢支持和鼓励他人，富有耐心2'
        },
        {
          index: 2,
          image: require('../../assets/images/pocAiClassroom/character3.png'),
          name: '迷人的大反派3',
          personality: '心思细腻，能够敏锐捕捉到别人的需求，喜欢支持和鼓励他人，富有耐心3'
        },
        {
          index: 3,
          image: require('../../assets/images/pocAiClassroom/character4.png'),
          name: '迷人的大反派4',
          personality: '心思细腻，能够敏锐捕捉到别人的需求，喜欢支持和鼓励他人，富有耐心4'
        },
        {
          index: 4,
          image: require('../../assets/images/pocAiClassroom/character5.png'),
          name: '迷人的大反派5',
          personality: '心思细腻，能够敏锐捕捉到别人的需求，喜欢支持和鼓励他人，富有耐心5'
        },
        {
          index: 5,
          image: require('../../assets/images/pocAiClassroom/character6.png'),
          name: '迷人的大反派6',
          personality: '心思细腻，能够敏锐捕捉到别人的需求，喜欢支持和鼓励他人，富有耐心6'
        }
      ],
      classList: [
        {
          title: '第一章：科學入門',
          open: true,
          allClass: [
            {
              title: '學習科學',
              type: 0,
              isComplete: true,
              subject: 4,
              disabled: true,
              image: 'https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8741724834676182.png'
            },
            {
              title: '科學的實踐',
              type: 0,
              subject: 4,
              disabled: true,
              isComplete: true,
              image: 'https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8731724834767532.png'
            },
            {
              title: '實驗室安全',
              type: 0,
              subject: 4,
              disabled: true,
              isComplete: false,
              image: 'https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8721724834685472.png'
            },
            {
              title: '實驗室儀器及基本實驗技巧',
              type: 0,
              subject: 4,
              disabled: true,
              isComplete: false,
              image: 'https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8751724834771676.png'
            },
            {
              title: '綜合練習',
              type: 1,
              subject: 4,
              disabled: true,
              isComplete: false,
              image: 'https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8711724834666052.png'
            }
          ]
        },
        {
          title: '第二章：水',
          open: true,
          allClass: [
            {
              title: '水的物熊變化',
              type: 0,
              subject: 4,
              disabled: false,
              isComplete: true,
              image: 'https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8761724834777931.png'
            },
            {
              title: '水循環',
              type: 0,
              subject: 4,
              disabled: false,
              isComplete: true,
              image: 'https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8771724834845597.png'
            },
            {
              title: '溶解',
              type: 0,
              subject: 4,
              disabled: true,
              isComplete: true,
              image: 'https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8781724834847977.png'
            },
            {
              title: '水的淨化',
              type: 0,
              subject: 4,
              disabled: true,
              isComplete: true,
              image: 'https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8791724834873373.png'
            },
            {
              title: '食水的進一步處理',
              type: 0,
              subject: 4,
              disabled: true,
              isComplete: false,
              image: 'https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8761724834777931.png'
            },
            {
              title: '節約用水和水污染',
              type: 0,
              subject: 4,
              disabled: true,
              isComplete: false,
              image: 'https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8771724834845597.png'
            },
            {
              title: '綜合練習',
              type: 1,
              disabled: true,
              subject: 4,
              isComplete: false,
              image: 'https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8721724834685472.png'
            }
          ]
        },
        {
          title: '第三章：观察生物',
          open: true,
          allClass: [
            {
              title: '生物',
              type: 0,
              disabled: true,
              isComplete: true,
              subject: 4,
              image: 'https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8741724834676182.png'
            },
            {
              title: '生物的分類',
              type: 0,
              subject: 4,
              disabled: true,
              isComplete: true,
              image: 'https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8731724834767532.png'
            },
            {
              title: '檢索表',
              type: 0,
              subject: 4,
              disabled: true,
              isComplete: false,
              image: 'https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8721724834685472.png'
            },
            {
              title: '生物多樣性',
              type: 0,
              subject: 4,
              disabled: true,
              isComplete: false,
              image: 'https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8751724834771676.png'
            },
            {
              title: '綜合練習',
              type: 1,
              subject: 4,
              disabled: true,
              isComplete: false,
              image: 'https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8711724834666052.png'
            }
          ]
        }
      ],
      type: this.$route.query.type,
      changeChapterSheet: false,
      seekAssistLoading: false,
      showIsSubmitTaskListSheet: false
    }
  },
  computed: {
    isDoTask() {
      return _index => {
        let _result = false
        const _type = typeof this.taskList[_index].answer == 'object' ? 1 : 0
        if (_type == 0) {
          if (this.taskList[_index].answer2 !== '') _result = true
        } else if (_type == 1) {
          if (this.taskList[_index].answer2.length > 0) _result = true
        }

        return _result
      }
    },
    isTrueTask() {
      return _index => {
        let _result = {
          yes: [],
          no: []
        }
        const _type = typeof this.taskList[_index].answer == 'object' ? 1 : 0
        const _answer = this.taskList[_index].answer
        const _answer2 = this.taskList[_index].answer2
        if (_type == 0) {
          if (_answer === _answer2) {
            _result.yes = [_answer2]
            _result.no = []
          } else {
            _result.yes = []
            _result.no = [_answer2]
          }
        } else if (_type == 1) {
          if (_answer.length === _answer2.length && _answer.every(i => _answer2.includes(i))) {
            _result.yes = _answer2
            _result.no = []
          } else {
            _result.yes = _answer.filter(i => _answer2.includes(i))
            _result.no = _answer2.filter(i => !_answer.includes(i))
          }
        }
        // let yes2 = _result.yes;
        // yes2.sort((a,b)=>a-b)
        // let no2 = _result.no;
        // no2.sort((a,b)=>a-b)
        // _result.yes = yes2;
        // _result.no = no2;
        return _result
      }
    },
    isDoAllTask() {
      let _result = true
      this.taskList.forEach((item, index) => {
        if (!this.isDoTask(index)) {
          _result = false
        }
      })

      return _result
    },
    showTime() {
      // 更新currentTime，将秒数转换为时分秒格式
      let hours = Math.floor((this.time + this.time2) / 3600)
      let minutes = Math.floor(((this.time + this.time2) % 3600) / 60)
      let seconds = Math.floor((this.time + this.time2) % 60)
      // this.recordedForm.time = `${hours.toString().padStart(2, "0")}:${minutes
      // 	.toString()
      // 	.padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`;
      return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds
        .toString()
        .padStart(2, '0')}`
    },
    showMessage() {
      let _result = {
        total: 0,
        right: 0,
        wrong: 0,
        accuracy: 0,
        star: 0
      }
      if (!this.isSubmit) return _result
      _result.total = this.taskList.length

      this.taskList.forEach((item, index) => {
        if (
          typeof item.answer === 'object'
            ? !(this.isTrueTask(index).no.length == 0 && this.isTrueTask(index).yes.length == item.answer.length)
            : item.answer !== item.answer2
        ) {
          _result.wrong++
        } else {
          _result.right++
        }
      })
      _result.accuracy = Math.round((_result.right / _result.total) * 100)
      _result.star = Math.round(_result.accuracy / 20)
      return _result
    },
    schedule() {
      let _schedule = 0
      if (this.showTaskIndex == 0) {
        _schedule = 0
      } else if (this.showTaskIndex === this.taskList.length) {
        _schedule = 100
      } else {
        _schedule = Math.round(((this.showTaskIndex + 1) / this.taskList.length) * 100)
      }
      return _schedule
    }
  },
  methods: {
    changeTask(type) {
      if (type == 'prev') {
        if (this.showTaskIndex > 0) {
          this.showTaskIndex--
        } else {
          this.$toast('已经是第一题啦')
          // this.$message.warning('已经是第一题啦')
        }
      } else if (type == 'next') {
        if (this.showTaskIndex < this.taskList.length - 1) {
          this.showTaskIndex++
        } else {
          this.$toast('已经是最后一题啦')
        }
      }
    },
    // 切换章节
    changeChapterFn() {
      this.changeChapterSheet = true
      // console.log('切换章节')
    },
    //求助
    seekAssist() {
      this.showSeekAssist = true
      this.getSeekAssist()
    },
    keepTime() {
      if (this.timer !== null) {
        clearInterval(this.timer)
        this.timer = null
        this.time += this.time2
        this.time2 = 0
      } else {
        this.startTime = new Date().getTime()
        this.timer = setInterval(() => {
          if (this.isSubmit) {
            clearInterval(this.timer)
            this.timer = null
            this.time += this.time2
            this.time2 = 0
            return
          }
          this.time2 = Math.floor((new Date().getTime() - this.startTime) / 1000)
        }, 1000)
      }
    },
    endTask() {
      this.$confirm('确定结束练习吗', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.back()
        })
        .catch(() => {
          console.log('不结束练习')
        })
    },
    saveTask(type=1) {
      return new Promise(resolve => {
        let _params = {
          type: this.type,
          userId: this.userId,
          taskList: this.taskList,
          showTaskIndex: this.showTaskIndex,
          time: this.time + this.time2,
          isSubmit: false
        }

        let _local = window.localStorage.getItem('pocTask') || JSON.stringify([])

        let _data = JSON.parse(_local)

        let _index = _data.findIndex(item => item.type == this.type && item.userId == this.userId)
        if (_index != -1) {
          _data[_index] = _params
        } else {
          _data.push(_params)
        }
        this.isDoTaskCanShowDialog = false
        window.localStorage.setItem('pocTask', JSON.stringify(_data))
        if(type==1)this.$toast.success('保存成功')
				resolve();
      })
    },
    submitTask(type = 0) {
      if (!this.isDoAllTask && type == 0) {
        Dialog.confirm({
          title: '确认提交',
          message: `还有未做的题目，是否确定提交`
        })
          .then(() => {
            this.submitTask(1)
          })
          .catch(() => {
            console.log('继续做题')
          })
      } else {
        clearInterval(this.timer)
        this.isDoTaskCanShowDialog = false //是否可以显示提交弹窗
        let _params = {
          type: this.type,
          userId: this.userId,
          taskList: this.taskList,
          showTaskIndex: this.showTaskIndex,
          time: this.time + this.time2,
          isSubmit: true
        }
        let _local = window.localStorage.getItem('pocTask') || JSON.stringify([])

        let _data = JSON.parse(_local)

        let _index = _data.findIndex(item => item.type == this.type && item.userId == this.userId)
        if (_index != -1) {
          _data[_index] = _params
        } else {
          _data.push(_params)
        }
        window.localStorage.setItem('pocTask', JSON.stringify(_data))
        this.timer = null
        this.disabledShow = true
        this.sortTaskList()
      }
    },
    back(type = 1) {
      if (this.isDoTaskCanShowDialog && type == 1) {
        return (this.disabledShow2 = true)
      }
      this.$router.go(-1)
      // this.$router.push(`/pocAiClassroom`)
    },
    saveAndBack() {
      this.saveTask(2).then(_=>{
				this.$router.go(-1)
			})
    },
    choseAnswer(_index) {
      const _type = typeof this.taskList[this.showTaskIndex].answer == 'object' ? 1 : 0
      if (_type == 0) {
        if (this.taskList[this.showTaskIndex].answer2 === _index) {
          this.taskList[this.showTaskIndex].answer2 = ''
        } else {
          this.taskList[this.showTaskIndex].answer2 = _index
        }
      } else if (_type == 1) {
        if (this.taskList[this.showTaskIndex].answer2.includes(_index)) {
          this.taskList[this.showTaskIndex].answer2 = this.taskList[this.showTaskIndex].answer2.filter(
            item => item != _index
          )
        } else {
          this.taskList[this.showTaskIndex].answer2.push(_index)
        }
      }
      this.isDoTaskCanShowDialog = true
    },
    sortTaskList() {
      this.taskList.forEach(i => {
        if (typeof i.answer === 'object') {
          i.answer.sort((a, b) => a - b)
          i.answer2.sort((a, b) => a - b)
        }
      })
    },
    goDoTask(_index) {
      if (this.$refs['taskItem' + _index + 'Ref'][0]) {
        this.$refs['taskItem' + _index + 'Ref'][0].scrollIntoView({
          behavior: 'smooth',
          block: 'start',
          inline: 'start'
        })
        this.showIsSubmitTaskListSheet = false
      }
    },
    doNotKnow() {
      this.getSeekAssist()
    },
    choseShowTaskIndex(_index) {
      this.showTaskIndex = _index
      this.showTaskListSheet = false
    },
    changeChapter(index = '1-2', item) {
      this.getLocalPocTask(index).then(res => {
        if (item && item.disabled) return
        if (index == '1-0') {
          // {
          //   teststitle: '请从以下选项中选出一个由三个不同字母组成的组合。',
          //   checkList: ['abc', 'aaa', 'bca', 'ccc'],
          //   timuList: [],
          //   answer: 0,
          //   type: '1',
          //   analyze:
          //     '本题考核学生对字母的识别能力以及对字母组合的理解。学生需要识别每个选项中的字母，并判断是否由三个不同的字母组成。选项1（abc）和选项3（bca）都由三个不同的字母组成，但根据题目要求，选项1是正确答案。',
          //   answer2: '',
          //   uuid: '2b29f3aa-3389-4415-85aa-613f72e23de6',
          //   isSubmit: false
          // },
          let task = [
            {
              teststitle: '當冰加熱到0°C時，它會發生什麼變化',
              checkList: ['沸騰', '凝結', '熔化', '蒸發'],
              answer: 2,
              type: '1',
              analyze: '當冰加熱到0°C時，它會從固態轉變成液態，這個過程稱為熔化。',
              answer2: ''
            },
            {
              teststitle: '在自然界中，水能以哪種形式存在？',
              checkList: ['只有液態', '只有固態', '液態和氣態', '三態均有'],
              answer: 3,
              type: '1',
              analyze: '水在自然界中可以以固態(冰)、液態(水)和氣態(水汽)三種狀態存在。',
              answer2: ''
            },
            {
              teststitle: '易拉罐表面在夏天常出現水滴，這是由於水汽的什麼現象？',
              checkList: ['蒸發', '熔化', '沸騰', '凝結'],
              answer: 3,
              type: '1',
              analyze: '水汽在接觸冷的易拉罐表面時凝結成液態水，這個過程稱為凝結。',
              answer2: ''
            },
            {
              teststitle: '在夏天，玻璃杯外面的水滴形成是因為哪種水物態變化？',
              checkList: ['凝固', '熔化', '沸騰', '凝結'],
              answer: 3,
              type: '1',
              analyze: '玻璃杯外的水滴是由空氣中的水汽經由凝結形成的。',
              answer2: ''
            },
            {
              teststitle: '下列哪一項說法正確描述水的熱的物態變化？',
              checkList: [
                '水的凝結點比沸點高',
                '水在0°C時開始凝固或熔化',
                '水只能通過沸騰轉化為氣態',
                '水在自然界只存在於其中一種狀態'
              ],
              answer: 1,
              type: '1',
              analyze: '水在0°C時，可以開始從固態冰凝固成液態水，或者從液態水熔化成固態冰。',
              answer2: ''
            },
            {
              teststitle: '下列哪項關於物熊變化的敘述是不正確的?',
              checkList: [
                '凝結會於沸點或以下的温度發生',
                '蒸發過程中不会吸收或釋出能量。',
                '凝固是物質由液熊轉變成固熊的過程',
                '固體熔化時的温度保持不變。'
              ],
              answer: 1,
              type: '1',
              analyze: '選項B蒸發是液體變成氣體的過程，這個過程需要吸收能量，稱為蒸發熱。因此，蒸發是一個吸熱過程。',
              answer2: ''
            },
            {
              teststitle: '如圖所示，盛了水的鍋正在爐上加熱。在鍋中和在鍋蓋內壁的水正在發生甚麼物熊變化?',
              imageUrl: 'https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/image%20%281%291725689946082.png',
              checkList: [
                '鍋中：熔化，鍋蓋內璧：沸騰',
                '鍋中：蒸發，鍋蓋內璧：凝固',
                '鍋中：沸騰，鍋蓋內璧：凝結',
                '鍋中：凝結，鍋蓋內璧：蒸發'
              ],
              answer: 2,
              type: '1',
              analyze:
                '鍋中：沸騰。當鍋中的水被加熱到一定的溫度，即水的沸點時，水分子獲得足夠的能量克服相互之間的吸引力，開始從液態轉變為氣態，形成氣泡並上升到水面，然後氣泡破裂，釋放出水蒸氣。這個過程稱為沸騰，是液體變成氣體的相變過程。鍋蓋內璧：凝結。鍋蓋內璧的溫度通常低於鍋中水的溫度，因此當鍋中產生的水蒸氣遇到較冷的鍋蓋內璧時，水蒸氣分子會失去能量，相互之間的吸引力增強，導致它們重新聚集在一起形成液態水。這個過程稱為凝結，是氣體變成液體的相變過程。',
              answer2: ''
            },
            {
              teststitle: '下列哪項正確顯示冰變成水時的水粒子變化?',
              imageUrl: 'https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/image%20%282%291725690023281.png',
              checkList: ['A', 'B', 'C', 'D'],
              answer: 0,
              type: '1',
              analyze: '冰變成水時，水分子間的距離增大，分子運動加快。',
              answer2: ''
            },
            {
              teststitle: '當水冷卻到0°C時，它會發生什麼變化？',
              checkList: ['熔化', '凝固', '沸騰', '蒸發'],
              answer: 1,
              type: '1',
              analyze: '當水冷卻到0°C時，它會從液態轉變成固態，這個過程稱為凝固。',
              answer2: ''
            },
            {
              teststitle: '水蒸發需要具備哪些條件？',
              checkList: ['高於100°C的溫度', '僅能在沸點發生', '低於沸點的任何溫度', '僅能在冰點發生'],
              answer: 2,
              type: '1',
              analyze: '水蒸發可以在低於沸點的任何溫度發生，並不需要達到沸點。',
              answer2: ''
            }
          ]
          this.taskList = task
        } else if (index == '1-1') {
          let task = [
            {
              teststitle: `在下列哪個(些)情况下，濕衣服會乾得很慢?
(1)把衣服摺起來
(2)空氣濕度低
(3)把衣服晾在陽光下
`,
              checkList: ['只有 (1)', '只有 (1)和 (2)', '只有 (1) 和 (3)', '只有 (2) 和 (3)'],
              answer: 0,
              type: '1',
              analyze:
                '當衣服被折疊起來時，水分蒸發的表面積減少，因為衣服內部的水分不容易接觸到流通的空氣，這會減慢幹燥過程。，水分蒸发的表面积减少，因为衣服内部的水分不容易接触到流通的空气，这会减慢干燥过程。',
              answer2: ''
            },
            {
              teststitle: '下列各容器盛有相同分量的水。把它們置在陽光下幾小時後，哪個容器會剩下最少水？',
              imageUrl: 'https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/image%20%283%291725690506088.png',
              checkList: ['A', 'B', 'C', 'D'],
              answer: 2,
              type: '1',
              analyze: '表面積越大，水分接觸空氣的面積越多，蒸發得越快。',
              answer2: ''
            },
            {
              teststitle: `一把濕雨傘收起後掛在窗邊。下列哪個(些)方法能使目4濕傘快些乾透?
(1)把雨傘放在陽光下。
(2)開動風扇，再把雨傘放在風扇前方
(3)完全打開傘。
`,
              checkList: ['只有 (1)', '只有 (2)和 (3)', '只有(1)和(2)', '全部(1)(2)和(3)'],
              answer: 3,
              type: '1',
              analyze:
                '（1）將雨傘放在陽光直射的地方，可以利用太陽的熱量來提高雨傘的溫度，這是加快水分蒸發的一個有效方法。（2）使用風扇或其他形式的人工通風可以增加空氣中的對流，幫助將潮濕的空氣帶走，並帶來更幹燥的空氣，這同樣有助於加速雨傘的幹燥。（3）雨傘完全打開時，增加了與空氣接觸的表面積，這意味著有更多的水分可以同時蒸發，從而加快了整體的幹燥過程。',
              answer2: ''
            },
            {
              teststitle: '下列哪項關於大自然中水的敘述是正確的 ?',
              checkList: [
                '地球上的水因蒸發不斷流失。',
                '地球上的水因凝結不斷增加。',
                '海洋中水由液熊水轉變成水汽。',
                '高空的水滴不會返回地面。'
              ],
              answer: 2,
              type: '1',
              analyze:
                'A 雖然地球上的水會通過蒸發變成水蒸氣進入大氣中，但這個過程是水循環的一部分，水蒸氣最終會通過凝結成雲，再以雨、雪等形式返回地面，補充到地球上的水源中。B 凝結是水循環中的一個環節，這個過程並不會導致地球上總水量的增加，因為水循環是一個動態平衡的系統。D高空中的水滴可以通過多種方式返回地面，最常見的是水滴凝結成雲，然後以雨、雪、冰雹等形式降落到地面。',
              answer2: ''
            },
            {
              teststitle: '以下哪個現象不屬於水循環的一部分？',
              checkList: ['蒸發', '火山爆發', '降水', '凝結'],
              answer: 1,
              type: '1',
              analyze: '水循環涉及蒸發、凝結、運輸和降水等過程，而火山爆發不是水循環的一部分。',
              answer2: ''
            },
            {
              teststitle: '以下哪種因素不直接影響水的蒸發速率？',
              checkList: ['溫度', '空氣流動', '衣服的顏色', '表面積'],
              answer: 2,
              type: '1',
              analyze: '水的蒸發速率主要受溫度、空氣流動和表面積的影響，衣服的顏色不直接影響水的蒸發。',
              answer2: ''
            },
            {
              teststitle: '在水循環中，海洋的主要作用是什麼？',
              // imageUrl:"https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/image%20%281%291725689946082.png",
              checkList: ['提供空氣濕度', '儲存地球上大部分水量', '為陸地提供地下水', '提供生態系統'],
              answer: 1,
              type: '1',
              analyze: '海洋覆蓋地球表面的約 70%，儲存了地球總水量的 97%，是水循環的主要儲水地。',
              answer2: ''
            },
            {
              teststitle: '下列關於水循環的敘述，哪一項是不正確的？',
              checkList: ['降水可以是雨、雪、或冰雹', '水循環是由人類活動主導的', '降水主要發生在海洋', '凝結形成雲'],
              answer: 1,
              type: '1',
              analyze: '水循環是自然過程，主要受到太陽能量驅動，而非人類活動。',
              answer2: ''
            },
            {
              teststitle: '為什麼高空的水滴容易凝結？',
              checkList: ['因為空氣中的二氧化碳含量高', '因為高空的溫度較低', '因為水的密度變大', '因為地心引力的作用'],
              answer: 1,
              type: '1',
              analyze: '高空的溫度較低，這樣水汽容易凝結成小水滴。',
              answer2: ''
            },
            {
              teststitle: '以下哪項活動會加快水的蒸發速率？',
              checkList: ['將盛水的容器蓋住', '將水置於陰暗角落', '將水置於陽光直射下', '增加室內濕度'],
              answer: 2,
              type: '1',
              analyze: '在陽光直射下，水分子吸收更多的能量，蒸發速率會增加。',
              answer2: ''
            }
          ]
          this.taskList = task
        } else {
          let task = [
            {
              teststitle: '當冰加熱到0°C時，它會發生什麼變化',
              checkList: ['沸騰', '凝結', '熔化', '蒸發'],
              answer: 2,
              type: '1',
              analyze: '當冰加熱到0°C時，它會從固態轉變成液態，這個過程稱為熔化。',
              answer2: ''
            },
            {
              teststitle: '在自然界中，水能以哪種形式存在？',
              checkList: ['只有液態', '只有固態', '液態和氣態', '三態均有'],
              answer: 3,
              type: '1',
              analyze: '水在自然界中可以以固態(冰)、液態(水)和氣態(水汽)三種狀態存在。',
              answer2: ''
            },
            {
              teststitle: '易拉罐表面在夏天常出現水滴，這是由於水汽的什麼現象？',
              checkList: ['蒸發', '熔化', '沸騰', '凝結'],
              answer: 3,
              type: '1',
              analyze: '水汽在接觸冷的易拉罐表面時凝結成液態水，這個過程稱為凝結。',
              answer2: ''
            },
            {
              teststitle: '在夏天，玻璃杯外面的水滴形成是因為哪種水物態變化？',
              checkList: ['凝固', '熔化', '沸騰', '凝結'],
              answer: 3,
              type: '1',
              analyze: '玻璃杯外的水滴是由空氣中的水汽經由凝結形成的。',
              answer2: ''
            },
            {
              teststitle: '下列哪一項說法正確描述水的熱的物態變化？',
              checkList: [
                '水的凝結點比沸點高',
                '水在0°C時開始凝固或熔化',
                '水只能通過沸騰轉化為氣態',
                '水在自然界只存在於其中一種狀態'
              ],
              answer: 1,
              type: '1',
              analyze: '水在0°C時，可以開始從固態冰凝固成液態水，或者從液態水熔化成固態冰。',
              answer2: ''
            },
            {
              teststitle: '下列哪項關於物熊變化的敘述是不正確的?',
              checkList: [
                '凝結會於沸點或以下的温度發生',
                '蒸發過程中不会吸收或釋出能量。',
                '凝固是物質由液熊轉變成固熊的過程',
                '固體熔化時的温度保持不變。'
              ],
              answer: 1,
              type: '1',
              analyze: '選項B蒸發是液體變成氣體的過程，這個過程需要吸收能量，稱為蒸發熱。因此，蒸發是一個吸熱過程。',
              answer2: ''
            },
            {
              teststitle: '如圖所示，盛了水的鍋正在爐上加熱。在鍋中和在鍋蓋內壁的水正在發生甚麼物熊變化?',
              imageUrl: 'https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/image%20%281%291725689946082.png',
              checkList: [
                '鍋中：熔化，鍋蓋內璧：沸騰',
                '鍋中：蒸發，鍋蓋內璧：凝固',
                '鍋中：沸騰，鍋蓋內璧：凝結',
                '鍋中：凝結，鍋蓋內璧：蒸發'
              ],
              answer: 2,
              type: '1',
              analyze:
                '鍋中：沸騰。當鍋中的水被加熱到一定的溫度，即水的沸點時，水分子獲得足夠的能量克服相互之間的吸引力，開始從液態轉變為氣態，形成氣泡並上升到水面，然後氣泡破裂，釋放出水蒸氣。這個過程稱為沸騰，是液體變成氣體的相變過程。鍋蓋內璧：凝結。鍋蓋內璧的溫度通常低於鍋中水的溫度，因此當鍋中產生的水蒸氣遇到較冷的鍋蓋內璧時，水蒸氣分子會失去能量，相互之間的吸引力增強，導致它們重新聚集在一起形成液態水。這個過程稱為凝結，是氣體變成液體的相變過程。',
              answer2: ''
            },
            {
              teststitle: '下列哪項正確顯示冰變成水時的水粒子變化?',
              imageUrl: 'https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/image%20%282%291725690023281.png',
              checkList: ['A', 'B', 'C', 'D'],
              answer: 0,
              type: '1',
              analyze: '冰變成水時，水分子間的距離增大，分子運動加快。',
              answer2: ''
            },
            {
              teststitle: '當水冷卻到0°C時，它會發生什麼變化？',
              checkList: ['熔化', '凝固', '沸騰', '蒸發'],
              answer: 1,
              type: '1',
              analyze: '當水冷卻到0°C時，它會從液態轉變成固態，這個過程稱為凝固。',
              answer2: ''
            },
            {
              teststitle: '水蒸發需要具備哪些條件？',
              checkList: ['高於100°C的溫度', '僅能在沸點發生', '低於沸點的任何溫度', '僅能在冰點發生'],
              answer: 2,
              type: '1',
              analyze: '水蒸發可以在低於沸點的任何溫度發生，並不需要達到沸點。',
              answer2: ''
            }
          ]
          this.taskList = task
        }
        this.showTaskIndex = 0
        this.time = 0
        this.time2 = 0
        if (this.timer) {
          clearInterval(this.timer)
          this.timer = null
        }
        this.startTime = new Date().getTime()
        this.type = index
        this.sortTaskList()
        this.keepTime()
        // this.taskMessage.chapter = this.classList[parseInt(index.split('-')[0])].title
        // this.taskMessage.title = `第${parseInt(index.split('-')[1]) + 1}节 ${
        //   this.classList[parseInt(index.split('-')[0])].allClass[parseInt(index.split('-')[1])].title
        // }`
        this.changeChapterSheet = false
      })
    },
    getSeekAssist() {
      if (this.seekAssistLoading) return
      return new Promise(resolve => {
        let _index = 0
        let _timer = null
        this.seekAssistLoading = true
        this.seekAssistMessage = '我想想哦'
        _timer = setInterval(() => {
          if (_index >= 5) {
            _index = 0
            this.seekAssistMessage = '我想想哦'
          } else {
            _index++
            this.seekAssistMessage = '我想想哦' + '.'.repeat(_index)
          }
        }, 500)
        let task = this.taskList[this.showTaskIndex]
        let taskMsg = `${typeof task.answer == 'object' ? '【多选题】' : '【单选题】'}${task.teststitle}
${task.checkList.map((i, index) => this.choseList[index] + '.' + i).join('\n')}
正确答案：${
          typeof task.answer == 'object'
            ? task.answer.map(i => this.choseList[i]).join('、')
            : this.choseList[task.answer]
        }
解析：${task.analyze}
`

        let _msg = `Language: Please use the same language as the user requirement, if the user speaks Traditional Chinese, the specific text of your answer should also be in Traditional Chinese.
ATTENTION: Use '##' to SPLIT SECTIONS, not '#'. Output format carefully referenced "Format example".
Instruction: Based on the context, follow "Format example", write content

#Context
這是一道題目相關的資料，你面向的是一位中學一年級的學生。現在學生求解這道題遇到了困難。請你扮演一位香港中學科學老師，請你使用1-3句完整的話，結合該題目考核的具體選項，從側面對題目選項進行暗示，務必不要直接給出答案。請堅持使用繁體中文，並使用香港人習慣使用的表達方式，請使用偏口語的方式表達，適當給予學生鼓勵。
##題目內容：
${taskMsg}

#Format example
(只需要输出一句话即可，不需要输出其他内容,不要输出Object)
`

        let params = {
          assistant_id: '6063369f-289a-11ef-8bf4-12e77c4cb76b',
          userId: this.userId,
          message: [{ type: 'text', text: _msg }],
          session_name: uuidv4(),
          // uid: _uuid,
          file_ids: [],
          model: 'gpt-4o-2024-08-06'
        }

        aiRoleChatRequest2(params)
          .then(res => {
            clearInterval(_timer)
            _timer = null
            let _result = res.FunctionResponse.message
            if (_result) {
              this.seekAssistMessage = _result
              this.seekAssistLoading = false
            } else {
              console.log(_result)
              this.$toast('获取失败，请重试')
              this.showSeekAssist = false
            }
          })
          .catch(e => {
            console.log(e)
            this.$toast('获取失败，请重试')
            this.showSeekAssist = false
          })
      })
    },
    topicReview() {
      this.isSubmit = true
      this.disabledShow = false
    },
    getLocalPocTask(index = '1-2') {
      return new Promise(resolve => {
        let _local = window.localStorage.getItem('pocTask') || JSON.stringify([])
        let _data = JSON.parse(_local)
        let _task = _data.filter(i => i.userId == this.userId && i.type == index)
        if (_task.length > 0) {
          console.log(_task[0])
          this.isSubmit = _task[0].isSubmit
          this.taskList = _task[0].taskList
          this.showTaskIndex = _task[0].showTaskIndex
          this.time = _task[0].time
          this.sortTaskList()
          if (this.timer) {
            clearInterval(this.timer)
            this.timer = null
          }

          if (!this.isSubmit) this.keepTime()
          this.startTime = new Date().getTime()
          // this.taskMessage.chapter = this.classList[parseInt(index.split('-')[0])].title
          // this.taskMessage.title = `第${parseInt(index.split('-')[1]) + 1}节 ${
          //   this.classList[parseInt(index.split('-')[0])].allClass[parseInt(index.split('-')[1])].title
          // }`
          this.changeChapterSheet = false
        } else {
          resolve()
        }
      })
    }
  },
  mounted() {
    window.localStorage.setItem('showDialog', JSON.stringify({ type: 1, time: new Date().getTime() }))
    this.changeChapter(this.type)
  }
}
</script>

<style scoped>
.doTask {
  width: 100vw;
  height: 100vh;
  /* background-image: radial-gradient(#bbcdff 0%, #bbcdff 1%, #e6dee9 100%); */
  background-color: #fff;
  box-sizing: border-box;
  overflow: auto;
  position: relative;
  box-sizing: border-box;
  padding-top: 40px;
}

.dt_back {
  font-size: 24px;
  cursor: pointer;
  position: absolute;
  right: 30px;
  top: 30px;
}

.dt_main {
  width: 100vw;
  height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
  /* justify-content: space-between; */
  align-items: center;
  margin: auto;
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
  border-top: solid 1px #e7e7e7;
}

.dt_m_head {
  width: 100%;
  height: 80px;
  display: flex;
  align-items: flex-end;
  box-sizing: border-box;
  justify-content: space-between;
  position: relative;
  /* justify-content: center; */
}

.dt_m_h_left {
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
}

.dt_m_h_right {
  width: 150px;
  height: 100%;
}

.dt_m_h_message {
  font-size: 14px;
  box-sizing: border-box;
  padding: 0 10px;
  color: #00000099;
}

.dt_m_h_message > span {
  margin: 0 5px;
}

.dt_m_h_back {
  padding: 6px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  background-color: #f8f9fa;
  border: 1px solid #e7e7e7;
  border-radius: 4px;
  top: 10px;
  left: 10px;
  position: absolute;
  cursor: pointer;
}

.dt_m_h_back > svg {
  width: 25px;
  height: 25px;
  margin-right: 10px;
}

.dt_m_h_chapter {
  font-size: 18px;
  margin: 10px 0;
  box-sizing: border-box;
  padding: 0 10px;
  font-weight: bold;
}

.dt_m_h_btn {
  padding: 10px 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  border-radius: 5px;
  font-size: 20px;
  cursor: pointer;
}

.dt_m_box {
  width: 100%;
  height: calc(100%);
  border-radius: 10px;
  display: flex;
}

.dt_m_b_left {
  width: calc(100%);
  height: 100%;
  box-sizing: border-box;
  overflow: auto;
  /* border-radius: 10px; */
  /* border: 1px solid #e7e7e7; */
  background-color: #f0f2f5;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.dt_m_b_l_head {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 0px;
  font-size: 18px;
}

.dt_m_l_h_title {
  font-size: 18px;
  font-weight: bold;
  max-width: calc(100% - 50px);
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dt_m_l_h_changeChapter {
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.dt_m_l_h_changeChapter > svg {
  width: 14px;
  height: 14px;
  margin-right: 5px;
}

.dt_m_b_l_title {
  font-size: 20px;
  font-weight: bold;
  margin: 20px 0;
}

.dt_m_b_right {
  width: 30%;
  margin-left: 30px;
  height: 100%;
  box-sizing: border-box;
  padding: 10px;
}

.dt_m_b_r_time {
  width: 100%;
  height: 100%;
  /* background-color: #fff; */
  background-color: #3681fc;
  padding: 10px 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  border-radius: 0px 0px 0 0;
  box-sizing: border-box;
}

.dt_m_b_r_t_head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dt_m_b_r_t_head > svg {
  width: 20px;
  height: 20px;
  margin-right: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dt_m_b_r_t_head > span {
  font-size: 16px;
  color: white;
}

.dt_m_b_r_t_showTime {
  width: 100%;
  height: auto;
  padding: 3px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  /* background-color: #f2f6fc; */
  background-color: #ffffffe5;
  margin-top: 10px;
}

.dt_m_b_r_t_showTime > span {
  font-size: 2em;
  /* font-weight: bold; */
  color: #0061ff;
}

.dt_m_b_r_t_schedule {
  width: 100%;
  padding: 8px 0 4px 0;
  /* height: 50px; */
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
}

.dt_m_b_r_t_btn {
  width: 100%;
  padding: 5px 0;
  border-radius: 8px;
  margin-top: 10px;
  background-color: #f0f2f5;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
}

.dt_m_b_r_t_s_box {
  width: 100%;
  height: 8px;
  border-radius: 5px;
  background-color: #f0f2f5;
  position: relative;
  display: flex;
  align-items: center;
}

.dt_m_b_r_t_s_b_inner {
  height: 100%;
  border-radius: 5px;
  background-color: #3681fc;
}

.dt_m_b_r_t_s_b_round {
  width: 15px;
  height: 15px;
  border-radius: 100%;
  background-color: #3681fc;
  position: absolute;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.dt_m_b_r_t_s_b_round > span {
  position: absolute;
  top: -15px;
  font-weight: bold;
  color: #3681fc;
}

.dt_m_b_r_template {
  width: 100%;
  height: auto;
  margin-bottom: 30px;
  margin-top: 40px;
  display: flex;
  align-items: center;
}

.dt_m_b_r_template > div {
  font-size: 26px;
  display: flex;
  align-items: center;
  margin-right: 25px;
}

.dt_m_b_r_template > div > span {
  width: 35px;
  height: 35px;
  display: flex;
  margin-right: 10px;
  border-radius: 8px;
  border: solid 2px #325395;
  box-sizing: border-box;
  background-color: #fff;
}

.dt_m_b_r_template > div:nth-of-type(1) > span {
  background-color: #dae3f5;
}

.dt_m_b_r_taskList {
  width: 100%;
  height: calc(100% - 400px);
  overflow: auto;
  margin: 20px 0;
  box-sizing: border-box;
  padding: 20px;
  background-color: #fff;
}

.dt_m_b_r_tl_head {
  width: 100%;
  height: 80px;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: flex-start;
}

.dt_m_b_r_tl_head > div:nth-of-type(1) {
  font-size: 24px;
  font-weight: bold;
  display: flex;
  align-items: center;
}

.dt_m_b_r_tl_head > div:nth-of-type(1) > svg {
  width: 25px;
  height: 25px;
  margin-right: 5px;
}

.dt_m_b_r_tl_head > div:nth-of-type(2) {
  font-size: 18px;
  margin-top: 15px;
  color: #00000066;
}

.dt_m_b_r_tl_head > div:nth-of-type(2) > span {
  margin: 0 5px;
}

.dt_m_b_r_tl_boxList {
  width: 100%;
  height: 100%;
  overflow: auto;
  box-sizing: border-box;
  padding: 10px 5px;
}

.dt_m_b_r_tl_boxList > span {
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 5px;
  background-color: #fff;
  border-radius: 8px;
  border: solid 2px #e7e7e7;
  float: left;
  margin: 0 6px;
  margin-bottom: 10px;
  cursor: pointer;
  font-size: 18px;
  /* font-weight: bold; */
}

.dt_m_b_r_tl_bottom {
  width: auto;
  height: auto;
  box-sizing: border-box;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-left: 10px;
}

.dt_m_b_r_tl_bottom > div {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  margin-right: 10px;
}

.dt_m_b_r_tl_bottom > div > span {
  width: 15px;
  height: 15px;
  margin-right: 5px;
  background-color: #fff;
  border-radius: 3px;
  border: solid 1px #e7e7e7;
}

/* .dt_m_b_r_taskList > span {
  width: 47px;
  height: 47px;
  margin-right: 12px;
  border-radius: 8px;
  border: solid 2px #325395;
  box-sizing: border-box;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  float: left;
  margin-bottom: 10px;
  cursor: pointer;
  font-size: 20px;
  font-weight: bold;
  transition: 0.3s;
} */

.isDoTask {
  background-color: #e0eafb !important;
  border-color: #aeccfe !important;
  color: #3681fc !important;
}

.inDoTask {
  background-color: #3681fc !important;
  border-color: #0061ff !important;
  color: #fff !important;
}

.isDoError {
  background-color: #ffdddd !important;
  border-color: #ffbbbb !important;
  color: #ee3e3e !important;
}

/* .isDoYes{
	background-color: #EFFCF5 !important;
	border-color: #A8EDC9 !important;
} */

.dt_m_b_r_bottom {
  width: 100%;
  height: 60px;
  margin-top: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.dt_m_b_r_bottom > div {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #3681fc;
  font-size: 24px;
  font-weight: bold;
  border-radius: 10px;
  box-sizing: border-box;
  border: solid 2px #3681fc;
  background-color: #fff;
  cursor: pointer;
}

.dt_m_b_l_task {
  width: calc(100% - 20px);
  height: auto;
  max-height: calc(100% - 60px);
  box-sizing: border-box;
  box-sizing: border-box;
  padding: 10px 20px;
  background-color: #fff;
  border-radius: 8px;
  margin: 10px 10px 100px 10px;
  position: relative;
}

.dt_m_b_l_t_cl_item {
  font-size: 18px;
  display: flex;
  width: 100%;
  height: auto;
  align-items: flex-start;
  margin: 20px 0 0px 0;
  background-color: #f2f6fc;
  padding: 5px 10px;
  border-radius: 4px;
  box-sizing: border-box;
  cursor: pointer;
  border: 2px solid #e7e7e7;
  transition: 0.2s;
}

.dt_m_b_l_t_cl_item > div {
  min-width: 1em;
  min-height: 1em;
  max-width: 1em;
  max-height: 1em;
  box-sizing: border-box;
  border-radius: 100%;
  margin-right: 10px;
  border: solid 2px #3681fc;
  cursor: pointer;
  position: relative;
  top: 5px;
  padding: 1px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.dt_m_b_l_t_cl_item > div > span {
  width: 0.6em;
  height: 0.6em;
  border-radius: 100%;
  display: none;
  background-color: #3681fc;
}

.dt_m_b_l_t_cl_itemActive > div > span {
  display: flex;
}

.dt_m_b_l_t_cl_itemActive {
  border-color: #3681fc;
}

.dt_m_b_l_t_cl_itemActive > span {
  color: #3681fc;
}

.dt_m_b_l_t_cl_item > span {
  display: flex;
  /* align-items: flex-start; */
  /* justify-content: center; */
  cursor: pointer;
  word-break: break-all;
  float: left;
  text-align: left;
}

.dt_m_b_l_t_cl_item > span > img {
  max-width: 80%;
  cursor: pointer;
}

.dt_m_b_l_t_cl_item > span > span {
  margin: 3px;
}

.dt_m_b_l_t_head {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* background-color: red; */
}

.dt_m_b_l_t_head > div {
  padding: 3px 7px 3px 8px;
  background-color: #3681fc;
  border-radius: 0 15px 15px 0;
  color: #fff;
  font-size: 16px;
  position: relative;
  left: -20px;
}

.dt_m_b_l_t_head > span {
  font-size: 14px;
  color: #00000066;
  margin-right: 5px;
}
.dt_m_b_l_t_head > span > span {
  font-size: 16px;
  color: #3681fc;
}

.dt_m_b_l_t_title {
  font-size: 18px;
  height: auto;
  width: 100%;
}

.dt_m_b_l_t_title > span {
  font-weight: bold;
}
.dt_m_b_l_t_choseList {
  width: 100%;
  height: auto;
  margin: 20px 0;
}

.dt_m_b_l_t_btnArea {
  width: 100%;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  position: absolute;
  bottom: -60px;
  left: 0px;
}

.dt_m_b_l_t_btnArea > span {
  flex: 1;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  border-radius: 6px;
  font-size: 16px;
}

.dt_m_b_l_t_btnArea > span:nth-of-type(2) {
  margin-left: 10px;
}

.dt_m_b_l_t_ba_btn1 {
  color: #3681fc;
}

.dt_m_b_l_t_ba_btn2 {
  background-color: #3681fc !important;
  color: white;
}

.dt_m_b_l_bottom {
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  background-color: #fff;
  border-top: 1px solid #f0f2f5;
  justify-content: space-between;
  padding: 0 0 0 10px;
  box-sizing: border-box;
  overflow: auto;
}

.dt_m_b_l_b_seekAssist {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  white-space: nowrap;
  z-index: 3;
}

.dt_m_b_l_b_changeChapter {
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  font-size: 14px;
}

.dt_m_b_l_b_changeChapter > svg {
  width: 18px;
  height: 18px;
  margin-right: 5px;
}

.dt_m_b_l_b_save {
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  font-size: 14px;
}

.dt_m_b_l_b_save > svg {
  width: 18px;
  height: 18px;
  margin-right: 5px;
}

.dt_m_b_l_b_seekAssist > svg {
  width: 18px;
  height: 18px;
  margin-right: 5px;
}

.dt_m_b_l_b_seekAssist > span {
  font-size: 16px;
  /* text-decoration: underline; */
}

.dt_m_b_l_b_btnArea {
  width: auto;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dt_m_b_l_b_btnArea > span {
  display: flex;
  height: 100%;
  justify-content: center;
  align-items: center;
  justify-content: center;
  padding: 0px 35px;
  /* border-radius: 4px; */
  font-size: 16px;
  cursor: pointer;
  /* margin-left: 10px; */
  background-color: #fff;
  white-space: nowrap;
  font-weight: bold;
  z-index: 3;
}

.dt_m_b_l_b_ba_btnPrev {
  /* background-color: #e0eafb !important; */
  /* color: #3681fc; */
}

.dt_m_b_l_b_ba_btnNext {
  background-color: #3681fc !important;
  color: white;
}

.dt_m_b_l_b_ba_submit {
  background-color: #3681fc !important;
  color: white;
}

.dt_isSubmit {
  width: 100vw;
  margin: auto;
  height: calc(100vh - 40px);
  background-color: #fff;
  overflow: auto;
  box-sizing: border-box;
}

.dt_is_statistics {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.dt_is_statistics > img {
  width: 180px;
  height: 180px;
  margin-bottom: -30px;
}

.dt_is_s_star {
  margin-top: 10px;
  transform: scale(1.4, 1.4);
}

.dt_is_s_message {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 40px;
}
.dt_is_s_message > span {
  margin: 0 10px;
  white-space: nowrap;
  font-size: 16px;
}

.dt_is_s_taskList {
  max-width: 90%;
  width: auto;
  height: auto;
  margin-top: 30px;
}

.dt_is_s_taskList > span {
  width: 40px;
  height: 40px;
  margin-right: 10px;
  border-radius: 4px;
  border: solid 2px #325395;
  box-sizing: border-box;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  float: left;
  margin-bottom: 10px;
  cursor: pointer;
  font-size: 18px;
  font-weight: bold;
  transition: 0.3s;
}

.isDoYes {
  background-color: #effcf5 !important;
  border-color: #b2efd0 !important;
  color: #0e9d52;
}

.isDoNo {
  background-color: #f5b7bf !important;
  border-color: #ffbbbb !important;
  color: #ee3e3e;
}

.isNoDo {
  /* background-color: #f5b7bf !important;
  border-color: #f5b7bf !important; */
}

.dt_is_taskList {
  width: 100%;
  height: auto;
}

.dt_is_tl_head {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.dt_is_tl_head > span {
  font-size: 20px;
  font-weight: bold;
}

.dt_is_tl_head > div {
  display: flex;
  align-items: center;
  justify-content: center;
}

.dt_is_tl_head > div > span {
  font-size: 16px;
  margin-right: 10px;
}

.dt_is_tl_taskBox {
  width: 100%;
  height: auto;
  margin: 10px 0;
  box-sizing: border-box;
  border: solid 1px #f2f2f2;
  padding: 5px 10px 210px 10px;
}

.dt_is_tl_tb_item {
  width: 100%;
  height: auto;
  padding: 10px 0 20px 0;
  /* border-bottom: solid 1px black; */
}

.dt_is_tl_tb_i_title {
  font-size: 18px;
}
.dt_is_tl_tb_i_choseList {
  width: 100%;
  height: auto;
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0 10px;
}

.dt_is_tl_tb_i_choseList > span {
  margin-bottom: 20px;
  font-size: 16px;
  display: flex;
  text-align: start;
  cursor: default;
  word-break: break-all;
  float: left;
}

.dt_is_tl_tb_i_choseList > span > span {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  cursor: pointer;
  word-break: break-all;
  float: left;
}

.dt_is_tl_tb_i_choseList > span > span > img {
  max-width: 90%;
}

.dt_is_tl_tb_i_answer {
  font-size: 16px;
  box-sizing: border-box;
  padding-left: 10px;
}

.dt_is_tl_tb_i_answer > div {
  margin-bottom: 10px;
}

.dt_dialogBackground {
  width: 100vw;
  height: 100vh;
  background: linear-gradient(180deg, rgba(32, 51, 80, 0) 0%, rgba(73, 116, 182, 0.6) 100%);
  position: fixed;
  top: 0;
  left: 0;
}

.dt_character {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 1;
}

.dt_character2 {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 1;
}

.dt_character2 > img {
  width: 150px;
  z-index: 2;
  left: -10px;
  bottom: calc(100% + 40px + 8px);
  position: absolute;
}

.dt_character > img {
  width: 300px;
  z-index: 2;
  left: calc(50% - 150px);
  top: -160%;
  position: absolute;
}

.dt_c_message {
  width: 100vw;
  height: 200px;
  position: absolute;
  left: 0px;
  bottom: 0px;
  background: linear-gradient(180deg, #fafcff 0%, #e7eefe 100%);
  /* border-radius: 6px; */
  padding: 10px 10px 10px 10px;
  box-sizing: border-box;
  position: relative;
  z-index: 5;
}

.dt_c_m_head {
  width: 100%;
  height: 30px;
  display: flex;
  justify-content: space-between;
}

.dt_c_m_head > div {
  display: flex;
  align-items: center;
  font-size: 14px;
}

.dt_c_m_characterName {
  padding: 5px 10px;
  background-color: #3681fc;
  border-radius: 6px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  position: absolute;
  left: -10px;
  top: -20px;
}

.dt_c_m_closeIcon {
  width: 20px;
  height: 20px;
}

.dt_c_m_closeIcon > svg {
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.dt_is_tl_tb_i_analyze {
  font-size: 16px;
  box-sizing: border-box;
  margin-top: 20px;
  padding-left: 10px;
}

.dt_c_m_message {
  max-width: 100%;
  font-size: 16px;
  padding: 0px 10px;
  height: 60%;
  overflow: auto;
}

.dt_c_m_message > span {
  font-weight: bold;
}

.dt_c_m_btnArea {
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 100%;
  height: auto;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.dt_c_m_btnArea > span {
  max-width: 45vw;
  white-space: nowrap;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  margin-left: 10px;
  cursor: pointer;
  background-color: #fdfeff;
  box-sizing: border-box;
}

.dt_c_m_btn1 {
  color: #00000099;
}

.dt_c_m_btn2 {
  padding: 10px 35px !important;
  background-color: #3681fc !important;
  color: #fff;
}

/* .dt_m_bottom {
  width: 100%;
  height: 150px;
	background-color: red;
  background-color: #fff;
} */

.dt_m_b_h_title {
  margin-right: 20px;
  font-size: 16px;
  display: flex;
  align-items: center;
}

.dt_m_b_h_title > svg {
  width: 20px;
  height: 20px;
  margin-right: 5px;
}

.dt_m_b_head {
  width: 100%;
  height: 30px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 0 10px;
}

.dt_m_b_taskList {
  width: 100%;
  height: calc(100% - 30px);
}

.dt_time {
  font-weight: 500;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dt_t_title {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
}

.dt_t_title > svg {
  margin-right: 2px;
}

.dt_t_time {
  display: flex;
  align-items: center;
  position: relative;
  top: 0.5px;
  font-weight: bold;
  color: #0061ff;
}

.dt_m_b_l_b_answerSheet {
  width: auto;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
}

.dt_m_b_l_b_answerSheet > svg {
  width: 18px;
  height: 18px;
  margin-right: 2px;
}

.dt_m_b_l_b_answerSheet > span {
  font-size: 14px;
}

.dt_m_b_l_b_answerSheet > div {
  font-size: 14px;
  margin-left: 5px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  color: #999999;
}

.dt_m_b_l_b_answerSheet > div > span {
  color: #3681fc;
  font-size: 16px;
}

.taskListArea {
  width: 100%;
  height: 60vh;
  background-color: #fff;
}

.tla_head {
  width: 100%;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
}

.tla_head > svg {
  width: 18px;
  height: 18px;
  margin-right: 2px;
}

.tla_head > span {
  display: flex;
  height: 20px;
  width: auto;
  align-items: center;
}

.tla_head > div {
  font-size: 12px;
  height: 20px;
  display: flex;
  align-items: flex-end;
  margin-left: 3px;
  color: #a6a6a6;
}

.tla_head > div > span {
  font-size: 14px;
  color: #3681fc;
}

.tla_taskList {
  width: 100%;
  box-sizing: border-box;
  padding: 30px;
  height: calc(100% - 90px);
}

.tla_bottom {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  border-top: solid 1px #f2f2f2;
}

.tla_b_right {
  width: auto;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 10px;
  color: #00000066;
  font-size: 12px;
}

.tla_b_right > span {
  font-size: 14px;
  color: #3681fc;
  margin-right: 2px;
}

.tla_taskList > span {
  width: 45px;
  height: 45px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 5px;
  background-color: #fff;
  border-radius: 4px;
  border: solid 2px #e7e7e7;
  float: left;
  margin: 0 6px;
  margin-bottom: 10px;
  cursor: pointer;
  font-size: 18px;
  /* font-weight: bold; */
}

.chapterListHead {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  font-weight: bold;
}

.chapterList {
  width: 100%;
  height: 60vh;
  box-sizing: border-box;
  /* padding:0 20px 20px 20px; */
  background-color: #f0f2f5;
}

.sd_b_list {
  width: 100%;
  height: 100%;
  overflow: auto;
}

.sd_b_l_item {
  width: 100%;
  height: auto;
}

.sd_b_i_title {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 16px;
  cursor: pointer;
  box-sizing: border-box;
  padding: 0 20px;
}

.sd_b_i_title > svg {
  width: 20px;
  height: 20px;
  margin-right: 10px;
}

.sd_b_i_title > span {
  display: flex;
  max-width: 80%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sd_b_i_list {
  width: 100%;
  height: auto;
  background-color: #fff;
}

.sd_b_i_l_item {
  width: 100%;
  height: 40px;
  border-radius: 4px;
  background-color: #fff;
  font-size: 16px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  /* padding-left: 30px; */
  margin: 5px 0;
  cursor: pointer;
  padding: 0 20px;
  justify-content: space-between;
}

.sd_b_i_l_item > span {
  margin-right: 10px;
}

.sd_b_i_l_item > svg {
  display: none;
}

.sd_b_i_l_item:active {
  background-color: #e0eafb;
  color: #3681fc;
}

.sd_b_i_listActive {
  /* background-color: #e0eafb !important; */
  font-weight: bold;
  /* color: #3681fc !important; */
}

.sd_b_i_listActive > svg {
  display: block;
}

.titleImage {
  width: 100%;
  object-fit: cover;
}

.titleImage > img {
  width: 100%;
  max-width: 400px;
}

.sd_b_i_listDisabled {
  color: gray !important;
}

.disabledShowBox {
  /* width: 250px; */
  width: 80vw;
  height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.dsb_top {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.dsb_top_title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 20px;
}

.dsb_top_content {
  font-size: 16px;
  max-width: 80%;
  display: flex;
  align-items: center;
  color: #666666;
}

.dsb_bottom {
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 10px 20px;
}

.dsb_bottom > span {
  flex: 1;
  height: 90%;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  font-weight: bold;
  background-color: #f0f2f5;
  color: #3681fc;
}

.dsb_bottom > span:nth-of-type(2) {
  margin-left: 20px;
  background-color: #3681fc;
  color: #fff !important;
}

.dsb_bottom2 {
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 10px 20px;
}

.dsb_bottom2 > span {
  flex: 1;
  height: 90%;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  font-weight: bold;
  background-color: #f0f2f5;
  color: #3681fc;
}

.dsb_bottom2 > span:nth-child(2) {
  margin: 0 10px;
}

.dsb_bottom2 > span:nth-child(3) {
  background-color: #3681fc;
  color: #fff !important;
}

.dt_is_top {
  width: 100%;
  height: calc(100% - 60px);
  box-sizing: border-box;
  padding: 10px;
  overflow: auto;
  background-color: #f0f2f5;
  padding-bottom: 20px;
}

.dt_is_t_head {
  width: 100%;
  height: 100px;
  background-color: #fff;
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dt_is_t_h_left {
  display: flex;
  align-items: center;
  height: 100%;
  flex: 1;
}

.dt_is_t_h_left > img {
  width: 70px;
  height: 70px;
  margin-left: 10px;
}

.dt_is_t_h_left > div {
  margin-left: 10px;
}

.dt_is_t_h_left > div > div {
  font-size: 16px;
  font-weight: bold;
  background: linear-gradient(90deg, #3a85ee 0%, #4d35cf 100%);
  margin-bottom: 5px;
  color: transparent;
  -webkit-background-clip: text;
}

.dt_is_t_h_right {
  width: 80px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.dt_is_t_h_right > div {
  font-size: 24px;
  font-weight: bold;
}

.dt_is_t_h_right > div > span {
  margin-top: 5px;
  font-size: 16px;
}

.dt_is_bottom {
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  background-color: #fff;
  border-top: 1px solid #f0f2f5;
  justify-content: space-between;
  padding: 0 0 0 10px;
  box-sizing: border-box;
  overflow: auto;
}

.dt_is_bottom > div {
  flex: 1;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
}

.dt_is_bottom > div > span {
  margin-left: 5px;
}

.dt_is_bottom > div > svg {
  width: 25px;
  height: 25px;
}

.dt_is_t_taskItem {
  width: 100%;
  height: auto;
  box-sizing: border-box;
  padding: 10px 5px;
  background-color: #fff;
  border-radius: 8px;
  position: relative;
  margin-top: 10px;
}

.dt_is_t_ti_head {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* background-color: red; */
}

.dt_is_t_ti_head > div {
  padding: 3px 7px 3px 8px;
  background-color: #3681fc;
  border-radius: 0 15px 15px 0;
  color: #fff;
  font-size: 13px;
  position: relative;
  left: -5px;
}

.dt_is_t_ti_head > span {
  font-size: 12px;
  color: #00000066;
  margin-right: 5px;
}
.dt_is_t_ti_head > span > span {
  font-size: 14px;
  color: #3681fc;
}

.dt_is_t_ti_title {
  font-size: 15px;
  box-sizing: border-box;
  margin: 5px 5px;
}

.dt_is_t_ti_image {
  width: 100%;
  height: auto;
  box-sizing: border-box;
  padding: 0 5px;
}

.dt_is_t_ti_image > img {
  max-width: 100%;
}

.dt_is_t_ti_choseList {
  width: 100%;
  margin-top: 5px;
  margin-bottom: 10px;
  height: auto;
  box-sizing: border-box;
  padding: 0 5px;
  position: relative;
}

.dt_is_t_ti_cl_item {
  width: calc(100% - 20px);
  margin-bottom: 10px;
  font-size: 15px;
  height: auto;
  padding: 8px 10px;
  border-radius: 4px;
  background-color: #f2f6fc;
  border: 1px solid #e7e7e7;
  display: flex;
  flex-wrap: wrap;
  position: relative;
}

.dt_is_t_ti_cl_item > div {
  min-width: 1.2em;
  min-height: 1.2em;
  max-width: 1.2em;
  max-height: 1.2em;
  border-radius: 100%;
  border: 1px solid #00000042;
  background-color: #fff;
  margin-right: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 3px;
  box-sizing: border-box;
}

.dt_is_t_ti_cl_item > div > span {
  min-width: 100%;
  min-height: 100%;
  max-width: 100%;
  max-height: 100%;
  background-color: #00000042;
  border-radius: 100%;
  display: none;
  margin: auto;
}

.dt_is_t_ti_cl_itemActive > div > span {
  display: flex;
}

.dt_is_t_ti_cl_itemChoseYes {
  border-color: #a8edc9;
  background-color: #effcf5;
  color: #0e9d52;
  padding-right: 40px;
  width: calc(100% - 50px);
}

.dt_is_t_ti_cl_itemChoseYes > div {
  border-color: #0e9d52;
}

.dt_is_t_ti_cl_itemChoseYes > div > span {
  background-color: #0e9d52;
  display: block;
}

.dt_is_t_ti_cl_itemChoseYes > .dt_is_t_ti_cl_i_Yes {
  display: flex;
}

.dt_is_t_ti_cl_itemChoseNo {
  border-color: #a8edc9;
  background-color: #effcf5;
  color: #0e9d52;
  /* padding-right: 40px ; */
}

.dt_is_t_ti_cl_itemChoseNo > div {
  border-color: #0e9d52;
}

.dt_is_t_ti_cl_itemChoseNo > div > span {
  background-color: #0e9d52;
  display: block;
}

.dt_is_t_ti_cl_itemChoseYes > .dt_is_t_ti_cl_i_Yes {
  display: flex;
}

.dt_is_t_ti_cl_itemChoseError {
  border-color: #ffbbbb;
  background-color: #ffdddd;
  color: #ee3e3e;
  padding-right: 40px;
  width: calc(100% - 50px);
}

.dt_is_t_ti_cl_itemChoseError > div {
  border-color: #ee3e3e;
}

.dt_is_t_ti_cl_itemChoseError > div > span {
  background-color: #ee3e3e;
  display: block;
}

.dt_is_t_ti_cl_itemChoseError > .dt_is_t_ti_cl_i_No {
  display: flex;
}

.dt_is_t_ti_cl_i_Yes {
  width: 20px;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  display: none;
  position: absolute;
  right: 10px;
}

.dt_is_t_ti_cl_i_No {
  width: 20px;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  display: none;
  position: absolute;
  right: 10px;
}

.dt_is_t_ti_cl_i_Yes > svg {
  width: 100%;
  height: 100%;
}

.dt_is_t_ti_cl_i_No > svg {
  width: 100%;
  height: 100%;
}
</style>
