pbl-teacher-table/src/components/pages/pocAiClassroom/doTask.vue

<template>
  <div class="doTask">
    <!-- <div class="dt_back" @click.stop="back()">返回</div> -->
    <div class="dt_main" v-if="!isSubmit">
      <div class="dt_m_head">
        <div class="dt_m_h_chapter">{{ taskMessage.chapter }}</div>
        <div class="dt_m_h_message">
          {{ taskMessage.grade }}<span>|</span>{{ taskMessage.semester
          }}<span>|</span>{{ taskMessage.edition }}<span>|</span
          >{{ taskMessage.subject }}
        </div>
        <span class="dt_m_h_back" @click.stop="back">
          <svg
            width="20"
            height="20"
            viewBox="0 0 20 20"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              fill-rule="evenodd"
              clip-rule="evenodd"
              d="M10.1973 15L10.1717 14.9836L2.5 10.0567L10.2042 5V5.03346L10.2016 8.82213C11.3364 8.8539 12.4635 8.91767 13.0862 9.04175C13.1629 9.05701 13.2492 9.073 13.3424 9.09026C13.8173 9.17824 14.4717 9.29947 14.9413 9.52789C15.5469 9.82252 16.1378 10.2494 16.4445 10.5914C17.4895 11.7566 17.4999 13.7513 17.4999 13.7513C17.4999 13.7513 17.336 12.921 16.7963 12.4144C16.3823 12.0259 16.1246 11.8067 15.517 11.6852C14.6833 11.5184 12.283 11.5278 10.1997 11.5739L10.1973 15Z"
              fill="black"
            />
          </svg>

          返回
        </span>
      </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 class="dt_m_l_h_changeChapter" @click.stop="changeChapter()">
              <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="M10.0417 2.20921C10.2722 1.93026 10.6458 1.93026 10.8763 2.20921L13.8271 5.78064C13.9959 5.98492 14.0464 6.29215 13.9551 6.55906C13.8637 6.82597 13.6485 7 13.4098 7H2.59016C2.26423 7 2 6.6802 2 6.28571C2 5.89123 2.26423 5.57143 2.59016 5.57143H11.985L10.0417 3.21936C9.81122 2.94042 9.81122 2.48816 10.0417 2.20921Z"
                  fill="#3681FC"
                />
                <path
                  fill-rule="evenodd"
                  clip-rule="evenodd"
                  d="M2.04494 9.44094C2.13629 9.17403 2.35148 9 2.59018 9H13.4098C13.7358 9 14 9.3198 14 9.71429C14 10.1088 13.7358 10.4286 13.4098 10.4286H4.01496L5.9583 12.7806C6.18878 13.0596 6.18878 13.5118 5.9583 13.7908C5.72783 14.0697 5.35416 14.0697 5.12369 13.7908L2.17287 10.2194C2.00409 10.0151 1.95359 9.70785 2.04494 9.44094Z"
                  fill="#3681FC"
                />
              </svg>

              <span>切换章节</span>
            </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_title">
              {{ showTaskIndex + 1 }}.
              <span>{{
                typeof taskList[showTaskIndex].answer == "object"
                  ? "[多选题]"
                  : "[单选题]"
              }}</span
              >{{ 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"
                  >{{ choseList[index] }}<span>.</span
                  ><img :src="item.src" @click.stop="$hevueImgPreview(item.src)"
                /></span>
                <span v-else
                  >{{ choseList[index] }}<span>.</span>{{ item }}</span
                >
              </div>
            </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_btnArea" v-show="!showSeekAssist">
              <span
                class="dt_m_b_l_b_ba_btnPrev"
                @click.stop="changeTask('prev')"
                >上一题</span
              >
              <!-- v-if="showTaskIndex > 0" -->
              <span
                class="dt_m_b_l_b_ba_btnNext"
                @click.stop="changeTask('next')"
                >下一题</span
              >
              <!-- v-if="taskList.length > showTaskIndex + 1" -->
              <!-- <span
                v-if="showTaskIndex == taskList.length - 1"
                @click.stop="submitTask()"
                >确认提交</span
              > -->
            </div>
          </div>
        </div>
        <div class="dt_m_b_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="none"
                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"
                  fill="#17C469"
                />
                <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"
                  fill="#17C469"
                />
                <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"
                  fill="#17C469"
                />
              </svg>
              <span>计时器</span>
            </div>

            <div class="dt_m_b_r_t_showTime">
              <span>{{ showTime }}</span>
            </div>

            <div class="dt_m_b_r_t_schedule">
              <div class="dt_m_b_r_t_s_box">
                <div
                  class="dt_m_b_r_t_s_b_inner"
                  :style="`width:${schedule}%`"
                ></div>
                <div class="dt_m_b_r_t_s_b_round" :style="`left:${schedule}%`">
                  <span
                    >{{ showTaskIndex + 1 }}<span>/</span
                    >{{ taskList.length }}</span
                  >
                </div>
              </div>
            </div>

            <div class="dt_m_b_r_t_btn" @click.stop="keepTime()">
              <span v-if="timer !== null">暂停计时</span>
              <span v-else>继续计时</span>
            </div>
          </div>

          <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>
    <div class="dt_dialogBackground" v-if="showSeekAssist"></div>
    <div class="dt_character">
      <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>

        <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 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">
        <span>{{ grade }}</span
        >><span>{{ semester }}</span
        >><span>{{ edition }}</span>
      </div> -->
      <div class="dt_m_b_l_title">{{ taskMessage.title }}</div>
      <div class="dt_is_statistics">
        <img
          :src="require('../../../assets/icon/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.2,1.2);"
            ></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
                  >{{ choseList[index2] }}<span>.</span>{{ item2 }}</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>
		<changeChapterDialog ref="changeChapterDialogRef" @success="changeChapterSuccess"/>


  </div>
</template>

<script>
import changeChapterDialog from './component/changeChapterDialog.vue';
import { v4 as uuidv4 } from 'uuid'
export default {
	components:{
		changeChapterDialog
	},
  data() {
    return {
      showTaskIndex: 0,
      time: 0,
      time2: 0,
      startTime: 0,
      timer: null,
      userId: this.$route.query.userid,
      org: this.$route.query.org,
      oid: this.$route.query.oid,
      showSeekAssist: false,
      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: [
        {
          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
        },
        {
          teststitle: "哪种动物会飞？",
          checkList: ["狗", "猫", "鸟", "鱼"],
          timuList: [],
          answer: 2,
          type: "1",
          analyze:
            "这道题目考察学生对动物基本特征的了解。鸟是会飞的动物，而狗、猫和鱼都不会飞。",
          answer2: "",
          uuid: "55d7fdcb-bedb-4c2f-b6ea-b3b98e7415be",
          isSubmit: false
        },
        {
          teststitle: "以下哪些动物会飞？",
          checkList: ["狗", "猫", "鸟", "蝙蝠", "企鹅", "蜜蜂"],
          timuList: [],
          answer: [2, 3, 5],
          type: "2",
          analyze:
            "本题考查学生对动物飞行能力的认知。鸟、蝙蝠和蜜蜂都是会飞的动物，而狗、猫和企鹅不会飞。通过这道题，学生需要对多种动物的特征进行分类和识别。",
          answer2: [],
          uuid: "764246b9-0ce5-4d75-9035-3de982b3420f",
          isSubmit: false
        },
        {
          teststitle: "测试",
          testItem: 4,
          checkList: [
            {
              src:
                "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/1-2740353x15_hanspub1687855155487.jpg",
              imgType: 1
            },
            "测试1",
            "测试2",
            "测试3"
          ],
          timuList: [
            {
              src:
                "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/DSC20210112100951431687855143262.jpg"
            }
          ],
          answer: [2, 0],
          type: "2",
          answer2: [],
          uuid: "157fb875-acec-4dc9-8e60-73b82bb4ed9a",
          analyze:
            "题目要求选择正确的答案。根据题目和选项的内容，正确答案是3和1。\n分析考核的知识点包括理解题意和选项内容的能力。",
          isSubmit: false
        },
        {
          teststitle: "哪种动物生活在水中？",
          checkList: ["狗", "猫", "鸟", "鱼"],
          timuList: [],
          answer: 3,
          type: "1",
          analyze:
            "这道题目考核的是学生对常见动物生活环境的认知能力。鱼是生活在水中的动物，而狗、猫和鸟则不是。",
          answer2: "",
          uuid: "723dd167-f480-47e9-b958-353138113742",
          isSubmit: false
        },
        {
          teststitle: "以下哪些动物既能生活在水中也能生活在陆地上？",
          checkList: ["青蛙", "鲨鱼", "海豚", "企鹅"],
          timuList: [],
          answer: 0,
          type: "1",
          analyze:
            "本题考核学生对动物生活环境的更深入认知。青蛙是两栖动物，既能生活在水中也能生活在陆地上，而鲨鱼和海豚主要生活在水中，企鹅虽然能在陆地上活动，但主要生活在水中。",
          answer2: "",
          uuid: "ca09b084-2fea-4e68-9f8a-325e77c652d3",
          isSubmit: false
        },
        {
          teststitle: "以下哪种动物既能飞又能游泳？",
          checkList: ["企鹅", "老鹰", "鸵鸟", "海豚"],
          timuList: [],
          answer: 0,
          type: "1",
          analyze:
            "题目考察了学生对动物特征的综合认知。企鹅是唯一一种既能飞（在水中飞行）又能游泳的动物，而老鹰只能飞行，鸵鸟既不能飞也不能游泳，海豚只能游泳。",
          answer2: "",
          uuid: "cdc13cd7-a1c6-4809-b958-d2b37b2aac6b",
          isSubmit: false
        },
        {
          teststitle: "以下哪种动物能够在水中游泳？",
          checkList: ["企鹅", "老鹰", "鸵鸟", "猫"],
          timuList: [],
          answer: 0,
          type: "1",
          analyze:
            "这道题目考核的是学生对动物特性的了解。企鹅是一种能够在水中游泳的动物，而其他选项中的动物（老鹰、鸵鸟、猫）都不能在水中游泳。",
          answer2: "",
          uuid: "ebed926d-5010-4d2e-9740-b6fe00438420",
          isSubmit: false
        },

        {
          teststitle:
            "观察以下模式，并选择正确的选项来完成这个模式：cscs, sscs, cscs, sscs, ______",
          checkList: ["cscs", "sscs", "cssc", "sssc"],
          timuList: [],
          answer: 0,
          type: "1",
          analyze:
            "这道题目考察学生对模式识别的能力。题目给出了一个重复的模式：cscs, sscs, cscs, sscs。根据这个模式，下一步应该是cscs。因此，正确答案是选项1。",
          end: "",
          answer2: "",
          uuid: "61ae2659-43c3-4741-b5c2-a543a57a9705",
          isSubmit: false
        },
        {
          teststitle: "世界上最长的河流是哪一条？",
          checkList: ["尼罗河", "亚马逊河", "长江", "密西西比河"],
          timuList: [],
          answer: 0,
          type: "1",
          analyze:
            "这道题目考核的是学生对世界地理常识的了解。世界上最长的河流是尼罗河，全长约6650公里。通过这道题目，学生可以学习到关于世界河流的基本知识。",
          answer2: "",
          uuid: "b328ebf9-389a-4828-b6c6-9a04426d3216",
          isSubmit: false
        },
        {
          teststitle: "世界上最高的山峰及其高度",
          checkList: [
            "珠穆朗玛峰，高度8848米",
            "珠穆朗玛峰，高度8000米",
            "太白山，高度8848米",
            "刚果盆地，高度8848米"
          ],
          timuList: [],
          answer: 0,
          type: "1",
          analyze:
            "本题考察学生对世界上最高山峰珠穆朗玛峰及其高度的了解。珠穆朗玛峰是世界上最高的山峰，其高度为8848米。通过这道题，学生不仅需要知道最高的山峰，还需要记住其具体高度。",
          answer2: "",
          uuid: "e1cf1783-2e9f-40f6-a58f-6c3a7a951173",
          isSubmit: false
        }
      ],
      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/icon/pocAiClassroom/character1.png"),
          name: "圆鼓鼓的大胖鱼",
          personality:
            "心思细腻，能够敏锐捕捉到别人的需求，喜欢支持和鼓励他人，富有耐心"
        },
        {
          index: 1,
          image: require("../../../assets/icon/pocAiClassroom/character2.png"),
          name: "迷人的大反派2",
          personality:
            "心思细腻，能够敏锐捕捉到别人的需求，喜欢支持和鼓励他人，富有耐心2"
        },
        {
          index: 2,
          image: require("../../../assets/icon/pocAiClassroom/character3.png"),
          name: "迷人的大反派3",
          personality:
            "心思细腻，能够敏锐捕捉到别人的需求，喜欢支持和鼓励他人，富有耐心3"
        },
        {
          index: 3,
          image: require("../../../assets/icon/pocAiClassroom/character4.png"),
          name: "迷人的大反派4",
          personality:
            "心思细腻，能够敏锐捕捉到别人的需求，喜欢支持和鼓励他人，富有耐心4"
        },
        {
          index: 4,
          image: require("../../../assets/icon/pocAiClassroom/character5.png"),
          name: "迷人的大反派5",
          personality:
            "心思细腻，能够敏锐捕捉到别人的需求，喜欢支持和鼓励他人，富有耐心5"
        },
        {
          index: 5,
          image: require("../../../assets/icon/pocAiClassroom/character6.png"),
          name: "迷人的大反派6",
          personality:
            "心思细腻，能够敏锐捕捉到别人的需求，喜欢支持和鼓励他人，富有耐心6"
        }
      ],
			type:this.$route.query.type,
			classList: [
        {
          title: "第一章：科學入門",
					open:true,
          allClass: [
            {
              title: "學習科學",
              type: 0,
              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,
              isComplete: true,
              image:
                "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8731724834767532.png"
            },
            {
              title: "實驗室安全",
              type: 0,
              subject: 4,
              isComplete: false,
              image:
                "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8721724834685472.png"
            },
            {
              title: "實驗室儀器及基本實驗技巧",
              type: 0,
              subject: 4,
              isComplete: false,
              image:
                "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8751724834771676.png"
            },
            {
              title: "綜合練習",
              type: 1,
              subject: 4,
              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,
              isComplete: true,
              image:
                "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8761724834777931.png"
            },
            {
              title: "水循環",
              type: 0,
              subject: 4,
              isComplete: true,
              image:
                "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8771724834845597.png"
            },
            {
              title: "溶解",
              type: 0,
              subject: 4,
              isComplete: true,
              image:
                "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8781724834847977.png"
            },
            {
              title: "水的淨化",
              type: 0,
              subject: 4,
              isComplete: true,
              image:
                "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8791724834873373.png"
            },
            {
              title: "食水的進一步處理",
              type: 0,
              subject: 4,
              isComplete: false,
              image:
                "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8761724834777931.png"
            },
            {
              title: "節約用水和水污染",
              type: 0,
              subject: 4,
              isComplete: false,
              image:
                "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8771724834845597.png"
            },
            {
              title: "綜合練習",
              type: 1,
              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,
              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,
              isComplete: true,
              image:
                "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8731724834767532.png"
            },
            {
              title: "檢索表",
              type: 0,
              subject: 4,
              isComplete: false,
              image:
                "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8721724834685472.png"
            },
            {
              title: "生物多樣性",
              type: 0,
              subject: 4,
              isComplete: false,
              image:
                "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8751724834771676.png"
            },
            {
              title: "綜合練習",
              type: 1,
              subject: 4,
              isComplete: false,
              image:
                "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8711724834666052.png"
            }
          ]
        }
      ],
			seekAssistLoading:false,
			seekAssistMessage:"",
    };
  },
  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
      };
      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);
      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.$message.warning("已经是第一题啦");
        }
      } else if (type == "next") {
        if (this.showTaskIndex < this.taskList.length - 1) {
          this.showTaskIndex++;
        } else {
          this.$message.warning("已经是最后一题啦");
        }
      }
    },
    // 切换章节
    changeChapter() {
      this.$refs.changeChapterDialogRef.open(this.type);
    },
    //求助
    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() {
      console.log("保存做题");
    },
    submitTask(type = 0) {
      if (!this.isDoAllTask && type == 0) {
        this.$confirm("还有未做的题目，是否要继续做题", "提示", {
          confirmButtonText: "确认提交",
          cancelButtonText: "继续做题",
          type: "warning "
        })
          .then(() => {
            this.submitTask(1);
          })
          .catch(() => {
            console.log("继续做题");
          });
      } else {
        this.isSubmit = true;
        clearInterval(this.timer);
        this.timer = null;
        this.sortTaskList();
      }
    },
    back() {
      this.$router.push(
        `/pocAiClassroom?userid=${this.userId}&oid=${this.oid}&org=${this.org}`
      );
    },
    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);
        }
      }
    },
    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"
        });
      }
    },
		doNotKnow(){
			this.getSeekAssist();
		},
		changeChapterSuccess(index){
			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:["凝結會於沸點或以下的温度發生","蒸發過程中不会吸收或釋出能量。","凝固是物質由液熊轉變成固熊的過程","D.固體熔化時的温度保持不變。"],
						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:["凝結會於沸點或以下的温度發生","蒸發過程中不会吸收或釋出能量。","凝固是物質由液熊轉變成固熊的過程","D.固體熔化時的温度保持不變。"],
						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;
			this.startTime = new Date().getTime();
			this.type = index;
			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.$refs.changeChapterDialogRef.close();
		},
		getSeekAssist() {
			if(this.seekAssistLoading)return;
      return new Promise(resolve => {
        this.seekAssistLoading = true
				this.seekAssistMessage = "我想想哦...";
        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'
        }

        this.ajax.post("https://gpt4.cocorobo.cn/ai_agent_park_chat", params).then(res => {
          let _result = res.data.FunctionResponse.message;
					if(_result){
						this.seekAssistMessage = _result;
						this.seekAssistLoading = false;
					}else{
						console.log(_result);
					this.$message.error("获取失败，请重试");
					this.showSeekAssist = false;
					}
        }).catch(e=>{
					console.log(e);
					this.$message.error("获取失败，请重试");
					this.showSeekAssist = false;
				})
      })
    }
  },
  mounted() {
    this.keepTime();
    this.sortTaskList();
		this.changeChapterSuccess(this.type)
  }
};
</script>

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

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

.dt_main {
  width: 70%;
  height: 95%;
  min-height: 800px;
  min-width: 1100px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  margin: auto;
  position: relative;
  top: 2.5%;
}

.dt_m_head {
  width: 100%;
  height: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  /* justify-content: center; */
}

.dt_m_h_message {
  font-size: 20px;
  color: #00000099;
}

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

.dt_m_h_back {
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  background-color: #f8f9fa;
  border: 1px solid #e7e7e7;
  border-radius: 4px;
  top: calc(50% - 40px);
  left: 0;
  position: absolute;
  cursor: pointer;
}

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

.dt_m_h_chapter {
  font-size: 34px;
  margin: 20px 0;
}

.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% - 60px);
  border-radius: 10px;
  display: flex;
}

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

.dt_m_b_l_head {
  width: 100%;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 16px 32px;
  background-color: #f8f9fa;
}

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

.dt_m_l_h_changeChapter {
  font-size: 24px;
  color: #3681fc;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.dt_m_l_h_changeChapter > svg {
  width: 24px;
  height: 24px;
  margin-right: 10px;
}

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

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

.dt_m_b_r_time {
  width: 100%;
  height: 300px;
  background-color: #fff;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  border-radius: 10px 10px 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: 30px;
  height: 30px;
  margin-right: 10px;
}

.dt_m_b_r_t_head > span {
  font-size: 24px;
  font-weight: bold;
}

.dt_m_b_r_t_showTime {
  width: 100%;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background-color: #f2f6fc;
  margin-top: 10px;
}

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

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

.dt_m_b_r_t_btn {
  width: 100%;
  height: 60px;
  border-radius: 8px;
  margin-top: 10px;
  background-color: #f0f2f5;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  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: -20px;
  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: calc(100% - 60px - 80px - 20px);
  margin: 10px 0;
  box-sizing: border-box;
}

.dt_m_b_r_tl_boxList > span {
  width: 35px;
  height: 35px;
  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: 100%;
  height: 60px;
  box-sizing: border-box;
  border-top: solid 1px #f0f2f5;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.dt_m_b_r_tl_bottom > div {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.dt_m_b_r_tl_bottom > div > span {
  width: 25px;
  height: 25px;
  margin-right: 5px;
  background-color: #fff;
  border-radius: 8px;
  border: solid 2px #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;
}

.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: 100%;
  height: calc(100% - 170px);
  overflow: auto;
  box-sizing: border-box;
  box-sizing: border-box;
  padding: 30px 40px;
}

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

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

.dt_m_b_l_t_cl_item > div > span {
  width: 12px;
  height: 12px;
  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;
}

.dt_m_b_l_t_cl_item > span > img {
  max-width: 300px;
  cursor: pointer;
}

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

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

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

.dt_m_b_l_bottom {
  width: 100%;
  height: 90px;
  display: flex;
  align-items: center;
  background-color: #f8f9fa;
  border-top: 1px solid #f0f2f5;
  justify-content: space-between;
  padding: 16px 32px;
  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_seekAssist > svg {
  width: 30px;
  height: 30px;
  margin-right: 10px;
}

.dt_m_b_l_b_seekAssist > span {
  font-size: 24px;
  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;
  justify-content: center;
  align-items: center;
  justify-content: center;
  padding: 15px 70px;
  border-radius: 10px;
  font-size: 20px;
  cursor: pointer;
  margin-left: 20px;
  background-color: #fff;
  white-space: nowrap;
  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_isSubmit {
  width: 70%;
  margin: auto;
  min-width: 1000px;
  height: 100%;
  background-color: #fff;
  overflow: auto;
  box-sizing: border-box;
  padding: 30px 50px;
}

.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 {
  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 40px;
  font-size: 24px;
}

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

.dt_is_s_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: 22px;
  font-weight: bold;
  transition: 0.3s;
}

.isDoYes {
  background-color: #c8e5b3 !important;
  border-color: #c8e5b3 !important;
}

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

.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: 24px;
  font-weight: bold;
}

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

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

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

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

.dt_is_tl_tb_i_title {
  font-size: 24px;
}
.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: 20px;
  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: 60%;
}

.dt_is_tl_tb_i_answer {
  font-size: 20px;
  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: 1%;
  z-index: 1;
}

.dt_character > img {
  width: 500px;
  z-index: 2;
  bottom: -43px;
  position: absolute;
}

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

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

.dt_c_m_closeIcon {
  width: 25px;
  height: 25px;
  position: absolute;
  right: 10px;
  top: 10px;
}

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

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

.dt_c_m_message {
  max-width: 100%;
  font-size: 24px;
  padding: 10px 30px;
	max-height: 48%;
	overflow: auto;
}

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

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

.dt_c_m_btnArea > span {
  padding: 12px 30px;
  border-radius: 8px;
  font-size: 18px;
  cursor: pointer;
  margin-left: 20px;
  cursor: pointer;
  background-color: #fdfeff;
  box-sizing: border-box;
}

.dt_c_m_btn1{
	color: #00000099;
}

.dt_c_m_btn2{
	background-color: #3681FC !important;
	color: #fff;
	padding: 12px 40px !important;
}

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

.titleImage>img{
	max-width: 80%;
	max-height: 400px;
}
</style>