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

<template>
  <div class="countdown">
    <div class="c_timeBox" v-if="showType == 0">
      <div class="c_tb_top">
        <div class="c_time">
          <div class="c_t_item" v-if="type == 0">
            <div
              class="c_t_i_card"
              v-if="!showCountDownInput1"
              @click="changeShowInput1(true)"
            >
              <div>
                <span class="c_t_i_btnTop" v-if="!isCountdown"
                  ><el-button class="c_t_i_btn" @click.stop="addTime(600)"
                    >+</el-button
                  ></span
                >
                <div>{{ countdownTimeShow.m1 }}</div>
                <span class="c_t_i_btnBottom" v-if="!isCountdown"
                  ><el-button class="c_t_i_btn" @click.stop="reduceTime(600)"
                    >-</el-button
                  ></span
                >
              </div>
              <div>
                <span class="c_t_i_btnTop" v-if="!isCountdown"
                  ><el-button class="c_t_i_btn" @click.stop="addTime(60)"
                    >+</el-button
                  ></span
                >
                <div>{{ countdownTimeShow.m2 }}</div>
                <span class="c_t_i_btnBottom" v-if="!isCountdown"
                  ><el-button class="c_t_i_btn" @click.stop="reduceTime(60)"
                    >-</el-button
                  ></span
                >
              </div>
              <span>{{ lang.ssMinute }}</span>
            </div>

            <div class="c_t_i_card" v-else v-click-outside="handleBlur1">
              <div class="c_t_i_c_inputBox">
                <el-input
                  v-model.number="countDownInputValue1"
                  ref="countDownInput1Ref"
                  :min="0"
                  :max="60"
                  @keyup.enter.native="changeShowInput1(false)"
                ></el-input>
              </div>
              <span>{{ lang.ssMinute }}</span>
            </div>

            <div
              class="c_t_i_card"
              v-if="!showCountDownInput2"
              @click="changeShowInput2(true)"
            >
              <div>
                <span class="c_t_i_btnTop" v-if="!isCountdown"
                  ><el-button class="c_t_i_btn" @click.stop="addTime(10)"
                    >+</el-button
                  ></span
                >
                <div>{{ countdownTimeShow.s1 }}</div>
                <span class="c_t_i_btnBottom" v-if="!isCountdown"
                  ><el-button class="c_t_i_btn" @click.stop="reduceTime(10)"
                    >-</el-button
                  ></span
                >
              </div>
              <div>
                <span class="c_t_i_btnTop" v-if="!isCountdown"
                  ><el-button class="c_t_i_btn" @click.stop="addTime(1)"
                    >+</el-button
                  ></span
                >
                <div>{{ countdownTimeShow.s2 }}</div>
                <span class="c_t_i_btnBottom" v-if="!isCountdown"
                  ><el-button class="c_t_i_btn" @click.stop="reduceTime(1)"
                    >-</el-button
                  ></span
                >
              </div>
              <span>{{ lang.ssSecond }}</span>
            </div>
            <div class="c_t_i_card" v-else v-click-outside="handleBlur2">
              <div class="c_t_i_c_inputBox">
                <el-input
                  v-model.number="countDownInputValue2"
                  :min="0"
                  :max="60"
                  ref="countDownInput2Ref"
                  @keyup.enter.native="changeShowInput2(false)"
                ></el-input>
              </div>
              <span>{{ lang.ssSecond }}</span>
            </div>
          </div>
          <div class="c_t_item" v-if="type == 1">
            <div class="c_t_i_card">
              <div>
                <div>{{ keepTimeShow.m1 }}</div>
              </div>
              <div>
                <div>{{ keepTimeShow.m2 }}</div>
              </div>
              <span>{{ lang.ssMinute }}</span>
            </div>

            <div class="c_t_i_card">
              <div>
                <div>{{ keepTimeShow.s1 }}</div>
              </div>
              <div>
                <div>{{ keepTimeShow.s2 }}</div>
              </div>
              <span>{{ lang.ssSecond }}</span>
            </div>
          </div>
        </div>

        <div class="c_choiceTime" v-if="type == 0">
          <div class="c_title">
            <span>{{ lang.ssQuickSettings }}</span>
          </div>
          <div class="c_ct_box">
            <span @click="setCountdownTime(30)">{{ lang.ss30Seconds }}</span>
            <span @click="setCountdownTime(60)">{{ lang.ss1Minute }}</span>
            <span @click="setCountdownTime(120)">{{ lang.ss2Minutes }}</span>
            <span @click="setCountdownTime(180)">{{ lang.ss3Minutes }}</span>
            <span @click="setCountdownTime(300)">{{ lang.ss5Minutes }}</span>
            <span @click="setCountdownTime(360)">{{ lang.ss6Minutes }}</span>
            <span @click="setCountdownTime(480)">{{ lang.ss8Minutes }}</span>
            <span @click="setCountdownTime(600)">{{ lang.ss10Minutes }}</span>
          </div>
        </div>

        <div class="c_behaviorTag">
          <div class="c_title">
            <span>{{ lang.ssBehaviorTags }}</span>
            <div class="c_t_btnArea">
              <span
                @click="changeBehaviorTagType(0)"
                :class="[behaviorTagType == 0 ? 'c_t_ba_active' : '']"
                >{{ lang.ssCommon }}</span
              >
              <span
                @click="changeBehaviorTagType(1)"
                :class="[behaviorTagType == 1 ? 'c_t_ba_active' : '']"
                >{{ lang.ssMore }}</span
              >
              <!-- <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"
          >
          <template v-if="behaviorTagType == 1">
            <span
              :class="[choiceBehavior.includes(item) ? 'c_bt_b_active' : '']"
              v-for="(item, index) in behaviorTagMore"
              @click="choiceBehaviorTag(item)"
              :key="behaviorTagType + '-' + index"
              >{{ item }}</span
            >
          </template>
           
             
            <template v-if="behaviorTagType == 0">
              <span
                :class="[choiceBehavior.includes(item) ? 'c_bt_b_active' : '']"
                v-for="(item, index) in behaviorTagCommon"
                @click="choiceBehaviorTag(item)"
                :key="behaviorTagType + '-' + index"
                >{{ item }}</span
              >
            </template>
           
          </div>
        </div>

        <div class="c_btnArea">
          <span>
            <div class="c_b_musicListArea">
              <el-tooltip
                effect="light"
								placement="top"
                :content="showSourceList ? lang.ssHideMusicList : lang.ssShowMusicList"
              >
                <span @click.stop="()=>showSourceList = !showSourceList">
                  <svg
                    :style="
                      `transform: rotate(${showSourceList ? '0deg' : '180deg'})`
                    "
                    t="1728975847364"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="4250"
                    width="100%"
                    height="100%"
                  >
                    <path
                      d="M814.795 320.301c9.571 0 12.392 6.018 6.264 13.372l-297.761 357.392c-6.128 7.355-16.154 7.355-22.281 0l-297.761-357.392c-6.128-7.355-3.309-13.372 6.264-13.372l605.275 0z"
                      p-id="4251"
                    ></path>
                  </svg>
                </span>
              </el-tooltip>
              <div v-if="showSourceList" v-click-outside="()=>showSourceList = false">
								<div :class="[sourceUrl==item.url?'c_b_musicListArea_active':'']" v-for="(item,index) in sourceUrlList" :key="index" @click="changeSourceUrl(item.url)">
									<span>{{item.name}}</span>
								</div>
							</div>
            </div>
            <el-tooltip
              class="item"
              effect="light"
              :content="sourceActive ? lang.ssTurnOffMusic : lang.ssTurnOnMusic"
              placement="top"
            >
              <svg
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                @click="music()"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  fill-rule="evenodd"
                  clip-rule="evenodd"
                  d="M12.0001 3.18362C7.13095 3.18362 3.18374 7.13083 3.18374 11.9999C3.18374 16.4071 6.41825 20.0602 10.6428 20.7125C11.0848 20.7808 11.5381 20.8163 12.0001 20.8163C12.4058 20.8163 12.7348 21.1452 12.7348 21.551C12.7348 21.9567 12.4058 22.2857 12.0001 22.2857C11.4627 22.2857 10.9345 22.2444 10.4186 22.1647C5.48856 21.4035 1.71436 17.1431 1.71436 11.9999C1.71436 6.3193 6.31943 1.71423 12.0001 1.71423C16.5776 1.71423 20.4549 4.70396 21.7896 8.83532C22.1119 9.83321 22.2858 10.897 22.2858 11.9999C22.2858 12.4057 21.9569 12.7346 21.5511 12.7346C21.1453 12.7346 20.8164 12.4057 20.8164 11.9999C20.8164 11.0522 20.6671 10.1407 20.3913 9.28702C19.2469 5.74447 15.9216 3.18362 12.0001 3.18362Z"
                  :fill="sourceActive ? '#E11E1E' : 'black'"
                  fill-opacity="0.9"
                />
                <path
                  fill-rule="evenodd"
                  clip-rule="evenodd"
                  d="M22.0162 13.8835C22.1871 14.0192 22.2856 14.2186 22.2856 14.4285V20.1428C22.2856 20.3322 22.2053 20.5139 22.0625 20.6479L21.3005 21.3622C21.003 21.6411 20.5206 21.6411 20.2231 21.3622C19.9255 21.0832 19.9255 20.631 20.2231 20.352L20.7618 19.8469V15.2717L17.7142 15.7479V20.8571C17.7142 21.0465 17.6339 21.2282 17.491 21.3622L16.7291 22.0765C16.4316 22.3554 15.9492 22.3554 15.6516 22.0765C15.3541 21.7975 15.3541 21.3452 15.6516 21.0663L16.1904 20.5612V15.1428C16.1904 14.7936 16.4596 14.4956 16.827 14.4382L21.3984 13.724C21.6194 13.6894 21.8453 13.7478 22.0162 13.8835Z"
                  :fill="sourceActive ? '#E11E1E' : '#3681FC'"
                />
                <path
                  d="M14.5713 12C14.5713 13.4202 13.4201 14.5714 11.9999 14.5714C10.5797 14.5714 9.42847 13.4202 9.42847 12C9.42847 10.5799 10.5797 9.42859 11.9999 9.42859C13.4201 9.42859 14.5713 10.5799 14.5713 12Z"
                  :fill="sourceActive ? '#E11E1E' : 'black'"
                  fill-opacity="0.9"
                />
              </svg>
            </el-tooltip>
          </span>
          <div class="c_ba_startArea">
            <div
              :class="[
                !canStartCountdownTime
                  ? 'c_ba_startType0'
                  : !isCountdown
                  ? 'c_ba_startType'
                  : 'c_ba_startType2'
              ]"
              v-if="type == 0"
              style=""
              @click="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="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>
            </div>
          </div>
          <span @click="reset()">
            <el-tooltip
              class="item"
              effect="light"
              :content="lang.ssResetTimer"
              placement="top"
            >
              <svg
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  fill-rule="evenodd"
                  clip-rule="evenodd"
                  d="M2.25 19.5C2.25 19.0858 2.58579 18.75 3 18.75H22.5C22.9142 18.75 23.25 19.0858 23.25 19.5C23.25 19.9142 22.9142 20.25 22.5 20.25H3C2.58579 20.25 2.25 19.9142 2.25 19.5Z"
                  fill="black"
                />
                <path d="M3 8.25L3.75 14.25L8.25 10.5L3 8.25Z" fill="black" />
                <path
                  fill-rule="evenodd"
                  clip-rule="evenodd"
                  d="M6.88061 9.09714C8.37158 7.62191 10.4445 6.75 12.75 6.75C17.3064 6.75 21 10.4437 21 15C21 15.4142 21.3358 15.75 21.75 15.75C22.1643 15.75 22.5 15.4142 22.5 15C22.5 9.61522 18.1348 5.25 12.75 5.25C9.83406 5.25 7.20333 6.45088 5.41113 8.46737L3.29545 7.56065C3.04847 7.4548 2.76374 7.48917 2.54904 7.65074C2.33433 7.81231 2.22247 8.0764 2.2558 8.34303L3.0058 14.343C3.03982 14.6151 3.21963 14.847 3.47471 14.9477C3.7298 15.0483 4.01948 15.0017 4.23015 14.8262L8.73015 11.0762C8.93061 10.9091 9.02983 10.6499 8.99215 10.3917C8.95447 10.1335 8.78529 9.91343 8.54545 9.81065L6.88061 9.09714ZM4.48437 9.70214L3.9064 9.45443L4.03677 10.4974C4.17389 10.2236 4.32334 9.95829 4.48437 9.70214ZM4.91452 12.3033C5.14843 11.5796 5.47638 10.9088 5.884 10.302L6.82973 10.7073L4.91452 12.3033Z"
                  fill="black"
                />
              </svg>
            </el-tooltip>
          </span>
        </div>

        <div class="ActivityMemo">
          <span @click="changeShowType(1)">
            {{ lang.ssTeachingActivityMemo }}
            <svg
              width="16"
              height="16"
              viewBox="0 0 16 16"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                fill-rule="evenodd"
                clip-rule="evenodd"
                d="M3.66782 3.1263C3.87421 2.94284 4.19025 2.96143 4.37371 3.16782L8.37371 7.66782C8.5421 7.85727 8.5421 8.14274 8.37371 8.33219L4.37371 12.8322C4.19025 13.0386 3.87421 13.0572 3.66782 12.8737C3.46143 12.6903 3.44284 12.3742 3.6263 12.1678L7.33103 8.00001L3.6263 3.83219C3.44284 3.6258 3.46143 3.30976 3.66782 3.1263Z"
                fill="black"
              />
              <path
                fill-rule="evenodd"
                clip-rule="evenodd"
                d="M7.66782 3.1263C7.87421 2.94284 8.19025 2.96143 8.37371 3.16782L12.3737 7.66782C12.5421 7.85727 12.5421 8.14274 12.3737 8.33219L8.37371 12.8322C8.19025 13.0386 7.87421 13.0572 7.66782 12.8737C7.46143 12.6903 7.44284 12.3742 7.6263 12.1678L11.331 8.00001L7.6263 3.83219C7.44284 3.6258 7.46143 3.30976 7.66782 3.1263Z"
                fill="black"
              />
            </svg>
          </span>
        </div>
      </div>

      <div class="c_changeType">
        <div class="c_ct_btn" @click="changeType(0)">
          <div>{{ lang.ssCountdown }}</div>
          <span v-if="type == 0"></span>
          <svg
            width="21"
            height="6"
            viewBox="0 0 21 6"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
            v-if="type == 0"
          >
            <path
              fill-rule="evenodd"
              clip-rule="evenodd"
              d="M1.05713 0.470583C1.80179 -0.155333 3.01121 -0.157081 3.75845 0.466679C5.4879 1.91035 7.86809 2.8 10.5 2.8C13.1319 2.8 15.5121 1.91035 17.2416 0.466679C17.9888 -0.157081 19.1982 -0.155333 19.9429 0.470583C20.6875 1.0965 20.6854 2.10956 19.9382 2.73332C17.5219 4.75032 14.1834 6 10.5 6C6.81664 6 3.47806 4.75032 1.06179 2.73332C0.314559 2.10956 0.312473 1.0965 1.05713 0.470583Z"
              fill="url(#paint0_linear_269_7318)"
            />
            <defs>
              <linearGradient
                id="paint0_linear_269_7318"
                x1="0.5"
                y1="6"
                x2="20.5"
                y2="6"
                gradientUnits="userSpaceOnUse"
              >
                <stop stop-color="#3673E8" />
                <stop offset="1" stop-color="#AD88FD" />
              </linearGradient>
            </defs>
          </svg>
        </div>

        <span></span>

        <div class="c_ct_btn" @click="changeType(1)">
          <div>{{ lang.ssTimer }}</div>
          <span v-if="type == 1"></span>
          <svg
            width="21"
            height="6"
            viewBox="0 0 21 6"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
            v-if="type == 1"
          >
            <path
              fill-rule="evenodd"
              clip-rule="evenodd"
              d="M1.05713 0.470583C1.80179 -0.155333 3.01121 -0.157081 3.75845 0.466679C5.4879 1.91035 7.86809 2.8 10.5 2.8C13.1319 2.8 15.5121 1.91035 17.2416 0.466679C17.9888 -0.157081 19.1982 -0.155333 19.9429 0.470583C20.6875 1.0965 20.6854 2.10956 19.9382 2.73332C17.5219 4.75032 14.1834 6 10.5 6C6.81664 6 3.47806 4.75032 1.06179 2.73332C0.314559 2.10956 0.312473 1.0965 1.05713 0.470583Z"
              fill="url(#paint0_linear_269_7318)"
            />
            <defs>
              <linearGradient
                id="paint0_linear_269_7318"
                x1="0.5"
                y1="6"
                x2="20.5"
                y2="6"
                gradientUnits="userSpaceOnUse"
              >
                <stop stop-color="#3673E8" />
                <stop offset="1" stop-color="#AD88FD" />
              </linearGradient>
            </defs>
          </svg>
        </div>
        <!-- <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>

    <div class="c_behavior" v-if="showType == 1">
      <div class="behaviorBack">
        <span @click="changeShowType(0)">
          <svg
            width="16"
            height="16"
            viewBox="0 0 16 16"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              fill-rule="evenodd"
              clip-rule="evenodd"
              d="M3.66782 3.1263C3.87421 2.94284 4.19025 2.96143 4.37371 3.16782L8.37371 7.66782C8.5421 7.85727 8.5421 8.14274 8.37371 8.33219L4.37371 12.8322C4.19025 13.0386 3.87421 13.0572 3.66782 12.8737C3.46143 12.6903 3.44284 12.3742 3.6263 12.1678L7.33103 8.00001L3.6263 3.83219C3.44284 3.6258 3.46143 3.30976 3.66782 3.1263Z"
              fill="black"
            />
            <path
              fill-rule="evenodd"
              clip-rule="evenodd"
              d="M7.66782 3.1263C7.87421 2.94284 8.19025 2.96143 8.37371 3.16782L12.3737 7.66782C12.5421 7.85727 12.5421 8.14274 12.3737 8.33219L8.37371 12.8322C8.19025 13.0386 7.87421 13.0572 7.66782 12.8737C7.46143 12.6903 7.44284 12.3742 7.6263 12.1678L11.331 8.00001L7.6263 3.83219C7.44284 3.6258 7.46143 3.30976 7.66782 3.1263Z"
              fill="black"
            /></svg
          >{{ lang.ssReturn }}</span
        >
      </div>
      <div class="c_b_btnArea">
        <el-button-group>
          <el-button
            :type="showBtnType == 0 ? 'primary' : ''"
            size="small"
            @click="showBtnType = 0"
            >{{ lang.ssAllEvents }}</el-button
          >
          <el-button
            :type="showBtnType == 1 ? 'primary' : ''"
            size="small"
            @click="showBtnType = 1"
            >{{ lang.ssTimingEvents }}</el-button
          >
        </el-button-group>

        <span
          @click="derive(showMemorandumList)"
          v-loading="exportLoading"
        >
          <el-tooltip class="item" effect="dark" :content="lang.ssExport" placement="top">
            <svg
              t="1724319590942"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="8252"
              width="200"
              height="200"
            >
              <path
                d="M608.888 94c4.528 0 8.844 1.919 11.877 5.28l241.113 267.153a16 16 0 0 1 4.122 10.72V566a8 8 0 0 1-8 8h-64a8 8 0 0 1-8-8V443H576c-17.673 0-32-14.327-32-32V174H242v675h233a8 8 0 0 1 8 8v64a8 8 0 0 1-8 8H194c-17.673 0-32-14.327-32-32V126c0-17.673 14.327-32 32-32h414.888z m153.49 277L616 208.912V371h146.378z"
                fill="#000000"
                p-id="8253"
              ></path>
              <path
                d="M670.089 647.914l77.198 77.197H535.312a8 8 0 0 0-8 8v64a8 8 0 0 0 8 8h213.753l-78.976 78.976a8 8 0 0 0 0 11.314l45.255 45.255a8 8 0 0 0 11.314 0l152.027-152.028c12.497-12.497 12.497-32.758 0-45.255L726.658 591.345a8 8 0 0 0-11.314 0L670.089 636.6a8 8 0 0 0 0 11.314z"
                fill="#000000"
                p-id="8254"
              ></path>
            </svg>
          </el-tooltip>
        </span>
        <!-- <el-button style="margin-left: 20px;" type="warning" @click.stop="derive">导出</el-button> -->
      </div>
      <div class="c_step" ref="stepRef" v-loading="memorandumLoading">
        <el-timeline>
          <el-timeline-item
            v-for="(item, index) in showMemorandumList"
            :class="item.color"
            :key="index"
            :timestamp="item.time"
            size="large"
          >
            <span v-html="item.textList.join('，')"></span>
            <div class="c_s_time" v-if="item.timeDiff">
              <div>
                <span v-if="item.timeDiff.h !== null"
                  >{{ item.timeDiff.h }}{{ lang.ssHourUnit }}</span
                >
                <span v-if="item.timeDiff.m !== null"
                  >{{ item.timeDiff.m }}{{ lang.ssMinute }}</span
                >
                <span v-if="item.timeDiff.s !== null"
                  >{{ item.timeDiff.s }}{{ lang.ssSecond }}</span
                >
              </div>
            </div>
          </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";
// 自定义指令，用于处理点击外部区域的事件
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: () => {}
    },
    fileId: {
      type: Array,
      default: () => []
    }
  },
  directives: {
    "click-outside": clickOutside // 注册自定义指令
  },
  data() {
    return {
      userid: this.$route.query.userid,
      courseId: this.$route.query.courseId,
      tcid2: this.$route.query.tcid,
      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",
      sourceUrlList: [
        {
          name: this.lang.ssMusic1,
          url:
            "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"
        },
        {
          name: this.lang.ssMusic2,
          url:
            "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/default%2F%E9%9F%B3%E4%B9%9021728975233277.mp3"
        },
        {
          name: this.lang.ssMusic3,
          url:
            "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/default%2F%E9%9F%B3%E4%B9%9031728975268412.mp3"
        },
        {
          name: this.lang.ssMusic4,
          url:
            "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/default%2F%E9%9F%B3%E4%B9%9041728975432067.mp3"
        },
        {
          name: this.lang.ssMusic5,
          url:
            "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/default%2F%E9%9F%B3%E4%B9%9051728975447857.mp3"
        }
      ],
      showSourceList: false,
      sourceActive: false,
      type: 0, //0：倒计时   1：计时器
      isCountdown: false,
      showCountDownInput1: false,
      countDownInputValue1: 0,
      showCountDownInput2: false,
      countDownInputValue2: 0,
      isKeepTime: false,
      countdownTime: 0,
      countdownTimeDefault: 0,
      countdownTimeTimer: null,
      keepTime: 0,
      keepTimeTimer: null,
      startCountdownTime: 0,
      behaviorTagType: 0, //0：常用  1：更多
      behaviorTagMore: [], //更多
      behaviorTagMoreLoading: false,
      behaviorTagCommon: [
        this.lang.ssGroupDiscussion,
        this.lang.ssGroupReport,
        this.lang.ssHandsOnExperiment,
        this.lang.ssClassroomGame,
        this.lang.ssIndependentLearning,
        this.lang.ssWorkDisplay,
        this.lang.ssStudentSpeech,
        this.lang.ssStudentShare,
        this.lang.ssClassPractice,
        this.lang.ssQuickQAndA,
        this.lang.ssReadingMaterials,
        this.lang.ssObservationRecord
      ], 
      //常用
      choiceBehavior: [],
      memorandumList: [],
      memorandumLoading: false,
      showBtnType: 1, //0：所有事件  1：计时事件
      exportLoading: false
    };
  },
  computed: {
    canStartCountdownTime() {
      let _result = false;

      if (this.countdownTime > 0) {
        _result = true;
      }
      return _result;
    },
    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;
    },
    showMemorandumList() {
      let _result = [];

      let _time1 = ""; //_interval1之内的时间
      let _time2 = ""; //_interval2之内的时间
      let _type = "blue"; //要展示的颜色
      let _interval1 = 300; //行为间隔  s
      let _interval2 = 10; //行为间隔  s
      let _previousBehavior = "";
      let _resultTemplate = [];
      let _topic = "";
      let _list = JSON.parse(JSON.stringify(this.memorandumList));

      if (this.showBtnType == 1) {
        _list = _list.filter(i => i.text.indexOf("计时") !== -1);
      }

      _list.forEach((item, index) => {
        if (index == 0) {
          _time1 = item.time;
          _time2 = item.time;
          _type = "blue";
          return _result.push({
            textList: [item.text],
            time: item.time,
            color: _type
          });
        }

        if (this.isMoreThanSeconds(item.time, _time1, _interval1)) {
          //切换颜色
          _type = _type == "blue" ? "green" : "blue";
          _time1 = item.time;
        }

        //针对查看学生的作业情况
        if (_result[_result.length - 1].textList.length) {
          if (
            _result[_result.length - 1].textList[
              _result[_result.length - 1].textList.length - 1
            ].indexOf("的作业") === -1 &&
            item.text.indexOf("的作业") !== -1
          ) {
            return _result.push({
              textList: [item.text],
              time: item.time,
              color: _type
            });
          } else if (
            _result[_result.length - 1].textList[
              _result[_result.length - 1].textList.length - 1
            ].indexOf("的作业") !== -1 &&
            item.text.indexOf("的作业") !== -1
          ) {
            return _result[_result.length - 1].textList.push(item.text);
          } else if (
            _result[_result.length - 1].textList[
              _result[_result.length - 1].textList.length - 1
            ].indexOf("的作业") !== -1 &&
            item.text.indexOf("的作业") == -1
          ) {
            return _result.push({
              textList: [item.text],
              time: item.time,
              color: _type
            });
          }
        }

        //针对任务面板做题的操作情况
        if (
          item.text.match(/<span class=['"]variable['"]>第(.*?)题<\/span>/g) !=
          null
        ) {
          let _match = item.text.match(
            /<span class=['"]variable['"]>(.*?)<\/span>/
          );
          let _matchTopic = _match[1];
          if (
            _result[_result.length - 1].textList[
              _result[_result.length - 1].textList.length - 1
            ].match(/<span class=['"]variable['"]>第(.*?)题<\/span>/g) == null
          ) {
            _topic = _matchTopic;
            return _result.push({
              textList: [item.text],
              time: item.time,
              color: _type
            });
          } else {
            if (_topic == _matchTopic) {
              //同一题
              return _result[_result.length - 1].textList.push(item.text);
            } else {
              _topic = _matchTopic;
              return _result.push({
                textList: [item.text],
                time: item.time,
                color: _type
              });
            }
          }
        } else if (
          _result[_result.length - 1].textList[
            _result[_result.length - 1].textList.length - 1
          ].match(/<span class=['"]variable['"]>第(.*?)题<\/span>/g)
        ) {
          return _result.push({
            textList: [item.text],
            time: item.time,
            color: _type
          });
        }

        if (this.isMoreThanSeconds(item.time, _time2, _interval2)) {
          _time2 = item.time;
          //十秒过了
          _result.push({
            textList: [item.text],
            time: item.time,
            color: _type
          });
        } else {
          _result[_result.length - 1].textList.push(`${item.text}`);
        }
      });
      _result.forEach(i => {
        if (i.textList.every(ei => ei.indexOf("的作业") !== -1)) {
          let _useSet = new Set();
          i.textList.forEach(i2 => {
            let _userMatch = i2.match(
              /<span class=['"]variable['"]>(.*?)<\/span>的作业/
            );
            if (_userMatch) {
              _useSet.add(_userMatch[1]);
            }
          });
          if (Array.from(_useSet).length > 1) {
            i.textList = this.lookWork(i.textList);
          } else {
            i.textList = this.lookWork2(i.textList);
          }
        } else if (
          i.textList.every(ei =>
            ei.match(/<span class=['"]variable['"]>第(.*?)题<\/span>/g)
          )
        ) {
          i.textList = this.lookTask(i.textList);
        }
      });

      _result.forEach((item, index) => {
        if (index !== _result.length - 1) {
          item.timeDiff = this.getTimeDifferences(
            item.time,
            _result[index + 1].time
          );
        } else {
          item.timeDiff = null;
        }
      });

      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);
      }
    },
    countDownInputValue1(newValue) {
      if (newValue > 60) {
        this.countDownInputValue1 = 60;
      } else if (newValue < 0) {
        this.countDownInputValue1 = 0;
      }
    },
    countDownInputValue2(newValue) {
      if (newValue > 60) {
        this.countDownInputValue2 = 60;
      } else if (newValue < 0) {
        this.countDownInputValue2 = 0;
      }
    }
  },
  methods: {
    derive(_data) {
      if (this.exportLoading) return this.$message.info(this.lang.ssPleaseWaitDots);
      this.exportLoading = true;
      let _array = [];
      _data.forEach((item, index) => {
        let json = {};
        json[this.lang.ssTime] = item.time;
        json[this.lang.ssEvent] = item.textList
          .map(i => i.replace(/<[^>]+>/g, ""))
          .join(",");
        json[this.lang.ssTimeDifference] =
          index == 0
            ? ""
            : `${
                _data[index - 1].timeDiff.h
                  ? _data[index - 1].timeDiff.h + this.lang.ssHourUnit
                  : ""
              }${
                _data[index - 1].timeDiff.m
                  ? _data[index - 1].timeDiff.m + this.lang.ssMinute
                  : ""
              }${
                _data[index - 1].timeDiff.s
                  ? _data[index - 1].timeDiff.s + this.lang.ssSecond
                  : ""
              }`;
        _array.push(json);
      });

      let XLSX = require("xlsx");
      const workbook = XLSX.utils.book_new(); //创建一个新的工作簿对象
      let ws = XLSX.utils.json_to_sheet(_array); //将json对象数组转化成工作表
      ws["!cols"] = [
        //设置每一列的宽度
        { wch: 25 },
        { wch: 50 },
        { wch: 25 }
      ];
      XLSX.utils.book_append_sheet(workbook, ws, "sheet1"); //把sheet添加到workbook里，第三个参数是sheet名
      XLSX.writeFile(workbook, this.lang.ssEventExportFileName);

      this.exportLoading = false;
      this.$message.success(this.lang.ssExportSuccess);
    },
    lookWork(data) {
      const taskTypes = {
        [this.lang.ssViewHomework]: new Set(),
        [this.lang.ssPerformLike]: new Set(),
        [this.lang.ssPerformComment]: new Set(),
        [this.lang.ssPerformRating]: new Set()
      };

      let _result = [];

      const viewRegex = new RegExp(`${this.lang.ssViewHomework}<span class=['"]variable['"]>(.*?)<\/span>${this.lang.ssHomeworkOf}`, 'g');
      const likeRegex = new RegExp(`${this.lang.ssPerformActionOn}<span class=['"]variable['"]>(.*?)<\/span>${this.lang.ssHomeworkOf}${this.lang.ssPerformLike}<span class=['"]btn['"]>${this.lang.ssLikeL}<\/span>`, 'g');
      const commentRegex = new RegExp(`${this.lang.ssPerformActionOn}<span class=['"]variable['"]>(.*?)<\/span>${this.lang.ssHomeworkOf}${this.lang.ssPerformComment}<span class=['"]btn['"]>${this.lang.ssComment}<\/span>`, 'g');
      const markRegex = new RegExp(`${this.lang.ssPerformActionOn}<span class=['"]variable['"]>(.*?)<\/span>${this.lang.ssHomeworkOf}${this.lang.ssPerformRating}<span class=['"]btn['"]>${this.lang.ssMarkScore}<\/span>`, 'g');
      data.forEach(str => {
        if (viewRegex.test(str)) {
          this.extractText(str, viewRegex).forEach(item =>
            taskTypes[this.lang.ssViewHomework].add(item)
          );
        } else if (likeRegex.test(str)) {
          this.extractText(str, likeRegex).forEach(item =>
            taskTypes[this.lang.ssPerformLike].add(item)
          );
        } else if (commentRegex.test(str)) {
          this.extractText(str, commentRegex).forEach(item =>
            taskTypes[this.lang.ssPerformComment].add(item)
          );
        } else if (markRegex.test(str)) {
          this.extractText(str, markRegex).forEach(item =>
            taskTypes[this.lang.ssPerformRating].add(item)
          );
        }
      });

      if (Array.from(taskTypes[this.lang.ssViewHomework]).length > 0) {
        _result.push(
          `${this.lang.ssViewHomework}<span class='variable'>${Array.from(taskTypes[this.lang.ssViewHomework]).join(
            "，"
          )}</span>${this.lang.ssHomeworkOf}`
        );
      }
      if (Array.from(taskTypes[this.lang.ssPerformLike]).length > 0) {
        _result.push(
          `${this.lang.ssPerformActionOn}<span class='variable'>${Array.from(taskTypes[this.lang.ssPerformLike]).join(
            "，"
          )}</span>${this.lang.ssHomeworkOf}${this.lang.ssPerformLike}<span class="btn">${this.lang.ssLikeL}</span>`
        );
      }
      if (Array.from(taskTypes[this.lang.ssPerformComment]).length > 0) {
        _result.push(
          `${this.lang.ssPerformActionOn}<span class='variable'>${Array.from(taskTypes[this.lang.ssPerformComment]).join(
            "，"
          )}</span>${this.lang.ssHomeworkOf}${this.lang.ssPerformComment}<span class="btn">${this.lang.ssComment}</span>`
        );
      }

      if (Array.from(taskTypes[this.lang.ssPerformRating]).length > 0) {
        _result.push(
          `${this.lang.ssPerformActionOn}<span class='variable'>${Array.from(taskTypes[this.lang.ssPerformRating]).join(
            "，"
          )}</span>${this.lang.ssHomeworkOf}${this.lang.ssPerformRating}<span class="btn">${this.lang.ssMarkScore}</span>`
        );
      }

      return _result;
    },
    lookWork2(data) {
      // 用于存储结果
      let result = [];
      // 用于跟踪 variable 和对应的 btn 操作
      let map = new Map();

      data.forEach(item => {
        // 提取 variable
        let variableMatch = item.match(
          /<span class=["']variable["']>(.*?)<\/span>/
        );
        // 提取 btn
        let btnMatch = item.match(/<span class=["']btn["']>(.*?)<\/span>/);

        if (variableMatch) {
          let variable = variableMatch[1];
          if (btnMatch) {
            let btn = btnMatch[1];

            if (!map.has(variable)) {
              map.set(variable, []);
            }

            // 存储 btn 操作
            map.get(variable).push(btn);
          } else {
            // 如果没有 btn 操作，直接推入结果
            result.push(item);
          }
        }
      });

      // 构建结果数组
      map.forEach((btns, variable) => {
        // 构建新的字符串
        let newString = `${this.lang.ssPerformActionOn}<span class="variable">${variable}</span>${this.lang.ssHomeworkOf}<span class="btn">${btns.join(
          "，"
        )}</span>`;
        result.push(newString);
      });

      return Array.from(new Set(result));
    },

    lookTask(data) {
      // 创建一个对象来存储 variable 和对应的操作
      let map = {};
      let arr = Array.from(new Set(data));
      arr.forEach(item => {
        // 提取 variable 和操作部分
        let variableMatch = item.match(
          /<span class=["']variable["']>(.*?)<\/span>/
        );
        let operationMatch = item.match(/<\/span>(.*?)$/);

        if (variableMatch && operationMatch) {
          let variable = variableMatch[1];
          let operation = operationMatch[1];

          if (!map[variable]) {
            map[variable] = [];
          }

          // 将操作部分去掉前面的 "的" 字符串，并添加到 map 中
          map[variable].push(operation.replace(/^的/, ""));
        }
      });

      // 构建结果数组
      let result = [];
      for (let variable in map) {
        // 将操作部分合并成一个字符串
        let combinedOperations = map[variable].join("、");
        result.push(
          `查看<span class="variable">${variable}</span>的<span class="btn">${combinedOperations}</span>`
        );
      }

      return result;
    },

    extractText(htmlString, regex) {
      const matches = htmlString.match(regex);
      return matches ? matches.map(match => match.replace(regex, "$1")) : [];
    },

    isMoreThanSeconds(time1, time2, exceed) {
      // 将时间字符串转换为 Date 对象
      let date1 = new Date(time1);
      let date2 = new Date(time2);

      // 获取时间戳（毫秒）
      let timestamp1 = date1.getTime();
      let timestamp2 = date2.getTime();

      // 计算两个时间戳的差异（秒）
      let diffInSeconds = Math.abs(timestamp2 - timestamp1) / 1000;

      // 判断差异是否超过 10 秒
      return diffInSeconds > exceed;
    },

    insertMemorandum(_html) {
      // return;
      //保存行为操作
      //variable
      //btn
      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);
        });
    },
    changeShowType(newType) {
      this.showType = newType;
      if (this.showType == 1) {
        this.selectMemorandum();
      }
    },
    changeType(newType) {
      if (this.isCountdown || this.isKeepTime) return;
      this.choiceBehavior = [];
      this.type = newType;
    },
    changeBehaviorTagType(newType) {
      if (this.isCountdown) return this.$message.error(this.lang.ssCountdownRunning);
      if (this.isKeepTime) return this.$message.error(this.lang.ssTimerRunning);
      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(this.lang.ssCountdownRunning);
      if (this.isKeepTime) return this.$message.error(this.lang.ssTimerRunning);
      this.countdownTime = newTime;
    },
    addTime(time = 0) {
      if (this.isCountdown) return console.log("正在计时");
      if (this.countdownTime >= 3600) {
        return this.$message.error(this.lang.ssCountdownMaxHour);
      }
      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(this.lang.ssCountdownRunning);
      if (this.isKeepTime) return this.$message.error(this.lang.ssTimerRunning);
      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(this.lang.ssCountdownPaused);
      } else {
        //开始
        if (this.countdownTime == 0)
          return this.$message.error(this.lang.ssSetCountdownTime);
        this.isCountdown = true;
        this.$message.success(this.lang.ssCountdownStarted);
        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.lang.ssMinuteWord}${this.countdownTimeShow.s1}${this.countdownTimeShow.s2}${this.lang.ssSecondWord}`;
        this.insertMemorandum(
          `${this.lang.ssSet}<span class="variable">${timeShow}</span><span class="btn">${this.lang.ssCountdown}</span>${
            this.choiceBehavior.length > 0
              ? this.lang.ssUsedFor +
                '<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;
      this.changeShowType(0);
      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.choiceBehavior = [];
      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(this.lang.ssTimerStopped);
      } 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.lang.ssTimerStarted);
        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(this.lang.ssConfirmResetCountdown, this.lang.ssTip, {
            confirmButtonText: this.lang.ssConfirm,
            cancelButtonText: this.lang.ssCancel,
            type: "warning"
          })
            .then(_ => {
              clearInterval(this.countdownTimeTimer);
              this.countdownTimeTimer = null;
              // this.countdownTime = this.countdownTimeDefault;
              this.countdownTime = 0;
              this.isCountdown = false;
              this.choiceBehavior = [];
              this.$message.success(this.lang.ssResetDone);
              if (this.$refs.audioRef.playing) {
                this.$refs.audioRef.pause();
              }
            })
            .catch(_ => {
              console.log("取消重置");
            });
        } else {
          this.$confirm(this.lang.ssConfirmResetBasic, this.lang.ssTip, {
            confirmButtonText: this.lang.ssConfirm,
            cancelButtonText: this.lang.ssCancel,
            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(this.lang.ssResetDone);
            })
            .catch(_ => {
              console.log("取消重置");
            });
        }
      } else if (this.type == 1) {
        if (this.isKeepTime) {
          this.$confirm(this.lang.ssConfirmResetTimer, this.lang.ssTip, {
            confirmButtonText: this.lang.ssConfirm,
            cancelButtonText: this.lang.ssCancel,
            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.lang.ssMinuteWord}${this.keepTimeShow.s1}${this.keepTimeShow.s2}${this.lang.ssSecondWord}`;
              this.insertMemorandum(
                `${this.lang.ssEndTimer}<span class="btn">${this.lang.ssTimerWord}</span><span class="variable">${timeShow}</span>${
                  this.choiceBehavior.length > 0
                    ? this.lang.ssUsedFor +
                      '<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.lang.ssMinuteWord}${this.keepTimeShow.s1}${this.keepTimeShow.s2}${this.lang.ssSecondWord}`;
          this.insertMemorandum(
            `${this.lang.ssEndTimer}<span class="btn">${this.lang.ssTimerWord}</span><span class="variable">${timeShow}</span>${
              this.choiceBehavior.length > 0
                ? this.lang.ssUsedFor +
                  '<span class="btn">' +
                  this.choiceBehavior.join("、") +
                  "</span>"
                : ""
            }`
          );
          this.keepTime = 0;
          this.isKeepTime = false;
          // this.choiceBehavior = [];
          this.$message.success("已重置");
        }
      }
    },
    getLang() {
      let lang = "";
      if (this.lang.lang == 'cn') {
        lang = "Chinese.";
      } else if (this.lang.lang == 'hk') {
        lang = "Traditional Chinese.";
      } else if (this.lang.lang == 'com') {
        lang = "English.";
      }
      return lang;
    },
    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 taskDescription = "";
      let formatExample = "";
      
      if (this.lang.lang == 'cn') {
        taskDescription = "在以下课堂中，如果老师设置一个倒计时，他可能想开展哪些教学活动？每个教学活动使用4个字，进行简洁精确的描述，请返回所有可能的行为名称，不需要额外的解释。请返回最有可能的12个活动类型。";
        formatExample = '["小组汇报","小组讨论","动手实验","课堂游戏","自主学习","作品展示","学生演讲","学生分享","随堂练习","快速问答","阅读资料","观察记录"]';
      } else if (this.lang.lang == 'hk') {
        taskDescription = "在以下課堂中，如果老師設置一個倒計時，他可能想開展哪些教學活動？每個教學活動使用4個字，進行簡潔精確的描述，請返回所有可能的行為名稱，不需要額外的解釋。請返回最有可能的12個活動類型。";
        formatExample = '["小組匯報","小組討論","動手實驗","課堂遊戲","自主學習","作品展示","學生演講","學生分享","隨堂練習","快速問答","閱讀資料","觀察記錄"]';
      } else if (this.lang.lang == 'com') {
        taskDescription = "In the following classroom context, if a teacher sets a countdown timer, what teaching activities might they want to conduct? Each teaching activity should be described in 4 words (or short phrases), be concise and precise. Return all possible activity names without additional explanations. Return the 12 most likely activity types.";
        formatExample = '["Group Report","Group Discussion","Hands-on Experiment","Classroom Game","Independent Learning","Work Display","Student Speech","Student Share","Class Practice","Quick Q&A","Reading Materials","Observation Record"]';
      }

      let _msg = `## Language Requirement
CRITICAL: You MUST respond in ${this.getLang()} All output content, including activity names in the array, must be in ${this.getLang()}

## ATTENTION
Use '##' to SPLIT SECTIONS, not '#'. Output format must strictly follow the "Format example".

## Instruction
Based on the context provided, follow the "Format example" format and write content. IMPORTANT: All activity names in your response must be in ${this.getLang()}

## Task
${taskDescription}

## Format example
${formatExample}

## Context
${_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,
        model: "gpt-4o-2024-11-20"
      };
      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.lang.ssGetMoreTagsFailed);
          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() {
      this.memorandumLoading = true;
      let params = {
        uid: this.userid,
        courseId: this.courseId + (this.tcid2 ? this.tcid2 : "")
      };
      this.memorandumList = [];
      this.ajax
        .get(
          this.$store.state.api + "select_systemOperation_countdownBehavior",
          params
        )
        .then(res => {
          let _data = res.data[0];
          if (_data.length) {
            // let _result  =  _data;
            // console.log(_result)

            this.memorandumList = _data;
          } else {
            this.memorandumList = [];
          }
          this.$nextTick(() => {
            this.$refs.stepRef.scrollTop = this.$refs.stepRef.scrollHeight;
          });
          this.memorandumLoading = false;
        })
        .catch(err => {
          console.log(err);
          this.memorandumLoading = false;
          this.$message.error(this.lang.ssGetMemoFailed);
        });
    },

    changeShowInput1(type = true) {
      if (this.isCountdown || this.isKeepTime) return;
      if (type) {
        this.showCountDownInput1 = true;
        this.countDownInputValue1 =
          this.countdownTimeShow.m1 * 10 + this.countdownTimeShow.m2;
        this.countDownInputValue2 =
          this.countdownTimeShow.s1 * 10 + this.countdownTimeShow.s2;
        this.$nextTick(() => {
          this.$refs.countDownInput1Ref.focus();
        });
      } else {
        this.countdownTime =
          this.countDownInputValue1 * 60 + this.countDownInputValue2;
        this.showCountDownInput1 = false;
      }
    },
    handleBlur1() {
      this.changeShowInput1(false);
    },
    changeShowInput2(type = true) {
      if (this.isCountdown || this.isKeepTime) return;
      if (type) {
        this.showCountDownInput2 = true;
        this.countDownInputValue1 =
          this.countdownTimeShow.m1 * 10 + this.countdownTimeShow.m2;
        this.countDownInputValue2 =
          this.countdownTimeShow.s1 * 10 + this.countdownTimeShow.s2;
        this.$nextTick(() => {
          this.$refs.countDownInput2Ref.focus();
        });
      } else {
        this.countdownTime =
          this.countDownInputValue1 * 60 + this.countDownInputValue2;

        this.showCountDownInput2 = false;
      }
    },
    handleBlur2() {
      this.changeShowInput2(false);
    },
    getTimeDifferences(time1, time2) {
      let _time1 = new Date(time1);
      let _time2 = new Date(time2);
      // 计算时间差，得到毫秒数
      const diff = Math.abs(_time2 - _time1);

      // 将毫秒数转换为小时、分钟和秒
      const hours = Math.floor(diff / (1000 * 60 * 60));
      const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
      const seconds = Math.floor((diff % (1000 * 60)) / 1000);

      // 格式化成 "01" 这种格式
      const formatTimeUnit = unit => (unit < 10 ? "0" + unit : unit.toString());

      return {
        h: hours != 0 ? formatTimeUnit(hours) : null,
        m:
          minutes != 0
            ? formatTimeUnit(minutes)
            : hours > 0
            ? formatTimeUnit(minutes)
            : null,
        s: formatTimeUnit(seconds)
      };
    },
		changeSourceUrl(url){
			if(this.isCountdown || this.isKeepTime)return this.$message.error(this.lang.ssStopTimerFirst);
			if(this.sourceUrl == url)return this.showSourceList = false;
			this.sourceUrl = url;

			this.showSourceList = false;
		}
  }
};
</script>

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

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

.c_timeBox {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.c_tb_top {
  width: 100%;
  max-height: calc(100% - 60px);
  margin-top: auto;
  overflow-x: hidden;
  padding-bottom: 30px;
}

.c_behavior {
  width: 100%;
  height: 100%;
}

.c_changeType {
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  border-top: solid 1px #e7e7e7;
  box-sizing: border-box;
}

.c_changeType > span {
  width: 2px;
  height: 30px;
  background-color: #e7e7e7;
}

.c_ct_btn {
  width: 100px;
  height: 90%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  position: relative;
}

.c_ct_btn > div {
  font-size: 18px;
  font-weight: bold;
}

.c_ct_btn > span {
  position: absolute;
  width: 60%;
  height: 60%;
  background: #6c8cff67;

  filter: blur(20px);
  border-radius: 50%;
}

.c_ct_btn > svg {
  width: 30px;
  height: 30px;
  position: absolute;
  margin-top: 30px;
}

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

.c_t_item {
  color: black;
  display: flex;
  align-items: center;
  justify-content: center;
}

.c_t_i_card {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 0px 30px;
  background-color: #fff;
  margin: 0 10px;
  box-shadow: 0px 0px 5px 2px #1d398314;
  /* box-shadow: 1px 1px 20px 4px #1d39830d; */
  border-radius: 8px;
}

.c_t_i_card > span {
  position: absolute;
  bottom: 25px;
  right: 10px;
  font-size: 16px;
}

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

.c_t_i_card > div > div {
  font-size: 5em;
  font-weight: bold;
  margin: 0 5px;
}

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

.c_t_i_c_inputBox {
  width: 100px;
  height: 91px;
  display: flex;
}

.c_t_i_c_inputBox >>> .el-input {
  width: 100%;
  height: 100%;
  border-color: none;
  outline: none;
}

.c_t_i_c_inputBox >>> .el-input > input {
  width: 100%;
  height: 100%;
  text-align: center;
  border: none;
  outline: none;
  color: black;
  padding: 0;
  line-height: 0;
  font-weight: bold;
}

.c_t_i_btnTop {
  top: -30px;
}

.c_t_i_btnBottom {
  bottom: -30px;
}

.c_t_i_btn {
  font-size: 1.3em;
  width: 25px;
  height: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 !important;
  background-color: #f0f2f5;
}

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

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

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

.c_t_btnArea {
  margin-left: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.c_t_btnArea > span {
  width: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 10px;
  cursor: pointer;
  color: #999999;
  position: relative;
  font-size: 14px;
}

.c_t_ba_active {
  color: black !important;
}

.c_t_ba_active::after {
  content: "";
  width: 100%;
  height: 3px;
  background-color: #3681fc;
  position: absolute;
  bottom: -7px;
  left: 1px;
}

.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: 0.5px solid #e0eafb;
  margin: 10px 2%;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.1s;
  cursor: pointer;
  box-shadow: 0px 2px 5px 0px #1d398314;
  box-shadow: 0.5px 0.5px 10px 2px #1d39830d;
}

.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: 6px 10px;
  border-radius: 50px;
  border: 0.5px solid #e0eafb;
  box-shadow: 0px 2px 5px 0px #1d398314;
  box-shadow: 0.5px 0.5px 10px 2px #1d39830d;
  margin: 10px 0;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.1s;
  cursor: pointer;
  font-size: 15px;
}

.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;
  position: relative;
}

.c_b_musicListArea {
  position: absolute;
  left: -20px;
  top: 10px;
  width: 20px;
  height: 20px;
}

.c_b_musicListArea > span {
  width: 20px;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.c_b_musicListArea > div {
  width: 150px;
  height: 200px;
  position: absolute;
  bottom: 40px;
  left: -20px;
  cursor: default;
  border-radius: 5px;
	box-sizing: border-box;
	padding: 5px;
	overflow: auto;
	background-color: #fff;
	box-shadow: 0px 0px 5px 2px #1d398314;
}

.c_b_musicListArea>div>div{
	width: 100%;
	height: 30px;
	border-radius: 5px;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	padding-left: 10px;
	cursor: pointer;
	transition: 0.2s;
	margin-bottom: 5px;
}

.c_b_musicListArea>div>div:hover{
	background-color: #f0f2f5;
}

.c_b_musicListArea_active{
	background-color: #409eff !important;
	color: #fff;
}

.c_btnArea > span > svg {
  width: 30px;
  height: 30px;
}

/* .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_startType0 {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: solid 8px #e0eafb;
  color: #e0eafb;
  cursor: pointer;
  transition: 0.2s;
}

.c_ba_startType0 > svg {
  fill: #afbff7;
  height: 60%;
  position: relative;
  left: 3px;
  transition: 0.2s;
}

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

.c_ba_startType > svg {
  fill: #677bf0;
  height: 60%;
  position: relative;
  left: 3px;
  transition: 0.2s;
}

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

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

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

.c_step {
  width: 100%;
  height: calc(100% - 80px - 40px);
  margin-top: 20px;
  padding: 20px 50px;
  padding-left: 120px;
  box-sizing: border-box;
  overflow: auto;
}

.c_step >>> .el-timeline-item .c_s_time {
  width: 100px;
  height: auto;
  position: absolute;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  top: 50%;
  transform: translate(0, -25%);
  left: -120px;
}

.c_step >>> .el-timeline-item .c_s_time > div {
  padding: 2px 4px;
  background-color: #e0eafb;
  color: #3681fc;
  font-size: 12px;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.c_step >>> .el-timeline-item .c_s_time > div > span {
  margin: 0;
}

.c_step >>> .el-timeline .btn {
  color: #2972f4;
}

.c_step >>> .el-timeline .variable {
  color: #319b62;
}

.c_step >>> .blue .el-timeline-item__tail {
  border-left: 6px solid #b3ccfa !important;
}

.c_step >>> .el-timeline-item__tail::after {
  content: "";
  width: 10px;
  height: 95%;
  position: absolute;
  left: -20px;
  bottom: -5px;
  border: solid 1px #68a1fd;
  border-right: none;
}

.c_step >>> .green .el-timeline-item__tail {
  border-left: 6px solid #b7eacb !important;
}

.c_step >>> .el-timeline-item__node {
  background-color: #ffffff;
  box-sizing: border-box;
  border: 2px solid #b3ccfa;
  position: relative;
  left: -0.5px;
}

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

.ActivityMemo {
  width: 100%;
  height: 30px;
  display: flex;
  align-items: center;
  margin-top: 20px;

  box-sizing: border-box;
  padding-left: 20px;
}

.ActivityMemo > span {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.ActivityMemo > span > svg {
  margin-left: 5px;
  position: relative;
  top: 1px;
  width: 20px;
  height: 20px;
}

.behaviorBack {
  width: 100%;
  height: 30px;
  display: flex;
  align-items: center;
  margin-top: 20px;
  box-sizing: border-box;
  padding-left: 20px;
}

.behaviorBack > span {
  display: flex;
  align-items: center;
  cursor: pointer;
  width: 80px;
}

.behaviorBack > span > svg {
  margin-right: 5px;
  position: relative;
  top: 1px;
  width: 20px;
  height: 20px;
  transform: rotate(180deg);
}

.c_b_btnArea {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
  position: relative;
}

.c_b_btnArea > span {
  position: absolute;
  right: 20px;
  width: 30px;
  height: 30px;
  cursor: pointer;
}

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