<!--  -->
<template>
  <div class="course-section-box">
    <div class="section-left section-main">
      <div class="main-title" v-if="!isStudy">新建章节</div>

      <div class="main-title" v-else>{{ baseCourseForm.name }}</div>
      <div class="section-left-content">
        <el-button
          v-if="!isStudy"
          round
          type="primary"
          class="add-section-button"
          @click="addSection"
          ><i class="el-icon-plus"></i>添加章节</el-button
        >
        <!-- 【章节模块】 -->
        <div class="section-list" @click="nowCheckSection = {}">
          <div
            class="every-section-label"
            v-for="(course, index) in baseCourseForm.courseSectionContent"
            v-show="!course.delFlag"
            :key="index"
          >
            <div
              :class="`section-label ${
                nowCheckSection.onlyKey == course.onlyKey &&
                'section-label-check'
              } ${course.studyOver ? 'section-study-over ' : ''}
              ${isStudy ? 'section-study ' : ''}`"
              @click.stop="checkSection(course, index)"
            >
              <span class="label-title label-title-section">
                {{ course.name }}</span
              >
              <!-- 【章节工具栏】 -->
              <div v-if="!isStudy" class="label-toolbar label-toolbar-section">
                <!-- <i @click.stop="" class="el-icon-edit"></i> -->
                <i
                  @click.stop="deleteSection(course)"
                  class="el-icon-delete"
                ></i>
                <!-- 隐藏了章节收起功能按钮 -->
                <!-- <i
                  class="el-icon-caret-bottom"
                  v-if="flodSection[course.onlyKey]"
                  @click.stop="$set(flodSection, course.onlyKey, false)"
                ></i>
                <i
                  class="el-icon-caret-top"
                  @click.stop="$set(flodSection, course.onlyKey, true)"
                  v-if="!flodSection[course.onlyKey]"
                ></i> -->
                <div class="movelevel-button-box">
                  <li
                    class="el-icon-arrow-up movelevel-button"
                    @click.stop="move_Section(course, 'up', index, 'section')"
                  ></li>
                  <li
                    class="el-icon-arrow-down movelevel-button"
                    @click.stop="move_Section(course, 'down', index, 'section')"
                  ></li>
                </div>
              </div>
            </div>
            <!-- 【课件模块】 -->
            <!-- <div
              v-for="(ware, index) in course.courseware"
              :key="index"
              @click.stop=""
              :class="`courseware-label ${
                nowCheckSection.onlyKey == ware.onlyKey
                  ? 'courseware-label-check'
                  : ''
              }`"
              v-show="!flodSection[course.onlyKey] && !ware.delFlag"
            >
              <span class="label-title"> {{ ware.name }} </span>
              <div class="label-toolbar">
                <i class="el-icon-edit"></i>
                <i class="el-icon-delete" @click="deleteWare(course, ware)"></i>
                <div class="movelevel-button-box movelevel-button-box-ware">
                  <li
                    class="el-icon-arrow-up movelevel-button"
                    @mouseenter="nowWhiteIcon = ware.onlyKey + 'up'"
                    @mouseout="nowWhiteIcon = ''"
                    :style="`color:${
                      nowWhiteIcon == ware.onlyKey + 'up' ? 'white' : ''
                    };`"
                    @click.stop="
                      move_Section(ware, 'up', index, 'ware', course)
                    "
                  ></li>
                  <li
                    class="el-icon-arrow-down movelevel-button"
                    @mouseenter="nowWhiteIcon = ware.onlyKey + 'down'"
                    @mouseout="nowWhiteIcon = ''"
                    @click.stop="
                      move_Section(ware, 'down', index, 'ware', course)
                    "
                    :style="`color:${
                      nowWhiteIcon == ware.onlyKey + 'down' ? 'white' : ''
                    };`"
                  ></li>
                </div>
              </div>
            </div> -->
          </div>
        </div>
      </div>
    </div>
    <div class="section-center section-main">
      <div class="section-center-man">
        <div class="main-title" v-if="isStudy">章节信息</div>
        <div class="main-title" v-else>章节编辑器</div>
        <div class="section-center-content">
          <el-form
            :model="nowCheckSection"
            ref="numberValidateForm"
            label-width="100px"
            class="demo-ruleForm"
            :disabled="!nowCheckSection.onlyKey"
          >
            <el-form-item
              label="章节标题"
              prop="name"
              :rules="[{ required: true, message: '章节标题不可为空' }]"
            >
              <div class="input-replace" v-if="isStudy">
                {{ nowCheckSection.name }}
              </div>
              <el-input
                v-else
                style="width: 50%"
                v-model="nowCheckSection.name"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="章节简介">
              <div class="input-replace" v-if="isStudy">
                {{ nowCheckSection.explain }}
              </div>
              <el-input
                v-else
                class="scection-textarea-explain"
                v-model="nowCheckSection.explain"
                type="textarea"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="课件设置"
              class="ware-table-item"
              v-show="!nowStudyCourseware"
            >
              <TableLayout
                :column="column"
                height="300"
                :data="showCourewareList"
                :pageInfo="pageInfo"
                size="small"
                selection
                @current-change="pageChange"
                @size-change="pageSizeChange"
                @selection-change="selectionChange"
              >
                <template v-slot:percentage="props">
                  {{ props.row.percentage }}%
                </template>
                <template v-slot:studyProgress="props">
                  {{ props.row.studyProgress }}%
                </template>
                <template v-slot:canSpeed="props">
                  {{ props.row.canSpeed ? "允许" : "不允许" }}
                </template>
                <template v-slot:action="props" v-if="isStudy">
                  <el-button
                    type="text"
                    icon="el-icon-notebook-2"
                    style="color: #53da91"
                    v-if="props.row.studyProgress >= 100"
                    @click.stop="startStudy(props.row)"
                    >再次学习</el-button
                  >
                  <el-button
                    type="text"
                    icon="el-icon-timer"
                    style="color: #ef4243"
                    v-if="
                      props.row.studyProgress > 0 &&
                      props.row.studyProgress < 100
                    "
                    @click.stop="startStudy(props.row)"
                    >继续学习</el-button
                  >
                  <el-button
                    type="text"
                    icon="el-icon-notebook-1"
                    style="color: #ff8f35"
                    v-else-if="props.row.studyProgress == 0"
                    @click.stop="startStudy(props.row)"
                    >开始学习</el-button
                  >
                </template>
                <template v-slot:action="props" v-else>
                  <el-button
                    type="text"
                    icon="el-icon-edit"
                    @click.stop="editorWare(props.row)"
                    >编辑</el-button
                  >
                  <el-button
                    type="text"
                    icon="el-icon-delete"
                    style="color: red"
                    @click="deleteWare(nowCheckSection, props.row)"
                    >删除</el-button
                  >
                </template>
              </TableLayout>
              <el-button
                v-if="!isStudy"
                type="danger"
                class="batches-delete-button"
                size="mini"
                @click="deleteCorseware"
                >删除选中</el-button
              >
            </el-form-item>
            <el-form-item
              class="ware-table-item"
              label="学习信息"
              v-if="nowStudyCourseware"
            >
              <courseStudy
                :baseCourseForm="baseCourseForm"
                :nowStudyCourseware="nowStudyCourseware"
                @courseWareStudyOver="courseWareStudyOver"
              ></courseStudy>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
    <div class="section-right section-main" v-if="!isStudy">
      <div class="main-title">资源管理</div>
      <ResourceManage
        ref="ResourceManage"
        :nowCheckSection="nowCheckSection"
        @delForSection="delForSection"
        @addToSection="addToSection"
      ></ResourceManage>
    </div>
    <dialogSelf
      title="课件编辑"
      @onConfirm="saveWareEditor"
      @onCancel="isShowEditorWare = fasle"
      :visible="isShowEditorWare"
    >
      <el-form
        :model="nowEditorWareInfo"
        :rules="rules"
        ref="ruleForm"
        label-width="90px"
        class="demo-ruleForm"
        style="padding-right: 10px"
      >
        <el-form-item label="资源名称">
          <el-input v-model="nowEditorWareInfo.resourceName" disabled></el-input>
        </el-form-item>
        <el-form-item label="课件名称" prop="name">
          <el-input v-model="nowEditorWareInfo.name"></el-input>
        </el-form-item>
        <el-form-item label="学习时长">
          <el-input-number
            controls-position="right"
            v-model="nowEditorWareInfo.studyTime"
            :min="0"
            label="描述文字"
          ></el-input-number>
          分钟
        </el-form-item>
        <!-- <el-form-item label="权重占比">
          <el-tooltip
            class="item"
            effect="dark"
            :content="`占比为${nowEditorWareInfo.percentage}%`"
            placement="right"
          >
            <el-input-number
              v-model="nowEditorWareInfo.percentage"
              :min="0"
              :max="100"
              label="描述文字"
            ></el-input-number>
          </el-tooltip>
        </el-form-item> -->
        <el-form-item
          label="快进限制"
          v-show="['audio', 'video'].includes(nowEditorWareInfo.type)"
        >
          <el-switch
            v-model="nowEditorWareInfo.canSpeed"
            :active-value="1"
            :inactive-value="0"
          >
          </el-switch>
        </el-form-item>
      </el-form>
    </dialogSelf>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import { TableLayout } from '@/components/layout'
import courseStudy from './course-study.vue'
import ResourceManage from './course-courseware.vue'
import dialogSelf from '@/components/layout/DialogLayout.vue'
import { deepClone } from '../../utils'
import { findResourceApi } from '@/api/system/resource'
export default {
  // import引入的组件需要注入到对象中才能使用
  props: {
    baseCourseForm: {
      typeof: Object,
      required: true
    },
    isStudy: {
      typeof: Boolean,
      default: false
    }
  },
  components: {
    TableLayout,
    courseStudy,
    ResourceManage,
    dialogSelf
  },
  data () {
    // 这里存放数据

    return {
      // 当前折叠的章节
      flodSection: {},
      // 当前选中的章节
      nowCheckSection: {},
      // 右侧章节管理中 上下移动按钮变白
      nowWhiteIcon: '',
      // 当前展示的课件列表
      showCourewareList: [],
      // 当前选中的课件列表
      nowCheckWareList: [],
      // 当前正在编辑的课件信息
      nowEditorWareInfo: { studyTime: '' },
      // 可见表格的pageInfo
      pageInfo: { page: 1, pageSize: 10, total: 0 },
      column: [
        {
          prop: 'name',
          label: '课件名称',
          width: '200',
          align: 'center',
          'show-overflow-tooltip': true
        },
        {
          prop: 'studyTime',
          label: '学习时长(分钟)',
          align: 'center'
        },
        {
          prop: 'percentage',
          label: '权重占比',
          align: 'center'
        },
        {
          prop: 'canSpeed',
          label: '快进限制',
          align: 'center'
        },
        { prop: 'action', label: '操作', align: 'center' }
      ],
      // 是否展示编辑课件的dialog
      isShowEditorWare: false,
      // 当前正在学习的课件
      nowStudyCourseware: undefined,
      rules: {
        name: [{ required: true, message: '请输入课件名称', trigger: 'blur' }]
      }
    }
  },

  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {
    nowCheckSection () {
      this.getShowWare()
    }
  },
  // 方法集合
  methods: {
    checkSection (section, index) {
      const sectionList = this.baseCourseForm.courseSectionContent

      const name = this.nowCheckSection.name
      if (this.isStudy && !this.baseCourseForm.sectionSortStudy) {
        let isOver = true

        for (let i = 0; i < sectionList.length; i++) {
          if (i < index && !sectionList[i].studyOver) {
            isOver = false
          }
        }
        if (!isOver) {
          this.$message.warning(
            '当前课程需按顺序学习，请先完成之前章节的学习！'
          )
          return
        }
        // if (index > 0 && !this.baseCourseForm.courseSectionContent[index - 1].studyOver) {
        //   return
        // }
      } else if (!this.isStudy) {
        if (name !== undefined && name.trim().length <= 0) {
          this.$message.warning('请补充当前课程标题名称')
          return
        }
      }

      if (this.nowCheckSection.onlyKey === section.onlyKey) {
        this.nowCheckSection = {}
        this.nowStudyCourseware = undefined
        return
      }
      this.nowStudyCourseware = undefined
      this.$set(this, 'nowCheckSection', section)
    },
    /*
     *添加章节
     *
     */
    addSection () {
      const section = this.baseCourseForm.courseSectionContent
      const serialNumber = section.length
        ? section[section.length - 1].serialNumber + 1
        : 1
      section.push({
        name: '新增章节',
        explain: '章节说明',
        courseId: this.baseCourseForm.id ? this.baseCourseForm.id : undefined,
        serialNumber,
        onlyKey: this.algorithm(),
        courseware: []
      })
    },
    /*
     *删除章节
     *
     */
    async deleteSection (section) {
      const sureDel = await this.deleteConfirm()
      if (sureDel) {
        const sectionList = this.baseCourseForm.courseSectionContent || []
        if (section.id) {
          // section.delFlag = 1;
          this.$set(section, 'delFlag', 1)
          delete section.onlyKey
        } else {
          const index = sectionList.findIndex((item) => {
            if (item.onlyKey === section.onlyKey) {
              return true
            }
            return false
          })
          sectionList.splice(index, 1)
        }
        if (section.onlyKey === this.nowCheckSection.onlyKey) {
          this.nowCheckSection = {}
          this.showCourewareList = []
        }
        this.sortAgain(sectionList)
      }
    },
    /*
     *删除课件 左侧列表中的删除
     * section 章节
     * ware 课件
     */
    async deleteWare (section, ware) {
      const sureDel = await this.deleteConfirm()
      if (sureDel) {
        if (ware.id) {
          this.$set(ware, 'delFlag', 1)
          ware.delFlag = 1
        } else {
          const index = section.courseware.findIndex((item) => {
            if (item.onlyKey === ware.onlyKey) {
              return true
            }
            return false
          })
          section.courseware.splice(index, 1)
        }
        this.sortAgain(section.courseware)
        // this.getSelected()
        this.$refs.ResourceManage.getSelected()
        this.getShowWare()
      }
    },
    // 生成唯一K
    algorithm () {
      let abc = [
        'a',
        'b',
        'c',
        'd',
        'e',
        'f',
        'g',
        'h',
        'i',
        'g',
        'k',
        'l',
        'm',
        'n',
        'o',
        'p',
        'q',
        'r',
        's',
        't',
        'u',
        'v',
        'w',
        'x',
        'y',
        'z'
      ]
      const [max, min] = [
        Math.floor(Math.random() * (10 - 7 + 1) + 1),
        Math.floor(Math.random() * (17 - 10 + 1) + 17)
      ]
      abc = abc
        .sort(() => 0.4 - Math.random())
        .slice(max, min)
        .slice(0, 8)
        .join('')
      const a = new Date().getTime() + abc
      return a
    },
    /* 章节上下移动
     * course 当前移动的章节信息
     * direction 移动的方向 是上还是下
     */
    move_Section (course, direction, index, type, par) {
      let section
      if (type === 'ware') {
        section = par.courseware
      } else {
        section = this.baseCourseForm.courseSectionContent
      }

      if (!course.delFlag) {
        // 当前章节未删除
        // 当前上移
        if (direction === 'up') {
          let replaceIndex
          let TS = {}
          for (let i = index - 1; i >= 0; i--) {
            if (!section[i].delFlag) {
              TS = section[i]
              replaceIndex = i
              break
            }
          }
          if (replaceIndex === undefined) {
            this.$message.warning('当前已是第一位')
            return
          }

          section.splice(replaceIndex, 1, course)
          section.splice(index, 1, TS)
          if (type === 'ware') {
            this.nowWhiteIcon = TS.onlyKey + 'up'
          }
        }
        // 当前下移
        if (direction === 'down') {
          let replaceIndex
          let TS = {}
          for (let i = index + 1; i < section.length; i++) {
            if (!section[i].delFlag) {
              TS = section[i]
              replaceIndex = i
              break
            }
          }
          if (replaceIndex === undefined) {
            this.$message.warning('当前已是最后一位')
            return
          }
          section.splice(replaceIndex, 1, course)
          section.splice(index, 1, TS)
          if (type === 'ware') {
            this.nowWhiteIcon = TS.onlyKey + 'down'
          }
        }
        this.$forceUpdate()
        this.sortAgain(section)
      }
    },
    // 重新排序
    sortAgain (list) {
      let index = 1
      list.forEach((item) => {
        if (!item.delFlag) {
          item.serialNumber = index
          index++
        }
      })
    },
    // 编辑课件信息
    async editorWare (ware) {
      const { data } = await findResourceApi(ware.fileId)
      ware.type = data.type
      ware.resourceName = data.name
      this.nowEditorWareInfo = deepClone(ware)
      this.isShowEditorWare = true
    },
    // 课件表格的pageSizeChange
    pageSizeChange (e) {
      if (this.nowCheckSection.name) {
        this.pageInfo.page = 1
        this.pageInfo.pageSize = e
        this.showCourewareList = this.nowCheckSection.courseware.slice(
          0,
          1 * e
        )
      }
    },
    // 课件表格的pageChange
    pageChange (e) {
      if (typeof e === 'number' && this.nowCheckSection.name) {
        this.pageInfo.page = e
        this.showCourewareList = this.nowCheckSection.courseware.slice(
          (e - 1) * this.pageInfo.pageSize,
          e * this.pageInfo.pageSize
        )
      }
    },
    // 课件表格的selectionChange
    selectionChange (e) {
      this.nowCheckWareList = e
    },
    // 批量删除选中选中的课件
    async deleteCorseware (ware) {
      if (this.nowCheckWareList.length <= 0) {
        this.$message.warning('请选择需要删除的课件！')
        return
      }
      const sureDel = await this.deleteConfirm()
      if (sureDel) {
        const delId = []
        this.nowCheckWareList.forEach((item) => {
          if (item.id) {
            this.$set(item, 'delFlag', 1)
          } else {
            delId.push(item.onlyKey)
          }
        })
        delId.forEach((ware) => {
          const index = this.nowCheckSection.courseware.findIndex((item) => {
            if (item.onlyKey === ware.onlyKey) {
              return true
            }
            return false
          })
          this.nowCheckSection.courseware.splice(index, 1)
        })
      }
      // this.getSelected()
      this.$refs.ResourceManage.getSelected()
      this.getShowWare()
    },
    // 删除确认框
    deleteConfirm () {
      return this.$confirm(
        '删除后可从右侧资源管理添加，是否继续删除？',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      )
        .then(() => {
          return true
        })
        .catch((err) => {
          if (err === 'cancel') {
            // this.$message({
            //   type: 'info',
            //   message: '取消删除'
            // })
          }
          return false
        })
    },
    //  处理要展示的课件，如隐藏delflag的删除
    getShowWare () {
      if (!this.nowCheckSection.name) {
        this.showCourewareList = []
        this.pageInfo.total = 0
        this.pageInfo.page = 1
        return
      }
      const LIST = this.nowCheckSection.courseware.filter((item) => {
        if (!item.delFlag) {
          return true
        }
        return false
      })

      let page = this.pageInfo.page
      const pageSize = this.pageInfo.pageSize
      if (LIST.length > 0 && LIST.length <= (page - 1) * pageSize) {
        this.pageInfo.page = page - 1
        page = page - 1
      }
      this.pageInfo.total = LIST.length
      this.showCourewareList = LIST.slice(
        (page - 1) * pageSize,
        pageSize * page
      )
    },
    // 页面初始化时 处理table 的cloum格式
    setColumn () {
      this.column = [
        {
          prop: 'name',
          label: '课件名称',
          width: '200',
          align: 'center',
          'show-overflow-tooltip': true
        },
        {
          prop: 'studyTime',
          label: '要求时长(分钟)',
          align: 'center'
        },
        {
          prop: 'studyProgress',
          label: '已完成时长',
          align: 'center'
        },
        {
          prop: 'percentage',
          label: '占比',
          align: 'center'
        },
        { prop: 'action', label: '操作', align: 'center' }
      ]
    },
    startStudy (courseware) {
      this.nowStudyCourseware = courseware
    },
    addToSection (res) {
      res.isSelected = true
      const wareList = this.nowCheckSection.courseware
      const isHaveIndex = wareList.findIndex((item) => {
        if (item.fileId === res.id) {
          return true
        }
        return false
      })
      let newRes = {}
      if (isHaveIndex === -1) {
        newRes = {
          canSpeed: 0,
          courseId: 51,
          fileId: res.id,
          name: res.name,
          type: res.type,
          onlyKey: this.algorithm(),
          percentage: 0,
          sectionId: this.nowCheckSection.id,
          serialNumber: wareList[wareList.length]
            ? wareList[wareList.length].serialNumber + 1
            : 1,
          studyTime: 0
        }
        wareList.push(newRes)
      } else {
        wareList[isHaveIndex].delFlag = 0
        // wareList[isHaveIndex].isSelected = true
      }

      const showDataLength = wareList.filter((item) => {
        if (item.delFlag) {
          return false
        }
        return true
      }).length
      this.pageInfo.current = Math.ceil(
        showDataLength / this.pageInfo.pageSize
      )
      this.pageInfo.page = this.pageInfo.current

      this.getShowWare()
    },
    delForSection (res) {
      res.isSelected = false
      const wareList = this.nowCheckSection.courseware
      const isHaveIndex = wareList.findIndex((ware) => {
        if (ware.fileId === res.id) {
          return true
        }
        return false
      })
      if (isHaveIndex !== -1 && wareList[isHaveIndex].id) {
        wareList[isHaveIndex].delFlag = 1
      } else if (isHaveIndex !== -1 && !wareList[isHaveIndex].id) {
        wareList.splice(isHaveIndex, 1)
      }
      // this.getSelected()
      this.$refs.ResourceManage.getSelected()
      this.getShowWare()
    },
    // 保存课件编辑
    saveWareEditor () {
      const index = this.nowCheckSection.courseware.findIndex(
        (item) => item.onlyKey === this.nowEditorWareInfo.onlyKey
      )
      for (const k in this.nowEditorWareInfo) {
        this.nowCheckSection.courseware[index][k] = this.nowEditorWareInfo[k]
      }
      let allTime = 0
      this.baseCourseForm.courseSectionContent.forEach((item) => {
        item.courseware.forEach((ware) => {
          allTime += ware.studyTime
        })
      })

      this.baseCourseForm.courseSectionContent.forEach((item) => {
        item.courseware.forEach((ware) => {
          ware.percentage = Math.round(
            parseInt(ware.studyTime / allTime || 0) * 100
          )
        })
      })
      this.isShowEditorWare = false
      this.nowEditorWareInfo = {}
    },
    // 课件学习结束
    courseWareStudyOver () {
      const overItem = this.nowCheckSection.courseware?.filter((item) => {
        if (item.studyProgress === 100) {
          return true
        }
        return false
      })
      if (overItem.length === this.nowCheckSection.courseware.length) {
        this.nowCheckSection.studyOver = true
      }
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  async created () {
    if (this.isStudy) {
      this.setColumn()
    }
    const sectionList = this.baseCourseForm.courseSectionContent
    sectionList.forEach((course) => {
      this.$set(course, 'onlyKey', this.algorithm())
      course.courseware.forEach((ware) => {
        this.$set(ware, 'onlyKey', this.algorithm())
      })
      course.courseware.sort((x, y) => {
        return x.serialNumber - y.serialNumber
      })
    })
    sectionList.sort((x, y) => {
      return x.serialNumber - y.serialNumber
    })
    this.nowCheckSection = sectionList[0] || {}
    this.resourceLoading = false
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {},
  beforeCreate () {}, // 生命周期 - 创建之前
  beforeMount () {}, // 生命周期 - 挂载之前
  beforeUpdate () {}, // 生命周期 - 更新之前
  updated () {}, // 生命周期 - 更新之后
  beforeUnmount () {}, // 生命周期 - 销毁之前
  unmounted () {}, // 生命周期 - 销毁完成
  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='scss' scoped>
.course-section-box {
  margin-top: 10px;
  width: 100%;
  display: flex;
  .section-left,
  .section-center {
    border-right: 1px solid #f0f1f3;
    .section-center-man {
      // min-width: 1070px;
      height: 100%;
    }
  }
  ::v-deep ._body {
    padding-bottom: 0;
  }
  .section-left,
  .section-right {
    min-width: 220px;
    max-width: 220px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
  }
  .section-left {
    min-width: 220px;
    max-width: 220px;
  }
  .section-center {
    flex: 1;
    overflow: auto;
  }
  .section-main {
    height: 100%;
    padding: 0 5px;
  }
  .main-title {
    width: 100%;
    height: 30px;
    border-bottom: 1px solid #f0f1f3;
    line-height: 30px;
    font-weight: 700;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: $--color-primary;
  }
  ::v-deep .add-section-button {
    background-color: transparent;
    color: $--color-primary;
    border: 1px dashed;
    width: 100%;
    margin: 10px 0;
    padding: 4px;
  }
  .section-list {
    width: 100%;
    .every-section-label {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
    }
    .courseware-label,
    .section-label {
      cursor: pointer;
      width: 100%;
      height: 25px;
      display: flex;
      align-items: center;
      padding: 0 10px;
      font-size: 12px;
      color: white;
      border-radius: 4px;
      border: 1px solid $--color-primary;
      margin: 5px 0;
      position: relative;
    }
    .section-label {
      background-color: $--color-primary;
      background-color: #fff;
      color: $--color-primary;
    }
    .section-study {
      // background-color: #999999;
      .label-title-section {
        width: 100%;
      }
    }
    .section-study-over {
      color: white;
      background-color: $--color-primary;
    }

    .section-label-no-study {
      // background-color: #999999;
      border-color: #999999;
    }
    .courseware-label-no-study {
      border-color: #999999;
    }
    .courseware-label {
      color: $--color-primary;
      max-width: 85%;
    }
    .label-title,
    .label-title-section {
      width: 80%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .label-title-section {
      width: 85%;
    }
    .label-toolbar {
      width: 13%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .el-icon-delete {
        color: #eb0404;
      }
    }
    .label-toolbar-section {
      width: 15%;
      .el-icon-delete {
        color: $--color-primary;
      }
    }
    // .section-label:hover,
    .section-label-check {
      background-color: $--color-primary;
      color: #fff;
      .el-icon-delete {
        color: #fff;
      }
    }
    .movelevel-button-box {
      display: flex;
      width: 20px;
      text-align: center;
      flex-direction: column;
      background-color: #208ac6;
      position: absolute;
      right: 0;
      top: 0;
      color: white;
      .movelevel-button:hover {
        background-color: rgba(0, 0, 0, 0.295);
        border-radius: 1px;
      }
    }
    .movelevel-button-box-ware {
      background-color: transparent;
      color: #208ac6;
      font-weight: 700;
    }
  }
  ::v-deep .section-center-content {
    padding-top: 20px;
    .scection-textarea-explain textarea {
      height: 100px;
    }
  }
  ::v-deep .ware-table-item {
    position: relative;
    .el-form-item__content {
      margin-left: 20px !important;
    }
    .el-table__body-wrapper {
      height: 250px;
      overflow-y: auto;
    }
    .batches-delete-button {
      position: absolute;
      z-index: 1;
      left: 0;
      bottom: 10px;
    }
    .el-table {
      border: 1px solid #208ac6;
      border-radius: 4px 4px 4px 4px;
      th,
      td {
        padding: 0;
      }
    }
  }
}
</style>
