shuzi

litian

2024-04-24 300c9e790fd04de30c982a05f8d7cd157f442b45

 src/views/home.vue

@@ -1,281 +1,1494 @@
<template>
  <div class="homeBox">
    <div class="herderBox">
      <p>文件</p>
      <div class="viewChangeBox">
        <el-icon :size="16" v-if="viewMode == 0" @click="setViewMode"><Calendar /></el-icon>
        <el-icon :size="16" v-if="viewMode == 1" @click="setViewMode"><Menu /></el-icon>
      </div>
      <div class="search">
        <el-input v-model="searchKey" size="small" placeholder="关键字搜索">
          <template #append>
            <el-button :icon="Search" />
          </template>
        </el-input>
      </div>
    <div class="headerBox">
      <p>数字教材平台</p>
    </div>
    <div class="toolBox">
      <div class="checkBox" v-if="viewMode == 0">
        <el-checkbox
          v-model="checkBoxState.check"
          :indeterminate="checkBoxState.indeterminate"
          @change="handleCheckAllChange"
        />
        <span class="checkText">{{
          checkBoxState.selectCount > 0
            ? `已选 ${checkBoxState.selectCount} 项`
            : `共 ${checkBoxState.totalCount} 项`
        }}</span>
      </div>
      <div class="sortBox" v-if="viewMode == 0">
        <el-dropdown trigger="click" @command="sortChange">
          <span class="sortText">
            <el-icon :size="16"><Sort /></el-icon>
            <span>
              按{{ sortState.fields[sortState.selectFieldIndex].name
              }}{{ sortState.types[sortState.selectTypeIndex].name }}排序
            </span>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item
                v-for="(item, index) in sortState.fields"
                :key="item.value"
                :command="'fields.' + item.value"
              >
                <p>
                  <span>
                    <el-icon v-if="sortState.selectFieldIndex == index" :size="16" color="#409EFF">
                      <Check />
                    </el-icon>
                  </span>
                  <span>{{ item.name }}</span>
                </p>
              </el-dropdown-item>
              <el-dropdown-item
                v-for="(item, index) in sortState.types"
                :key="item.value"
                :divided="index == 0"
                :command="'types.' + item.value"
              >
                <p>
                  <span>
                    <el-icon v-if="sortState.selectTypeIndex == index" :size="16" color="#409EFF">
                      <Check />
                    </el-icon>
                  </span>
                  <span>{{ item.name }}</span>
                </p>
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
    <div class="fileList">
      <div v-if="viewMode == 0" class="blockBox">
        <div class="fileItem" v-for="item in tableData">
          <div class="iconBox">
            <img :src="item.img" alt="" />
    <div class="contentBox">
      <!-- 菜单 -->
      <div class="menuBox">
        <div
          :class="['menuItem', activeMenu == index ? 'active' : '']"
          v-for="(item, index) in menuData"
          :key="index"
          @click="menuItemClick(index)"
        >
          <div class="menuIcon imgBox">
            <img :src="item.icon" />
          </div>
          <p class="name">{{ item.name }}</p>
          <p class="time">{{ item.createDate }}</p>
          <p>{{ item.name }}</p>
        </div>
        <!-- 设置 -->
        <el-popover placement="right" :width="200" trigger="click">
          <div class="settingBox">
            <el-form :model="settingForm" label-width="auto" style="max-width: 400px">
              <el-form-item label="答题音效">
                <el-switch v-model="settingForm.acoustics" />
              </el-form-item>
              <el-form-item label="答题动画">
                <el-switch v-model="settingForm.animation" />
              </el-form-item>
            </el-form>
          </div>
          <template #reference>
            <div class="setting hover">
              <img :src="setting" />
              <div>设置</div>
            </div>
          </template>
        </el-popover>
      </div>
      <!-- 菜单内容 -->
      <div class="menuContent" v-if="menuState.open">
        <div class="searchBox">
          <div class="inputBox">
            <el-input class="custom-input" placeholder="请输入内容">
              <template #prefix>
                <el-icon><Search /></el-icon>
              </template>
            </el-input>
          </div>
        </div>
        <!-- 目录 -->
        <div class="" v-if="activeMenu == 0"></div>
        <!-- 笔记 -->
        <div class="notesBox" v-if="activeMenu == 1">
          <div class="screenBox">
            <div class="title">筛选</div>
            <div class="flex1 hover" @click="searchClick('all')">
              <div :class="menuState.notesColor == 'all' ? ' allActive' : 'all'">全部</div>
            </div>
            <div
              v-for="item in colorSelectList"
              :key="item.key"
              class="flex1 hover"
              @click="searchClick(item)"
            >
              <div
                :style="{ background: item.key }"
                :class="item.key == menuState.notesColor ? 'activeScribe scribeItem' : 'scribeItem'"
              ></div>
            </div>
          </div>
        </div>
        <!-- 资源 -->
        <div class="" v-if="activeMenu == 2"></div>
        <!-- 知识图谱 -->
        <div class="" v-if="activeMenu == 3"></div>
        <!-- 截图 -->
        <div class="" v-if="activeMenu == 4"></div>
        <!-- 标签 -->
        <div class="" v-if="activeMenu == 5"></div>
      </div>
      <!-- 菜单内容收起 -->
      <div class="menuStateBox" v-if="menuState.open">
        <img :src="shouqiL" @click="menuState.open = false" />
      </div>
      <!-- 中间内容 -->
      <div class="pageBox">
        <!-- 头部显示 -->
        <div class="pageBox-header">
          <div class="classTime">
            <div class="qureIcon"></div>
            <div class="">已上课：{{ headerData.classTime }}</div>
          </div>
          <div class="progress">{{ headerData.process }}</div>
          <div class="rightBox">
            <div class="pageSizeBox">
              <div><img :src="zoomIn" @click="changePageSize('add')" /></div>
              <div>{{ headerData.pageSize }}%</div>
              <div><img :src="zoomOut" @click="changePageSize('reduce')" /></div>
            </div>
            <div class="brushImgBox">
              <div><img :src="huabi2" class="brushImg" />画笔</div>
              <!-- <el-switch v-model="headerData.brushToolShow"  @change="brushToolShow"/> -->
            </div>
          </div>
        </div>
        <!-- 微应用盒子 -->
        <div class="pageBox-content">
          <div id="container"></div>
          <!-- 画笔画布 -->
          <div class="canvas-box">
            <canvas
              @mousedown="mousedown"
              @mousemove.stop.prevent="mousemove"
              @mouseup="mouseup"
              ref="canvas"
              width="100%"
              height="100%"
            ></canvas>
          </div>
        </div>
      </div>
      <el-table v-if="viewMode == 1" :data="tableData" style="width: 100%">
        <el-table-column type="selection" width="55" />
        <el-table-column type="index" width="80" />
        <el-table-column prop="name" label="名称" sortable />
        <el-table-column prop="createDate" label="创建时间" width="200" sortable />
        <el-table-column prop="size" label="大小" width="200" sortable />
      </el-table>
      <!-- 教学组件 -->
      <div class="toolBox">
        <div class="toolTitle">
          教学组件
          <div class="text"></div>
        </div>
        <div class="menuList">
          <ul class="menu">
            <li
              v-for="item in teachToolsMenuData"
              :key="item.key"
              :class="item.name === activeTool ? 'activeItem hover' : 'menuItem hover'"
              :style="!toolState.open ? 'padding:10px 15px' : ''"
              @click="selectTeachTools(item)"
            >
              <img :src="item.icon" alt="" />
              <span v-if="toolState.open">{{ item.name }}</span>
            </li>
          </ul>
        </div>
        <div :class="['openBox', toolState.open ? 'right' : '']">
          <img :src="shouqiR" v-if="toolState.open" @click="toolState.open = false" />
          <img :src="shouqiL" v-if="!toolState.open" @click="toolState.open = true" />
        </div>
        <div class="classRoomBox" v-if="toolState.open">
          <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
            <el-tab-pane label="备课组件" name="first">
              <div class="tabBox">
                <div class="insertSelect">
                  <div
                    :class="selectType == 'resource' ? 'typeActive' : 'selectItem hover'"
                    @click="selectTypeClick('resource')"
                  >
                    <img :src="selectType == 'resource' ? charuziyuan_blue : charuziyuan" />
                    <div>插入资源</div>
                  </div>
                  <div
                    :class="selectType == 'answer' ? 'typeActive' : 'selectItem hover'"
                    @click="selectTypeClick('answer')"
                  >
                    <img :src="selectType == 'answer' ? dati_charu_blue : dati_charu" />
                    <div>插入答题</div>
                  </div>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="上课组件" name="second">
              <div class="tabBox">
                <div class="giveLessons hover" @click="giveLessonsClick()">
                  <img :src="xiake" />
                  <span>{{ classStart ? '上课' : '下课' }}</span>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
      <!-- 画笔工具栏 -->
      <div
        draggable="true"
        class="draggableBox"
        @dragstart="dragstart($event)"
        @dragend="dragend($event)"
        :style="`left:${floatingToolData.elLeft}px;top:${floatingToolData.elTop}px`"
      >
        <div
          class="hover"
          v-for="item in floatingToolBox"
          :key="item.name"
          @click="floatItemHandle(item)"
          @mouseover="floatOverHander(item)"
          @mouseout="floatOutHander(item)"
        >
          <el-popover
            placement="right"
            :width="
              floatingToolData.activeToolData == '标注'
                ? 120
                : floatingToolData.activeToolData == '清除'
                  ? 200
                  : 250
            "
            trigger="click"
            v-if="
              floatingToolData.activeToolData == '画笔' ||
              floatingToolData.activeToolData == '清除' ||
              floatingToolData.activeToolData == '文字' ||
              floatingToolData.activeToolData == '标注'
            "
          >
            <div class="popinnerBox">
              <div class="brush" v-if="floatingToolData.activeToolData == '画笔'">
                <div class="thickness">
                  <div
                    :class="floatingToolData.thicknessActive == 'small' ? 'small active' : 'small'"
                    @click="selectThickness('small')"
                  ></div>
                  <div
                    :class="
                      floatingToolData.thicknessActive == 'middle' ? 'middle active' : 'middle'
                    "
                    @click="selectThickness('middle')"
                  ></div>
                  <div
                    :class="floatingToolData.thicknessActive == 'large' ? 'large active' : 'large'"
                    @click="selectThickness('large')"
                  ></div>
                </div>
                <div class="lineStyle">
                  <div class="lineTypeBox">
                    <div
                      :class="
                        floatingToolData.lineTypeActive == 'solid'
                          ? 'typeItem lineTypeActive'
                          : 'typeItem'
                      "
                      @click="selectLineType('solid')"
                    >
                      <div class="solid"></div>
                      <div class="activeIcon" v-if="floatingToolData.lineTypeActive == 'solid'">
                        <img :src="xuanzhong" />
                      </div>
                    </div>
                    <div
                      :class="
                        floatingToolData.lineTypeActive == 'dashed'
                          ? 'typeItem lineTypeActive'
                          : 'typeItem'
                      "
                      @click="selectLineType('dashed')"
                    >
                      <div class="dashed"></div>
                      <div class="activeIcon" v-if="floatingToolData.lineTypeActive == 'dashed'">
                        <img :src="xuanzhong" />
                      </div>
                    </div>
                  </div>
                  <div class="colorSelectBox">
                    <div
                      v-for="item in colorSelectList"
                      :key="item.key"
                      class="flex1 hover"
                      @click="lineColorSelect(item)"
                    >
                      <div :style="{ background: item.key }" class="scribeItem">
                        <img :src="xuanzhong" v-if="item.key == floatingToolData.lineColorActive" />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="cleanup" v-if="floatingToolData.activeToolData == '清除'">
                <div class="cleanupItem hover" @click="cleanUpSelect('prev')">
                  <img :src="clearPrevious" />
                  <div>清除上一步</div>
                </div>
                <div class="cleanupItem hover" @click="cleanUpSelect('all')">
                  <img :src="clear" />
                  <div>清除全部</div>
                </div>
              </div>
              <div class="write" v-if="floatingToolData.activeToolData == '文字'">
                <div class="thickness">
                  <div
                    :class="floatingToolData.thicknessActive == 'small' ? 'small active' : 'small'"
                    @click="selectThickness('small')"
                  ></div>
                  <div
                    :class="
                      floatingToolData.thicknessActive == 'middle' ? 'middle active' : 'middle'
                    "
                    @click="selectThickness('middle')"
                  ></div>
                  <div
                    :class="floatingToolData.thicknessActive == 'large' ? 'large active' : 'large'"
                    @click="selectThickness('large')"
                  ></div>
                </div>
                <div class="lineStyle">
                  <div class="colorSelectBox">
                    <div
                      v-for="item in colorSelectList"
                      :key="item.key"
                      class="flex1 hover"
                      @click="lineColorSelect(item)"
                    >
                      <div :style="{ background: item.key }" class="scribeItem">
                        <img :src="xuanzhong" v-if="item.key == floatingToolData.lineColorActive" />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="label" v-if="floatingToolData.activeToolData == '标注'">
                <div class="labelItem hover" @click="labelShow('hide')">
                  <img :src="hide" />
                  <div>隐藏</div>
                </div>
                <div class="labelItem hover" @click="labelShow('show')">
                  <img :src="show" />
                  <div>显示</div>
                </div>
              </div>
            </div>
            <template #reference>
              <div class="floatToolItem">
                <img :src="item.icon" alt="" />
                <div class="text">{{ item.name }}</div>
              </div>
            </template>
          </el-popover>
          <div class="floatToolItem" v-else>
            <img :src="item.icon" alt="" />
            <div class="text">{{ item.name }}</div>
          </div>
        </div>
      </div>
      <!-- 选中工具栏 -->
      <div
        class="dialogToolBox"
        id="dialogToolBox"
        v-show="showToolBox"
        :style="{ top: `${dialogToolData.top}px`, left: `${dialogToolData.left}px` }"
      >
        <div
          class="colorSelectBox"
          v-if="toolActive == '高亮' || toolActive == '划线' || toolActive == '笔记'"
        >
          <div
            v-for="item in colorSelectList"
            :key="item.key"
            class="flex1 hover"
            @click="clickSelect(item)"
          >
            <div :style="{ background: item.key }" class="scribeItem">
              <img :src="xuanzhong" v-if="item.key == colorActive" />
            </div>
          </div>
        </div>
        <div class="toolSelectBox">
          <div
            :class="item.name == toolActive ? 'dialogToolItem active' : 'dialogToolItem'"
            v-for="item in dialogToolList"
            :key="item.icon"
            @click="dialogToolHandle(item)"
            @mouseover="dialogOverHander(item)"
            @mouseout="dialogOutHander(item)"
          >
            <img :src="item.name == toolActive ? item.activeIcon : item.icon" alt="" />
            <span>{{ item.name }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <el-dialog title="添加笔记" v-model="addNoteVisble" width="400">
    <div class="formBox">
      <el-form ref="form" :model="formData" label-width="80px">
        <el-form-item label="笔记标题">
          <el-input v-model="formData.name"></el-input>
        </el-form-item>
        <el-form-item label="笔记内容">
          <el-input type="textarea" v-model="formData.desc"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="addNoteVisble = false">取 消</el-button>
        <el-button type="primary" @click="addNote">确 定</el-button>
      </span>
    </template>
  </el-dialog>
  <el-dialog title="AI智能问答" v-model="wendaVisible" width="26%">
    <div class="wendabox">
      <iframe src="https://yiyan.baidu.com/" frameborder="0"></iframe>
    </div>
  </el-dialog>
  <el-dialog title="词典" v-model="cidianVisible" width="60%">
    <div class="wendabox">
      <iframe src="https://www.vocabulary.com/" frameborder="0"></iframe>
    </div>
  </el-dialog>
  <el-dialog title="GGB函数工具" v-model="functionVisible" width="60%">
    <div class="wendabox">
      <iframe src="https://www.geogebra.org/calculator" frameborder="0"></iframe>
    </div>
  </el-dialog>
  <el-dialog title="思维导图" v-model="siweiVisble" width="80%">
    <div class="wendabox">
      <iframe src="https://www.iodraw.com/mind" frameborder="0"></iframe>
    </div>
  </el-dialog>
  <el-dialog title="模型工具" v-model="modelToolVisble" width="80%">
    <div class="wendabox">
      <iframe src="https://adjam93.github.io/threejs-model-viewer/#" frameborder="0"></iframe>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { Search, Check } from '@element-plus/icons-vue'
import { useRouter, RouterView } from 'vue-router'
const router = useRouter()
import { ref, reactive, watch, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import mulu from '@/assets/images/menu/mulu.png'
import biji from '@/assets/images/menu/biji.png'
import ziyuan from '@/assets/images/menu/ziyuan.png'
import zhishitupu from '@/assets/images/menu/zhishitupu.png'
import jietu from '@/assets/images/menu/jietu.png'
import biaoqian from '@/assets/images/menu/biaoqian.png'
import topbg from '@/assets/images/header/top-bg.png'
import setting from '@/assets/images/operation/setting.png'

// 搜索
const searchKey = ref('')
import aIzhinengwenda from '@/assets/images/menu/AIzhinengwenda.png'
import aIyuyinyuedu from '@/assets/images/menu/AIyuyinyuedu.png'
import cidian from '@/assets/images/menu/cidian.png'
import shengzikapian from '@/assets/images/menu/shengzikapian.png'
import hudongwenda from '@/assets/images/menu/hudongwenda.png'
import siweidaotu from '@/assets/images/menu/siweidaotu.png'
import GGB from '@/assets/images/menu/GGB.png'
import jihe from '@/assets/images/menu/jihe.png'
import python from '@/assets/images/menu/python.png'
import cjiajia from '@/assets/images/menu/C++.png'
import javascript from '@/assets/images/menu/Javascript.png'
import moxinggongju from '@/assets/images/menu/moxinggongju.png'
import shouqiR from '@/assets/images/menu/shouqi-R.png'
import shouqiL from '@/assets/images/menu/shouqi-L.png'
import charuziyuan from '../assets/images/operation/charuziyuan.png'
import charuziyuan_blue from '../assets/images/operation/charuziyuan_blue.png'
import dati_charu from '../assets/images/operation/dati_charu.png'
import dati_charu_blue from '../assets/images/operation/dati_charu_blue.png'
import xiake from '../assets/images/operation/xiake.png'

// 选择框
const checkBoxState = reactive({
  selectCount: 0,
  totalCount: 0,
  check: false,
  indeterminate: false
import huabi from '../assets/images/operation/huabi-w.png'
import huabi1 from '../assets/images/operation/huabi-b.png'
import qingchu from '../assets/images/operation/Clearaway-w.png'
import qingchu1 from '../assets/images/operation/Clearaway-b.png'
import wenzi from '../assets/images/operation/wenzi-w.png'
import wenzi1 from '../assets/images/operation/wenzi-b.png'
import biaoqianw from '../assets/images/operation/biaoqian-w.png'
import biaoqian1 from '../assets/images/operation/biaoqian-b.png'
import baiban from '../assets/images/operation/baiban-w.png'
import baiban1 from '../assets/images/operation/baiban-b.png'
import biaozhu from '../assets/images/operation/biaozhu-w.png'
import biaozhu1 from '../assets/images/operation/biaozhu-b.png'
import jieping from '../assets/images/operation/screenshot-w.png'
import jieping1 from '../assets/images/operation/screenshot-b.png'
import clear from '../assets/images/operation/clear.png'
import clearPrevious from '../assets/images/operation/clearPrevious.png'
import hide from '../assets/images/operation/hide.png'
import show from '../assets/images/operation/show.png'

import gaoliang from '../assets/images/operation/gaoliang.png'
import gaoliang1 from '../assets/images/operation/gaoliang-b.png'
import huaxian from '../assets/images/operation/huaxian.png'
import huaxian1 from '../assets/images/operation/huaxian1.png'
import biji2 from '../assets/images/operation/biji.png'
import biji1 from '../assets/images/operation/biji-b.png'
import biaozhu2 from '../assets/images/operation/biaozhu.png'
import biaozhu3 from '../assets/images/operation/biaozhu1.png'
import fuzhi from '../assets/images/operation/fuzhi.png'
import fuzhi1 from '../assets/images/operation/fuzhi-b.png'
import AIyuedu from '../assets/images/operation/AIyuedu.png'
import AIyuedu1 from '../assets/images/operation/AIyuedu-b.png'
import cidian2 from '../assets/images/operation/cidian.png'
import cidian1 from '../assets/images/operation/cidian-b.png'
import yuyinyuedu from '../assets/images/operation/yuyinyuedu.png'
import yuyinyuedu1 from '../assets/images/operation/yuyinyuedu-b.png'
import xuanzhong from '../assets/images/operation/xuanzhong.png'

import zoomIn from '../assets/images/operation/zoomIn.png'
import zoomOut from '../assets/images/operation/zoomOut.png'
import huabi2 from '../assets/images/operation/huabi.svg'
import { start } from 'qiankun'
onMounted(() => {
  
  start()
 
})
// 菜单
const menuData = reactive([
  {
    name: '目录',
    icon: mulu
  },
  {
    name: '笔记',
    icon: biji
  },
  {
    name: '资源',
    icon: ziyuan
  },
  {
    name: '知识图谱',
    icon: zhishitupu
  },
  {
    name: '截图',
    icon: jietu
  },
  {
    name: '标签',
    icon: biaoqian
  }
])
// 选中菜单
const activeMenu = ref(0)

// 菜单点击
const menuItemClick = (index) => {
  activeMenu.value = index
  menuState.open = true
}
const menuState = reactive({
  open: true,
  notesColor: ''
})
const settingForm = reactive({
  acoustics: false,
  animation: false
})
//笔记颜色筛选
const searchClick = (item) => {
  if (item != 'all') {
    menuState.notesColor = item.key
  } else {
    menuState.notesColor = 'all'
  }
}

// 右侧工具
const teachToolsMenuData = reactive([
  {
    name: 'AI智能问答',
    icon: aIzhinengwenda
  },
  {
    name: 'AI语音阅读',
    icon: aIyuyinyuedu
  },
  {
    name: '词典',
    icon: cidian
  },
  {
    name: '生字卡片',
    icon: shengzikapian
  },
  {
    name: '互动问答',
    icon: hudongwenda
  },
  {
    name: '思维导图',
    icon: siweidaotu
  },
  {
    name: 'GGB函数工具',
    icon: GGB
  },
  {
    name: '几何工具',
    icon: jihe
  },
  {
    name: 'Python',
    icon: python
  },
  {
    name: 'C++',
    icon: cjiajia
  },
  {
    name: 'Javascript',
    icon: javascript
  },
  {
    name: '模型工具',
    icon: moxinggongju
  }
])
const wendaVisible = ref(false)
const cidianVisible = ref(false)
const functionVisible = ref(false)
const siweiVisble = ref(false)
const modelToolVisble = ref(false)
const activeTool = ref(0)
const toolState = reactive({
  open: true
})

const handleCheckAllChange = (val) => {
  if (val) {
    checkBoxState.check = true
  } else {
    checkBoxState.check = false
const selectTeachTools = (item) => {
  activeTool.value = item.name
  switch (item.name) {
    case 'AI智能问答':
      wendaVisible.value = true
      break
    case 'GGB函数工具':
      functionVisible.value = true
      break
    case '思维导图':
      siweiVisble.value = true
      break
    case '模型工具':
      modelToolVisble.value = true
      break
    case '词典':
      cidianVisible.value = true
      break
  }
  checkBoxState.indeterminate = false
}

// 排序
const sortState = reactive({
  fields: [
    {
      name: '名称',
      value: 'Name'
    },
    {
      name: '创建时间',
      value: 'CreateDate'
    },
    {
      name: '文件大小',
      value: 'Size'
    }
  ],
  types: [
    {
      name: '升序',
      value: 'Asc'
    },
    {
      name: '降序',
      value: 'Desc'
    }
  ],
  selectFieldIndex: 1,
  selectTypeIndex: 1
const activeName = ref('first')
const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}
const selectType = ref('')
const selectTypeClick = (type) => {
  if (selectType.value == 'resource' || selectType.value == 'answer') {
    selectType.value = ''
  } else {
    selectType.value = type
  }
}
const classStart = ref(true)
const giveLessonsClick = () => {
  if (classStart.value) {
    classStart.value = false
    // 启动计时器
    updateTimer()
  } else {
    classStart.value = true
    stopTimer()
  }
}

//画布悬浮操作
const floatingToolBox = reactive([
  {
    icon: huabi,
    name: '画笔'
  },
  {
    icon: qingchu,
    name: '清除'
  },
  {
    icon: wenzi,
    name: '文字'
  },
  {
    icon: biaozhu,
    name: '标注'
  },
  {
    icon: biaoqianw,
    name: '标签'
  },
  {
    icon: baiban,
    name: '白板'
  },
  {
    icon: jieping,
    name: '截屏'
  }
])

const floatingToolData = reactive({
  activeToolData: '', //选中工具
  elLeft: 380,
  elTop: 300,
  startclientx: 0,
  startclienty: 0,
  thicknessActive: 'middle', //画笔选中粗细
  lineTypeActive: 'solid', //画笔选中线类型
  lineColorActive: '' //画笔选中线颜色
})

const sortChange = (command) => {
  const type = command.split('.')[0]
  const data = command.split('.')[1]
  if (type == 'fields') {
    sortState.selectFieldIndex = sortState.fields.findIndex((item) => item.value == data)
  } else {
    sortState.selectTypeIndex = sortState.types.findIndex((item) => item.value == data)
//画布
const canvas = ref<any>() //获取画布
let ctx: CanvasRenderingContext2D //获取canvas操作api的入口的类型
let painting = false
let key = 1

const floatOverHander = (item) => {
  const curIndex = floatingToolBox.findIndex((f) => f.name == item.name)
  switch (curIndex) {
    case 0:
      floatingToolBox[0].icon = huabi1
      break
    case 1:
      floatingToolBox[1].icon = qingchu1
      break
    case 2:
      floatingToolBox[2].icon = wenzi1
      break
    case 3:
      floatingToolBox[3].icon = biaozhu1
      break
    case 4:
      floatingToolBox[4].icon = biaoqian1
      break
    case 5:
      floatingToolBox[5].icon = baiban1
      break
    case 6:
      floatingToolBox[6].icon = jieping1
      break
  }
}
const floatOutHander = (item) => {
  const curIndex = floatingToolBox.findIndex((f) => f.name == item.name)
  switch (curIndex) {
    case 0:
      floatingToolBox[0].icon = huabi
      break
    case 1:
      floatingToolBox[1].icon = qingchu
      break
    case 2:
      floatingToolBox[2].icon = wenzi
      break
    case 3:
      floatingToolBox[3].icon = biaozhu
      break
    case 4:
      floatingToolBox[4].icon = biaoqianw
      break
    case 5:
      floatingToolBox[5].icon = baiban
      break
    case 6:
      floatingToolBox[6].icon = jieping
      break
  }
}
//浮窗工具栏点击事件
const floatItemHandle = (item) => {
  floatingToolData.activeToolData = item.name
  // switch (item.name) {
  //   case '画笔':
  //     break
  // }
}
const dragend = (e) => {
  let x = e.clientX - floatingToolData.startclientx
  let y = e.clientY - floatingToolData.startclienty
  if (floatingToolData.elLeft + x > 0 || floatingToolData.elTop + y > 0) {
    floatingToolData.elLeft = e.x - 40
    floatingToolData.elTop = e.y - 60
  }
}
const dragstart = (e) => {
  console.log(e)
  floatingToolData.startclientx = e.clientX
  floatingToolData.startclienty = e.clientY
}

//选中画笔粗细
const selectThickness = (str) => {
  floatingToolData.thicknessActive = str
}

const selectLineType = (str) => {
  floatingToolData.lineTypeActive = str
}
//画笔颜色选择
const lineColorSelect = (item) => {
  floatingToolData.lineColorActive = item.key
}
// 画线段
const paint = (
  startX: number,
  startY: number,
  endX: number,
  endY: number,
  ctx: CanvasRenderingContext2D
) => {
  ctx.beginPath()
  ctx.globalAlpha = 1
  ctx.lineWidth = 2
  ctx.strokeStyle = '#000'
  ctx.moveTo(startX, startY) // 画线起点
  ctx.lineTo(endX, endY) // 画线终点
  ctx.closePath()
  ctx.stroke() // 描绘线条
}
// 定义鼠标初始点击的位置
let startX = 0
let startY = 0

// 鼠标按下
const mousedown = (event: MouseEvent) => {
  ;[startX, startY] = getOffset(event)
  painting = true // 将绘画状态改成true
}

// 鼠标移动
const mousemove = (event: MouseEvent) => {
  if (painting) {
    // 在鼠标移动的期间，获取鼠标的位置
    const [endX, endY] = getOffset(event)
    paint(startX, startY, endX, endY, ctx)
    // 下面两行代码是更新线条的起点
    startX = endX
    startY = endY
  }
}

// 视图模式 0:块状视图  1:表格视图
const viewMode = ref(0)
const setViewMode = () => {
  if (viewMode.value == 0) {
    viewMode.value = 1
  } else {
    viewMode.value = 0
// 鼠标松开
const mouseup = (event: MouseEvent) => {
  // 松开鼠标后 禁止画线条
  if (painting) painting = false
}

//清除上一步/全部
const cleanUpSelect = (str) => {}
//标签显示隐藏
const labelShow = (str) => {}

//选中文字工具栏
const selectText = ref('') //选中文字
const showToolBox = ref(false)
const dialogToolData = reactive({
  left: 500,
  top: 300
})
const toolActive = ref('高亮')
const colorActive = ref('')
const dialogToolList = reactive([
  { icon: gaoliang, activeIcon: gaoliang1, name: '高亮' },
  { icon: huaxian, activeIcon: huaxian1, name: '划线' },
  { icon: biji2, activeIcon: biji1, name: '笔记' },
  { icon: biaozhu2, activeIcon: biaozhu3, name: '标注' },
  { icon: fuzhi, activeIcon: fuzhi1, name: '复制' },
  { icon: AIyuedu, activeIcon: AIyuedu1, name: 'AI阅读' },
  { icon: cidian2, activeIcon: cidian1, name: '词典' },
  { icon: yuyinyuedu, activeIcon: yuyinyuedu1, name: '语音阅读' }
])
const colorSelectList = reactive([
  {
    label: '红色',
    key: '#FF0000'
  },
  {
    label: '蓝色',
    key: '#004DFF'
  },
  {
    label: '绿色',
    key: '#01BA51'
  },
  {
    label: '黄色',
    key: '#FFF700'
  },
  {
    label: '澄色',
    key: '#FF8800'
  }
])

//笔记弹窗
const addNoteVisble = ref(false)
const formData = ref({
  name: '',
  desc: ''
})
//词典

const synth = window.speechSynthesis
//工具栏方法
const dialogOverHander = (item) => {
  const curIndex = dialogToolList.findIndex((f) => f.name == item.name)
  switch (curIndex) {
    case 0:
      dialogToolList[0].icon = gaoliang1
      break
    case 1:
      dialogToolList[1].icon = huaxian1
      break
    case 2:
      dialogToolList[2].icon = biji1
      break
    case 3:
      dialogToolList[3].icon = biaozhu3
      break
    case 4:
      dialogToolList[4].icon = fuzhi1
      break
    case 5:
      dialogToolList[5].icon = AIyuedu1
      break
    case 6:
      dialogToolList[6].icon = cidian1
      break
    case 7:
      dialogToolList[7].icon = yuyinyuedu1
      break
  }
}
const dialogOutHander = (item) => {
  const curIndex = dialogToolList.findIndex((f) => f.name == item.name)
  switch (curIndex) {
    case 0:
      dialogToolList[0].icon = gaoliang
      break
    case 1:
      dialogToolList[1].icon = huaxian
      break
    case 2:
      dialogToolList[2].icon = biji2
      break
    case 3:
      dialogToolList[3].icon = biaozhu2
      break
    case 4:
      dialogToolList[4].icon = fuzhi
      break
    case 5:
      dialogToolList[5].icon = AIyuedu
      break
    case 6:
      dialogToolList[6].icon = cidian2
      break
    case 7:
      dialogToolList[7].icon = yuyinyuedu
      break
  }
}
const dialogToolHandle = (item) => {
  toolActive.value = item.name
  colorActive.value = ''
  switch (item.name) {
    case 'AI阅读':
      const utterance = new SpeechSynthesisUtterance(selectText.value)
      utterance.lang = 'zh-CN' // 设置语言为中文
      synth.speak(utterance)
      break
    case '划线':
      break
    case '高亮':
      break
    case '笔记':
      formData.value.name = ''
      formData.value.desc = ''
      break
    case '标注':
      break
    case '复制':
      try {
        var successful = document.execCommand('copy') //执行复制命令
        var msg = successful ? '成功' : '失败'
        ElMessage.success({
          message: '已复制文本',
          type: 'success'
        })
      } catch (err) {
        ElMessage.error('无法复制文本：' + err)
      }
      showToolBox.value = false
      break
    case '词典':
      cidianVisible.value = true
      break
  }
}

// 文件列表
const tableData = ref([])
const clickSelect = (item) => {
  colorActive.value = item.key
  if (toolActive.value == '笔记') {
    addNoteVisble.value = true
  }
}

//内容区域顶部显示

const headerData = reactive({
  classTime: '00:00:00',
  seconds: 0,
  minutes: 0,
  hours: 0,
  process: '42%',
  pageSize: 100,
  brushToolShow: true
})
//上课时长计时器
const timer = ref(null)
const updateTimer = () => {
  // 清除之前的定时器，防止多个定时器同时运行
  stopTimer()
  timer.value = setInterval(() => {
    headerData.seconds++
    if (headerData.seconds === 60) {
      headerData.seconds = 0
      headerData.minutes++
    }
    if (headerData.minutes === 60) {
      headerData.minutes = 0
      headerData.hours++
    }
    // 格式化时间
    const formattedTime = `${headerData.hours.toString().padStart(2, '0')}:${headerData.minutes.toString().padStart(2, '0')}:${headerData.seconds.toString().padStart(2, '0')}`
    headerData.classTime = formattedTime
  }, 1000) // 间隔1秒
}
const stopTimer = () => {
  if (timer.value) {
    clearInterval(timer.value)
    timer.value = null
    headerData.classTime = '00:00:00'
  }
}

const changePageSize = (str) => {
  if (str == 'add') {
    headerData.pageSize = Number(headerData.pageSize) + 5
  } else {
    headerData.pageSize = Number(headerData.pageSize) - 5
  }
}

const brushToolShow = () => {
  console.log(headerData.brushToolShow, 123)
  if (headerData.brushToolShow) {
    ctx = canvas.value.getContext('2d') as CanvasRenderingContext2D
  }
}
</script>

<style lang="less">
.homeBox {
  width: 100%;
  height: 100%;
  padding: 50px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  .herderBox {
    overflow: hidden;
    margin-bottom: 20px;
  .headerBox {
    height: 48px;
    background-image: url('@/assets/images/header/top-bg.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    padding: 0 20px;
    line-height: 48px;
    p {
      float: left;
      font-size: 20px;
      font-size: 24px;
      color: #ffffff;
      letter-spacing: 2px;
      font-weight: bold;
      line-height: 32px;
    }
    .search {
      float: right;
      margin-right: 20px;
    }
    .viewChangeBox {
      float: right;
      line-height: 32px;
      i {
        cursor: pointer;
        vertical-align: sub;
      }
    }
  }
  .toolBox {
  .contentBox {
    overflow: hidden;
    margin-bottom: 10px;
    line-height: 32px;
    .checkBox {
      float: left;
      .checkText {
        display: inline-block;
        line-height: 32px;
        vertical-align: top;
        margin-left: 8px;
      }
    }
    .sortBox {
      float: right;
      .sortText {
        width: 150px;
        line-height: 32px;
        cursor: pointer;
        i,
        span {
          vertical-align: middle;
        }
      }
    }
  }
  .fileList {
    flex: 1;
    overflow: auto;
    .blockBox {
      overflow: hidden;
      .fileItem {
        width: 140px;
        float: left;
        margin: 20px;
        padding: 15px;
        border-radius: 10px;
        cursor: context-menu;
    display: flex;
    .menuBox {
      width: 80px;
      border-right: 1px solid #e6e7e8;
      padding-bottom: 20px;
      box-sizing: border-box;
      position: relative;
      box-shadow: 10px 0 10px -10px rgba(0, 0, 0, 0.07);
      .menuItem {
        text-align: center;
        line-height: 1;
        cursor: pointer;
        padding: 10px 0;
        &.active,
        &:hover {
          background-color: #f1f1f1;
        }
        .iconBox {
          width: 100%;
          height: 140px;
          margin-bottom: 10px;
          position: relative;
          img {
            width: auto;
            height: auto;
            max-width: 100%;
            max-height: 100%;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            margin: auto;
            border-radius: 6px;
          background-color: #cfebff;
          p {
            color: #0093ff;
          }
        }
        .name {
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          margin-bottom: 8px;
        .menuIcon {
          display: inline-block;
          width: 32px;
          height: 32px;
          margin-bottom: 4px;
        }
        .time {
      }
      .setting {
        width: 80px;
        position: absolute;
        bottom: 30px;
        text-align: center;
      }
    }
    .menuContent {
      width: 270px;
      height: calc(100vh - 48px);
      overflow-y: auto;
      background: #e0f2ff;
      .searchBox {
        width: 100%;
        height: 60px;
        background: #ffffff;
        display: flex;
        justify-content: center;
        align-items: center;
        .inputBox {
          .custom-input {
            border: 1px solid #0093ff !important;
            border-radius: 50px;
            overflow: hidden;
          }
          .is-focus,
          .el-input__wrapper {
            box-shadow: none !important;
          }
        }
      }
      .screenBox {
        display: flex;
        padding: 0 10px;
        .title {
          margin: 10px 0;
          line-height: 40px;
          padding: 0 10px;
          border: none;
        }

        .flex1 {
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: space-between;
        }

        .all {
          width: 50px;
          height: 20px;
          border-radius: 17px;
          margin: 10px 10px 10px 0;
          border: 1px solid #d8d8d8;
          text-align: center;
          line-height: 17px;
          font-size: 12px;
          color: #999;
        }

        .allActive {
          width: 50px;
          height: 20px;
          border-radius: 17px;
          margin: 10px 10px 10px 0;
          text-align: center;
          line-height: 17px;
          color: #fff;
          background: #0093ff;
          border: 1px solid #0093ff;
          font-size: 12px;
        }

        .scribeItem {
          width: 18px;
          height: 18px;
          border-radius: 50%;
          margin: 10px auto;
          border: none;
        }

        .activeScribe {
          border: 1px solid #0093ff;
        }
      }
    }
    .menuStateBox {
      width: 25px;
      height: 25px;
      border-radius: 3px 0px 0px 3px;
      border: 1px solid #bce3ff;
      position: fixed;
      line-height: 22px;
      top: 50%;
      left: 325px;
      text-align: center;
      box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.16);
      img {
        height: 10px;
        width: 18px;
      }
    }

    .pageBox {
      flex: 1;
      overflow: auto;
      font-size: 16px;
      .pageBox-header {
        height: 57px;
        padding: 0 20px;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .classTime {
          display: flex;
          align-items: center;
          background: rgba(0, 147, 255, 0.1);
          border-radius: 20px 20px 20px 20px;
          color: #0093ff;
          padding: 8px;
          .qureIcon {
            width: 9px;
            height: 9px;
            border-radius: 50%;
            background: #0093ff;
            margin: 0 5px;
          }
        }
        .rightBox {
          display: flex;
          .pageSizeBox {
            display: flex;
            align-items: center;
            padding: 0 20px;
            border-right: 1px solid #d8d8d8;
            div {
              padding: 5px;
            }
          }
          .brushImgBox {
            display: flex;
            align-items: center;
            div {
              padding: 5px;
              display: flex;
              align-items: center;
            }
            .brushImg {
              width: 22px;
              margin-left: 20px;
              margin-right: 5px;
            }
          }
        }
      }
      .pageBox-content {
        height: calc(100% - 57px);
        position: relative;
        #container {
          background: #fbf9f4;
          height: 100%;
        }
        .canvas-box {
          height: 100%;
          width: 100%;
          position: absolute;
          top: 0;
          left: 0;
        }
      }
    }
    .toolBox {
      position: relative;
      box-shadow: -3px 0px 6px 1px rgba(0, 0, 0, 0.07);
      .toolTitle {
        height: 57px;
        line-height: 53px;
        text-align: center;
        border-bottom: 1px solid #efefef;
        .text {
          width: 43px;
          height: 3px;
          margin: 0 auto;
          background: #0093ff;
          border-radius: 3px 3px 0px 0px;
        }
      }
      .menu {
        padding-top: 20px;
        li {
          height: 50px;
          padding: 10px 36px;
          font-size: 16px;
          display: flex;
          align-items: center;
          color: #333;

          img {
            width: 29px;
            height: 29px;
          }

          span {
            margin-left: 10px;
          }
        }
      }
      .openBox {
        width: 25px;
        height: 25px;
        background: #fff;
        border-radius: 3px 0px 0px 3px;
        border: 1px solid #bce3ff;
        position: fixed;
        line-height: 22px;
        top: 50%;
        right: 50px;
        text-align: center;
        box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.16);
        img {
          height: 10px;
          width: 18px;
        }
      }
      .right {
        right: 183px !important;
        border-radius: 0px 3px 3px 0px !important;
      }
      .classRoomBox {
        position: absolute;
        bottom: 0;
        width: 100%;
        .el-tabs__nav {
          width: 100% !important;
        }
        .el-tabs__item {
          flex: 1 !important;
          padding: 0 !important;
        }
        .el-tabs__active-bar {
          width: 43px !important;
          left: 30px !important;
          height: 3px;
          bottom: 1px;
          border-radius: 3px 3px 0px 0px;
        }
        .tabBox {
          height: 100px;
          padding: 10px 17px;
          text-align: center;
          .insertSelect {
            display: flex;
            justify-content: space-between;
            .selectItem {
              text-align: center;
              background: rgba(207, 207, 207, 0.13);
              padding: 10px;
              border-radius: 5px;
              border: 2px solid #cfcfcf;
            }
            .typeActive {
              text-align: center;
              color: #0093ff;
              border: 2px solid #0093ff;
              padding: 10px;
              border-radius: 5px;
              background: rgba(0, 147, 255, 0.13);
            }
          }
          .giveLessons {
            color: #0093ff;
            width: 90px;
            margin: 10px auto;
            padding: 5px;
            border-radius: 20px;
            border: 1px solid #0093ff;
            display: flex;
            align-items: center;
            justify-content: center;
            span {
              margin-left: 10px;
            }
          }
        }
      }
    }

    .draggableBox {
      width: 85px;
      background-image: linear-gradient(to bottom, #0093ff, #005dff);
      position: fixed;
      height: 430px;
      top: 300px;
      left: 400px;
      z-index: 999;
      border-radius: 10px;
      padding: 5px;
      overflow: hidden;
      .floatToolItem {
        height: 60px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 5px;
        color: #fff;
        img {
          margin-right: 8px;
        }
        .text {
          margin-right: 5px;
        }
      }
    }
    .floatToolItem:hover {
      background-color: #fff;
      color: #0093ff;
    }

    .dialogToolBox {
      position: fixed;
      z-index: 2;

      .toolSelectBox {
        height: 57px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 12px;
        overflow: hidden;
        padding: 5px;
        background-image: linear-gradient(to right, #0093ff, #005dff);
        .dialogToolItem {
          user-select: none;
          width: 60px;
          font-size: 12px;
          border-radius: 5px;
          padding: 5px 0;
          cursor: pointer;
          text-align: center;
          img {
            margin: 0 auto;
            display: block;
            margin-bottom: 5px;
            height: 16px;
          }
          span {
            color: #fff;
          }
        }
        .dialogToolItem:hover,
        .active {
          background-color: #fff;
          span {
            color: #0093ff;
          }
        }
      }
    }
    .colorSelectBox {
      padding: 5px 10px;
      width: 190px;
      display: flex;
      background: #ffffff;
      box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.16);
      border-radius: 5px;
      margin-bottom: 10px;
      .flex1 {
        flex: 1;
        .scribeItem {
          width: 18px;
          height: 18px;
          border-radius: 3px;
          margin: 10px auto;
          border: none;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }
  }
}
.wendabox {
  width: 100%;
  height: 700px;
  iframe {
    width: 100%;
    height: 100%;
  }
}
</style>