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">
							<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>分</span>
						</div>
						<div class="c_t_i_card">
							<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>秒</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>分</span>
						</div>

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

				<div class="c_choiceTime" v-if="type == 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">
					<div class="c_title">
						<span>行为标签</span>
						<div class="c_t_btnArea">
							<span
								@click.stop="changeBehaviorTagType(0)"
								:class="[behaviorTagType == 0 ? 'c_t_ba_active' : '']"
								>常用</span
							>
							<span
								@click.stop="changeBehaviorTagType(1)"
								:class="[behaviorTagType == 1 ? 'c_t_ba_active' : '']"
								>更多</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"
					>
						<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">
					<span @click.stop="music()">
						<el-tooltip
							class="item"
							effect="light"
							:content="sourceActive ? '关闭音乐' : '开启音乐'"
							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="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.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()">
						<el-tooltip
							class="item"
							effect="light"
							content="重置"
							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.stop="changeShowType(1)">
						教学活动备忘
						<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.stop="changeType(0)">
					<div>倒计时</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.stop="changeType(1)">
					<div>计时器</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.stop="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
					>返回</span
				>
			</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>
					</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,
			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",
			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: {
		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 = "";

			this.memorandumList.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);
				}
			});

			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: {
		lookWork(data) {
			const taskTypes = {
				查看作业: new Set(),
				进行点赞: new Set(),
				进行评论: new Set(),
				进行评分: new Set(),
			};

			let _result = [];

			const viewRegex = /查看<span class=['"]variable['"]>(.*?)<\/span>的作业/g;
			const likeRegex =
				/对<span class=['"]variable['"]>(.*?)<\/span>的作业进行<span class=['"]btn['"]>点赞<\/span>/g;
			const commentRegex =
				/对<span class=['"]variable['"]>(.*?)<\/span>的作业进行<span class=['"]btn['"]>评论<\/span>/g;
			const markRegex =
				/对<span class=['"]variable['"]>(.*?)<\/span>的作业进行<span class=['"]btn['"]>评分<\/span>/g;
			data.forEach((str) => {
				if (viewRegex.test(str)) {
					this.extractText(str, viewRegex).forEach((item) =>
						taskTypes["查看作业"].add(item)
					);
				} else if (likeRegex.test(str)) {
					this.extractText(str, likeRegex).forEach((item) =>
						taskTypes["进行点赞"].add(item)
					);
				} else if (commentRegex.test(str)) {
					this.extractText(str, commentRegex).forEach((item) =>
						taskTypes["进行评论"].add(item)
					);
				} else if (markRegex.test(str)) {
					this.extractText(str, markRegex).forEach((item) =>
						taskTypes["进行评分"].add(item)
					);
				}
			});

			if (Array.from(taskTypes["查看作业"]).length > 0) {
				_result.push(
					`查看<span class='variable'>${Array.from(taskTypes["查看作业"]).join(
						"，"
					)}</span>的作业`
				);
			}
			if (Array.from(taskTypes["进行点赞"]).length > 0) {
				_result.push(
					`对<span class='variable'>${Array.from(taskTypes["进行点赞"]).join(
						"，"
					)}</span>的作业进行<span class="btn">点赞</span>`
				);
			}
			if (Array.from(taskTypes["进行评论"]).length > 0) {
				_result.push(
					`对<span class='variable'>${Array.from(taskTypes["进行评论"]).join(
						"，"
					)}</span>的作业进行<span class="btn">评论</span>`
				);
			}

			if (Array.from(taskTypes["进行评分"]).length > 0) {
				_result.push(
					`对<span class='variable'>${Array.from(taskTypes["进行评分"]).join(
						"，"
					)}</span>的作业进行<span class="btn">评分</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 = `对<span class="variable">${variable}</span>的作业<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.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">${timeShow}</span><span class="btn">倒计时</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;
			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.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,
				model: "gpt-4o-2024-08-06",
			};
			this.ajax
				// .post("https://gpt4.cocorobo.cn/chat", params)
				// .post("https://claude3.cocorobo.cn/chat", params)
				.post("https://gpt4.cocorobo.cn/ai_agent_park_chat", params)
				.then((res) => {
					// 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() {
			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("获取行为备忘失败");
				});
		},
	},
};
</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_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;
}

.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);
	margin-top: 20px;
	padding: 20px 50px;
	box-sizing: border-box;
	overflow: auto;
}

.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 >>> .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);
}
</style>