pbl-student-table/src/components/classRoomHelper/component/taskArea.vue

<template>
  <div class="task">
    <div class="taskTop">
      <div class="tt_title">任务时间分配</div>
      <div class="tt_item">
        <div class="tt_i_title">
          <span>课程时间轴</span>
        </div>
        <div class="tt_i_box">
          <div class="tt_i_b_step" v-if="navList.length == 1">
            <!-- 只有一个阶段 -->
            <span
              :style="{
                background: taskCount >= index ? '#3681FC' : '#E0EAFB'
              }"
              v-for="(item, index) in navList[courseType].task"
            ></span>
          </div>
          <div class="tt_i_b_step" v-if="navList.length > 1">
            <!-- 多个阶段 -->
            <span
              :style="{
                background: courseType >= index ? '#3681FC' : '#E0EAFB'
              }"
              v-for="(item, index) in navList"
            ></span>
          </div>
          <!-- <img :src="require('../../../assets/icon/course/group.png')" /> -->
        </div>
      </div>

      <div class="tt_item">
        <div class="tt_i_title">
          <span>任务状态</span>
          <span v-if="isWorkStudent !== 0">学生活动中...</span>
        </div>
        <div class="tt_i_box">
          <div class="tt_i_b_item">
            <div class="tt_i_b_title">作业提交</div>
            <div class="tt_i_b_box">
              <div class="tt_i_b_b_item">
                <div>提交人数</div>
                <span>{{ isWorkStudent }}<span>人</span></span>
              </div>
              <div
                class="tt_i_b_b_item"
                v-if="
                  (this.$route.query.tcid || courseDetail.juri) &&
                    allStudent &&
                    complete != '-'
                "
              >
                <div>完成率</div>
                <span>{{ complete }}<span>%</span></span>
              </div>
            </div>
          </div>
          <div class="tt_i_b_item">
            <div class="tt_i_b_title">交流互动</div>
            <div class="tt_i_b_box">
              <div class="tt_i_b_b_item">
                <div>参与人数</div>
                <span>{{ isWorkAll }}<span>人</span></span>
              </div>
              <div class="tt_i_b_b_item">
                <div>点赞数</div>
                <span>{{ likeNum }}<span>个</span></span>
              </div>
              <div class="tt_i_b_b_item">
                <div>评论数</div>
                <span>{{ commentNum }}<span>条</span></span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="aiBoxArea" v-loading="aiBoxLoading">
      <div class="aba_top">
        <div class="aba_t_left">
          <img :src="require('../../../assets/icon/course/practice.svg')" />
          <span>巩固练习</span>
          <el-tooltip
            class="item"
            effect="light"
            content="刷新"
            placement="top"
            v-if="showCard == 1"
          >
            <svg
              @click.stop="selectDefaultTaskList"
              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.07324 11.2394L3.48974 8.91992L3.87418 9.79981C4.56904 11.3902 6.15545 12.5 7.99996 12.5C10.4852 12.5 12.5 10.4853 12.5 8L13.5 8C13.5 11.0376 11.0375 13.5 7.99996 13.5C6.06914 13.5 4.3715 12.5051 3.39039 11.0013L2.92668 11.7606L2.07324 11.2394ZM7.99996 3.5C5.51468 3.5 3.49996 5.51472 3.49996 8L2.49996 8C2.49996 4.96243 4.9624 2.5 7.99996 2.5C9.93079 2.5 11.6284 3.49489 12.6095 4.99871L13.0732 4.2394L13.9267 4.7606L12.5102 7.08008L12.1257 6.20019C11.4309 4.60983 9.84447 3.5 7.99996 3.5Z"
                fill="black"
                fill-opacity="0.6"
              />
            </svg>
          </el-tooltip>
        </div>
        <div class="aba_t_right" v-if="showCard == 1">
          <div>
            <span>{{ showTopicIndex + 1 }}</span
            >/{{ topicList.length }}
          </div>
        </div>
      </div>

      <div class="aba_box">
        <div class="aa_ab_noTask" v-if="showCard == 0">
          <img :src="require('../../../assets/icon/course/aiLogo.png')" />
          <span>当前课堂未添加练习题</span>
          <div
            class="aa_ab_nt_btn"
            @click.stop="getTopic()"
            v-show="ttype == 1"
          >
            一键出题
          </div>
          <div
            v-show="
              this.courseDetail.userid == userid ||
                this.courseDetail.juri.indexOf(userid) != -1
            "
          >
            或前往“<span @click.stop="goSetTopic()">课堂管理</span
            >”编辑工具，自主添加题目
          </div>
        </div>

        <div class="aa_ab_topic" v-else-if="showCard == 1">
          <div class="aa_ab_t_title">
            <span v-if="topicList[showTopicIndex].answer.length"
              >【多选题】</span
            >
            <span v-else>【单选题】</span>
            <span>{{ topicList[showTopicIndex].teststitle }}</span>
          </div>

          <div class="aa_ab_t_choiceList">
            <!-- <div
              :class="[
                'aa_ab_t_cl_item',
                topicList[showTopicIndex].isSubmit
                  ? checkAnswer(
                      topicList[showTopicIndex].answer,
                      topicList[showTopicIndex].answer2
                    ).yes.includes(index)
                    ? 'aa_ab_t_cl_itemYes'
                    : checkAnswer(
                        topicList[showTopicIndex].answer,
                        topicList[showTopicIndex].answer2
                      ).no.includes(index)
                    ? 'aa_ab_t_cl_itemNo'
                    : ''
                  : 'aa_ab_t_cl_itemActive',

                typeof topicList[showTopicIndex].answer != 'number'
                  ? topicList[showTopicIndex].answer2.includes(index)
                    ? 'aa_ab_t_cl_itemChoice'
                    : ''
                  : topicList[showTopicIndex].answer2 === index
                  ? 'aa_ab_t_cl_itemChoice'
                  : ''
              ]"
              v-for="(item, index) in topicList[showTopicIndex].checkList"
              :key="showTopicIndex + '-' + index"
              @click.stop="chooseAnswer(index)"
            >
              <span v-if="item.imgType == 1"
                >{{ chooseList[index] }}、
                <img :src="item.src" @click.stop="$hevueImgPreview(item.src)" />
              </span>
              <span v-else
                >{{ chooseList[index] }}、<span>{{ item }}</span></span
              >
            </div> -->
            <div
              :class="[
                'aa_ab_t_cl_item',
                showBottomCard == 2
                  ? (typeof topicList[showTopicIndex].answer== 'number'?topicList[showTopicIndex].answer == index:topicList[showTopicIndex].answer.includes(index))
                    ? 'aa_ab_t_cl_itemYes'
                    : checkAnswer(
                        topicList[showTopicIndex].answer,
                        topicList[showTopicIndex].answer2
                      ).no.includes(index)
                    ? ''
                    : ''
                  : 'aa_ab_t_cl_itemActive',

                typeof topicList[showTopicIndex].answer != 'number'
                  ? topicList[showTopicIndex].answer2.includes(index) &&
                    showBottomCard != 2
                    ? 'aa_ab_t_cl_itemChoice'
                    : ''
                  : topicList[showTopicIndex].answer2 === index &&
                    showBottomCard != 2
                  ? 'aa_ab_t_cl_itemChoice'
                  : ''
              ]"
              v-for="(item, index) in topicList[showTopicIndex].checkList"
              :key="showTopicIndex + '-' + index"
              @click.stop="chooseAnswer(index)"
            >
              <span v-if="item.imgType == 1"
                >{{ chooseList[index] }}、
                <img :src="item.src" @click.stop="$hevueImgPreview(item.src)" />
              </span>
              <span v-else
                >{{ chooseList[index] }}、<span>{{ item }}</span></span
              >
              <div
                class="aa_ab_t_cl_itemAnswer"
                v-if="(typeof topicList[showTopicIndex].answer== 'number'?topicList[showTopicIndex].answer == index:topicList[showTopicIndex].answer.includes(index)) && showBottomCard==2"
              >
                <svg
                  t="1724308424838"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="4297"
                  width="200"
                  height="200"
                >
                  <path
                    d="M817.728 198.72l111.744 114.56-545.216 532.128-285.92-273.024 110.528-115.712 174.176 166.336z"
                    fill="#3581FC"
                    p-id="4298"
                  ></path>
                </svg>
              </div>
            </div>
          </div>
          <div class="aa_ab_t_btnArea">
            <div class="aa_ab_t_message">
              <div class="aa_ab_t_m_answer">
                正确答案：<span v-if="showBottomCard == 2">{{
                  topicList[showTopicIndex].answer.length
                    ? topicList[showTopicIndex].answer
                        .map(i => chooseList[i])
                        .join("、")
                    : chooseList[topicList[showTopicIndex].answer]
                }}</span>
                <span v-else>-</span>
              </div>
              <div class="aa_ab_t_m_btn">
                <span
                  :class="[showBottomCard == 1 ? 'aa_ab_t_m_btnActive' : '']"
                  @click.stop="statistics()"
                  v-if="ttype != 2"
                  >题目统计</span
                >
                <span
                  :class="[showBottomCard == 2 ? 'aa_ab_t_m_btnActive' : '']"
                  v-if="ttype != 2"
                  @click.stop="analyze()"
                  >答案解析</span
                >
              </div>
            </div>

            <div
              class="aa_ab_t_ba_box"
              v-if="showBottomCard == 1"
              v-loading="statisticsLoading"
            >
              <div class="sc_top">
                <div>
                  提交人数 <span>{{ statisticsData.total }}</span>
                </div>
                <div>
                  正确率 <span>{{ statisticsData.accuracy }}%</span>
                </div>

                <div class="sc_t_refresh" @click.stop="getStatistics()">
                  <el-tooltip
                    class="item"
                    effect="dark"
                    content="刷新"
                    placement="top"
                  >
                    <img
                      :src="require('../../../assets/icon/course/refresh.svg')"
                    />
                  </el-tooltip>
                </div>
              </div>

              <div class="sc_bottom">
                <span v-if="statisticsData.total == 0">当前暂无学生提交.</span>
                <div
                  class="sc_b_item"
                  v-else
                  v-for="(item, index) in statisticsData.checkList"
                  :key="showTopicIndex + '-' + index"
                >
                  <span class="sc_b_i_index">{{ item.index }}、</span>
                  <div class="sc_b_i_progress">
                    <el-progress :percentage="item.accuracy"></el-progress>
                  </div>
                  <span class="sc_b_i_num">{{ item.num }}人</span>
                </div>
              </div>
            </div>

            <div
              class="aa_ab_t_ba_box"
              v-loading="analyzeLoading"
              v-if="showBottomCard == 2"
            >
              <span>{{ analyzeText }}</span>
            </div>
            <!-- <div
              class="aa_ab_t_ba_submit"
              v-show="!topicList[showTopicIndex].isSubmit"
              @click.stop="confirmSubmission()"
            >
              确认选择
            </div> -->
            <div class="aa_ab_t_ba_nextOrUp">
              <div
                :class="['aa_ab_t_ba_nu_questions']"
                @click.stop="getAiTopic()"
                v-show="ttype == 1"
              >
                <span>智能出题</span>
                <svg
                  width="17"
                  :style="showMenu ? 'transform: rotate(180deg);' : ''"
                  height="16"
                  viewBox="0 0 17 16"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    fill-rule="evenodd"
                    clip-rule="evenodd"
                    d="M13.5404 10.3322C13.7239 10.1258 13.7053 9.80975 13.4989 9.62629L8.99892 5.62629C8.80948 5.4579 8.524 5.4579 8.33456 5.62629L3.83456 9.62629C3.62817 9.80975 3.60958 10.1258 3.79304 10.3322C3.9765 10.5386 4.29253 10.5572 4.49892 10.3737L8.66674 6.66897L12.8346 10.3737C13.041 10.5572 13.357 10.5386 13.5404 10.3322Z"
                    fill="#3681FC"
                  />
                </svg>
                <div
                  class="aa_ab_t_ba_nu_q_menu"
                  v-if="showMenu"
                  v-click-outside="handleBlur"
                >
                  <span @click.stop="getAiTopicByyType(0)">相似题</span>
                  <span @click.stop="getAiTopicByyType(1)">更难题</span>
                  <span @click.stop="getAiTopicByyType(2)">更易题</span>
                </div>
              </div>

              <div
                :class="[
                  'aa_ab_t_ba_nu_up',
                  showTopicIndex > 0 ? '' : 'aa_ab_t_ba_nu_disabled'
                ]"
                @click.stop="up()"
              >
                上一题
              </div>
              <div
                :class="[
                  'aa_ab_t_ba_nu_next',
                  showTopicIndex != topicList.length - 1 && topicList.length > 0
                    ? ''
                    : 'aa_ab_t_ba_nu_disabled'
                ]"
                @click.stop="next()"
              >
                下一题
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- <div class="aiArea">
      <div class="aa_title">巩固练习</div>
      <div class="aa_aiBox" v-loading="aiBoxLoading">
       
				 <div class="aa_ab_noTask" v-if="showCard == 0">
          <div>当前课堂未添加练习题</div>
           <div v-if="this.courseDetail.userid == userid">
            点击<span @click.stop="getTopic()">一键出题</span>自动生成 10
            道随堂练习
          </div>
          <div
            v-if="
              this.courseDetail.userid == userid ||
                this.courseDetail.juri.indexOf(userid) != -1
            "
          >
            前往<span @click.stop="goSetTopic()">课堂管理</span
            >编辑工具,自主添加题目
          </div>
        </div>

        <div class="aa_ab_topic" v-else-if="showCard == 1">
          <div class="topicNum">
            {{ showTopicIndex + 1 }}/{{ topicList.length }}
          </div>
          <div class="aa_ab_t_t_detail">
            <div class="aa_ab_t_t_d_title">
              <span v-if="topicList[showTopicIndex].answer.length"
                >【多选题】</span
              >
              <span v-else>【单选题】</span>
              {{ topicList[showTopicIndex].teststitle }}
            </div>
            <div class="aa_ab_t_t_d_check">
              <div
                class="aa_ab_t_t_d_c_item"
                v-for="(item, index) in topicList[showTopicIndex].checkList"
                :key="showTopicIndex + '-' + index"
              >
                <div class="checkInput" @click.stop="chooseAnswer(index)">
                  <img
                    :src="require('../../../assets/icon/course/yes.svg')"
                    v-if="
                      topicList[showTopicIndex].answer2 === index ||
                        (topicList[showTopicIndex].answer2.length &&
                          topicList[showTopicIndex].answer2.includes(index))
                    "
                  />
                </div>
                <span v-if="item.imgType == 1"
                  >{{ index + 1 }}、
                  <img
                    :src="item.src"
                    @click.stop="$hevueImgPreview(item.src)"
                  />
                </span>
                <span v-else
                  >{{ index + 1 }}、<span>{{ item }}</span></span
                >
              </div>
            </div>
          </div>
          <div class="aa_ab_t_t_btnArea">
            <div class="aa_ab_t_t_ba_left" v-if="topicList.length > 1">
              <img
                :src="require('../../../assets/icon/course/left.svg')"
                :style="showTopicIndex == 0 ? `opacity: .5;` : ''"
                @click.stop="up()"
              />
              <img
                :src="require('../../../assets/icon/course/left.svg')"
                :style="
                  topicList.length && topicList.length - 1 == showTopicIndex
                    ? `opacity: .5;transform: rotate(180deg);`
                    : 'transform: rotate(180deg);'
                "
                @click.stop="next()"
              />
            </div>
            <div class="aa_ab_t_t_ba_right">
              <div class="br_area" v-if="ttype!=2">
                <span
                  :class="[showBottomCard == 1 ? 'br_a_active' : '']"
                  @click.stop="statistics()"
                  >统计</span
                >
              </div>
              <div class="br_area" v-if="ttype!=2">
                <span
                  :class="[showBottomCard == 2 ? 'br_a_active' : '']"
                  @click.stop="analyze()"
                  >解析</span
                >
              </div>
              <div class="br_area" v-if="this.courseDetail.userid == userid && ttype!=2">
                <div class="br_a_menu" v-if="showMenu">
                  <span @click.stop="getAiTopicByyType(0)">相似题</span>
                  <span @click.stop="getAiTopicByyType(1)">更难题</span>
                  <span @click.stop="getAiTopicByyType(2)">更易题</span>
                </div>
                <span @click.stop="getAiTopic()">智能出题</span>
              </div>

              <div class="br_area" v-if="ttype==2">
                <span @click.stop="studentSubmit()">提交</span>
              </div>
            </div>
          </div>
        </div>
        <div class="aa_ab_bottomCard" v-if="showBottomCard != 0">
          <div class="statisticsCard" v-if="showBottomCard == 1" v-loading="statisticsLoading">
            <div class="sc_top">
              <div>
                提交人数 <span>{{ statisticsData.total }}</span>
              </div>
              <div>正确率 <span>{{statisticsData.accuracy}}%</span></div>

							<div class="sc_t_refresh" @click.sto="getStatistics()">
								<el-tooltip class="item" effect="dark" content="刷新" placement="top">
									<img :src="require('../../../assets/icon/course/refresh.svg')">
    						</el-tooltip>
								
							</div>
            </div>

						<div class="sc_top">
              <div>
                答案： <span>{{ topicList[showTopicIndex].answer.length?topicList[showTopicIndex].answer.map(i=>i+=1).join('、'):topicList[showTopicIndex].answer+1 }}</span>
              </div>
            </div>
            <div class="sc_bottom">
              <span v-if="statisticsData.total == 0"
                >当前暂无学生提交练习.</span
              >
							<div class="sc_b_item" v-else v-for="(item,index) in statisticsData.checkList" :key="showTopicIndex+'-'+index">
								<span class="sc_b_i_index">{{item.index}}、</span>
								<div class="sc_b_i_progress">
									<el-progress :percentage="item.accuracy"></el-progress>
								</div>
								<span class="sc_b_i_num">{{item.num}}人</span>
							</div>
            </div>
          </div>
          <div
            class="analyzeCard"
            v-else-if="showBottomCard == 2"
            v-loading="analyzeLoading"
          >
            <span>{{ analyzeText }}</span>
            <div class="ac_btnArea">
              <img
                :src="require('../../../assets/icon/course/megaphone3.svg')"
                v-if="!aiIsTalk"
                @click="aiTalkAll({ aiContent: analyzeText })"
              />
              <img
                :src="require('../../../assets/icon/course/megaphone.svg')"
                v-else
                @click="aiTalkAll({ aiContent: analyzeText })"
              />
            </div>
          </div>
        </div>
      </div>
    </div> -->

    <iframe
      allow="camera *; microphone *;display-capture;midi;encrypted-media;"
      src="https://beta.cloud.cocorobo.cn/browser/public/index.html"
      ref="iiframe"
      v-show="false"
    ></iframe>

    <!-- 文字转语音-->
    <iframe
      allow="camera *; microphone *;display-capture;midi;encrypted-media;"
      src="https://beta.cloud.cocorobo.cn/browser/public/index1.html"
      ref="iiframe2"
      v-show="false"
    ></iframe>
  </div>
</template>

<script>
// import { Loading } from 'element-ui';
import { v4 as uuidv4 } from "uuid";
import MarkdownIt from "markdown-it";
import { tools } from "../../../common/tools";
var OpenCC = require("opencc-js");
let converter = OpenCC.Converter({
  from: "hk",
  to: "cn"
});

// 自定义指令，用于处理点击外部区域的事件
const clickOutside = {
  bind(el, binding) {
    // 在元素上绑定一个点击事件监听器
    el.clickOutsideEvent = function(event) {
      // 检查点击事件是否发生在元素的内部
      if (!(el === event.target || el.contains(event.target))) {
        // 如果点击事件发生在元素的外部，则触发指令绑定的方法,将点击的event数据传过去
        binding.value(event);
      }
    };
    // 在文档上添加点击事件监听器
    document.addEventListener("click", el.clickOutsideEvent);
  },
  unbind(el) {
    // 在元素上解除点击事件监听器
    document.removeEventListener("click", el.clickOutsideEvent);
  }
};

export default {
  props: {
    courseDetail: {
      type: Object,
      default: () => {}
    },
    navList: {
      type: Array,
      default: () => []
    },
    courseType: {
      type: Number,
      default: 0
    },
    taskCount: {
      type: Number,
      default: 0
    },
    worksStudent: {
      type: Array,
      default: () => []
    },
    fileId: {
      type: Array,
      default: () => []
    },
    openMegaphone: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      userid: this.$route.query.userid,
      courseId: this.$route.query.courseId,
      ttype: this.$route.query.tType,
      tcid2: this.$route.query.tcid,
      loading: false,
      aiBoxLoading: false,
      chatLoading: false,
      analyzeLoading: false,
      source: null,
      saveUid: "",
      allStudent: [],
      tcid: this.$route.query.tcid,
      oid: this.$route.query.oid,
      tools: JSON.parse(converter(JSON.stringify(tools))),
      aiTalkList: [],
      aiIsTalk: false,
      aiTalkUid: "",
      showCard: 0,
      topicList: [],
      defaultTopicList: [],
      submitStudent: [],
      showTopicIndex: 0,
      showMenu: false,
      showBottomCard: 0, // 0不显示  1：显示统计   2：显示解析
      analyzeText: "",
      statisticsLoading: false,
      chooseList: [
        "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"
      ]
    };
  },
  computed: {
    isWorkAll() {
      let _userList = [];
      if (this.worksStudent.length) {
        this.worksStudent.forEach(i => {
          if (i.length) {
            i.forEach(i2 => {
              if (i2.commentJson) {
                i2.commentJson.forEach(i3 => {
                  if (
                    i3.userid &&
                    !_userList.find(i5 => i5.userid == i3.userid)
                  ) {
                    _userList.push(i3);
                  }
                });
              }

              if (i2.likeJson) {
                i2.likeJson.forEach(i4 => {
                  if (
                    i4.likesId &&
                    !_userList.find(i5 => i5.userid == i4.likesId)
                  ) {
                    _userList.push({ ...i4, userid: i4.likesId });
                  }
                });
              }
            });
          }
        });
      }
      return _userList.length;
    },
    complete() {
      let _result = 0;
      let _all = this.allStudent ? this.allStudent.length : 0;
      if (_all == 0) return "-";
      _result = ((this.isWorkStudent / _all) * 100).toFixed(2);
      return _result;
    },
    likeNum() {
      let _result = 0;
      if (this.worksStudent.length) {
        this.worksStudent.forEach(i => {
          if (i.length) {
            i.forEach(i2 => {
              if (i2.likesCount) {
                _result += i2.likesCount;
              }
            });
          }
        });
      }
      return _result;
    },
    commentNum() {
      let _result = 0;
      if (this.worksStudent.length) {
        this.worksStudent.forEach(i => {
          if (i.length) {
            i.forEach(i2 => {
              if (i2.commentCount) {
                _result += i2.commentCount;
              }
            });
          }
        });
      }
      return _result;
    },
    isWorkStudent() {
      let _userList = [];
      if (this.worksStudent.length) {
        this.worksStudent.forEach(i => {
          if (i.length) {
            i.forEach(i2 => {
              if (
                // i2.ttype == 2 &&
                !_userList.find(i3 => i3.userid == i2.userid)
              ) {
                _userList.push(i2);
              }
            });
          }
        });
      }
      return _userList.length;
    },
    pan() {
      return content => {
        try {
          return JSON.parse(content);
        } catch (error) {
          return [];
        }
      };
    },
    htmlContent() {
      const md = new MarkdownIt();
      return _md => {
        return md.render(_md);
      };
    },

    statisticsData() {
      let _result = {
        total: 0,
        correct: 0, //正确人数
        allNum: 0, //做题次数
        accuracy: 0, //准确率
        checkList: [] //{index:1,accuracy:36,num:10}
      };

      let _data = JSON.parse(JSON.stringify(this.submitStudent));
      _data.forEach((i, index1) => {
        let _task = i.content[this.showTopicIndex];

        if (index1 == 0) {
          _task.checkList.forEach((i2, index2) => {
            _result.checkList.push({
              index: this.chooseList[index2],
              accuracy: 0,
              num: 0
            });
          });
        }

        // if (!_task || !_task.isSubmit) return; //未做此题
        if (!_task) return; //未做此题

        if (typeof _task.answer != "number") {
          //多选题
          if (!_task.answer2.length) return; //未做此题
          _result.total += 1;
          let choiceNum = 0;
          let correctNum = 0;
          _task.answer2.forEach(i3 => {
            _result.checkList[i3].num += 1;
            _result.allNum += 1;
            choiceNum += 1;
            if (_task.answer.includes(i3)) {
              correctNum += 1;
            }
          });
          if (
            _task.answer.length == choiceNum &&
            _task.answer.length == correctNum
          ) {
            _result.correct += 1;
          }
        } else {
          //单选题
          if (_task.answer2 === "") return; //未做此题
          _result.total += 1;
          _result.checkList[_task.answer2].num += 1;
          _result.allNum += 1;
          if (_task.answer == _task.answer2) {
            _result.correct += 1;
          }
        }
      });
      if (_result.correct != 0) {
        _result.accuracy = ((_result.correct / _result.total) * 100).toFixed(0);
      }

      _result.checkList.forEach(i => {
        if (i.num != 0 && _result.allNum != 0) {
          i.accuracy = parseInt(((i.num / _result.allNum) * 100).toFixed(0));
        }
      });

      return _result;
    },
    checkAnswer() {
      let _result = {
        yes: [0],
        no: []
      };
      return (answer, answer2) => {
        if (typeof answer == "number") {
          if (answer == answer2) {
            _result.yes = [answer];
            _result.no = [];
          } else {
            _result.yes = [answer];
            _result.no = [answer2];
          }
        } else {
					console.log("多选题")
          if (
            answer.length == answer2.length &&
            answer.every(i => answer2.includes(i))
          ) {
            _result.yes = answer;
            _result.no = [];
          } else {
            _result.yes = answer.filter(i => answer2.includes(i));
            _result.no = answer2.filter(i => !answer.includes(i));
          }
        }
        return _result;
      };
    }
  },
  directives: {
    "click-outside": clickOutside // 注册自定义指令
  },
  methods: {
    handleBlur() {
      this.showMenu = !this.showMenu;
    },
    insertMemorandum(_html) {
      //保存行为操作
      //variable
      //btn
      // return;
      let params = [
        {
          uid: this.userid,
          courseId: this.courseId + (this.tcid2 ? this.tcid2 : ""),
          content: _html
        }
      ];

      this.ajax
        .post(
          this.$store.state.api + "insert_systemOperation_countdownBehavior",
          params
        )
        .then(res => {
          if (res.data == 1) {
            console.log("保存操作成功");
          } else {
            console.log("保存操作失败");
          }
        })
        .catch(e => {
          console.log("保存操作失败");
          console.log(e);
        });
    },
    onCopy(content) {
      // 创建临时textarea元素
      const tempInput = document.createElement("textarea");
      tempInput.value = content; // 设置要复制的内容
      // 隐藏元素
      tempInput.style.position = "absolute";
      tempInput.style.left = "-9999px";
      // 将元素添加到DOM中
      document.body.appendChild(tempInput);
      // 选中元素内容
      tempInput.select();
      // 执行复制操作
      document.execCommand("copy");
      // 移除临时元素
      document.body.removeChild(tempInput);
      this.$message({
        message: "复制成功",
        type: "success"
      });
    },
    exportCourse() {
      let _user = `<div style="font-size:30px;margin-top:10px;"><span style="color: rgb(113, 124, 141); font-weight: 400;">创建者：</span><span>${this.courseDetail.username}</span></div>`;
      const _chapInfo = JSON.parse(this.courseDetail.chapters);
      let _chap = "";

      for (let i = 0; i < _chapInfo.length; i++) {
        _chap += `<div style="font-size:40px;margin-top:70px;"><span>第${i +
          1}阶段：${_chapInfo[i].dyName}</span></div>`;
        let _task = _chapInfo[i].chapterInfo[0].taskJson;
        for (let j = 0; j < _task.length; j++) {
          _chap += `<div style="font-size:30px;margin-top:50px;"><span>任务${j +
            1}：${_task[j].task}</span></div>`;
          if (_task[j].taskDetail) {
            _chap += `<div style="font-size:25px;margin-top:40px;">任务描述</div>`;
            _chap += `<div style="font-size:25px;margin-top:10px;">${_task[j].taskDetail}</div>`;
          }
          let _tool = _task[j].toolChoose;
          if (_tool[0].tool.length) {
            for (let z = 0; z < _tool.length; z++) {
              _chap += `<div style="font-size:23px;margin-top:30px;"><span>步骤${z +
                1}：</span><span>${
                tools[_tool[z].tool[0]] ? tools[_tool[z].tool[0]].name : ""
              }</span></div>`;

              if (_tool[z].toolDetail) {
                _chap += `<div style="font-size:23px;margin-top:20px;">工具描述</div>`;
                _chap += `<div style="font-size:23px;margin-top:10px;">${_tool[z].toolDetail}</div>`;
              }
            }
          }
        }
      }

      let _html = _user + _chap;
      return _html;
    },
    previewImg(url) {
      this.$hevueImgPreview(url);
    },
    getAtAuContent(_uid) {
      this.source = new EventSource(
        `https://gpt4.cocorobo.cn/question/${_uid}`
      );
      //http://gpt4.cocorobo.cn:8011/question/   https://gpt4.cocorobo.cn/question/
      let _allText = "";
      let _mdText = "";
      let _index = 0;
      let _talkText = "";
      // const md = new MarkdownIt();
      this.source.onmessage = _e => {
        let _eData = JSON.parse(_e.data);
        if (_eData.content.replace("'", "").replace("'", "") == "[DONE]") {
          let _result = [];
          if ("result" in _eData) {
            _result = _eData.result;
            for (let i = 0; i < _result.length; i++) {
              _mdText = _mdText.replace(_result[i].text, _result[i].fileName);
            }
          }
          _mdText = _mdText.replace("_", "");
          if (this.openMegaphone && this.aiTalkUid == _uid) {
            this.aiTalkUid = "";
            if (_talkText != "") {
              let _resultText = this.removeMarkdown(_talkText);
              this.aiTalkList.push(_resultText);
              _talkText = "";
              if (!this.aiIsTalk) this.aiTalk(1);
            }
          }
          this.chatLoading = false;
          this.chatList.find(i => i.uid == _uid).aiContent = _mdText;
          this.chatList.find(i => i.uid == _uid).isalltext = true;
          this.chatList.find(i => i.uid == _uid).isShowSynchronization = true;
          this.chatList.find(i => i.uid == _uid).loading = false;
          this.nowChatList.push(this.chatList.find(i => i.uid == _uid));
          // this.addAsk(this.chatList.find(i => i.uid == _uid).content);
          this.source.close();
          // this.insertChat(_uid);
        } else {
          _index += 1;
          let _text = _eData.content.replace("'", "").replace("'", "");
          if (_allText == "") {
            _allText = _text.replace(/^\n+/, ""); //去掉回复消息中偶尔开头就存在的连续换行符
            _talkText += _text.replace(/^\n+/, "");
          } else {
            _allText += _text;
            _talkText += _text;
          }
          _mdText = _allText + "_";
          _mdText = _mdText.replace(/\\n/g, "\n");
          _mdText = _mdText.replace(/\\/g, "");
          if (_allText.split("```").length % 2 == 0) _mdText += "\n```\n";
          //转化返回的回复流数据
          // _mdText = md.render(_mdText);
          if (_index == 10) {
            this.chatList.find(i => i.uid == _uid).aiContent = _mdText;
            this.chatList.find(i => i.uid == _uid).loading = false;
            this.$nextTick(() => {
              this.$refs.chatRef.scrollTop = this.$refs.chatRef.scrollHeight;
            });
            _index = 0;
          }
          if (this.openMegaphone && /[，。：；？！）]/.test(_talkText)) {
            let _resultText = this.removeMarkdown(_talkText);
            if (this.aiTalkUid != _uid) {
              this.aiTalkList = [];
            }
            this.aiTalkList.push(_resultText);
            _talkText = "";
            if (this.aiTalkUid != _uid) {
              this.aiTalkUid = _uid;
              this.aiTalk(0);
            } else if (!this.aiIsTalk) {
              this.aiTalk(1);
            }
          }
          // 处理流数据
        }
      };
    },
    getAllStudent() {
      let params = {
        oid: this.oid,
        cid: this.tcid ? this.tcid : this.courseDetail.juri
      };
      this.allStudent = [];
      this.ajax
        .get(this.$store.state.api + "selectWorksStudent", params)
        .then(res => {
          this.allStudent = res.data[0];
        });
    },
    removeMarkdown(text) {
      return text
        .replace(/[#*_~`>+\-]/g, "") // 移除 #、*、_、~、`、>、+、- 符号
        .replace(/!\[.*?\]\(.*?\)/g, "") // 移除图片
        .replace(/\[.*?\]\(.*?\)/g, "") // 移除链接
        .replace(/```[\s\S]*?```/g, "") // 移除代码块（不使用 s 标志）
        .replace(/`[^`]*`/g, "") // 移除行内代码
        .replace(/\d+\./g, "") // 移除有序列表
        .replace(/^\s*[-*+]\s+/gm, "") // 移除无序列表
        .replace(/\s+/g, " ") // 将多个空白字符替换为一个空格
        .trim(); // 去除字符串两端的空白字符
    },
    aiTalk(type = 0) {
      //0 新的  1继续
      if (type == 0 && this.aiIsTalk) {
        let _talkTextIiframe2 = this.$refs.iiframe2;
        try {
          _talkTextIiframe2.contentWindow.pausesynthesizer();
          _talkTextIiframe2.contentWindow.closesynthesizer();
          this.aiIsTalk = false;
          if (this.aiTalkList.length) this.aiTalk(0);
        } catch (error) {
          // console.log("error")
          this.aiIsTalk = false;
          if (this.aiTalkList.length) this.aiTalk(0);
        }
      } else {
        let _text = this.aiTalkList.shift();
        let _talkTextIiframe2 = this.$refs.iiframe2;
        if (_text) {
          this.aiIsTalk = true;
          // console.log("👇说👇");
          // console.log(_text);
          _talkTextIiframe2.contentWindow.texttospeech(
            _text,
            () => {
              this.aiTalk(1);
            },
            () => {
              this.aiTalk(0);
            }
          );
        } else {
          try {
            _talkTextIiframe2.contentWindow.closesynthesizer();
          } catch (error) {
            return;
          }
        }
      }

      // if(_text){
      // 	this.aiIsTalk = true;
      // }
    },
    aiTalkAll(item) {
      if (this.aiIsTalk) {
        try {
          this.aiTalkList = [];
          let _talkTextIiframe2 = this.$refs.iiframe2;
          _talkTextIiframe2.contentWindow.pausesynthesizer();
          _talkTextIiframe2.contentWindow.closesynthesizer();
          this.aiIsTalk = false;
        } catch (error) {
          this.aiTalkList = [];
          this.aiIsTalk = false;
        }
      } else {
        let _resultText = this.removeMarkdown(item.aiContent);
        this.aiTalkList = [];
        this.aiTalkList.push(_resultText);
        this.aiTalk(0);
      }
    },
    getTopic() {
      this.aiBoxLoading = true;

      let _textData = `课程名称：${this.courseDetail.title}\n分类：${this.courseDetail.name}\n\n`;
      let _chapters = JSON.parse(this.courseDetail.chapters);
      _chapters.forEach((i1, index1) => {
        if (i1.dyName) {
          _textData += `阶段${index1 + 1}：${i1.dyName}\n`;
        }
        i1.chapterInfo[0].taskJson.forEach((i2, index2) => {
          if (i2.task) {
            _textData += `任务${index2 + 1}：${i2.task}\n`;
            _textData += `${i2.taskDetail}\n`;
          }
        });
        _textData += "\n";
      });
      const _msg = `NOTICE
Role: 你是出题的老师，可以利用file_search的方式完整的去分析文件内容（注：如果文件内容里面不包含需要检索的内容，就不引用文件内容），并生成需要的JSON数据。
Language: Please use the same language as the user requirement, if the user speaks Chinese, the specific text of your answer should also be in Chinese.
ATTENTION: Use '##' to SPLIT SECTIONS, not '#'. Output format carefully referenced "Format example".
Instruction: Based on the context, follow "Format example", write content

#Context
## 任务
请你基于以下{课堂管理中老师上传的PPT文稿、教案、设计的课程任务等}，执行以下任务，按要求输出对应内容。
你是专业的教育技术专家，熟悉教学设计和评估，擅长根据教学材料生成适合学生的练习题目。
你的任务是：基于课堂管理中老师上传的PPT、教案、设计的课程任务等，为本节课自动生成5道有梯度的练习题目。

## 知识库
### 教学设计原则
1. **目标导向**：练习题目应与课程目标紧密相关，帮助学生巩固所学知识。
2. **梯度设置**：题目应从简单到复杂，逐步提高难度，以适应不同层次学生的学习需求。
3. **多样性**：题目类型应多样化，包括选择题、填空题、简答题、应用题等，以全面评估学生的理解和应用能力。
4. **反馈机制**：题目应设计合理的反馈机制，帮助学生在练习中发现和纠正错误。

## 工作流程
1. **分析材料**：仔细阅读并分析老师上传的PPT内容、教案和课程任务，提取关键知识点和教学目标。
2. **设计题目**：根据提取的知识点和教学目标，设计10道有梯度的练习题目。
3. **校验梯度**：确保题目从简单到复杂，难度逐步增加。
4. **输出结果**：按指定格式输出设计的练习题目。

## 限制/注意事项
- 题目应与课程内容高度相关，避免偏题。
- 题目难度应适中，既要有挑战性，又不能过于困难。
- 确保题目类型多样化，覆盖不同的知识点和技能。
- 避免使用过于复杂或晦涩的语言，确保学生能够理解题意。
## 输出
### 输出要求
1. 输出10道有梯度的练习题目。
2. 每道题目应包含题干、选项（如适用）、答案和解析。
3. 题目类型仅仅包括选择题，不涉及其它题型。
4. 题目选项不需要带序号

## Format example
[{"teststitle":"题目","checkList":["选项0","选项1","选项2","选项3"],"timuList":[],"answer":答案的下标(单选题以整形输出，多选题以数组形式输出),"type":"(1：单选题)(2：多选题)","analyze":"题目答案+题目解析内容+分析考核的知识点"},{"teststitle":"题目","checkList":["选项0","选项1","选项2","选项3"],"timuList":[],"answer":答案的下标(单选题以整形输出，多选题以数组形式输出),"type":"(1：单选题)(2：多选题)","analyze":"题目答案+题目解析内容+分析考核的知识点"},{"teststitle":"题目","checkList":["选项0","选项1","选项2","选项3"],"timuList":[],"answer":答案的下标(单选题以整形输出，多选题以数组形式输出),"type":"(1：单选题)(2：多选题)","analyze":"题目答案+题目解析内容+分析考核的知识点"},{"teststitle":"题目","checkList":["选项0","选项1","选项2","选项3"],"timuList":[],"answer":答案的下标(单选题以整形输出，多选题以数组形式输出),"type":"(1：单选题)(2：多选题)","analyze":"题目答案+题目解析内容+分析考核的知识点"},{"teststitle":"题目","checkList":["选项0","选项1","选项2","选项3"],"timuList":[],"answer":答案的下标(单选题以整形输出，多选题以数组形式输出),"type":"(1：单选题)(2：多选题)","analyze":"题目答案+题目解析内容+分析考核的知识点"},{"teststitle":"题目","checkList":["选项0","选项1","选项2","选项3"],"timuList":[],"answer":答案的下标(单选题以整形输出，多选题以数组形式输出),"type":"(1：单选题)(2：多选题)","analyze":"题目答案+题目解析内容+分析考核的知识点"},{"teststitle":"题目","checkList":["选项0","选项1","选项2","选项3"],"timuList":[],"answer":答案的下标(单选题以整形输出，多选题以数组形式输出),"type":"(1：单选题)(2：多选题)","analyze":"题目答案+题目解析内容+分析考核的知识点"},{"teststitle":"题目","checkList":["选项0","选项1","选项2","选项3"],"timuList":[],"answer":答案的下标(单选题以整形输出，多选题以数组形式输出),"type":"(1：单选题)(2：多选题)","analyze":"题目答案+题目解析内容+分析考核的知识点"},{"teststitle":"题目","checkList":["选项0","选项1","选项2","选项3"],"timuList":[],"answer":答案的下标(单选题以整形输出，多选题以数组形式输出),"type":"(1：单选题)(2：多选题)","analyze":"题目答案+题目解析内容+分析考核的知识点"},{"teststitle":"题目","checkList":["选项0","选项1","选项2","选项3"],"timuList":[],"answer":答案的下标(单选题以整形输出，多选题以数组形式输出),"type":"(1：单选题)(2：多选题)","analyze":"题目答案+题目解析内容+分析考核的知识点"}]

## 数据
${_textData}
`;

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

      this.ajax
        // .post("https://gpt4.cocorobo.cn/chat", params)
        // .post("https://claude3.cocorobo.cn/chat", params)
        .post("https://gpt4.cocorobo.cn/ai_agent_park_chat", params)
        .then(res => {
          let _data = res.data.FunctionResponse.message;
          _data = _data.replaceAll("```json", "").replaceAll("```", "");
          const match = _data.match(/\[\s*\{[\s\S]*?\}\s*\]/);
          let _result = JSON.parse(match[0]) || [];
          _result.forEach(i => {
            i.answer2 = i.answer.length ? [] : "";
            i.uuid = uuidv4();
          });
          if (_result.length > 0) {
            this.topicList = _result;
            this.showTopicIndex = 0;
            this.aiBoxLoading = false;
            this.showCard = 1;
            this.saveTaskList(1);
            // this.$message.success("一键出题成功");
          } else {
            this.$message.error("一键出题失败");
          }
          this.aiBoxLoading = false;
        })
        .catch(e => {
          this.aiBoxLoading = false;
          this.$message.error("一键出题失败");
          console.log(e);
        });
      this.insertMemorandum(
        `使用<span class="btn">一键生题</span>，生成10道随堂练习`
      );
    },
    goSetTopic() {
      if (this.courseDetail.state == 1 || this.courseDetail.state == 2) {
        window.parent.postMessage(
          { tools: "openNewCourseUpdate", cid: this.courseDetail.courseId },
          "*"
        );
      } else if (this.courseDetail.state == 3) {
        window.parent.postMessage(
          { tools: "openCourseEUpdate", cid: this.courseDetail.courseId },
          "*"
        );
      } else if (this.courseDetail.state == 4 || this.courseDetail.state == 5) {
        window.parent.postMessage(
          { tools: "openCourseAiUpdate", cid: this.courseDetail.courseId },
          "*"
        );
      }
      this.insertMemorandum(`前往<span class="btn">课程管理</span>编辑工具`);
    },
    up() {
      if (this.topicList.length && this.showTopicIndex == 0) return;
      this.showTopicIndex -= 1;
      if (this.showBottomCard == 2 || this.showBottomCard == 1) {
        this.analyzeText = "";
        this.showBottomCard = 0;
      }
    },
    next() {
      if (
        this.topicList.length &&
        this.topicList.length - 1 == this.showTopicIndex
      )
        return;
      this.showTopicIndex += 1;
      if (this.showBottomCard == 2 || this.showBottomCard == 1) {
        this.analyzeText = "";
        this.showBottomCard = 0;
      }
    },
    getAiTopic() {
      this.showMenu = !this.showMenu;
    },
    analyze() {
      this.analyzeText = "";
      if (this.showBottomCard == 2) {
        this.showBottomCard = 0;
      } else {
        this.showBottomCard = 2;
        if (!this.topicList[this.showTopicIndex].analyze) {
          this.getAnalyze(this.topicList[this.showTopicIndex]).then(res => {
            this.topicList.find(
              i => i.uuid == res.uuid
            ).analyze = `${res.analyze}\n${res.knowledgePoint}`;
            this.analyzeText = this.topicList[this.showTopicIndex].analyze;
            this.analyzeLoading = false;
          });
        } else {
          this.analyzeText = this.topicList[this.showTopicIndex].analyze;
          this.analyzeLoading = false;
        }
        this.insertMemorandum(
          `查看<span class="variable">第${this.showTopicIndex +
            1}题</span>答案解析`
        );
      }
    },
    statistics() {
      if (this.showBottomCard == 1) {
        this.showBottomCard = 0;
      } else {
        this.getStatistics();
        this.showBottomCard = 1;
        this.insertMemorandum(
          `查看<span class="variable">第${this.showTopicIndex +
            1}题</span>的答题情况`
        );
      }
    },
    getStatistics() {
      this.statisticsLoading = true;
      let params = {
        uid: this.userid,
        cid: this.courseId
      };
      this.ajax
        .get(
          this.$store.state.api + "select_courseWorksAll_classRoomHelper",
          params
        )
        .then(res => {
          let _data = res.data[0];
          let _result = [];
          _data.forEach(i => {
            i.content = JSON.parse(i.content);
            if (i.tType == 2) {
              _result.push(i);
            }
          });
          this.submitStudent = _result;
          this.statisticsLoading = false;
        });
    },
    getAiTopicByyType(type = 0) {
      this.aiBoxLoading = true;
      this.showMenu = false;
      let _msg = ``;

      let _nowTask = this.topicList[this.showTopicIndex];
      let taskText = `${_nowTask.teststitle}\n选项：\n`;
      _nowTask.checkList.forEach((i, index) => {
        taskText += `${this.chooseList[index]}：${
          i.src ? JSON.stringify(i) : i
        }\n`;
      });
      taskText += `答案：${
        _nowTask.answer.length
          ? _nowTask.answer.map(i => this.chooseList[i])
          : this.chooseList[_nowTask.answer]
      }\n`;
      if (type == 0) {
        _msg = `Language: Please use the same language as the user requirement, if the user speaks Chinese, the specific text of your answer should also be in 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. 分析用户提供的题目，识别其所考核的知识点。
2. 参考用户提供的题目，基于第一步分析的结果，出一道类似的题目，适当调整语言，使其丰富且符合{用户指定的面向对象}的认知水平。

##限制/注意事项
- 确保题目和解析的语言简明易懂，符合{用户指定的面向对象}的认知水平。
- 确保题目和解析的内容准确无误，符合科学原理。

##输出
###输出要求
1. 输出内容包含题目描述、选项（1、2、3、4）和题目解析。
2. 题目描述应简明扼要，语言丰富，符合{用户指定的题目对象}的认知水平。
3. 题目解析应解释题目的考核点和解答思路。
4. 严格按照指定输出格式输出，无需额外的说明文字。
5. 题目选项不需要带序号

## Format example
{"teststitle":"题目","checkList":["选项0","选项1","选项2","选项3"],"timuList":[],"answer":答案的下标(单选题以整形输出，多选题以数组形式输出),"type":"(1单选题)(2多选题)","analyze":"题目解析内容+分析考核的知识点","end":""}

##数据
用户提供的题目：
${taskText}    

所属学科：${this.courseDetail.name ? this.courseDetail.name : "无"}
面向对象：${this.courseDetail.classname ? this.courseDetail.classname : "无"}
`;
      } else if (type == 1) {
        _msg = `Language: Please use the same language as the user requirement, if the user speaks Chinese, the specific text of your answer should also be in Chinese.
ATTENTION: Use '##' to SPLIT SECTIONS, not '#'. Output format carefully referenced "Format example".
Instruction: Based on the context, follow "Format example", write content

#Context
##任务
你是专业的教育内容设计师，熟悉小学科学教育的教学目标和学生认知水平，能够根据给定的题目设计出符合小学科学课程标准的类似题目。
请你根据用户提供的题目、所属的学科、面向的对象，生成一道【比原有题目难度更高一点的题目】。大约比原有难度高20%。
具体步骤如下：
1. 分析用户提供的题目，分析其所考核的知识点。
2. 分析用户提供的题目，判断其考核的难度。
3. 参考用户提供的题目，基于前两步分析出来的知识点和难度水平，出一道比原有题目【更难20%左右的题目】。

##限制/注意事项
- 确保题目和解析的语言简明易懂，符合{用户指定的面向对象}的认知水平。
- 确保题目和解析的内容准确无误，符合科学原理。

##输出
###输出要求
1. 输出内容包含题目描述、选项（ABCD）和题目解析。
2. 题目描述应简明扼要，语言丰富，符合{用户指定的题目对象}的认知水平。
3. 题目解析应解释题目的考核点和解答思路。
4. 严格按照指定输出格式输出，无需额外的说明文字。
5. 题目选项不需要带序号

## Format example
{"teststitle":"题目","checkList":["选项0","选项1","选项2","选项3"],"timuList":[],"answer":答案的下标(单选题以整形输出，多选题以数组形式输出),"type":"(1单选题)(2多选题)","analyze":"题目解析内容+分析考核的知识点","end":""}

##数据
用户提供的题目：
${taskText}    

所属学科：${this.courseDetail.name ? this.courseDetail.name : "无"}
面向对象：${this.courseDetail.classname ? this.courseDetail.classname : "无"}
`;
      } else if (type == 2) {
        _msg = `Language: Please use the same language as the user requirement, if the user speaks Chinese, the specific text of your answer should also be in Chinese.
ATTENTION: Use '##' to SPLIT SECTIONS, not '#'. Output format carefully referenced "Format example".
Instruction: Based on the context, follow "Format example", write content

#Context
##任务
你是专业的教育内容设计师，熟悉小学科学教育的教学目标和学生认知水平，能够根据给定的题目设计出符合小学科学课程标准的类似题目。
请你根据用户提供的题目、所属的学科、面向的对象，生成一道【比原有题目难度容易一点的题目】，大约比原有题目容易20%。
具体步骤如下：
1. 分析用户提供的题目，分析其所考核的知识点。
2. 分析用户提供的题目，判断其考核的难度。
3. 参考用户提供的题目，基于前两步分析出来的知识点和难度水平，出一道比原有题目【更容易20%左右的题目】。

##限制/注意事项
- 确保题目和解析的语言简明易懂，符合{用户指定的面向对象}的认知水平。
- 确保题目和解析的内容准确无误，符合科学原理。

##输出
###输出要求
1. 输出内容包含题目描述、选项（ABCD）和题目解析。
2. 题目描述应简明扼要，语言丰富，符合{用户指定的题目对象}的认知水平。
3. 题目解析应解释题目的考核点和解答思路。
4. 严格按照指定输出格式输出，无需额外的说明文字。
5. 题目选项不需要带序号

## Format example
{"teststitle":"题目","checkList":["选项0","选项1","选项2","选项3"],"timuList":[],"answer":答案的下标(单选题以整形输出，多选题以数组形式输出),"type":"(1单选题)(2多选题)","analyze":"题目解析内容+分析考核的知识点","end":""}

##数据
用户提供的题目：
${taskText}    

所属学科：${this.courseDetail.name ? this.courseDetail.name : "无"}
面向对象：${this.courseDetail.classname ? this.courseDetail.classname : "无"}
`;
      } else {
        return (this.aiBoxLoading = false);
      }
      let params = {
        assistant_id: "6063369f-289a-11ef-8bf4-12e77c4cb76b",
        userId: this.userid,
        message: [{ type: "text", text: _msg }],
        session_name: uuidv4(),
        // uid: _uuid,
        file_ids: this.fileId,
        model: "gpt-4o-2024-08-06"
      };

      this.ajax
        // .post("https://gpt4.cocorobo.cn/chat", params)
        // .post("https://claude3.cocorobo.cn/chat", params)
        .post("https://gpt4.cocorobo.cn/ai_agent_park_chat", params)
        .then(res => {
          let _data = res.data.FunctionResponse.message;
          _data = _data.replaceAll("```json", "").replaceAll("```", "");
          const match = _data.match(
            /{[^{}]*"teststitle"[\s\S]*?"end":\s*""[^{}]*}/
          );
          let _result = JSON.parse(match[0]);
          (_result.answer2 = _result.answer.length ? [] : ""),
            (_result.uuid = uuidv4());
          delete _result.end;
          this.topicList.splice(this.showTopicIndex + 1, 0, _result);
          // this.saveTaskList(1);
          this.saveTaskList(2).then(_ => {
            this.saveTaskList().then(_ => {
              this.next();
            });
          });
          this.aiBoxLoading = false;
        })
        .catch(e => {
          this.aiBoxLoading = false;
          this.$message.error("智能出题失败");
          console.log(e);
        });
      if (type == 0) {
        this.insertMemorandum(
          `针对<span class="variable">第${this.showTopicIndex +
            1}题</span>生成类似题目`
        );
      } else if (type == 1) {
        this.insertMemorandum(
          `针对<span class="variable">第${this.showTopicIndex +
            1}题</span>生成更难题目`
        );
      } else if (type == 2) {
        this.insertMemorandum(
          `针对<span class="variable">第${this.showTopicIndex +
            1}题</span>生成更易题目`
        );
      }
    },
    chooseAnswer(answer) {
      if (this.showBottomCard == 2) return;
      if (this.topicList[this.showTopicIndex].isSubmit)
        return this.$message.error("该题已经提交过了");
      if (this.topicList[this.showTopicIndex].answer.length) {
        //多选题
        if (this.topicList[this.showTopicIndex].answer2.includes(answer)) {
          this.topicList[this.showTopicIndex].answer2 = this.topicList[
            this.showTopicIndex
          ].answer2.filter(i => i != answer);
        } else {
          this.topicList[this.showTopicIndex].answer2.push(answer);
        }
      } else {
        //单选题
        this.topicList[this.showTopicIndex].answer2 = answer;
      }
      return this.saveTaskList();
    },
    confirmSubmission() {
      //确认选择
      if (
        (typeof this.topicList[this.showTopicIndex].answer2 == "number" &&
          this.topicList[this.showTopicIndex].answer2 === "") ||
        this.topicList[this.showTopicIndex].answer2.length == 0
      ) {
        return this.$message.error("请先答题");
      } else {
        this.topicList[this.showTopicIndex].isSubmit = true;
        this.saveTaskList();
      }
    },
    selectTaskList() {
      this.aiBoxLoading = true;
      let params = {
        uid: this.userid,
        cid: this.courseId
      };
      this.ajax
        .get(
          this.$store.state.api + "select_courseWorks_classRoomHelper",
          params
        )
        .then(res => {
          let _data = res.data[0];
          if (_data.length) {
            //已有做的题
            let _task = JSON.parse(_data[0].content);
            let flag = false;
            this.defaultTopicList.forEach((i, index) => {
              //判断是否有新加的题
              // 检查_task中是否存在相同uuid的对象
              let exists = _task.some(i2 => i2.uuid == i.uuid);
              //如果不存在，则将i加入_task
              if (!exists) {
                _task.splice(index, 0, i);
                flag = true;
              }
            });

            if (flag) {
              this.$message.info("老师有新添加的题目");
            }

            this.topicList = _task;
            this.showCard = 1;
            this.aiBoxLoading = false;
            this.insertMemorandum(
              `读取<span class="variable">${this.topicList.length}道</span>预设题目`
            );
          } else {
            if (this.defaultTopicList.length) {
              //有默认
              this.topicList = this.defaultTopicList;
              this.showCard = 1;
              this.aiBoxLoading = false;
              this.saveTaskList();
              this.insertMemorandum(
                `读取<span class="variable">${this.topicList.length}道</span>预设题目`
              );
            } else {
              this.getChoiceTaskList().then(res => {
                if (res.length > 0) {
                  this.showCard = 1;
                  this.topicList = res;
                  // this.saveTaskList();
                  this.saveTaskList(1).then(_ => {
                    this.selectDefaultTaskList();
                  });
                  this.insertMemorandum(
                    `读取<span class="variable">${this.topicList.length}道</span>预设题目`
                  );
                } else {
                  this.showCard = 0;
                  this.aiBoxLoading = false;
                }
              });
            }
          }
        });
    },
    selectDefaultTaskList() {
      this.aiBoxLoading = true;
      let params = {
        uid: this.courseDetail.userid,
        cid: this.courseId
      };
      this.ajax
        .get(
          this.$store.state.api + "select_courseWorks_classRoomHelper",
          params
        )
        .then(res => {
          let _data = res.data[0];
          if (_data.length) {
            let _task = JSON.parse(_data[0].content);
            // this.topicList = _task;
            _task.forEach(i => {
              i.answer2 = i.answer.length ? [] : "";
              i.isSubmit = false;
            });
            this.defaultTopicList = _task;
            this.selectTaskList();
          } else {
            this.getChoiceTaskList().then(res => {
              if (res.length > 0) {
                this.showCard = 1;
                this.topicList = res;
                // this.saveTaskList();
                this.saveTaskList(1).then(_ => {
                  this.selectDefaultTaskList();
                });
              } else {
								this.showCard = 0;
                this.aiBoxLoading = false;
								if(['1'].includes(this.ttype)){
									this.getTopic();
								}else{
									this.showCard = 0;
                	this.aiBoxLoading = false;
								}
              }
            });
          }
        });
    },
    saveTaskList(type = 0) {
      if (type == 2) {
        this.aiBoxLoading = true;
        return new Promise(resolve => {
          let params = {
            uid: this.courseDetail.userid,
            cid: this.courseId
          };
          this.ajax
            .get(
              this.$store.state.api + "select_courseWorks_classRoomHelper",
              params
            )
            .then(res => {
              let _data = res.data[0];
              if (_data.length) {
                let _task = JSON.parse(_data[0].content);
                _task.splice(
                  this.showTopicIndex + 1,
                  0,
                  this.topicList[this.showTopicIndex + 1]
                );
                let params2 = [
                  {
                    uid: this.courseDetail.userid,
                    cid: this.courseId,
                    jsonData: JSON.stringify(_task)
                  }
                ];
                this.ajax
                  .post(
                    this.$store.state.api + "updateCourseWorks_classRoomHelper",
                    params2
                  )
                  .then(res => {
                    resolve();
                  });
              } else {
                resolve();
              }
            });
        });
      }
      return new Promise(resolve => {
        let params = [
          {
            uid: type === 0 ? this.userid : this.courseDetail.userid,
            cid: this.courseId,
            jsonData: JSON.stringify(this.topicList)
          }
        ];
        this.ajax
          .post(
            this.$store.state.api + "updateCourseWorks_classRoomHelper",
            params
          )
          .then(res => {
            this.aiBoxLoading = false;
            resolve();
          });
      });
    },
    studentSubmit() {
      this.saveTaskList(0).then(res => {
        this.$message.success("提交成功");
        this.selectDefaultTaskList();
      });
    },
    getChoiceTaskList() {
      return new Promise(resolve => {
        let _list = JSON.parse(this.courseDetail.chapters);
        let _result = [];
        _list.forEach(i => {
          i.chapterInfo[0].taskJson.forEach(i2 => {
            i2.toolChoose.forEach(i3 => {
              if (i3.tool.includes(45) && i3.testJson) {
                i3.testJson.testJson.forEach(i4 => {
                  _result.push({
                    ...i4,
                    isSubmit: false,
                    answer2: i4.answer.length ? [] : "",
                    uuid: uuidv4()
                  });
                });
              } else {
                return;
              }
            });
          });
        });
        resolve(_result);
      });
    },
    getAnalyze(data) {
      return new Promise(resolve => {
        this.analyzeLoading = true;

        let _choiceText = `用户提供的题目：${data.teststitle}\n选项：\n`;
        data.checkList.forEach((i, index) => {
          _choiceText += `${index + 1}：${i.src ? JSON.stringify(i) : i}\n`;
        });

        _choiceText += `答案：${
          data.answer.length ? data.answer.map(i => i + 1) : data.answer + 1
        }\n`;
        let _msg = `Language: Please use the same language as the user requirement, if the user speaks Chinese, the specific text of your answer should also be in 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. 仔细阅读用户提供的题目和背景信息，确保理解题目的要求、所属学科和年级。
2. 根据题目和背景信息，检索相关的知识点和解题方法。
3. 提供正确答案，并给出详细的解析，解释解题思路和步骤。
4. 按指定格式输出相应的内容。

##输出
###输出要求
1. 输出内容包含正确答案和详细的解析。
2. 解析应包括解题思路、步骤和相关知识点的解释。
3. 请确保解析清晰、易懂，适合对应年级的学生理解。

##Format example
{"analyze":"题目解析内容","knowledgePoint":"分析考核的知识点"}

##数据
${_choiceText}
所属学科：${this.courseDetail.name ? this.courseDetail.name : "无"}
面向对象：${this.courseDetail.classname ? this.courseDetail.classname : "无"}
`;
        let params = {
          assistant_id: "6063369f-289a-11ef-8bf4-12e77c4cb76b",
          userId: this.userid,
          message: [{ type: "text", text: _msg }],
          session_name: uuidv4(),
          // uid: _uuid,
          file_ids: this.fileId,
          model: "gpt-4o-2024-08-06"
        };

        this.ajax
          // .post("https://gpt4.cocorobo.cn/chat", params)
          // .post("https://claude3.cocorobo.cn/chat", params)
          .post("https://gpt4.cocorobo.cn/ai_agent_park_chat", params)
          .then(res => {
            let _data = res.data.FunctionResponse.message;
						// console.log(_data)
            _data = _data.replaceAll("```json", "").replaceAll("```", "");
						// console.log(_data)
            const match = _data.match(/{[^}]*"analyze"[^}]*}/);
						// console.log(match)
            let _result = JSON.parse(match[0]);
						// console.log(_result)
            resolve({ ..._result, uuid: data.uuid });
          })
          .catch(e => {
            this.analyzeLoading = false;
            this.$message.error("生成解析失败");
            console.log(e);
          });
      });
    }
  },
  mounted() {
    this.selectDefaultTaskList();
    this.insertMemorandum(`打开<span class="btn">测验</span>面板`);
    // this.getTopic();
  }
};
</script>

<style scoped>
.task {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: auto;
}
.aiCopy {
  position: absolute;
  right: 5px;
  bottom: 0%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /* transform: translate(0, -30%); */
  cursor: pointer;
}
.taskTop {
  width: 100%;
  height: 280px;
  box-sizing: border-box;
  padding: 10px;
  overflow-x: hidden;
}

.tt_title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 5px;
}

.tt_item {
  width: 100%;
  height: auto;
  margin-top: 10px;
}

.tt_i_title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tt_i_title > span:nth-of-type(2) {
  box-sizing: border-box;
  padding: 0 10px;
  height: 25px;
  background-color: #effcf5;
  color: #83e0af;
}

.tt_i_box {
  width: 100%;
  height: auto;
  display: flex;
  margin-top: 10px;
  justify-content: space-between;
}

.tt_i_b_step {
  display: flex;
  width: 100%;
  height: auto;
  margin: 10px 0;
}

.tt_i_b_step > span {
  height: 5px;
  background-color: #e0eafb;
  flex: 1;
  border-left: 2px solid #fff;
}

.tt_i_b_step > span:nth-child(-1) {
  border: none;
}

.tt_i_box > img {
  width: 100%;
  height: 50px;
}

.tt_i_b_item {
  width: auto;
  height: 90px;
  background-color: #f6f9ff;
}

.tt_i_b_title {
  width: 100%;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  border: solid 1px #e0eafb;
  color: #626466;
}

.tt_i_b_box {
  width: auto;
  min-width: 140px;
  height: 60px;
  box-sizing: border-box;
  border: solid 1px #e0eafb;
  border-top: none;
  display: flex;
}

.tt_i_b_b_item {
  width: 70px;
  min-width: 70px;
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-left: solid 1px #e0eafb;
}

.tt_i_b_box > .tt_i_b_b_item:nth-of-type(1) {
  border-left: none;
}

.tt_i_b_b_item > div {
  font-size: 14px;
  color: #949599;
}

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

.tt_i_b_b_item > span > span {
  font-size: 12px;
  font-weight: 200;
}

.aiArea {
  width: 100%;
  max-height: calc(100% - 280px);
  box-sizing: border-box;
  padding: 10px;
  overflow-x: hidden;
}

.aiBoxArea {
  width: calc(100% - 20px);
  max-height: calc(100% - 280px);
  height: auto;
  box-sizing: border-box;
  padding: 5px 10px;
  overflow-x: hidden;
  border-radius: 8px 8px 8px 8px;
  border: 1px solid #e0eafb;
  box-shadow: 0px 4px 10px 0px #1d398314;
  box-shadow: 1px 1px 20px 4px #1d39830d;
  background-color: #f6f8ff;
}

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

.aba_t_left {
  display: flex;
}

.aba_t_left > img {
  width: 25px;
  height: 25px;
  margin-right: 4px;
  position: relative;
  top: -3px;
}
.aba_t_left > span {
  font-size: 18px;
  font-weight: bold;
}

.aba_t_left > svg {
  width: 20px;
  height: 20px;
  margin-left: 10px;
  cursor: pointer;
}

.aba_t_right {
  display: flex;
  align-items: flex-end;
  color: #949599;
}

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

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

.aa_title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 5px;
}

.aa_aiBox {
  width: 100%;
  height: auto;
  border-radius: 5px;
  background-color: #f7f9ff;
  border: solid 1px #f4f4f7;
}

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

.aa_ab_noTask > img {
  width: 64px;
  height: 64px;
}

.aa_ab_noTask > span {
  margin: 5px 0;
  color: #00000099;
}

.aa_ab_nt_btn {
  width: auto;
  height: auto;
  box-sizing: border-box;
  padding: 5px 10px;
  color: #fff !important;
  background: #3681fc;
  border-radius: 50px;
  margin: 5px 0;
  cursor: pointer;
  margin-bottom: 5px !important;
}

.aa_ab_noTask > div {
  margin: 5px 0;
  color: #00000042;
  margin-bottom: 20px;
}

.aa_ab_noTask > div > span {
  color: #3681fc;
  text-decoration: underline;
  cursor: pointer;
}

/* .aa_ab_noTask > div {
  margin-bottom: 15px;
  display: flex;
  align-items: center;
}

.aa_ab_noTask > div > span {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 4px 6px;
  border-radius: 10px;
  font-size: 14px;
  background-color: white;
  margin: 0 10px;
  cursor: pointer;
  border: solid 1px #c6c7c7;
}

.aa_ab_noTask > div > span:hover {
  background-color: #0085ff;
  color: #fff;
  border-color: #0085ff;
} */

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

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

.aa_ab_t_cl_item {
  width: 95%;
  height: auto;
  cursor: pointer;
  padding: 8px;
  background-color: #fff;
  border-radius: 3px;
  border: solid 1px #fff;
  margin-top: 15px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.aa_ab_t_cl_item > span {
  word-break: break-all;
  float: left;
}

.aa_ab_t_cl_item img {
  width: 90%;
}

.aa_ab_t_cl_itemAnswer > svg {
  width: 20px;
  height: 20px;
}

.aa_ab_t_cl_itemNo {
  border-color: #ee3e3e !important;
}

.aa_ab_t_cl_itemYes {
  border-color: #3681fc !important;
  color: #3681fc !important;
}

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

.aa_ab_t_cl_itemActive:hover {
  border-color: #3681fc;
}

.topicNum {
  width: 100%;
  height: auto;
  display: flex;
  font-size: 16px;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 10px;
}

.aa_ab_t_t_d_title {
  font-weight: bold;
}

.aa_ab_t_t_d_c_item {
  margin-top: 20px;
  margin-bottom: 20px;
  display: flex;
}

.aa_ab_t_t_d_c_item > div {
  margin-left: 5px;
  margin-right: 10px;
  min-width: 20px;
  max-width: 20px;
  height: 20px;
  border-radius: 50%;
  border: solid 1px gray;
}

.aa_ab_t_t_d_c_item > span {
  font-size: 16px;
  color: black;
  display: flex;
  width: auto;
}

.aa_ab_t_t_d_c_item > span > span {
  width: 100%;
  height: auto;
  display: block;
  word-break: break-all;
}

.aa_ab_t_t_d_c_item > span > img {
  width: 80%;
  height: auto;
}

.checkInput {
  cursor: pointer;
}

.checkInput > img {
  width: 100%;
  height: 100%;
}

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

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

.aa_ab_t_t_ba_left > img {
  width: 25px;
  height: 25px;
  cursor: pointer;
}

.aa_ab_t_t_ba_left > img:nth-child(1) {
  margin-right: 20px;
}

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

.br_area {
  width: auto;
  height: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 10px;
  position: relative;
}

.br_a_active {
  background-color: #0085ff !important;
  color: #fff;
  border-color: #0085ff !important;
}

.br_area > span {
  width: 100%;
  height: 100%;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  border: solid 1px gray;
  box-sizing: border-box;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
}

.br_area > span:hover {
  background-color: #0085ff;
  color: #fff;
  border-color: #0085ff;
}

.br_a_menu {
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: 25px;
  right: 0;
  flex-direction: column;
}

.br_a_menu > span {
  width: 100%;
  height: 25px;
  background-color: #fff;
  border: solid 1px gray;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.br_a_menu > span:hover {
  color: #0085ff;
}

.analyzeCard {
  width: 100%;
  height: auto;
  padding: 10px;
  border-top: solid 1px gray;
  box-sizing: border-box;
}

.ac_btnArea {
  width: 100%;
  height: 25px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.ac_btnArea > img {
  width: 25px;
  height: 25px;
  cursor: pointer;
}

.statisticsCard {
  border-top: solid 1px gray;
  box-sizing: border-box;
  padding: 5px 10px;
}

.sc_top {
  width: 100%;
  height: 25px;
  display: flex;
  position: relative;
}

.sc_t_refresh {
  position: absolute;
  right: 0;
  width: 15px;
  height: 15px;
  cursor: pointer;
}

.sc_t_refresh > img {
  width: 100%;
  height: 100%;
}

.sc_top > div {
  display: flex;
  margin-right: 20px;
}

.sc_top > div > span {
  margin-left: 5px;
  color: #5097e1;
}

.sc_bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.sc_bottom > span {
  width: 100%;
  height: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
}

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

.sc_b_i_index {
  display: flex;
  width: 30px;
  height: 100%;
  justify-content: center;
  align-items: center;
}

.sc_b_i_progress {
  flex: 1;
}

.sc_b_i_progress >>> .el-progress__text {
  font-size: 16px !important;
}

.sc_b_i_num {
  display: flex;
  width: 50px;
  height: 100%;
  justify-content: flex-start;
  align-items: center;
}

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

.aa_ab_t_ba_submit {
  width: 100%;
  height: 35px;
  background-color: #3681fc;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border-radius: 50px;
  margin-top: 10px;
}

.aa_ab_t_ba_nextOrUp {
  width: 100%;
  height: 35px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}

.aa_ab_t_ba_nextOrUp > div {
  flex: 1;
  height: 100%;
  background-color: #3681fc;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border-radius: 50px;
}

.aa_ab_t_ba_nextOrUp > .aa_ab_t_ba_nu_disabled {
  background-color: #75aaff;
  cursor: not-allowed;
}

.aa_ab_t_ba_nu_up {
  margin-right: 10px;
}

.aa_ab_t_ba_nu_questions {
  margin-right: 20px;
  background-color: #fff !important;
  color: black !important;
  position: relative;
  cursor: pointer;
  box-sizing: border-box;
  border: solid 1px #3681fc;
  display: flex;
  justify-content: center;
  align-items: center;
}

.aa_ab_t_ba_nu_questions > svg {
  width: 20px;
  height: 20px;
  transition: 0.3s;
  /* margin-left: 5px; */
}

.aa_ab_t_ba_nu_q_menu {
  width: auto;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: calc(100% + 5px);
  right: 0;
  flex-direction: column;
  background-color: #fff;
  padding: 5px 10px;
  border-radius: 5px;
  box-shadow: 0 0 5px #ccc;
}
.aa_ab_t_ba_nu_q_menu > span {
  width: auto;
  height: auto;
  padding: 8px;
  background-color: #fff;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 5px;
}

.aa_ab_t_ba_nu_q_menu > span:hover {
  background-color: #f3f7fd;
}

.aa_ab_t_ba_nu_next {
  margin-left: 10px;
}

.aa_ab_t_message {
  width: 100%;
  height: 35px;
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.aa_ab_t_m_btn {
  display: flex;
  justify-content: center;
  align-items: center;
}

.aa_ab_t_m_btn > span {
  margin-left: 15px;
  color: #3681fc;
  text-decoration: underline;
  cursor: pointer;
}

.aa_ab_t_m_btnActive {
  font-weight: bold;
  color: #0061ff !important;
  transform: scale(1.1, 1.1);
}

.aa_ab_t_m_answer {
  font-weight: bold;
}

.aa_ab_t_m_answer > span {
  color: #0061ff !important;
}

.aa_ab_t_ba_box {
  background-color: #ffffff;
  border-radius: 3px;
  padding: 8px;
  margin-top: 10px;
}
</style>