<template>
  <div class="observe" v-loading="loading">
    <div class="top">
      <div class="Title">
        <div>课堂观察</div>
        <span @click.stop="exitLogin">退出</span>
      </div>
      <div>
        <img src="../../assets/images/classObserve/CocoClass.png" alt="" />
      </div>
    </div>
    <div class="brief">
      <div class="txt">您好，我是 CocoClass 课堂观察</div>
      <div class="txt2">基于课堂录音和实录文稿进行分析，为您提供不同启发。</div>
    </div>
    <div class="FunctionalArea">
      <div class="tit" v-if="tid">
        <div>{{ bmData.jsonData ? bmData.jsonData.courseName : '' }}</div>
        <span @click="cutPage(2)">
          <svg
            width="20"
            height="20"
            viewBox="0 0 20 20"
            :fill="bmData ? (bmData.jsonData.testData ? '#3681FC' : 'black') : 'black'"
            :fill-opacity="bmData ? (bmData.jsonData.testData ? '1' : '0.4') : '0.4'"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M11.06 12.8722C11.25 12.8722 11.41 12.9422 11.56 13.0822C11.7 13.2222 11.77 13.3822 11.77 13.5722C11.77 13.7622 11.7 13.9222 11.56 14.0722L8.04 17.5922C7.65 17.9822 7.21 18.2722 6.73 18.4722C6.25 18.6722 5.75 18.7622 5.24 18.7622C4.73 18.7622 4.22 18.6622 3.74 18.4722C3.26 18.2822 2.82 17.9822 2.43 17.6022C2.05 17.2222 1.75 16.7822 1.55 16.3022C1.35 15.8222 1.25 15.3122 1.25 14.7822C1.25 14.2522 1.35 13.7422 1.55 13.2622C1.75 12.7822 2.04 12.3522 2.42 11.9722L5.94 8.45219C6.08 8.32219 6.25 8.25219 6.44 8.25219C6.63 8.25219 6.79 8.32219 6.93 8.46219C7.07 8.60219 7.14 8.76219 7.14 8.95219C7.14 9.14219 7.07 9.30219 6.94 9.45219L3.42 12.9722C3.17 13.2222 2.99 13.5022 2.86 13.8122C2.74 14.1222 2.67 14.4522 2.67 14.8022C2.67 15.1522 2.73 15.4722 2.87 15.7822C3 16.0922 3.19 16.3622 3.43 16.6122C3.67 16.8622 3.95 17.0522 4.26 17.1822C4.57 17.3122 4.9 17.3822 5.25 17.3822C5.59 17.3822 5.92 17.3122 6.23 17.1822C6.54 17.0522 6.81 16.8622 7.06 16.6122L10.58 13.0922C10.71 12.9422 10.88 12.8722 11.06 12.8722ZM1.46 7.86219C1.33 7.72219 1.26 7.56219 1.26 7.36219C1.26 7.16219 1.32 7.00219 1.46 6.86219C1.59 6.72219 1.76 6.65219 1.97 6.65219H4.8C5 6.65219 5.16 6.72219 5.29 6.86219C5.42 7.00219 5.49 7.16219 5.49 7.36219C5.49 7.56219 5.42 7.72219 5.29 7.86219C5.16 8.00219 5 8.07219 4.8 8.07219H1.97C1.76 8.07219 1.59 8.00219 1.46 7.86219ZM2.21 3.22219C2.07 3.08219 2 2.91219 2 2.72219C2 2.53219 2.07 2.37219 2.21 2.22219C2.35 2.08219 2.52 2.01219 2.71 2.01219C2.9 2.01219 3.06 2.08219 3.21 2.22219L5.2 4.22219C5.34 4.36219 5.41 4.53219 5.41 4.72219C5.41 4.91219 5.34 5.07219 5.2 5.22219C5.06 5.36219 4.89 5.43219 4.7 5.43219C4.51 5.43219 4.35 5.36219 4.2 5.22219L2.21 3.22219ZM6.86 5.29219C6.73 5.16219 6.66 4.99219 6.65 4.78219V1.95219C6.66 1.75219 6.73 1.59219 6.86 1.45219C6.99 1.31219 7.16 1.24219 7.36 1.24219C7.56 1.24219 7.73 1.31219 7.86 1.45219C7.99 1.59219 8.06 1.75219 8.07 1.95219V4.78219C8.06 4.98219 7.99 5.14219 7.86 5.28219C7.73 5.42219 7.57 5.49219 7.37 5.49219C7.15 5.49219 6.99 5.42219 6.86 5.29219ZM18.75 5.24219C18.75 6.30219 18.36 7.24219 17.58 8.04219L14.08 11.5622C13.92 11.6922 13.75 11.7622 13.56 11.7622C13.37 11.7622 13.21 11.6922 13.07 11.5522C12.93 11.4122 12.86 11.2522 12.86 11.0622C12.86 10.8722 12.92 10.7122 13.06 10.5622L16.58 7.04219C16.83 6.79219 17.01 6.52219 17.14 6.21219C17.26 5.90219 17.33 5.58219 17.33 5.23219C17.33 4.89219 17.27 4.56219 17.14 4.24219C17.02 3.93219 16.83 3.65219 16.58 3.40219C16.05 2.91219 15.44 2.66219 14.75 2.66219C14.06 2.66219 13.46 2.91219 12.94 3.40219L9.43 6.93219C9.29 7.07219 9.12 7.14219 8.93 7.14219C8.74 7.14219 8.58 7.07219 8.43 6.93219C8.29 6.79219 8.22 6.62219 8.22 6.43219C8.22 6.24219 8.29 6.08219 8.43 5.93219L11.95 2.41219C12.77 1.63219 13.71 1.24219 14.76 1.24219C15.81 1.24219 16.75 1.63219 17.57 2.41219C18.36 3.24219 18.75 4.18219 18.75 5.24219ZM13.15 14.7222C13.29 14.8622 13.36 15.0222 13.36 15.2222V18.0522C13.36 18.2522 13.29 18.4122 13.15 18.5522C13.01 18.6922 12.84 18.7622 12.64 18.7622C12.44 18.7622 12.27 18.6922 12.14 18.5522C12.01 18.4122 11.94 18.2522 11.94 18.0522V15.2222C11.94 15.0222 12 14.8622 12.14 14.7222C12.27 14.5822 12.44 14.5122 12.65 14.5122C12.85 14.5122 13.02 14.5822 13.15 14.7222ZM18.54 12.1422C18.67 12.2822 18.74 12.4522 18.74 12.6522C18.74 12.8522 18.67 13.0222 18.54 13.1522C18.41 13.2822 18.25 13.3522 18.05 13.3522H15.22C15.01 13.3522 14.84 13.2822 14.71 13.1522C14.58 13.0222 14.51 12.8522 14.51 12.6522C14.51 12.4522 14.57 12.2822 14.71 12.1422C14.84 12.0022 15.01 11.9322 15.22 11.9322H18.05C18.24 11.9322 18.4 12.0022 18.54 12.1422ZM17.81 16.7822C17.94 16.9422 18.01 17.1122 18.01 17.3022C18.01 17.4922 17.94 17.6522 17.8 17.7922C17.66 17.9322 17.49 18.0022 17.31 18.0022C17.13 18.0022 16.96 17.9322 16.82 17.8022L14.8 15.7822C14.66 15.6422 14.59 15.4722 14.59 15.2822C14.59 15.0922 14.66 14.9322 14.8 14.7922C14.94 14.6522 15.11 14.5822 15.3 14.5822C15.49 14.5722 15.65 14.6422 15.8 14.7922L17.81 16.7822Z"
            />
          </svg>

          <!-- <img src="../../assets/images/classObserve/lianjie.png" alt="" /> -->
        </span>
      </div>
      <div class="tit" v-else></div>
      <div class="teaInfo" @click="cutPage(3)" v-if="tid">
        <div class="teaName">{{ bmData.jsonData ? bmData.jsonData.teacherName : '' }}</div>
        <div class="classInfo" v-if="bmData.jsonData && bmData.jsonData.grade">{{ bmData.jsonData.grade }}</div>
        <div class="classInfo" v-if="bmData.jsonData && bmData.jsonData.subject">{{ bmData.jsonData.subject }}</div>
        <img src="../../assets/images/classObserve/fillInfo.svg" alt="" />
      </div>
      <div v-else class="teaInfo"></div>
      <!-- <div class="noTid" v-if="!tid">
				<div class="nt_btn">创建新的课堂</div>
			</div> -->
      <div class="chat">
        <div class="transcriptionArea" v-if="tid">
          <div class="ta_btn">
            <span>
              <img src="../../assets/images/classObserve/Vector2.svg" v-if="[0].includes(showTranscriptType)" />
              <img src="../../assets/images/classObserve/Vector.svg" v-else @click.stop="changeTranscriptType(0)" />
            </span>
            <span>
              <img src="../../assets/images/classObserve/zhuanlu2.svg" v-if="[1].includes(showTranscriptType)" />
              <img src="../../assets/images/classObserve/zhuanlu.svg" v-else @click.stop="changeTranscriptType(1)" />
            </span>
          </div>
          <div
            v-show="showTranscriptType == 0"
            ref="transcriptionDataRef"
            class="chatTxt"
            v-text="bmData.jsonData ? bmData.jsonData.transcriptionData : ''"
          ></div>
          <div v-show="showTranscriptType == 1" class="editorBarData">
            <template v-if="bmData.jsonData">
              <div class="ebd_save">
                <!-- <van-popover placement="left" v-model="showEditorBarDataPopover" trigger="click"> -->
                  <div class="ebd_s_btnArea">
                    <!-- <el-button class="ebd_s_ba_btn" size="small" type="primary" @click.stop="speakerCodingFn">说话人编码</el-button> -->

                    <!-- <el-button class="ebd_s_ba_btn" size="small" type="primary" @click.stop="behaviorCodingFn">行为编码</el-button> -->

                    <el-button class="ebd_s_ba_btn" size="small" type="primary" @click.stop="saveEditorBarFn">保存</el-button>
                  </div>
                  <!-- <template #reference>
                    <svg
                      t="1724054294290"
                      viewBox="0 0 1024 1024"
                      version="1.1"
                      xmlns="http://www.w3.org/2000/svg"
                      p-id="2400"
                      width="200"
                      height="200"
                      :style="showEditorBarDataPopover ? 'transform: rotate(180deg);' : ''"
                    >
                      <path
                        d="M704 908.8 307.2 512 704 115.2c25.6-25.6 25.6-70.4 0-96-25.6-25.6-70.4-25.6-96 0L166.4 460.8C147.2 480 140.8 492.8 140.8 512s6.4 32 19.2 51.2l441.6 441.6c25.6 25.6 70.4 25.6 96 0C729.6 979.2 729.6 934.4 704 908.8z"
                        p-id="2401"
                      ></path>
                    </svg>
                  </template> -->
                <!-- </van-popover> -->
              </div>

              <EditorBar v-model="bmData.jsonData.editorBarData.content">
                <!-- <el-popover placement="top" trigger="hover">
                <el-button size="small" @click.stop="startContinuousJobs('role')">
                  说话人编码
                </el-button>
                <el-button size="small" @click.stop="startContinuousJobs('actionType')">
                  行为编码
                </el-button>
                <el-button
                  slot="reference"
                  style="position: absolute; bottom: 20px; right: 90px; z-index: 10002"
                  size="small"
                  type="primary"
                  >自动编码</el-button
                >
              </el-popover>
              <el-button
                style="position: absolute; bottom: 20px; right: 20px; z-index: 10002"
                size="small"
                type="primary"
                @click.stop="saveEditorBar(true)"
                >保存</el-button
              > -->
              </EditorBar>
            </template>
          </div>
        </div>
        <img
          src="../../assets/images/classObserve/waveanimation.png"
          alt=""
          v-if="
            (imageList.jsonData ? imageList.jsonData.fileList.length == 0 : true) ||
              [1, 2, 3].includes(recordedForm.status)
          "
        />
        <div class="time" v-if="[1, 2, 3].includes(recordedForm.status)">
          {{ recordedForm.time }}
        </div>
				<div class="time" v-else></div>
        <div
          class="sourceFile"
          v-if="
            (imageList.jsonData ? imageList.jsonData.fileList.length != 0 : false) &&
              ![1, 2, 3].includes(recordedForm.status)
          "
        >
          <mini-audio
            v-if="imageList.jsonData ? imageList.jsonData.fileList.length != 0 : false"
            :audio-source="imageList.jsonData.fileList[0].url"
            class="audio_class"
          ></mini-audio>
        </div>
      </div>
      <div class="controlArea" v-loading="recordedForm.loading">
        <div class="ca_left">
          <img @click="goChat" src="../../assets/images/classObserve/rootper.svg" alt="" />
          <van-popover placement="top" v-model="changeLanguageShow" trigger="click">
            <div class="languageList">
              <div
                :class="[choiceLanguageIndex == item.index ? 'l_active' : '']"
                v-for="(item, index) in languageList"
                :key="index"
                @click.stop="changeLanguageFn(item.index)"
              >
                {{ item.label }}
              </div>
            </div>
            <template #reference>
              <img src="../../assets/images/classObserve/langcut.svg" alt="" />
            </template>
          </van-popover>
        </div>

        <div class="recordBtn">
          <img
            @click="endRecord"
            v-if="[1, 2].includes(recordedForm.status)"
            src="../../assets/images/classObserve/endLang.svg"
            alt=""
          />
          <img
            @click="startRecord"
            v-if="[0, 3].includes(recordedForm.status)"
            src="../../assets/images/classObserve/recording.svg"
            alt=""
          />
        </div>
        <div class="ca_right">
          <img
            style="transform: scale(1.1,1.1);"
            src="../../assets/images/classObserve/suspend.svg"
            alt=""
            v-if="[1].includes(recordedForm.status)"
            @click.stop="stopRecord"
          />
          <img
            src="../../assets/images/classObserve/start.svg"
            alt=""
            v-if="[2].includes(recordedForm.status)"
            @click.stop="reStartRecord"
          />
          <img
            style="transform: scale(.8,.8);"
            src="../../assets/images/classObserve/uploadFile.svg"
            alt=""
            v-if="[0, 3].includes(recordedForm.status)"
            @click.stop="uploadFileFn"
          />
          <div @click="historyBtn" style="position: relative;">
            <span
              style="position: absolute;top: -3px;right: -6px;color: rgba(54, 129, 252, 1);width: 15px;font-size: 10px;"
              >{{ classList.length }}</span
            >
            <img style="transform: scale(.8,.8);" src="../../assets/images/classObserve/book.svg" alt="" />
          </div>
        </div>
      </div>
      <div class="selectBtn">
        <div>
          <van-popover placement="top-start" v-model="addNewCourseShow">
            <div class="addNewCourse">
              <div class="addNewCourseBtn" @click.stop="cutPage(5)">选择模板创建</div>
              <div class="addNewCourseBtn" @click.stop="createDefaultCourse()">默认模板创建</div>
            </div>
            <template #reference>
              <button :disabled="![0,3].includes(recordedForm.status)" class="btn1" @click.stop="showAddNewCourse()">
                创建课堂
                <div v-if="![0,3].includes(recordedForm.status)" class="one" @click.stop="showAddNewCourse()"></div>
              </button>
            </template>
          </van-popover>
        </div>
        <div>
          <button class="btn2" @click="cutPage(8)">
            查看分析
          </button>
        </div>
      </div>
    </div>

    <van-action-sheet v-model="historyShow" title="历史课堂" v-loading="historyListLoading">
      <div class="historyList">
        <div class="con" v-for="(item, index) in classList" :key="index">
          <div :class="['tit', tid == item.value ? 'titActive' : '']" @click="changeTidFn(item)">{{ item.label }}</div>
          <van-popover placement="bottom-end" v-model="item.show" trigger="click">
            <div class="abu">
              <div class="abuBtn" @click.stop="editClass(item)">
                <img src="../../assets/images/classObserve/edit.svg" alt="" />
                <span>重命名</span>
              </div>
              <div class="abuBtn" @click.stop="delClass(item)">
                <img src="../../assets/images/classObserve/del2.svg" alt="" />
                <span>删除</span>
              </div>
            </div>
            <template #reference>
              <img src="../../assets/images/classObserve/colD.svg" alt="" />
            </template>
          </van-popover>
          <van-popover class="editPopover" placement="left-end" v-model="item.edit" trigger="click">
            <van-cell-group>
              <van-field
                class="ecn_field"
                v-model="item.newLabel"
                :disabled="historyListLoading"
                center
                label="名称："
                placeholder="请输入新的课堂名称"
              >
                <template #button>
                  <van-button :disabled="historyListLoading" size="small" type="primary" @click.stop="onEdit(item)"
                    >确定修改</van-button
                  >
                </template>
              </van-field>
            </van-cell-group>
          </van-popover>
        </div>
      </div>
    </van-action-sheet>

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

<script>
import { Dialog } from 'vant'
import { loginOut } from '@/api/user'
import _ from 'lodash'
import Papa from 'papaparse'
import '../../utils/aws-sdk-2.235.1.min.js'
import { upload_file_knowledgeRequest } from '@/api/classObserve.js'
let OpenCC = require('opencc-js')
import EditorBar from './components/wangEnduit.vue'

const OPTIONS_GROUP = {
  default: [
    "老师讲课",
    "老师提问或点名",
    "老师板书或操作",
    "老师评价或反馈",
    "老师其他",
    "学生发言",
    "学生小组活动",
    "学生自主学习",
    "学生汇报分享",
    "学生其他",
  ],
};
const ATTENTION_GROUP = {
  default:
    "- 先根据说话人角色判断，再在对应角色的选项中选择选项\n- 如果没有合适的选项，默认使用`老师其他`或者`学生其他`",
};
const ROLE_OPTIONS_GROUP = {
  default: ["老师", "学生"],
};

const getFile = url => {
  return new Promise((resolve, reject) => {
    var credentials = {
      accessKeyId: 'AKIATLPEDU37QV5CHLMH',
      secretAccessKey: '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'
    } //秘钥形式的登录上传
    window.AWS.config.update(credentials)
    window.AWS.config.region = 'cn-northwest-1' //设置区域
    let url2 = url
    let _url2 = ''
    if (url2.indexOf('https://view.officeapps.live.com/op/view.aspx?src=') != -1) {
      _url2 = url2.split('https://view.officeapps.live.com/op/view.aspx?src=')[1]
    } else {
      _url2 = url2
    }
    var s3 = new window.AWS.S3({ params: { Bucket: 'ccrb' } })
    let name = decodeURIComponent(_url2.split('https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/')[1])
    var params = {
      Bucket: 'ccrb',
      Key: name
    }
    s3.getObject(params, function(err, data) {
      if (err) {
        console.log(err, err.stack)
        resolve({ data: 1 })
      } else {
        const fileContent = data.Body.toString('utf-8')
        resolve({ data: fileContent })
      } // sxuccessful response
    })
    // axios({
  })
}
export default {
  props: {
    page: {
      type: Number,
      default: 1
    },
    classList: {
      type: Array,
      default: () => []
    },
    bmData: {
      type: Object,
      default: () => {}
    },
    tid: {
      type: String,
      default: ''
    },
    imageList: {
      type: Object,
      default: () => {}
    },
		actionTypesMap:{
			type:Object,
			default:()=>{}
		},
  },
  components: {
    EditorBar
  },
  data() {
    return {
      isParse: false,
      loading: false,
			userId:this.$store.state.user.id,
      showTranscriptType: 0, //0：原文速览   1；转录文稿
      showEditorBarDataPopover: false,
      recordedForm: {
        time: '00:00:00', //时间
        status: 0, //0--未录音  1--正在录音  2--暂停  3--录音结束
        timer: null,
        timeDuration: 0,
        audioBlob: [],
        startTime: 0,
        endTime: 0,
        textList: [],
        loading: false
      },
      historyShow: false,
      uploadFileLoading: false,
      abuShowId: '',
      historyListLoading: false,
      addNewCourseShow: false,
      changeLanguageShow: false,
      languageList: [
        { index: 13, label: '英语' },
        { index: 3, label: '粤语' },
        { index: 2, label: '普通话' }
      ],
      choiceLanguageIndex: 2,
			jobContext:null,
    }
  },
  methods: {
		init(){
			this.jobContext = null;
			this.historyShow= false
      this.uploadFileLoading= false
      this.abuShowId= ''
      this.historyListLoading= false
      this.addNewCourseShow= false
      this.changeLanguageShow= false
			this.recordedForm = {
        time: '00:00:00', //时间
        status: 0, //0--未录音  1--正在录音  2--暂停  3--录音结束
        timer: null,
        timeDuration: 0,
        audioBlob: [],
        startTime: 0,
        endTime: 0,
        textList: [],
        loading: false
      }
			this.showTranscriptType = 0;
		},
    changeTranscriptType(newType) {
      this.showTranscriptType = newType
    },
    saveEditorBarFn() {
      Dialog.confirm({
        title: '保存',
        message: `确定保存转录文稿？`
      })
        .then(() => {
					this.$parent.saveEditorBar(true).then(_=>{
						this.$toast.success("保存成功")
					});
        })
        .catch(() => {
          console.log('不保存')
          this.showEditorBarDataPopover = true
        })
    },
    speakerCodingFn() {
      Dialog.confirm({
        title: '说话人编码',
        message: `确定获取说话人编码？`
      })
        .then(() => {
          console.log('获取说话人编码')
					this.startContinuousJobs('role');
          this.showEditorBarDataPopover = false
        })
        .catch(() => {
          console.log('不获取')
          this.showEditorBarDataPopover = true
        })
    },
    behaviorCodingFn() {
      Dialog.confirm({
        title: '行为编码',
        message: `确定获取行为编码？`
      })
        .then(() => {
          console.log('获取行为编码')
					this.startContinuousJobs('actionType');
          this.showEditorBarDataPopover = false
        })
        .catch(() => {
          console.log('不获取')
          this.showEditorBarDataPopover = true
        })
    },
		async startContinuousJobs(type /* role, actionType */) {
      const key = "default";
      const { appToken, options, attention } = {
        role: {
          appToken: "app-TonzLPv7rPG0EtnFKszOWjwt",
          options: ROLE_OPTIONS_GROUP[key],
          attention: undefined,
        },
        actionType: {
          appToken: "app-zOMxBqyEKoJSvW10e5SS0kgj",
          options: OPTIONS_GROUP[key],
          attention: ATTENTION_GROUP[key],
        },
      }[type];
      const config = {
        headers: {
          Authorization: `Bearer ${appToken}`,
          "Content-Type": "application/json",
        },
      };
      const content = this.bmData.jsonData.editorBarData.content;
      const div = document.createElement("div");
      div.innerHTML = content;
      const tableRows = _.slice(div.querySelectorAll(`table tbody tr`), 1);
      if (!tableRows.length || tableRows[0].cells.length < 7) {
        this.$toast.fail("没有可编码的内容");
        return;
      }
      const ctrl = new AbortController();
      this.jobContext = {
        ctrl,
        status: "running",
        restart: () => {},
        pause: () => {},
        stop: () => {
          const err = new Error();
          err.name = "StopError";
          this.jobContext.ctrl.abort(err);
        },
        progress: {
          current: 0,
          currentSize: 0,
          total: tableRows.length,
          percentage: 0,
        },
      };
      // large chunk size will cause token limit and slower
      const chunkSize = 10;
      this.actionTypesMap.jsonData[key] = Array.from({ length: tableRows.length }).fill(
        ""
      );

      const jobsResult = [];
      const jobs = _.chunk(tableRows, chunkSize).map((rows, index) => {
        return async (pauseSignal) => {
          this.jobContext.progress.current = index * chunkSize;
          this.jobContext.progress.currentSize = rows.length;
          this.jobContext.progress.percentage =
            ((index * chunkSize) / tableRows.length) * 100;
          const res = await fetch('https://dify.cocorobo.cn/v1/workflows/run',{
            signal: AbortSignal.any([this.jobContext.ctrl.signal, pauseSignal]),
            method: "POST",
            body: JSON.stringify({
              inputs: {
                // PERF better to just include `role` and `content` to minimize token cost
                rows: JSON.stringify(
                  rows.map((r) => ({
                    content: r.cells[3].textContent,
                    role: r.cells[5].textContent,
                  }))
                ),
                options: options.join(","),
                attention,
              },
              response_mode: "blocking",
              user: this.userId,
            }),
            ...config,
          }).then((res) => res.json());
          const error = _.get(res, ["data", "error"], null);
          // test
          // throw new Error('mock error');
          if (error) {
            const err = new Error(error);
            err.name = "DifyError";
            throw err;
          }
          const chunkResult = _.get(res, ["data", "outputs", "result"], []);
          jobsResult.splice(
            index * chunkSize,
            rows.length,
            ...Object.assign(new Array(rows.length), chunkResult.slice(0, rows.length))
          );
          // PERF dom更新太卡了
          // this.changeEditorBar({
          //   transcriptionData: this.transcriptionData.content,
          //   editorBarData: this.editorBarData,
          // });
        };
      });
      while (!this.jobContext.ctrl.signal.aborted && jobs.length > 0) {
        const job = jobs.shift();
        while (!this.jobContext.ctrl.signal.aborted) {
          const pauseCtrl = new AbortController();
          this.jobContext.pause = () => {
            const err = new Error();
            err.name = "PauseError";
            pauseCtrl.abort(err);
          };
          try {
            await job(pauseCtrl.signal);
            break;
          } catch (err) {
            // console.error(err);
            if (err.name === "StopError") {
              break;
            }
            this.jobContext.status = "paused";
            if (err.name === "PauseError") {
              this.jobContext.error = `用户暂停`;
            } else {
              this.jobContext.error = `部分生成失败。点击按钮可继续尝试生成`;
            }
            try {
              const restartPromise = new Promise((resolve, reject) => {
                this.jobContext.restart = resolve;
                this.jobContext.ctrl.signal.addEventListener("abort", reject);
              });
              await restartPromise;
              this.jobContext.status = "running";
              this.jobContext.error = null;
            } catch (_err) {
              // nothing to do, just continue
            }
          }
        }
      }
      if (type === "actionType") {
        this.actionTypesMap.jsonData[key] = jobsResult;
      } else if (type === "role") {
        const _div = document.createRange().createContextualFragment(this.bmData.jsonData.editorBarData.content);
        const _table = _div.querySelector('table')
        const _rows = _table.querySelectorAll(`tbody tr`);
        const _actionTypes = []
        _rows.forEach((i, index) => {
          while (i.cells.length > 7) {
            i.removeChild(i.lastElementChild);
          }
          if (index == 0) return;
          const actionTypeCell = i.cells[6] && i.removeChild(i.cells[6]);
          i.cells[5].textContent = jobsResult[index - 1]
          _actionTypes.push(_.get(actionTypeCell, "textContent", ""));
        });
        this.actionTypesMap.jsonData[key] = _actionTypes;
        this.bmData.jsonData.editorBarData.content = _table.outerHTML;
      }
			this.$parent.saveData(this.bmData).then(_=>{
				console.log("保存成功")
			})
      // this.changeEditorBar({
      //   transcriptionData: this.transcriptionData.content,
      //   editorBarData: this.editorBarData,
      // });
      this.jobContext = null;
    },
    changeLanguageFn(newIndex) {
      if (this.isParse) return this.$toast('正在录音中...')
      this.choiceLanguageIndex = newIndex
      this.changeLanguageShow = false
    },
    goChat() {
			this.cutPage(9)
      // this.$router.push({ path: '/aiChat', query: {} })
    },
    historyBtn() {
      this.historyShow = true
    },
    // 绑定表单
    cutPage(val) {
      if (this.isParse) return
      if ([2, 3, 8,9].includes(val) && !this.tid) {
        return this.$toast('请先选择或创建课堂')
      }
      this.$emit('cutPage', val)
    },
    showAddNewCourse() {
			if(![0,3].includes(this.recordedForm.status)){
				console.log("测试");
				
				return this.$toast.fail('请先结束录音')
			};
      // if (this.isParse) return (this.addNewCourseShow = false)
      this.addNewCourseShow = !this.addNewCourseShow
    },
    createDefaultCourse() {
      Dialog.confirm({
        title: '创建课堂',
        message: `确定使用默认模板来创建新的课堂？`
      })
        .then(() => {
          this.$parent.addNewCourseByDefault()
          this.addNewCourseShow = false
        })
        .catch(() => {
          console.log('不创建')
        })
    },
    ctrlRecord() {
      this.isParse = !this.isParse
    },
    endRecord() {
      if (this.recordedForm.loading) return this.$toast('请稍等')
      if ([1].includes(this.recordedForm.status)) {
        //正在录音时暂停
        let iiframe = this.$refs['iiframe']
        iiframe.contentWindow.window.document.getElementById('scenarioStopButton').click()
        // 录音借宿
        iiframe.contentWindow.onSessionStopped = (s, e) => {
          this.recordedForm.status = 3
          // this.controlsStatus = 2;
          // this.showGetTextLoading = false;
          this.$toast('已结束录音')
          clearInterval(this.recordedForm.timer)
          console.log('结束录音👇')
          console.log('结束录音', e)
          this.recordedForm.audioBlob.push(e.preaudio)
          let blob = new Blob(this.recordedForm.audioBlob, {
            type: 'audio/wav'
          })
          let file = new File([blob], 'recordedFile.wav', {
            type: 'text/plain'
          })
          this.uploadFile(file, { changeText: false, flag: true })
          iiframe.contentWindow.onSessionStopped = null
          iiframe.contentWindow.onRecognizedResult = null
        }
      } else if ([2].includes(this.recordedForm.status)) {
        //暂停时结束录音
        //暂停录音时
        this.recordedForm.status = 3
        // this.controlsStatus = 2;
        // this.showGetTextLoading = false;
        clearInterval(this.recordedForm.timer)
        let blob = new Blob(this.recordedForm.audioBlob, {
          type: 'audio/wav'
        })
        let file = new File([blob], 'recordedFile.wav', { type: 'text/plain' })
        this.uploadFile(file, { changeText: false, flag: true })
      }
    },
    startRecord(type = true) {
      if (this.recordedForm.loading) return this.$toast('请稍等')
      if (!this.tid) {
        return Dialog.confirm({
          title: '创建课堂并录音',
          message: `确定使用默认模板来创建新的课堂并开始录音？`
        })
          .then(() => {
            return this.$parent.addNewCourseByDefault().then(_ => {
              this.startRecord(false)
            })
          })
          .catch(_ => {
            console.log('不创建')
          })
      }
      // this.$toast.success("已开始录音")
      // console.log('开始录音')
      if (this.uploadFileLoading) return this.$toast('请稍等...')
      if ([0].includes(this.recordedForm.status)) {
        if (type) {
          return Dialog.confirm({
            title: '开始录音',
            message: `确定开始录音？`
          })
            .then(() => {
              this.startRecord(false)
            })
            .catch(e => {
              console.log(e)
              console.log('不录音')
            })
        }
        console.log('开始录音')
        let iiframe = this.$refs['iiframe']
        // console.log(iiframe.contentWindow.window)
        // console.log(iiframe.contentWindow)
        // 设置语言
        iiframe.contentWindow.window.document.getElementById('languageOptions').selectedIndex = this.choiceLanguageIndex

        iiframe.contentWindow.testdoContinuousPronunciationAssessment()

        this.recordedForm.status = 1
        this.showTranscriptType = 1
        this.$toast('已开始录音')
				this.recordedForm.loading = false;
        this.recordedForm.timer = setInterval(() => {
          this.recordedForm.timeDuration += 1
          this.recordedForm.time = this.updateRecordedTime({
            duration: this.recordedForm.timeDuration
          })
        }, 1000)

        let flag = true
        this.recordedForm.textList = []
        this.recordedForm.timeDuration = 0
        this.recordedForm.startTime = 1
        this.recordedForm.endTime = 0

        iiframe.contentWindow.onRecognizedResult = e => {
          this.recordedForm.endTime = this.recordedForm.timeDuration
          if (flag) {
            // this.controlsStatus = 1
            // this.showIndexPage = false
            // this.pageStatus = 2
            this.$parent.bmData.jsonData.editorBarData.type = '0'
            flag = false
            this.uploadFileLoading = false
            this.$parent.bmData.jsonData.transcriptionData = ''
            this.$parent.bmData.jsonData.editorBarData.content = ''
            this.recordedForm.textList = []
          }
          let privText = e.privText
          if (privText == undefined || privText == 'undefined') return
          console.log('👇转译对象👇')
          console.log(e)
          console.log('👇转译结果👇')
          console.log(privText)
          this.recordedForm.textList.push({
            value: privText,
            startTime: this.updateRecordedTime({
              duration: this.recordedForm.startTime
            }),
            endTime: this.updateRecordedTime({
              duration: this.recordedForm.endTime
            }),
            time: this.updateRecordedTime({
              duration: this.recordedForm.endTime - this.recordedForm.startTime
            })
          })
          this.recordedForm.startTime = this.recordedForm.timeDuration + 1
          this.$parent.bmData.jsonData.transcriptionData += privText
          this.$nextTick(
            () => (this.$refs.transcriptionDataRef.scrollTop = this.$refs.transcriptionDataRef.scrollHeight)
          )
          let _result = `<table border="0" width="100%" cellpadding="0" cellspacing="0" style="text-align: center"><tbody><tr><th>序号</th><th>开始时间</th><th>结束时间</th><th>发言内容</th><th>时长</th><th>说话人身份</th><th>行为编码</th></tr>`
          this.recordedForm.textList.forEach((item, index) => {
            _result += `<tr><td>${index + 1}</td><td>${item.startTime}</td><td>${item.endTime}</td><td>${
              item.value
            }</td><td>${item.time}</td><td></td><td></td></tr>`
          })
          _result += `<tr><td></td><td></td><td></td><td></td><td></td><td></td></tr></tbody></table>`
          this.$parent.bmData.jsonData.editorBarData.content = _result
        }
      } else if ([1, 2].includes(this.recordedForm.status)) {
        this.$toast.fail('正在录音中')
      } else {
        this.$toast('请稍等...')
      }
    },
    stopRecord() {
      // if (this.recordedForm.loading) return this.$toast('请稍等...')
      if ([1].includes(this.recordedForm.status)) {
        // 录音暂停
        //暂停
        this.recordedForm.loading = true
        let iiframe = this.$refs['iiframe']
        iiframe.contentWindow.window.document.getElementById('scenarioStopButton').click()
        // 录音结束
        iiframe.contentWindow.onSessionStopped = (s, e) => {
          this.recordedForm.status = 2
          this.$toast('已停止录音')
          clearInterval(this.recordedForm.timer)
          console.log('停止录音👇')
          console.log('停止录音', e)
          this.recordedForm.audioBlob.push(e.preaudio)
          iiframe.contentWindow.onSessionStopped = null
          iiframe.contentWindow.onRecognizedResult = null
          this.recordedForm.loading = false
        }
      } else {
        console.log('状态错误')
        // this.$toast()
      }
    },
    reStartRecord() {
      if ([2].includes(this.recordedForm.status)) {
        //录音开启
        this.recordedForm.loading = true
        let iiframe = this.$refs['iiframe']
        iiframe.contentWindow.window.document.getElementById('languageOptions').selectedIndex = this.choiceLanguageIndex
        iiframe.contentWindow.testdoContinuousPronunciationAssessment()
        // this.controlsStatus = 1;
        this.recordedForm.status = 1
        this.showTranscriptType = 1
        this.$toast('已继续录音')
        this.recordedForm.loading = false
        this.recordedForm.timer = setInterval(() => {
          this.recordedForm.timeDuration += 1
          this.recordedForm.time = this.updateRecordedTime({
            duration: this.recordedForm.timeDuration
          })
        }, 1000)
        iiframe.contentWindow.onRecognizedResult = e => {
          this.recordedForm.endTime = this.recordedForm.timeDuration
          // this.showGetTextLoading = true;
          let privText = e.privText
          if (privText == undefined || privText == 'undefined') return
          console.log('👇转译对象👇')
          console.log(e)
          console.log('👇转译结果👇')
          console.log(privText)
          this.recordedForm.textList.push({
            value: privText,
            startTime: this.updateRecordedTime({
              duration: this.recordedForm.startTime
            }),
            endTime: this.updateRecordedTime({
              duration: this.recordedForm.endTime
            }),
            time: this.updateRecordedTime({
              duration: this.recordedForm.endTime - this.recordedForm.startTime
            })
          })
          this.recordedForm.startTime = this.recordedForm.timeDuration + 1
          this.$parent.bmData.jsonData.transcriptionData += privText

          let _result = `<table border="0" width="100%"	cellpadding="0"	cellspacing="0" style="text-align: center"><tbody><tr><th>序号</th><th>开始时间</th><th>结束时间</th><th>发言内容</th><th>时长</th><th>说话人身份</th><th>行为编码</th></tr>`
          this.recordedForm.textList.forEach((item, index) => {
            _result += `<tr><td>${index + 1}</td><td>${item.startTime}</td><td>${item.endTime}</td><td>${
              item.value
            }</td><td>${item.time}</td><td></td><td></td></tr>`
          })
          _result += `<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr></tbody></table>`
          this.$parent.bmData.jsonData.editorBarData.content = _result
        }
      } else {
        console.log('状态错误')
      }
    },
    uploadFileFn() {
      if (!this.tid) {
        return Dialog.confirm({
          title: '创建课堂并上传文件',
          message: `确定使用默认模板来创建新的课堂并上传文件？`
        })
          .then(() => {
            return this.$parent.addNewCourseByDefault().then(_ => {
              this.uploadFileFn()
            })
          })
          .catch(_ => {
            console.log('不创建')
          })
      }
      if (this.uploadFileLoading) return this.$toast('请稍等...')
      let input = document.createElement('input')
      input.type = 'file'
      // input.accept = ".wav";
      // input.accept = "audio/*, .txt, .pdf, .xlsx";
      input.accept = '.wav,.txt,.pdf,.xlsx,.doc,.docx,.csv'
      input.click()
      input.onchange = () => {
        this.uploadFileLoading = true
        let file = input.files[0]
        if (!/\.(wav|txt|pdf|xlsx|doc|docx|csv)$/i.test(file.name)) {
          this.uploadFileLoading = false
          return this.$toast.error('请上传.wav,.txt,.pdf,.xlsx,.doc,.docx,.csv格式的文件')
        } else {
          this.uploadFile(file, { changeText: true, flag: true })
        }
      }
    },
    uploadFile(file, { changeText = true, flag = true }) {
      var credentials = {
        accessKeyId: 'AKIATLPEDU37QV5CHLMH',
        secretAccessKey: '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'
      } //秘钥形式的登录上传
      window.AWS.config.update(credentials)
      window.AWS.config.region = 'cn-northwest-1' //设置区域

      var bucket = new window.AWS.S3({ params: { Bucket: 'ccrb' } }) //选择桶
      var _this = this

      if (file) {
        this.loading = true
        // this.progressData.uploadLoading = true;
        // this.progressData.value = 0;
        var params = {
          Key:
            file.name.split('.')[0] +
            new Date().getTime() +
            '.' +
            file.name.split('.')[file.name.split('.').length - 1],
          ContentType: file.type,
          Body: file,
          'Access-Control-Allow-Credentials': '*',
          ACL: 'public-read'
        } //key可以设置为桶的相抵路径，Body为文件， ACL最好要设置
        var options = {
          partSize: 2048 * 1024 * 1024,
          queueSize: 2,
          leavePartsOnError: true
        }
        bucket
          .upload(params, options)
          .on('httpUploadProgress', function(evt) {
            //这里可以写进度条
            // _this.progressData.value = parseInt((evt.loaded * 100) / evt.total);
            // console.log("Uploaded : " + parseInt((evt.loaded * 80) / evt.total) + '%');
          })
          .send(function(err, data) {
            if (err) {
              _this.$toast.fail('上传失败')
              _this.uploadFileLoading = false
              _this.loading = false
              // _this.progressData.uploadLoading = false;
            } else {
              // 判断是不是音频文件
              const audioRegex = /\.(mp3|wav|ogg|flac|m4a)$/i
              const txtRegex = /\.(txt|csv)$/i
              const otherRegex = /\.(pdf|xlsx|doc|docx)$/i
              // if (audioRegex.test(data.Location)) {
              // 	// console.log(data);
              // 	_this.uploadWavFileAndGetText(file)
              // 	_this.$emit("changeAudioUrl", data);

              // 	// console.log("修改音频文件");
              // 	// console.log(data)
              // 	_this.uploadFileLoading = false;
              // }else if(txtRegex.test(data.Location)){
              // 	console.log("这hi是一个txt文件")
              // } else if(otherRegex.test(data.Location)){
              //
              if (audioRegex.test(data.Location)) {
                if (changeText) _this.wavFileGetText(file)
                _this.$parent.changeAudioUrl(data)
                // _this.$emit("changeAudioUrl", data);
                _this.loading = false
                _this.recordedForm.audioBlob = []
                _this.recordedForm.time = '00:00:00'
                _this.recordedForm.timeDuration = 0
                // _this.progressData.uploadLoading = false;
                _this.recordedForm.textList = []
                _this.$parent.saveEditorBar()
                return
              }

              upload_file_knowledgeRequest({
                url: data.Location
              })
                .then(res => {
                  let _data = res.FunctionResponse
                  if (_data.result && _data.result.id) {
                    _this.$parent.changeFileId(_data.result.id)
                    // _this.$emit("updateFileId", _data.result.id);
                    // _this.$message.success("成功获取fileId");
                    _this.uploadFileLoading = false
                    //处理文件
                    if (txtRegex.test(data.Location)) {
                      //txt
                      getFile(data.Location).then(_res => {
                        _this.controlsStatus = 2
                        _this.showIndexPage = false
                        _this.pageStatus = 2
                        _this.$parent.bmData.jsonData.editorBarData.type = '0'
                        let converter = OpenCC.Converter({
                          from: 'hk',
                          to: 'cn'
                        })
                        // _this.$parent.bmData.jsonData.transcriptionData = _res.data
                        if (flag) {
                          let arr = Papa.parse(_res.data, {
                            header: false
                          }).data
                          arr = arr.filter(i => _.get(i, 0) != converter('序号'))
                          const _editorBarDataContent = `<table border="0" width="100%" cellpadding="0" cellspacing="0" style="text-align: center"><tbody><tr><th>序号</th><th>开始时间</th><th>结束时间</th><th>发言内容</th><th>时长</th><th>说话人身份</th><th>行为编码</th></tr>${arr
                            .map(
                              row =>
                                `<tr><td>${_.get(row, 0, '')}</td><td>${_.get(row, 1, '')}</td><td>${_.get(
                                  row,
                                  2,
                                  ''
                                )}</td><td>${_.get(row, 3, '')}</td><td>${_.get(row, 4, '')}</td><td>${_.get(
                                  row,
                                  5,
                                  ''
                                )}</td><td>${_.get(row, 6, '')}</td></tr>`
                            )
                            .join('\n')}</tbody></table>`
                          _this.$parent.bmData.jsonData.editorBarData.content = _editorBarDataContent
                        } else {
                          _this.$parent.bmData.jsonData.editorBarData.content = _res.data
                        }
                        _this.$parent.bmData.jsonData.editorBarData.url = ''
                        _this.$parent.saveEditorBar()
                      })
                    } else if (otherRegex.test(data.Location)) {
                      //pdf、 docx、doc、xlxs

                      _this.$parent.bmData.jsonData.editorBarData.type = '1'
                      _this.$parent.bmData.jsonData.editorBarData.url = data.Location
                      _this.$parent.bmData.jsonData.editorBarData.content = ''
                      _this.$parent.saveEditorBar()
                      // console.log("pdf、xlsx、doc、docx文件处理");
                    }
                    _this.loading = false
                    // _this.progressData.uploadLoading = false;
                  } else {
                    _this.$toast.fail('修改fileId失败')
                  }

                  // this.$emit("updateFileId", data.Location)
                })
                .catch(e => {
                  _this.uploadFileLoading = false
                  // _this.progressData.uploadLoading = false;
                  console.log(e)
                  _this.$toast.fail('获取fileId失败')
                })
              // }

              // console.log(data.Location)
            }
          })
      }
    },

    analysis() {
      this.$router.push({ path: '/outcome', query: {} })
    },
    changeTidFn(item) {
      this.historyShow = false
      this.$parent.changeTid(item.value)
    },
    editClass(item) {
      let _index = this.$parent.classList.findIndex(i => i.id == item.id)
      if (_index !== -1) {
        this.$parent.classList[_index].edit = true
        this.$parent.classList[_index].show = false
      }
    },
    delClass(item) {
      if (this.historyListLoading) return this.$toast('请稍等...')
      Dialog.confirm({
        title: '删除课堂',
        message: `确定删除 "${item.label}" 这个课堂？`
      })
        .then(() => {
          this.$parent.delClass(item)
        })
        .catch(() => {
          console.log('不删除')
          // on cancel
        })

      // this.$parent.delClass(item)
    },
    onEdit(item) {
      if (this.historyListLoading) return this.$toast('请稍等...')
      if (item.newLabel.trim() == '') {
        this.$toast('请输入新的课堂名称')
        return
      }
      this.$parent.editClassName(item)
    },
    exitLogin() {
      this.$dialog({
        message: '是否退出' + this.$store.state.user.userinfo.username + '账号',
        showCancelButton: true,
        beforeClose: (action, done) => {
          if (action === 'confirm') {
            loginOut()
              .then(res => {
                this.$toast({
                  message: '退出成功',
                  type: 'success'
                })
                this.$store.dispatch('user/logout')
                window.location.reload()
                done()
              })
              .catch(err => {
                console.error(err)
                done()
              })
          } else {
            // 拦截取消操作
            done()
          }
        }
      })
    },
    updateRecordedTime({ duration }) {
      // 更新currentTime，将秒数转换为时分秒格式
      let hours = Math.floor(duration / 3600)
      let minutes = Math.floor((duration % 3600) / 60)
      let seconds = Math.floor(duration % 60)
      // this.recordedForm.time = `${hours.toString().padStart(2, "0")}:${minutes
      // 	.toString()
      // 	.padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`;
      return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds
        .toString()
        .padStart(2, '0')}`
    },
    wavFileGetText(audioFile) {
      let flag = true
      let textList = []
      let iiframe = this.$refs['iiframe']

      iiframe.contentWindow.window.document.getElementById('languageOptions').selectedIndex = this.choiceLanguageIndex
      this.bmData.jsonData.transcriptionData = ''
      iiframe.contentWindow.onRecognizedResult = () => {
        if (flag) {
          // 这里上传文件
          // _this.uploadWavFile(audioFile);

          this.bmData.jsonData.editorBarData.type = '0'
          flag = false
          this.uploadFileLoading = false
          this.bmData.jsonData.transcriptionData = ''
          this.bmData.jsonData.editorBarData.content = ''
          textList = []
        }
        // this.showGetTextLoading = true;
        let privText = e.privText
        console.log('👇转译对象👇')
        console.log(e)
        console.log('👇转译结果👇')
        console.log(privText)
        textList.push({
          value: privText,
          startTime: '',
          endTime: '',
          time: ''
        })
        this.bmData.jsonData.transcriptionData += privText

        let _result = `
				<table
						border="0"
						width="100%"
						cellpadding="0"
						cellspacing="0"
						style="text-align: center"
					>
						<tbody>
							<tr>
								<th>序号</th>
								<th>开始时间</th>
								<th>结束时间</th>
								<th>发言内容</th>
								<th>时长</th>
								<th>说话人身份</th>
								<th>行为编码</th>
						</tr>
				`
        textList.forEach((item, index) => {
          _result += `<tr>
							<td>${index + 1}</td>
							<td></td>
							<td></td>
							<td>${item.value}</td>
							<td></td>
							<td></td>
							<td></td>
						</tr>`
        })
        _result += `
				<tr>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
						</tr>
					</tbody>
				</table>`
        this.bmData.jsonData.editorBarData.content = _result
        // _this.editorBarData.content += privText;
      }

      iiframe.contentWindow.onSessionStopped = function(e) {
        console.log('转译完成')
        console.log(e)
        this.$toast.success('转译完成')
        // _this.showGetTextLoading = false;
        this.$parent.saveEditorBar()
      }

      iiframe.contentWindow.doContinuousPronunciationAssessment('', {
        files: [audioFile]
      })
    },

  }
}
</script>

<style lang="scss" scoped>
.observe {
  background-color: #e0eafb;
  height: calc(100%);
  display: flex;
  flex-direction: column;
  // justify-content: space-between;
  overflow: auto;
}
/deep/.van-action-sheet {
  min-height: 80% !important;
}
.top {
  width: 100%;
  height: 150px;
  box-sizing: border-box;
  padding-top: 15px;
  background-color: rgba(54, 129, 252, 1);
  // flex: 1;
  box-sizing: border-box;
  border-radius: 0 0 23% 23%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  img {
    display: block;
  }
  .Title {
    font-size: 20px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 30px;
    position: relative;
    width: 100%;
    span {
      position: absolute;
      right: 20px;
      font-size: 16px;
    }
  }
}
.brief {
  width: 100%;
  height: 80px;
  // padding-bottom: 20px;
  .txt {
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: rgba(54, 129, 252, 1);
    font-size: 18px;
    font-weight: 600;
  }
  .txt2 {
    display: flex;
    justify-content: center;
    color: rgba(65, 80, 109, 0.6);
    font-size: 12px;
  }
}
.FunctionalArea {
  width: 100%;
  height: calc(100vh - 230px);
  padding: 0 30px;
  box-sizing: border-box;
  .tit {
    display: flex;
    justify-content: space-between;
    height: 30px;
    div {
      font-weight: 600;
      font-size: 22px;
      color: rgba(0, 0, 0, 0.9);
    }
    img {
      width: 20px;
      object-fit: contain;
    }
  }
  .teaInfo {
    display: flex;
    justify-content: flex-start;
    padding: 10px 0;
    height: 15px;
    display: flex;
    align-items: center;
    // background-color: yellow;
    .teaName {
      padding-right: 10px;
      font-size: 14px;
      color: rgba(0, 0, 0, 0.6);
    }
    .classInfo {
      background-color: rgba(255, 255, 255, 0.55);
      font-size: 12px;
      border-radius: 3px;
      display: flex;
      align-items: center;
      padding: 0 10px;
      margin-right: 10px;
      color: rgba(0, 0, 0, 0.6);
    }
  }
}
.chat {
  display: flex;
  flex-direction: column;
  width: 100%;
  flex: 1;
  height: calc(100% - 205px);
  justify-content: flex-end;
  img {
    width: 100%;
    height: 100px;
  }
  .time {
    color: rgba(54, 129, 252, 1);
    width: 100%;
    font-size: 12px;
		height: 15px;
    display: flex;
		align-items: center;
    justify-content: center;
  }
}

.transcriptionArea {
  width: 100%;
  height: calc(100% - 115px);
  position: relative;
  .chatTxt {
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    // -webkit-line-clamp: 4;
    // display: -webkit-box;
    // -webkit-box-orient: vertical;
    // overflow: hidden;
    // text-overflow: ellipsis;
		min-height: 100px;
    height: 100%;
    overflow: auto;
    color: rgba(0, 0, 0, 0.6);
  }
  .editorBarData {
    min-height: 100px;
    // max-height: 10vh;
    height:calc(100% + 95px);
    position: relative;
    .ebd_save {
      right: 0;
      top: 100%;
      width: auto;
      height: 40px;
      position: absolute;
      display: flex;
      justify-content: center;
      align-items: center;
      // background-color: #fff;
      box-sizing: border-box;
      // border: solid 1px #cccccc;
      border-left: none;
			.ebd_s_btnArea{
				width: 100%;
				display: flex;
				justify-content: flex-end;
				.ebd_s_ba_btn{
					font-size: 10px;
					padding: 6px 7px;
					margin: 0;
					margin-left: 5px;
					border-radius: 30px;
				}
			}
    }
  }
  .ta_btn {
    width: auto;
    height: auto;
    position: absolute;
    right: 0;
    bottom: 100%;
    display: flex;
    span {
      width: 22px;
      height: 22px;
      padding: 5px;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-left: 5px;
      img {
        width: 22px;
        height: 22px;
      }
    }
  }
}
.controlArea {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 80px;
  img {
    object-fit: contain;
  }
  .ca_left {
    box-sizing: border-box;
    padding-right: 10px;
    width: calc(50% - 30px);
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    img {
      width: 28px;
      height: 28px;
    }
  }
  .ca_right {
    box-sizing: border-box;
    padding-left: 10px;
    width: calc(50% - 30px);
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    img {
      width: 28px;
      height: 28px;
    }
  }
  .recordBtn {
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    img {
      width: 150%;
      height: 150%;
      object-fit: contain;
    }
  }
}
.selectBtn {
  display: flex;
  justify-content: space-around;
  margin-bottom: 10px;
  height: 50px;
  div {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    .one {
      background-color: rgba(249, 245, 245, 0.7);
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
    }
    :deep(.van-popover__wrapper) {
      width: 100%;
      .btn1 {
        position: relative;
        flex: 1;
        width: 100%;
        overflow: hidden;
        padding: 15px 0;
        border-radius: 13px;
        border: none;
        color: rgba(0, 0, 0, 0.9);
        font-weight: 550;
        font-size: 16px;
        background-color: #fff;
        margin-right: 10px;
      }
    }

    .btn2 {
      width: 100%;
      position: relative;
      padding: 15px 0;
      border-radius: 13px;
      overflow: hidden;
      border: none;
      color: rgba(255, 255, 255, 0.9);
      background-color: rgba(54, 129, 252, 1);
      font-weight: 550;
      font-size: 16px;
      margin-left: 10px;
    }
  }
}
.historyList {
  box-sizing: border-box;
  padding: 10px 20px;

  .con {
    display: flex;
    border-bottom: 1px #ccc solid;
    justify-content: space-between;
    padding: 15px 0;
    .tit {
      font-weight: 400;
      font-size: 16px;
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .titActive {
      color: rgba(54, 129, 252, 1);
    }
    .editClassName {
      width: 100%;
    }
  }
}
.abu {
  background-color: #fff;
  width: 100px;
  border-radius: 6px;
  padding: 10px 10px;
  box-shadow: 0px 8px 10px -5px rgba(0, 0, 0, 0.08);
  box-shadow: 0px 16px 24px 2px rgba(0, 0, 0, 0.04);
  box-shadow: 0px 6px 30px 5px rgba(0, 0, 0, 0.05);
  .abuBtn {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    font-size: 12px;
    font-weight: 400;
    img {
      margin-right: 5px;
    }
  }
}

.ecn_field {
  :deep(.van-cell__title) {
    width: 3em;
  }
}

// .noTid{
// 	width: 100%;
// 	height: auto;
// 	display: flex;
// 	align-items: center;
// 	.nt_btn{
// 		padding: 10px 20px;
// 		border-radius: 10px;
// 		background-color: rgba(54, 129, 252, 1);
// 		color: #fff;
// 		font-size: 16px;
// 		font-weight: 550;
// 		margin-top: 20px;
// 	}
// }

.addNewCourse {
  width: 70vw;
  height: auto;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 8px 4px;
  .addNewCourseBtn {
    padding: 10px;
    width: 100%;
    margin: 5px;
    display: flex;
    justify-content: center;
    align-content: center;
    background-color: rgba(54, 129, 252, 1);
    color: #fff;
    border-radius: 8px;
  }
}

.languageList {
  width: auto;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 10px;

  div {
    padding: 10px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    transition: 0.3s;
  }
  .l_active {
    background-color: #d8d8d8a2;
    color: rgba(54, 129, 252, 1);
  }
}

.audio_class {
  /* width: 100% !important; */
  /* height: 100% !important; */
  background: #ccc !important;
  // margin: 0 !important;
  width: 100% !important;
  box-sizing: border-box;
  // margin: 20px 0 !important;
}

.sourceFile {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
}
.audio_class >>> .slider .process {
  background: #000;
}

.ebd_s_btnArea {
  width: auto;
  height: 45px;
  display: flex;
  justify-content: center;
  align-items: center;
  // background-color: red;
}
</style>
