<template>
  <div class="classInfo">
    <bar @cutPage="cutPage" :tit="'课程信息设置'" :backPage="0"></bar>
    <div style="height: 55px;width: 100%;"></div>
    <div class="cellList">
      <div class="cellB">
        <div class="tit">课程名称</div>
        <div>
          <input type="text" v-model="bmData.jsonData.courseName" placeholder="请输入课程名称" @change="changeData()" />
        </div>
      </div>
      <div class="cellB">
        <div class="tit">学生人数</div>
        <div>
          <input
            type="number"
            v-model="bmData.jsonData.studentNum"
            placeholder="请输入学生人数"
            @change="changeData()"
          />
        </div>
      </div>
      <div class="cellB">
        <div class="tit">授课老师</div>
        <div>
          <input
            type="text"
            v-model="bmData.jsonData.teacherName"
            placeholder="请输入授课老师"
            @change="changeData()"
          />
        </div>
      </div>
      <div class="cellB">
        <div class="tit">授课时间</div>
        <div @click="showTime = true">
          <span v-if="!bmData.jsonData.time">请选择</span>
          <span v-else>{{ bmData.jsonData.time }}</span>
          <van-icon name="arrow" />
        </div>
      </div>
      <div class="cellB">
        <div class="tit">授课年级</div>
        <div @click="showGrade = true">
          <span v-if="!bmData.jsonData.grade">请选择</span>
          <span v-else>{{ bmData.jsonData.grade }}</span>
          <van-icon name="arrow" />
        </div>
      </div>
      <div class="cellB">
        <div class="tit">授课科目</div>
        <div @click="showSubject = true">
          <span v-if="!bmData.jsonData.subject">请选择</span>
          <span v-else>{{ bmData.jsonData.subject }}</span>
          <van-icon name="arrow" />
        </div>
      </div>
      <div class="cellB">
        <div class="tit">教材版本</div>
        <div>
          <input type="text" v-model="bmData.jsonData.textbook" placeholder="请输入教程版本" @change="changeData()" />
        </div>
        <!-- <div @click="show = true">
          <span v-if="!currentDate">请选择</span>
          <span v-else></span>
          <van-icon name="arrow" />
        </div> -->
      </div>
      <div class="cellC" v-loading="imageLoading">
        <div class="tit">课堂图片</div>
        <div v-if="imageList.jsonData.fileList1.length">
          <van-image
            @click.stop="previewImage(imageList.jsonData.fileList1[0].url)"
            width="2rem"
            height="2rem"
            fit="cover"
            :src="imageList.jsonData.fileList1[0].url"
          />
          <span class="setting" @click.stop="delImage('fileList1')">
            <img src="../../assets/images/classObserve/delFile.svg" />
          </span>
        </div>

        <div v-if="imageList.jsonData.fileList2.length">
          <van-image
            @click.stop="previewImage(imageList.jsonData.fileList2[0].url)"
            width="2rem"
            height="2rem"
            fit="cover"
            :src="imageList.jsonData.fileList2[0].url"
          />
          <span class="setting" @click.stop="delImage('fileList2')">
            <img src="../../assets/images/classObserve/delFile.svg" />
          </span>
        </div>

        <div v-if="imageList.jsonData.fileList3.length">
          <van-image
            @click.stop="previewImage(imageList.jsonData.fileList3[0].url)"
            width="2rem"
            height="2rem"
            fit="cover"
            :src="imageList.jsonData.fileList3[0].url"
          />
          <span class="setting" @click.stop="delImage('fileList3')">
            <img src="../../assets/images/classObserve/delFile.svg" />
          </span>
        </div>

        <div
          class="upload"
          @click.stop="addImage()"
          v-if="
            !imageList.jsonData.fileList1.length ||
              !imageList.jsonData.fileList2.length ||
              !imageList.jsonData.fileList3.length
          "
        >
          <van-image :src="require('../../assets/images/classObserve/Union.svg')" />
        </div>
      </div>
      <div class="cellC" v-loading="videoLoading">
        <div class="tit">课堂视频</div>
        <div v-if="imageList.jsonData.videoList.length">
          <van-image
            width="3rem"
            height="2rem"
            fit="cover"
            @click.stop="showVideoDialog()"
            :src="require('../../assets/images/classObserve/isVideo.png')"
          />
          <span class="setting" @click.stop="delVideo()">
            <img src="../../assets/images/classObserve/delFile.svg" />
          </span>
        </div>
        <div
          v-if="!imageList.jsonData.videoList.length && !progressData.uploadVideo"
          class="upload"
          @click.stop="addVideo()"
          style="width: 3rem;height: 2rem;"
        >
          <van-image :src="require('../../assets/images/classObserve/Union.svg')" />
        </div>

        <div v-if="!imageList.jsonData.videoList.length && progressData.uploadVideo" style="width: 3rem;height: 2rem;">
          <van-image width="3rem" height="2rem" :src="require('../../assets/images/classObserve/videoFile.svg')" />

          <div class="progress">
            <div>{{ progressData.value }}%</div>
            <span v-if="!progressData.stop">上传中...</span>
            <span v-else>已暂停</span>
            <div class="bar">
              <div :style="{ width: progressData.value + '%' }"></div>
            </div>
          </div>

          <span class="setting">
            <img @click.stop="delUploadVideo()" src="../../assets/images/classObserve/delFile.svg" />
            <img
              v-if="!progressData.stop"
              @click.stop="stopUploadVideo()"
              src="../../assets/images/classObserve/stopIcon.png"
            />
            <img
              v-if="progressData.stop"
              @click.stop="startUploadVideo()"
              src="../../assets/images/classObserve/startIcon.png"
            />
          </span>
        </div>
      </div>

      <div class="cellC" v-loading="NephogramLoading">
        <div class="tit">词云图</div>
        <div style="width:3rem;height:2rem" v-if="imageList.jsonData.NephogramList.length">
          <eChartsView :data="imageList.jsonData.NephogramList[0]" />
          <span class="setting" @click.stop="delNephogram()">
            <img src="../../assets/images/classObserve/delFile.svg" />
          </span>
        </div>
        <div v-else class="upload" @click.stop="addNephogram()" style="width:3rem;height:2rem">
          <van-image
            style="width:.5rem;height:.5rem"
            :src="require('../../assets/images/classObserve/bmRefresh.png')"
          />
        </div>
      </div>
    </div>

    <van-action-sheet v-model="showTime" title="授课时间">
      <van-datetime-picker
        v-model="showTimeValue"
        type="datetime"
        title=""
        :min-date="minDate"
        :max-date="maxDate"
        :formatter="formatter"
        @confirm="onConfirmTime"
        @cancel="onCancelTime"
      />
    </van-action-sheet>

    <van-action-sheet v-model="showGrade" title="授课年级">
      <van-picker :show-toolbar="true" :columns="gradeList" @confirm="onConfirmGrade" @cancel="onCancelGrade" />
    </van-action-sheet>

    <van-action-sheet v-model="showSubject" title="授课科目">
      <van-picker
        :show-toolbar="showSubject"
        :columns="subjectList"
        @confirm="onConfirmSubject"
        @cancel="onCancelSubject"
      />
    </van-action-sheet>
    <uploadFile
      v-if="progressData.uploadVideo"
      ref="uploadFileRef"
      @progressUpdate="videoProgressUpdate"
      @delUpload="videoDelUpload"
      @success="updateVideoSuccess"
      @startUpload="videoStartUpload"
    />
    <van-dialog v-model="showVideo" title="视频查看" show-cancel-button>
      <div class="showVideoDialogBox" v-if="option.sources && showVideo">
        <video-player
          style="width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;"
          :playsinline="true"
          :options="option"
        ></video-player>
      </div>
    </van-dialog>
  </div>
</template>

<script>
import bar from './components/bar.vue'
import { ImagePreview } from 'vant'
import eChartsView from './components/eChartsView.vue'
import { Dialog } from 'vant'
import '../../utils/aws-sdk-2.235.1.min.js'
import uploadFile from './components/uploadFile.vue'
import { chatNoStreamRequest } from '../../api/classObserve'
import { v4 as uuidv4 } from "uuid";
export default {
  components: {
    bar,
    eChartsView,
    uploadFile
  },
  props: {
    page: {
      type: Number,
      default: 1
    },
    bmData: {
      type: Object,
      default: () => {}
    },
    tid: {
      type: String,
      default: ''
    },
    imageList: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      minDate: new Date(2024, 0, 1),
      maxDate: new Date(2028, 10, 1),
      currentDate: new Date(),
      changeTime: '',
      selectValue: '',
      value: '',
      show: false,
      showTime: false,
      showGrade: false,
      showSubject: false,
      videoLoading: false,
      imageLoading: false,
      showVideo: false,
      NephogramLoading: false,
      showTimeValue: this.bmData.jsonData.time,
      dateTime: '',
      gradeList: [
        '小学一年级',
        '小学二年级',
        '小学三年级',
        '小学四年级',
        '小学五年级',
        '小学六年级',
        '初中一年级',
        '初中二年级',
        '初中三年级',
        '高中一年级',
        '高中二年级',
        '高中三年级'
      ],
      subjectList: [
        '语文',
        '数学',
        '英语',
        '科学',
        '信息技术',
        '心理',
        '物理',
        '化学',
        '生物',
        '历史',
        '地理',
        '通用技术',
        '政治',
        'STEM',
        '美术',
        '音乐',
        '其他'
      ],
      option: {
        playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
        autoplay: false, //如果true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 导致视频一结束就重新开始。
        preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: 'zh-CN',
        aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: '',
        // poster: "https://p1.music.126.net/5zs7IvmLv7KahY3BFzUmrg==/109951163635241613.jpg?param=600y500", // 你的封面地址
        notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true,
          durationDisplay: true,
          remainingTimeDisplay: false,
          fullscreenToggle: true // 全屏按钮
        }
      },
      progressData: {
        stop: false,
        uploadVideo: false,
        value: 0,
        status: '',
        key: '',
        uploadid: ''
      }
    }
  },
  methods: {
    changeData() {
      this.$parent.saveData(this.bmData)
    },
    onConfirmTime(value) {
      let date = new Date(value)
      const year = date.getFullYear()
      const month = String(date.getMonth() + 1).padStart(2, '0')
      const day = String(date.getDate()).padStart(2, '0')
      const hours = String(date.getHours()).padStart(2, '0')
      const minutes = String(date.getMinutes()).padStart(2, '0')
      const seconds = String(date.getSeconds()).padStart(2, '0')
      this.bmData.jsonData.time = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
      this.showTime = false
      this.$parent.saveData(this.bmData)
    },
    onCancelTime() {
      this.showTime = false
    },
    cutPage() {
      this.$emit('cutPage', 1)
    },
    formatter(type, val) {
      if (type === 'year') {
        return val + '年'
      }
      if (type === 'month') {
        return val + '月'
      }
      if (type === 'day') {
        return val + '日'
      }
      if (type === 'hour') {
        return val + '时'
      }
      if (type === 'minute') {
        return val + '分'
      }
      return val
    },
    onConfirmGrade(value) {
      this.bmData.jsonData.grade = value
      this.changeData()
      this.showGrade = false
    },
    onCancelGrade() {
      this.showGrade = false
      console.log('取消')
    },
    onConfirmSubject(value) {
      this.bmData.jsonData.subject = value
      this.changeData()
      this.showSubject = false
    },
    onCancelSubject() {
      this.showSubject = false
      console.log('取消')
    },
    previewImage(url) {
      ImagePreview([url])
    },
    addImage() {
      if (!this.tid) return this.$toast.fail('请先选择课堂')
      // 上传图片
      let input = document.createElement('input')
      input.type = 'file'
      input.accept = 'image/*'
      input.click()
      input.onchange = () => {
        this.imageLoading = true
        let file = input.files[0]
        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) {
          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) {
              //这里可以写进度条
              // console.log("Uploaded : " + parseInt((evt.loaded * 80) / evt.total) + '%');
            })
            .send(function(err, data) {
              if (err) {
                _this.$toast.fail('上传图片失败')
                _this.imageLoading = false
              } else {
                let _fileKey = ''
                if (_this.imageList.jsonData.fileList1.length == 0) {
                  _fileKey = 'fileList1'
                } else if (_this.imageList.jsonData.fileList2.length == 0) {
                  _fileKey = 'fileList2'
                } else if (_this.imageList.jsonData.fileList3.length == 0) {
                  _fileKey = 'fileList3'
                }
                if (_fileKey) {
                  _this.imageList.jsonData[_fileKey] = [
                    {
                      name: data.key,
                      status: 'success',
                      uid: '1',
                      url: data.Location
                    }
                  ]
                  _this.$parent.saveData(_this.imageList).then(_ => {
                    _this.imageLoading = false
                    _this.$toast.success('上传图片成功')
                  })
                } else {
                  _this.$toast.fail('上传图片失败')
                }
              }
            })
        }
      }
    },
    delImage(key) {
      Dialog.confirm({
        title: '删除课堂图片',
        message: `确定删除课堂图片？`
      })
        .then(() => {
          this.imageLoading = true
          this.imageList.jsonData[key] = []
          this.$parent.saveData(this.imageList).then(_ => {
            this.imageLoading = false
            this.$toast.success('成功删除图片')
          })
        })
        .catch(() => {
          console.log('不删除')
          // on cancel
        })
    },
    showVideoDialog() {
      // console.log("测试测试")
      this.option.sources = this.imageList.jsonData.videoList[0].url
      this.showVideo = true
    },
    addVideo() {
      if (!this.tid) return this.$toast.fail('请选择课堂')
      let input = document.createElement('input')
      input.type = 'file'
      input.accept = 'video/*'
      input.click()
      input.onchange = () => {
        this.progressData.uploadVideo = true
        // this.uploadVideoLoading = true;
        this.progressData.stop = false
        this.progressData.status = ''
        this.progressData.value = 0
        let file = input.files[0]
        this.$nextTick(() => {
          this.$refs.uploadFileRef.awsupload({
            file: file,
            folderName: this.tid
          })
        })
      }
    },
    delVideo() {
      Dialog.confirm({
        title: '删除课堂视频',
        message: `确定删除该视频？`
      })
        .then(() => {
          this.videoLoading = true
          this.imageList.jsonData.videoList = []
          this.$parent.saveData(this.imageList).then(_ => {
            this.videoLoading = false
            this.$toast.success('成功删除视频')
          })
        })
        .catch(() => {
          console.log('不删除')
          // on cancel
        })
    },
    videoStartUpload({ key, uploadid }) {
      this.progressData.uploadid = uploadid
      this.progressData.key = key
      this.progressData.status = 'start'
    },
    updateVideoSuccess(res) {
      if (!res.data) return
      this.progressData.uploadVideo = false
      this.progressData.stop = false
      this.progressData.uploadid = ''
      this.progressData.status = ''
      this.progressData.value = 0
      let { data } = res
      this.$refs.uploadFileRef.file = null
      this.videoLoading = true
      this.imageList.jsonData.videoList = [
        {
          name: data.Key,
          status: 'success',
          uid: 'qgt',
          url: data.Location
        }
      ]
      this.$parent.saveData(this.imageList).then(_ => {
        this.videoLoading = false
        this.$toast.success('上传视频成功')
      })
      // this.$emit('saveVideo', {
      //   name: data.Key,
      //   status: 'success',
      //   uid: 'qgt',
      //   url: data.Location
      // })
    },
    videoProgressUpdate(data) {
      if (data.status == 'processing') {
        this.progressData.value = data.percent
        this.progressData.status = data.status
      } else if (data.status == 'fail') {
        this.progressData.value = data.percent
        this.progressData.status = data.status
        this.$toast.fail('上传发生错误，请点击继续上传')
        this.$refs.uploadFileRef.stopUpload()
      } else if (data.status == 'success') {
        this.progressData.value = data.percent
        this.progressData.status = data.status
        this.$refs.uploadFileRef.stopUpload()
      } else if (data.status == 'error') {
        this.progressData.stop = true
        this.progressData.status = data.status
        this.$refs.uploadFileRef.stopUpload()
        this.$toast.fail('传发生错误，请重新上传')
      }
      console.log(this.progressData)
    },
    videoDelUpload(res) {
      this.progressData.uploadVideo = false
      this.progressData.uploadid = ''
      this.progressData.key = ''
      this.progressData.status = ''
      this.progressData.stop = false
      this.progressData.value = 0
      this.$toast.success('已删除视频')
    },
    // 停止上传视频
    stopUploadVideo() {
      this.$refs.uploadFileRef.stopUpload()
      this.progressData.stop = true
      this.$toast.success('已停止上传')
    },
    //开始上传视频
    startUploadVideo() {
      // this.$message.info("开始上传")
      if (this.$refs.uploadFileRef.file && this.progressData.key) {
        this.$refs.uploadFileRef.awsupload({ keyName: this.progressData.key })
      } else {
        this.addVideo()
      }
      this.progressData.stop = false
    },
    delUploadVideo() {
      this.$refs.uploadFileRef.stopUpload()
      this.$refs.uploadFileRef.abortMultipartUpload(this.progressData.key, this.progressData.uploadid)
    },
    addNephogram() {
      if (!this.tid) return this.$toast.fail('请选择课堂')
      if (this.NephogramLoading) return this.$toast('请稍等...')
      this.NephogramLoading = true
      const _msg = `NOTICE
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.

## 任务

请基于以下课堂实录文本（大约5000字），提炼出20-30个关键词，用于绘制词云图。请给出相应的关键词，关键词出现的频次，词云图上的大小。请确保输出的关键字准确反映课堂实录的主要内容和主题。

## 要求

1. **提取关键词**：从提供的课堂实录文本中提取出20-30个最具代表性的关键字。关键词应该涵盖课堂实录中的主要概念、重要术语和核心主题。尽量选择多样化的关键词，避免过于集中在某一个主题或概念上。
2. **词频统计**：计算每个关键字在文本中出现的频率。
3. **词汇大小**：根据词频数量，确定每个关键字在词云图中的大小。词频越高，词汇大小数值越大，数值范围1-100。
4. **输出格式**：输出结果应包含每个关键字、对应的词频数量以及词汇大小数值。

## 输出格式

### 输出格式

[
	{"value":1,"name":"氯化钠","textStyle":{"color":"#ee7959"}},
	{"value":2,"name":"溶液","textStyle":{"color":"#db9b34"}},
	{"value":1,"name":"实验","textStyle":{"color":"#9d9d82"}},
	{"value":3,"name":"质量分数","textStyle":{"color":"#ea5514"}},
	{"value":1,"name":"溶质","textStyle":{"color":"#c8161d"}},
	{"value":2,"name":"氢氧化钠","textStyle":{"color":"#e60012"}},
	{"value":1,"name":"溶解度","textStyle":{"color":"#1e2732"}},
	{"value":4,"name":"饱和溶液","textStyle":{"color":"#e3adb9"}}
]

请仅仅输出表头，输出关键词和相应的内容，无需其它任何说明文字。
冒号、逗号等符号均使用英文字符。

### 输出示例

[
	{"value":1,"name":"氯化钠","textStyle":{"color":"#ee7959"}},
	{"value":2,"name":"溶液","textStyle":{"color":"#db9b34"}},
	{"value":1,"name":"实验","textStyle":{"color":"#9d9d82"}},
	{"value":3,"name":"质量分数","textStyle":{"color":"#ea5514"}},
	{"value":1,"name":"溶质","textStyle":{"color":"#c8161d"}},
	{"value":2,"name":"氢氧化钠","textStyle":{"color":"#e60012"}},
	{"value":1,"name":"溶解度","textStyle":{"color":"#1e2732"}},
	{"value":4,"name":"饱和溶液","textStyle":{"color":"#e3adb9"}}
]

## 课堂实录 
${this.bmData.jsonData.editorBarData ? this.bmData.jsonData.editorBarData.content : ''}
`
      const _uuid = uuidv4()
      let params = {
        // model: 'gpt-3.5-turbo',
				model: "gpt-4o-2024-08-06",
        temperature: 0,
        max_tokens: 4096,
        top_p: 1,
        frequency_penalty: 0,
        presence_penalty: 0,
        messages: [{ role: 'user', content: _msg }],
        uid: _uuid,
        mind_map_question: '',
        stream: false
      }
      chatNoStreamRequest(params)
        .then(res => {
          let _data = res.FunctionResponse.choices[0]
          let _jsonData = _data.message.content
          _jsonData = _jsonData.replaceAll('```json', '').replaceAll('```', '')
          let _result = JSON.parse(_jsonData)

          // this.$emit('saveNephogram', {
          //   tooltip: {
          //     show: false
          //   },
          //   series: [
          //     {
          //       type: 'wordCloud',
          //       sizeRange: [14, 38],
          //       rotationRange: [0, 0],
          //       keepAspect: false,
          //       shape: 'circle',
          //       left: 'center',
          //       top: 'center',
          //       right: null,
          //       bottom: null,
          //       width: '90%',
          //       height: '90%',
          //       // maskImage: maskImage,
          //       // sizeRange: [12, 60],
          //       rotationRange: [-90, 90],
          //       rotationStep: 45,
          //       // gridSize: 12,
          //       // autoSize: {
          //       //   enable: true,
          //       //   minSize: 12,
          //       // },
          //       data: _result
          //     }
          //   ]
          // })
          this.imageList.jsonData.NephogramList = [
            {
              tooltip: {
                show: false
              },
              series: [
                {
                  type: 'wordCloud',
                  sizeRange: [14, 38],
                  rotationRange: [0, 0],
                  keepAspect: false,
                  shape: 'circle',
                  left: 'center',
                  top: 'center',
                  right: null,
                  bottom: null,
                  width: '90%',
                  height: '90%',
                  // maskImage: maskImage,
                  // sizeRange: [12, 60],
                  rotationRange: [-90, 90],
                  rotationStep: 45,
                  // gridSize: 12,
                  // autoSize: {
                  //   enable: true,
                  //   minSize: 12,
                  // },
                  data: _result
                }
              ]
            }
          ]
          this.$parent.saveData(this.imageList).then(_ => {
            this.NephogramLoading = false
            this.$toast.success('生成词云图成功')
          })
        })
        .catch(e => {
          console.log(e)
          this.$toast.fail('生成词云图失败')
          this.NephogramLoading = false
        })
    },
    delNephogram() {
      Dialog.confirm({
        title: '删除词云图',
        message: `确定删除该词云图？`
      })
        .then(() => {
          this.NephogramLoading = true
          this.imageList.jsonData.NephogramList = []
          this.$parent.saveData(this.imageList).then(_ => {
            this.NephogramLoading = false
            this.$toast.success('成功删除词云图')
          })
        })
        .catch(() => {
          console.log('不删除')
          // on cancel
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.classInfo {
  padding: 0 20px;
  height: calc(100%);
  box-sizing: border-box;
  // margin-top: 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .van-cell {
    padding: 0;
    padding: 15px 0;
    border-bottom: 1px #ccc solid !important;
  }
  .van-cell__title {
    font-size: 16px;
    font-weight: 400;
  }
}
.cellList {
  flex: 1;
  overflow: auto;
}
.cellB {
  width: 100%;
  display: flex;
  box-sizing: border-box;
  padding: 15px 0;
  justify-content: space-between;
  border-bottom: 1px #ccc solid;

  .tit {
    color: rgba(0, 0, 0, 0.8);
    font-size: 16px;
    font-weight: 500;
  }
  span {
    font-size: 14px;
    color: #757575;
    margin-right: 2px;
  }
  input {
    border: none;
    height: 100%;
    font-size: 14px;
    text-align: right;
    // resize: none;
  }
}
.cellC {
  width: 100%;
  display: flex;
  box-sizing: border-box;
  padding: 15px 0;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px #ccc solid;
  .upload {
    width: 2rem;
    height: 2rem;
    background-color: #ccc;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .tit {
    color: rgba(0, 0, 0, 0.8);
    font-size: 16px;
    font-weight: 500;
  }
  div {
    position: relative;
    img {
      width: 80%;
    }
    .progress {
      width: 100%;
      height: 100%;
      position: absolute;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      top: 0;
      /* 加载 */
      /* cursor:wait !important; */
      background-color: #00000099;
      div:nth-child(1) {
        font-size: 20px;
        color: white;
      }
      span:nth-child(2) {
        font-size: 16px;
        color: #ffffff8c;
      }
      .bar {
        width: 100%;
        height: 5px;
        position: absolute;
        bottom: 0;
        background-color: #d8e3f7;
        div {
          background-color: #3975ce;
          max-width: 100%;
          height: 100%;
        }
      }
    }
    .setting {
      position: absolute;
      top: -0.25rem;
      left: -0.25rem;
      width: auto;
      height: 0.5rem;
      img {
        width: 0.5rem;
        height: 100%;
        margin-right: 0.2rem;
      }
    }
  }
}

.showVideoDialogBox {
  width: 100%;
  height: 5rem;
  :deep(.video-js) {
    width: 100%;
    height: 100%;
  }

  :deep(.vjs-big-play-button) {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
</style>
