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

<template>
  <div class="countdown">
    <div class="c_changeType" v-if="showType == 0">
      <el-button-group>
        <el-button
          :type="isCountdown ? 'danger' : type == 0 ? 'primary' : ''"
          @click.stop="changeType(0)"
          :disabled="isCountdown || isKeepTime"
        >
          倒计时
        </el-button>

        <el-button
          :type="isKeepTime ? 'danger' : type == 1 ? 'primary' : ''"
          @click.stop="changeType(1)"
          :disabled="isCountdown || isKeepTime"
        >
          计时器
        </el-button>
      </el-button-group>
    </div>

    <div class="c_time" v-if="showType == 0">
      <div class="c_t_item" v-if="type == 0">
        <div>
          <span v-if="!isCountdown"
            ><el-button class="c_t_i_btn" @click.stop="addTime(600)"
              >+</el-button
            ></span
          >{{ countdownTimeShow.m1
          }}<span v-if="!isCountdown"
            ><el-button class="c_t_i_btn" @click.stop="reduceTime(600)"
              >-</el-button
            ></span
          >
        </div>
        <div>
          <span v-if="!isCountdown"
            ><el-button class="c_t_i_btn" @click.stop="addTime(60)"
              >+</el-button
            ></span
          >{{ countdownTimeShow.m2
          }}<span v-if="!isCountdown"
            ><el-button class="c_t_i_btn" @click.stop="reduceTime(60)"
              >-</el-button
            ></span
          >
        </div>
        <span>:</span>
        <div>
          <span v-if="!isCountdown"
            ><el-button class="c_t_i_btn" @click.stop="addTime(10)"
              >+</el-button
            ></span
          >{{ countdownTimeShow.s1
          }}<span v-if="!isCountdown"
            ><el-button class="c_t_i_btn" @click.stop="reduceTime(10)"
              >-</el-button
            ></span
          >
        </div>
        <div>
          <span v-if="!isCountdown"
            ><el-button class="c_t_i_btn" @click.stop="addTime(1)"
              >+</el-button
            ></span
          >{{ countdownTimeShow.s2
          }}<span v-if="!isCountdown"
            ><el-button class="c_t_i_btn" @click.stop="reduceTime(1)"
              >-</el-button
            ></span
          >
        </div>
      </div>
      <div class="c_t_item" v-if="type == 1">
        <div>{{ keepTimeShow.m1 }}</div>
        <div>{{ keepTimeShow.m2 }}</div>
        <span>:</span>
        <div>{{ keepTimeShow.s1 }}</div>
        <div>{{ keepTimeShow.s2 }}</div>
      </div>
    </div>

    <div class="c_choiceTime" v-if="type == 0 && showType == 0">
      <div class="c_title">
        <span>倒计时长</span>
      </div>
      <div class="c_ct_box">
        <span @click.stop="setCountdownTime(30)">30秒</span>
        <span @click.stop="setCountdownTime(60)">1分钟</span>
        <span @click.stop="setCountdownTime(120)">2分钟</span>
        <span @click.stop="setCountdownTime(180)">3分钟</span>
        <span @click.stop="setCountdownTime(300)">5分钟</span>
        <span @click.stop="setCountdownTime(360)">6分钟</span>
        <span @click.stop="setCountdownTime(480)">8分钟</span>
        <span @click.stop="setCountdownTime(600)">10分钟</span>
      </div>
    </div>

    <div class="c_behaviorTag" v-if="showType == 0">
      <div class="c_title">
        <span>行为标签</span>
        <div class="c_t_btnArea">
          <el-button-group>
            <el-button
              size="mini"
              :disabled="isCountdown || isKeepTime"
              :type="behaviorTagType == 0 ? 'primary' : 'info'"
              @click.stop="changeBehaviorTagType(0)"
            >
              常用
            </el-button>

            <el-button
              size="mini"
              :disabled="isCountdown || isKeepTime"
              :type="behaviorTagType == 1 ? 'primary' : 'info'"
              @click.stop="changeBehaviorTagType(1)"
            >
              更多
            </el-button>
          </el-button-group>
        </div>
      </div>

      <div
        class="c_bt_box"
        v-loading="behaviorTagMoreLoading && behaviorTagType == 1"
      >
        <span
          v-if="behaviorTagType == 1"
          :class="[choiceBehavior.includes(item) ? 'c_bt_b_active' : '']"
          v-for="(item, index) in behaviorTagMore"
          @click.stop="choiceBehaviorTag(item)"
          :key="behaviorTagType + '-' + index"
          >{{ item }}</span
        >
        <span
          v-if="behaviorTagType == 0"
          :class="[choiceBehavior.includes(item) ? 'c_bt_b_active' : '']"
          v-for="(item, index) in behaviorTagCommon"
          @click.stop="choiceBehaviorTag(item)"
          :key="behaviorTagType + '-' + index"
          >{{ item }}</span
        >
      </div>
    </div>

    <div class="c_btnArea" v-if="showType == 0">
      <span @click.stop="music()" :class="[sourceActive ? 'sourceActive' : '']"
        >音乐</span
      >
      <div class="c_ba_startArea">
        <div
          :class="[!isCountdown ? 'c_ba_startType' : 'c_ba_startType2']"
          v-if="type == 0"
          @click.stop="countdownTimeFn()"
        >
          <svg
            v-if="!isCountdown"
            t="1721117381559"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="12941"
            width="64"
            height="64"
          >
            <path
              d="M161.2 839.9v-654c0-56.1 60.7-91.1 109.3-63.1l566.3 327c48.6 28 48.6 98.1 0 126.2L270.4 903c-48.5 28-109.2-7.1-109.2-63.1z"
              p-id="12942"
            ></path>
          </svg>
          <svg
            v-else
            t="1721198913879"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="4266"
            width="64"
            height="64"
          >
            <path
              d="M426.666667 138.666667v746.666666a53.393333 53.393333 0 0 1-53.333334 53.333334H266.666667a53.393333 53.393333 0 0 1-53.333334-53.333334V138.666667a53.393333 53.393333 0 0 1 53.333334-53.333334h106.666666a53.393333 53.393333 0 0 1 53.333334 53.333334z m330.666666-53.333334H650.666667a53.393333 53.393333 0 0 0-53.333334 53.333334v746.666666a53.393333 53.393333 0 0 0 53.333334 53.333334h106.666666a53.393333 53.393333 0 0 0 53.333334-53.333334V138.666667a53.393333 53.393333 0 0 0-53.333334-53.333334z"
              p-id="4267"
            ></path>
          </svg>
          <!-- <svg v-else t="1721117616634" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13970" width="64" height="64"><path d="M128 128m53.333333 0l661.333334 0q53.333333 0 53.333333 53.333333l0 661.333334q0 53.333333-53.333333 53.333333l-661.333334 0q-53.333333 0-53.333333-53.333333l0-661.333334q0-53.333333 53.333333-53.333333Z" p-id="13971"></path></svg> -->
        </div>
        <div
          :class="[!isKeepTime ? 'c_ba_startType' : 'c_ba_startType2']"
          v-if="type == 1"
          @click.stop="keepTimeFn()"
        >
          <svg
            v-if="!isKeepTime"
            t="1721117381559"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="12941"
            width="64"
            height="64"
          >
            <path
              d="M161.2 839.9v-654c0-56.1 60.7-91.1 109.3-63.1l566.3 327c48.6 28 48.6 98.1 0 126.2L270.4 903c-48.5 28-109.2-7.1-109.2-63.1z"
              p-id="12942"
            ></path>
          </svg>
          <svg
            v-else
            t="1721198913879"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="4266"
            width="64"
            height="64"
          >
            <path
              d="M426.666667 138.666667v746.666666a53.393333 53.393333 0 0 1-53.333334 53.333334H266.666667a53.393333 53.393333 0 0 1-53.333334-53.333334V138.666667a53.393333 53.393333 0 0 1 53.333334-53.333334h106.666666a53.393333 53.393333 0 0 1 53.333334 53.333334z m330.666666-53.333334H650.666667a53.393333 53.393333 0 0 0-53.333334 53.333334v746.666666a53.393333 53.393333 0 0 0 53.333334 53.333334h106.666666a53.393333 53.393333 0 0 0 53.333334-53.333334V138.666667a53.393333 53.393333 0 0 0-53.333334-53.333334z"
              p-id="4267"
            ></path>
          </svg>
          <!-- <svg v-else t="1721117616634" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13970" width="64" height="64"><path d="M128 128m53.333333 0l661.333334 0q53.333333 0 53.333333 53.333333l0 661.333334q0 53.333333-53.333333 53.333333l-661.333334 0q-53.333333 0-53.333333-53.333333l0-661.333334q0-53.333333 53.333333-53.333333Z" p-id="13971"></path></svg> -->
        </div>
      </div>
      <span @click.stop="reset()">重置</span>
    </div>

    <div
      style="margin-bottom:30px;padding:20px;cursor: pointer;"
      v-if="showType == 0"
    >
      <span @click.stop="changeShowType(1)">教学活动备忘>></span>
    </div>

    <div
      v-if="showType == 1"
      style="padding-top:20px;height:100%;box-sizing: border-box;"
    >
      <span style="padding:20px;cursor: pointer;" @click.stop="changeShowType(0)"
        ><<返回</span
      >

      <div class="c_step" ref="stepRef" v-loading="memorandumLoading">
        <el-timeline>
          <el-timeline-item
            v-for="(item, index) in memorandumList"
            :key="index"
            :timestamp="item.time"
          >
					<div v-html="item.text"></div>
            <!-- <span v-html="activity.content"></span> -->
          </el-timeline-item>
        </el-timeline>
      </div>
    </div>
    <mini-audio
      v-show="false"
      ref="audioRef"
      :loop="true"
      :audio-source="sourceUrl"
    ></mini-audio>
    <mini-audio
      v-show="false"
      ref="endSourceUrlRef"
      :loop="false"
      :audio-source="endSourceUrl"
    ></mini-audio>
  </div>
</template>

<script>
import { v4 as uuidv4 } from "uuid";
export default {
  props: {
    courseDetail: {
      type: Object,
      default: () => {}
    },
    fileId: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      userid: this.$route.query.userid,
      courseId: this.$route.query.courseId,
      showType: 0,
      sourceUrl:
        "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%80%92%E8%AE%A1%E6%97%B6%E9%9F%B3%E4%B9%901721355956636.mp3",
      endSourceUrl:
        "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%80%92%E6%95%B010%E7%A7%92%E5%8F%A0%E5%8A%A0%E9%9F%B3%E6%95%881721638403882.MP3",
      sourceActive: false,
      type: 0, //0：倒计时   1：计时器
      isCountdown: false,
      isKeepTime: false,
      countdownTime: 0,
      countdownTimeDefault: 0,
      countdownTimeTimer: null,
      keepTime: 0,
      keepTimeTimer: null,
      startCountdownTime: 0,
      behaviorTagType: 0, //0：常用  1：更多
      behaviorTagMore: [], //更多
      behaviorTagMoreLoading: false,
      behaviorTagCommon: [
        "小组讨论",
        "小组汇报",
        "动手实验",
        "课堂游戏",
        "自主学习",
        "作品展示",
        "学生演讲",
        "学生分享",
        "随堂练习",
        "快速问答",
        "阅读资料",
        "观察记录"
      ], //常用
      choiceBehavior: [],
      memorandumList: [],
			memorandumLoading:false,
    };
  },
  computed: {
    countdownTimeShow() {
      let _result = {
        m1: 0,
        m2: 0,
        s1: 0,
        s2: 0
      };

      if (this.countdownTime <= 0) return _result;

      let minutes = Math.floor(this.countdownTime / 60);
      let seconds = this.countdownTime % 60;
      if (minutes > 9) {
        _result.m1 = Math.floor(minutes / 10);
        _result.m2 = minutes % 10;
      } else {
        _result.m1 = 0;
        _result.m2 = minutes;
      }
      if (seconds > 9) {
        _result.s1 = Math.floor(seconds / 10);
        _result.s2 = seconds % 10;
      } else {
        _result.s1 = 0;
        _result.s2 = seconds;
      }

      return _result;
    },
    keepTimeShow() {
      let _result = {
        m1: 0,
        m2: 0,
        s1: 0,
        s2: 0
      };

      if (this.keepTime <= 0) return _result;

      let minutes = Math.floor(this.keepTime / 60);
      let seconds = this.keepTime % 60;
      if (minutes > 9) {
        _result.m1 = Math.floor(minutes / 10);
        _result.m2 = minutes % 10;
      } else {
        _result.m1 = 0;
        _result.m2 = minutes;
      }
      if (seconds > 9) {
        _result.s1 = Math.floor(seconds / 10);
        _result.s2 = seconds % 10;
      } else {
        _result.s1 = 0;
        _result.s2 = seconds;
      }

      return _result;
    }
  },
  watch: {
    countdownTime(newValue) {
      if (this.isCountdown && this.countdownTimeTimer && newValue == 0) {
        this.countdownTimeFinish();
      } else if (!this.isCountdown && !this.countdownTimeTimer) {
        this.countdownTimeDefault = newValue;
      }
      if (this.$refs.audioRef.playing && this.sourceActive && newValue == 10) {
        this.$refs.audioRef.stop();
        this.$refs.endSourceUrlRef.play();
        // this.$refs.audioRef.setVolume(newValue / 10);
      }
    }
  },
  methods: {
    insertMemorandum(_html) {
			return;
      //保存行为操作
      //variable
      //btn
      let params = [
        {
          uid: this.userid,
          courseId: this.courseId,
          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);
        });
    },
    changeShowType(newType) {
      this.showType = newType;
      if (this.showType == 1) {
				this.selectMemorandum()
      }
    },
    changeType(newType) {
      if (this.isCountdown || this.isKeepTime) return;
      this.type = newType;
    },
    changeBehaviorTagType(newType) {
      if (this.isCountdown) return this.$message.error("正在倒计时");
      if (this.isKeepTime) return this.$message.error("正在计时");
      if (this.behaviorTagType == newType) return;
      this.choiceBehavior = [];
      this.behaviorTagType = newType;
      if (this.behaviorTagType == 1 && this.behaviorTagMore.length <= 0) {
        this.getBehaviorTagMore();
      }
    },
    setCountdownTime(newTime = 0) {
      if (this.isCountdown) return this.$message.error("正在倒计时");
      if (this.isKeepTime) return this.$message.error("正在计时");
      this.countdownTime = newTime;
    },
    addTime(time = 0) {
      if (this.isCountdown) return console.log("正在计时");
      if (this.countdownTime >= 3600) {
        return this.$message.error("倒计时最高一小时");
      }
      if (this.countdownTime + time > 3600) {
        return (this.countdownTime = 3600);
      }
      this.countdownTime += time;
    },
    reduceTime(time = 0) {
      if (this.isCountdown) return console.log("正在计时");
      if (this.countdownTime - time < 0) return (this.countdownTime = 0);
      this.countdownTime -= time;
    },
    choiceBehaviorTag(tag) {
      if (this.isCountdown) return this.$message.error("正在倒计时");
      if (this.isKeepTime) return this.$message.error("正在计时");
      let _index = this.choiceBehavior.findIndex(i => i == tag);
      if (_index != -1) {
        // 数组删除指定下标数据
        this.choiceBehavior.splice(_index, 1);
      } else {
        this.choiceBehavior.push(tag);
      }
    },
    countdownTimeFn() {
      if (this.isCountdown) {
        //取消
        clearInterval(this.countdownTimeTimer);
        this.countdownTimeTimer = null;
        this.isCountdown = false;
        if (this.$refs.audioRef.playing && this.sourceActive) {
          this.$refs.audioRef.pause();
        }
        this.$message.success("已暂停倒计时");
      } else {
        //开始
        if (this.countdownTime == 0)
          return this.$message.error("请设置倒计时时间");
        this.isCountdown = true;
        this.$message.success("已开始倒计时");
        if (this.sourceActive) {
          this.$refs.audioRef.setVolume(0);
          this.$refs.audioRef.play();
        }
        if (this.countdownTime >= 20 && this.sourceActive) {
          let volume = 0;
          let sourceTimer = setInterval(() => {
            volume += 1;
            if (volume >= 10) {
              volume = 10;
              clearInterval(sourceTimer);
              sourceTimer = null;
            }
            this.$refs.audioRef.setVolume(volume / 10);
          }, 1000);
        } else if (
          this.countdownTime <= 20 &&
          this.countdownTime > 10 &&
          this.sourceActive
        ) {
          this.$refs.audioRef.setVolume(1);
        } else if (this.countdownTime <= 10 && this.sourceActive) {
          this.$refs.audioRef.stop();
          this.$refs.endSourceUrlRef.setProgress(
            (10 - this.countdownTime) / 10
          );
          this.$refs.endSourceUrlRef.play();
        }
        this.countdownTimeTimer = setInterval(() => {
          this.isCountdown = true;
          this.countdownTime -= 1;
        }, 1000);
        let timeShow = `${this.countdownTimeShow.m1}${this.countdownTimeShow.m2}分钟${this.countdownTimeShow.s1}${this.countdownTimeShow.s2}秒`;
        this.insertMemorandum(
          `设置<span class="variable"></span><span class="btn">倒计时${timeShow}</span>${
            this.choiceBehavior.length > 0
              ? "，用于" +
                '<span class="btn">' +
                this.choiceBehavior.join("、") +
                "</span>"
              : ""
          }`
        );
      }
    },
    countdownTimeFinish() {
      clearInterval(this.countdownTimeTimer);
      this.countdownTimeTimer = null;
      this.isCountdown = false;
      this.$parent.type = 1;
      this.$parent.itemType = 3;
      if (this.$refs.audioRef.playing && this.sourceActive) {
        this.$refs.audioRef.pause();
      }
      let _data = {
        type: "countdown",
        time: this.countdownTimeDefault,
        tag: this.choiceBehavior
      };
      this.insertMemorandum(`<span class="btn">倒计时</span>结束`);
      this.insertData(_data);
    },
    keepTimeFn() {
      if (this.isKeepTime) {
        this.isKeepTime = false;
        clearInterval(this.keepTimeTimer);
        this.keepTimeTimer = null;
        if (this.$refs.audioRef.playing && this.sourceActive) {
          this.$refs.audioRef.pause();
        }
        this.$message.success("已停止计时");
      } else {
        this.isKeepTime = true;
        if (this.sourceActive) {
          this.$refs.audioRef.setVolume(1);
          this.$refs.audioRef.play();
        }
        this.keepTimeTimer = setInterval(() => {
          this.keepTime += 1;
        }, 1000);
        this.$message.success("已开始计时");
        this.insertMemorandum(
          `使用<span class="btn">计时器</span>${
            this.choiceBehavior.length > 0
              ? "，用于" +
                '<span class="btn">' +
                this.choiceBehavior.join("、") +
                "</span>"
              : ""
          }`
        );
      }
    },
    music() {
      this.sourceActive = !this.sourceActive;
      if (
        (this.$refs.audioRef.playing || this.$refs.endSourceUrlRef.playing) &&
        !this.sourceActive
      ) {
        this.$refs.audioRef.pause();
        this.$refs.endSourceUrlRef.stop();
      } else if (this.sourceActive) {
        if (this.isCountdown) {
          if (this.countdownTime > 10) {
            this.$refs.audioRef.play();
          } else {
            this.$refs.audioRef.stop();
            this.$refs.endSourceUrlRef.setProgress(
              (10 - this.countdownTime) / 10
            );
            this.$refs.endSourceUrlRef.play();
          }
        } else if (this.isKeepTime) {
          this.$refs.audioRef.play();
        }
      }
    },
    reset() {
      if (this.type == 0) {
        if (this.isCountdown) {
          this.$confirm("正在倒计时！确定重置倒计时吗？", "提醒", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
            .then(_ => {
              clearInterval(this.countdownTimeTimer);
              this.countdownTimeTimer = null;
              // this.countdownTime = this.countdownTimeDefault;
              this.countdownTime = 0;
              this.isCountdown = false;
              this.choiceBehavior = [];
              this.$message.success("已重置");
              if (this.$refs.audioRef.playing) {
                this.$refs.audioRef.pause();
              }
            })
            .catch(_ => {
              console.log("取消重置");
            });
        } else {
          this.$confirm("确定重置倒计时吗？", "提醒", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
            .then(_ => {
              if (this.$refs.audioRef.playing) {
                this.$refs.audioRef.pause();
              }
              // this.countdownTime = this.countdownTimeDefault;
              this.countdownTime = 0;
              this.isCountdown = false;
              this.choiceBehavior = [];
              this.$message.success("已重置");
            })
            .catch(_ => {
              console.log("取消重置");
            });
        }
      } else if (this.type == 1) {
        if (this.isKeepTime) {
          this.$confirm("正在计时！确定重置计时吗？", "提醒", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
            .then(_ => {
              if (this.$refs.audioRef.playing) {
                this.$refs.audioRef.pause();
              }
              clearInterval(this.keepTimeTimer);
              this.keepTimeTimer = null;
              let _data = {
                type: "keepTime",
                time: this.keepTime,
                tag: this.choiceBehavior
              };
							let timeShow = `${this.keepTimeShow.m1}${this.keepTimeShow.m2}分钟${this.keepTimeShow.s1}${this.keepTimeShow.s2}秒`;
          this.insertMemorandum(
            `结束计时器，<span class="btn">计时</span><span class="variable">${timeShow}</span>${
              this.choiceBehavior.length > 0
                ? "，用于" +
                  '<span class="btn">' +
                  this.choiceBehavior.join("、") +
                  "</span>"
                : ""
            }`
          );
              this.keepTime = 0;
              this.isKeepTime = false;
              this.insertData(_data);
							
            })
            .catch(_ => {
              console.log("取消重置");
            });
        } else {
          let _data = {
            type: "keepTime",
            time: this.keepTime,
            tag: this.choiceBehavior
          };
          if (this.$refs.audioRef.playing) {
            this.$refs.audioRef.pause();
          }
          this.insertData(_data);
          let timeShow = `${this.keepTimeShow.m1}${this.keepTimeShow.m2}分钟${this.keepTimeShow.s1}${this.keepTimeShow.s2}秒`;
          this.insertMemorandum(
            `结束计时器，<span class="btn">计时</span><span class="variable">${timeShow}</span>${
              this.choiceBehavior.length > 0
                ? "，用于" +
                  '<span class="btn">' +
                  this.choiceBehavior.join("、") +
                  "</span>"
                : ""
            }`
          );
          this.keepTime = 0;
          this.isKeepTime = false;
          // this.choiceBehavior = [];
          this.$message.success("已重置");
        }
      }
    },
    getBehaviorTagMore() {
      this.behaviorTagMoreLoading = 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";
      });
      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
##任务
在以下课堂中，如果老师设置一个倒计时，他可能想开展哪些教学活动？每个教学活动使用4个字，进行简洁精确的描述，请返回所有可能的行为名称，不需要额外的解释。请返回最有可能的12个活动类

##Format example
["小组讨论","小组汇报","动手实验","课堂游戏","自主学习","作品展示","学生演讲","学生分享","随堂练习","快速问答","阅读资料","观察记录"]

##课堂内容
${_textData}
`;

      this.behaviorTagMore = [];
      let params = {
        assistant_id: "6063369f-289a-11ef-8bf4-12e77c4cb76b",
        userId: this.userid,
        message: [{ type: "text", text: _msg }],
        session_name: uuidv4(),
        file_ids: this.fileId
      };
      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 => {
          // console.log(res)
          let _data = res.data.FunctionResponse.message;
          _data = _data.replaceAll("```json", "").replaceAll("```", "");
          const match = _data.match(/\[\s*[^]*\s*\]/);
          let _result = JSON.parse(match[0]);
          this.behaviorTagMore = _result;
          this.behaviorTagMoreLoading = false;
        })
        .catch(e => {
          this.behaviorTagMoreLoading = false;
          this.$message.error("获取更多行为标签失败");
          this.behaviorTagType = 0;
          this.behaviorTagMore = [];
          console.log(e);
        });
    },
    insertData(data = null) {
      if (!data) return;
      let params = [
        {
          uid: this.userid,
          courseId: this.courseId,
          content: JSON.stringify(data)
        }
      ];
      this.ajax
        .post(
          this.$store.state.api + "insert_systemOperation_classRoomHelper",
          params
        )
        .then(res => {
          if (res.data == 1) {
            console.log("保存成功");
          } else {
            console.log("保存失败");
          }
        })
        .catch(e => {
          console.log("保存失败👇");
          console.log(e);
        });
    },
		selectMemorandum(){
			return;
			this.memorandumLoading = false;
			let params = {
				uid:this.userid,
				courseId:this.courseId,
			}
			this.memorandumList = [];
			this.ajax.get(this.$store.state.api+"select_systemOperation_countdownBehavior",params).then(res=>{
				let _data = res.data[0];
				if(_data.length){
					this.memorandumList = _data;
				}else{
					this.memorandumList = [];
				}
				this.memorandumLoading = false;
				console.log(res);
			}).catch(err=>{
				console.log(err)
				this.memorandumLoading = false;
				this.$message.error("获取行为备忘失败")
			})
		}
  }
};
</script>

<style scoped>
.countdown {
  width: 100%;
  height: 100%;

  /* display: flex;
  flex-direction: column;
  align-items: center; */
  /* justify-content: center; */
  padding: auto;
  overflow: auto;
}

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

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

.c_t_item {
  font-size: 6em;
  font-weight: bold;
  color: black;
  display: flex;
  align-items: center;
  justify-content: center;
}

.c_t_item > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.c_t_item > div > span {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 25px;
  height: 25px;
}

.c_t_i_btn {
  padding: 5px 10px !important;
}

.c_t_item > span {
  margin: 0 10px;
  position: relative;
  top: -11px;
}

.c_choiceTime {
  width: 100%;
  height: auto;
  box-sizing: border-box;
  padding: 20px;
}

.c_title {
  display: flex;
  align-items: center;

  width: 100%;
}

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

.c_t_btnArea {
  margin-left: 20px;
}

.c_ct_box {
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;
  padding-top: 10px;
}

.c_ct_box > span {
  width: 20%;
  height: 30px;
  border-radius: 20px;
  box-sizing: border-box;
  border: solid 1px #d0d0d0;
  margin: 10px 2%;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.1s;
  cursor: pointer;
}

.c_ct_box > span:hover {
  background-color: #409eff;
  border: solid 1px #409eff;
  color: #fff;
}

.c_behaviorTag {
  width: 100%;
  height: auto;
  box-sizing: border-box;
  padding: 20px;
}

.c_bt_box {
  width: 100%;
  height: auto;
  min-height: 100px;
  display: flex;
  align-items: flex-start;
  justify-content: space-around;
  flex-wrap: wrap;
  overflow: auto;
  margin-top: 10px;
}

.c_bt_box > span {
  width: auto;
  height: auto;
  padding: 5px 8px;
  border-radius: 8px;
  border: solid 1px #d0d0d0;
  margin: 10px 0;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.1s;
  cursor: pointer;
}

.c_bt_b_active {
  background-color: #409eff !important;
  border: solid 1px #409eff !important;
  color: #fff;
}

.c_bt_box > span:hover {
  background-color: #409eff !important;
  border: solid 1px #409eff !important;
  color: #fff !important;
}

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

.c_btnArea > span {
  width: auto;
  height: auto;
  padding: 5px 10px;
  border: solid 1px #d0d0d0;
  background-color: #fff;
  border-radius: 20px;
  cursor: pointer;
  transition: 0.2s;
}

.c_btnArea > span:hover {
  border: solid 1px #409eff;
  background-color: #409eff;
  color: #fff;
}

.c_ba_startArea {
  width: 60px;
  height: 60px;
  margin: 0 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.c_ba_startType {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: solid 2px #707070;
  color: #707070;
  cursor: pointer;
  transition: 0.2s;
}

.c_ba_startType > svg {
  fill: #707070;
  width: 70%;
  height: 70%;
  position: relative;
  left: 3px;
  transition: 0.2s;
}

.c_ba_startType:hover {
  border: solid 2px #409eff;
}

.c_ba_startType:hover > svg {
  fill: #409eff;
}

.c_ba_startType2 {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: solid 2px #f5222d;
  color: #f5222d;
  cursor: pointer;
  transition: 0.2s;
}

.c_ba_startType2 > svg {
  fill: #f5222d;
  width: 70%;
  height: 70%;
  transition: 0.2s;
}

.c_ba_startType2:hover {
  border: solid 2px #cf1322;
}

.c_ba_startType2:hover > svg {
  fill: #cf1322;
}

.sourceActive {
  border: solid 1px #409eff !important;
  background-color: #409eff !important;
  color: #fff;
}

.c_step {
  width: 100%;
  height: calc(100% - 80px);
  margin-top: 20px;
  padding: 20px 50px;
  box-sizing: border-box;
  overflow: auto;
}
.c_s_item {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>