<template>
  <!-- <div class="flex flex-start window-height" style="min-width:1300px;overflow-x:auto;overlfow-y:hidden;"> -->
  <div class="flex flex-start window-height">
    <q-splitter v-model="splitterModel" :limits="[30, 100]" style="height: 100%;width:100%">
      <template v-slot:before>
        <div class="q-pa-lg full-height" style="min-width:380px;">
          <q-card class="q-pa-md bg-dark text-white q-mb-lg">
            <span>{{courseInfo.CourseName}}</span>
          </q-card>
          <div class="q-gutter-xs q-pb-lg" style="border-bottom:1px solid #f5f5f5;">
            <q-btn color="primary" size="xs" unelevated label="同级目录" @click="addSameLevel"></q-btn>
            <q-btn color="primary" size="xs" unelevated label="子目录" @click="addChildLevel"></q-btn>
            <q-btn color="primary" size="xs" title="向上移动" :disable="!canUp" @click="moveUp" outline
              icon="iconfont icon-up"></q-btn>
            <q-btn color="primary" size="xs" title="向下移动" :disable="!canDown" @click="moveDown" outline
              icon="iconfont icon-down1"></q-btn>
            <q-btn color="primary" size="xs" unelevated label="导入 ..." @click="getImport()"></q-btn>

            <el-upload class="upload-demo" action="" style="display:inline-block;margin-left:80px;" :accept="accept"
              :show-file-list="false" :http-request="UploadAttachment">
              <q-btn color="primary" size="xs" unelevated label="导入单词"></q-btn>
            </el-upload>
          </div>
          <div class="q-mt-lg" style="height:calc(100% - 140px)">
            <q-scroll-area :thumb-style="thumbStyle" :content-style="contentStyle"
              :content-active-style="contentActiveStyle" style="height: 100%; width: 100%;padding-right:10px;">
              <el-tree ref="chapterTree" :default-expanded-keys="defaultExpandedKeys" @node-click="changeNode"
                v-loading="canOptions" class="chapter-tree" :data="dataList" empty-text="暂无章节数据，请点击”添加同级“开始录入开始吧"
                :props="defaultProps" node-key="ChapterId" @node-drag-start="handleDragStart"
                @node-drag-enter="handleDragEnter" @node-drag-leave="handleDragLeave" @node-drag-over="handleDragOver"
                @node-drag-end="handleDragEnd" @node-drop="handleDrop" draggable :allow-drop="allowDrop"
                :allow-drag="allowDrag">
                <div class="row chapter-node full-width" slot-scope="{ node, data }">
                  <div class="q-mr-md">{{ data.ChapterNo.length>1?data.ChapterNo:`0${data.ChapterNo}` }}</div>
                  <div class="col q-mr-xs" v-if="editorNodeId==data.ChapterId">
                    <input type="text" @blur="changeChapterName(data)" maxlength="100" draggable="true"
                      class="tree-input" v-focus v-model="data.ChapterName" @focus="selectValue($event)" />
                  </div>
                  <div class="col q-mr-md ellipsis" v-if="editorNodeId!=data.ChapterId">{{data.ChapterName}}</div>
                  <div class="oops-box q-mr-xs" v-if="editorNodeId!=data.ChapterId">
                    <q-btn size="xs" flat color="primary" label="编辑" @click.stop="editorNodeId=data.ChapterId"></q-btn>
                    <q-btn size="xs" flat color="negative" label="删除" @click.stop="deleteObj(data)"></q-btn>
                  </div>
                  <div class="q-mr-xs rate-box">
                    <q-badge class="bg-white text-grey-8">
                      {{data.CourseRateName.replace('课程','')}}
                    </q-badge>
                    <q-badge class="q-ml-xs bg-grey-3 text-dark">{{data.StudyMinutes}}分钟</q-badge>
                  </div>
                </div>
              </el-tree>
            </q-scroll-area>
          </div>
        </div>
      </template>
      <template v-slot:after>
        <div class="col full-height q-pa-lg chapter-content scroll" style="min-width:900px;">
          <div v-if="chapter">
            <div class="text-h6 q-mb-md">章节学习内容</div>
            <div class="row q-mb-md">
              <div class="col q-mr-md">
                <q-input square filled label="消耗分钟" v-model="chapter.StudyMinutes" suffix="分钟" mask="#" fill-mask="0"
                  reverse-fill-mask></q-input>
              </div>
              <div class="col">
                <q-select :options="rateList" option-label="Name" option-value="Id" square filled label="关联等级"
                  v-model="defauRateObj"></q-select>
              </div>
            </div>
            <div>
              <div class="text-h6 q-mb-md">章节学习内容</div>
              <div class="q-mb-md">
                <editor v-model="chapter.ChapterContent" @blur="changeContent" placeHolder="请输入章节学习内容" :config="config"
                  ref="chapterContent"></editor>
              </div>
              <div class="text-h6 q-mb-md">教学重点</div>
              <div class="q-mb-md">
                <editor v-model="chapter.Objectives" placeHolder="请输入章节教学重点" :config="config" ref="objectives"></editor>
              </div>
              <div class="text-h6 q-mb-md">学生学习要求</div>
              <div class="q-mb-md">
                <editor v-model="chapter.Requirement" placeHolder="请输入章节学生学习要求" :config="config" ref="requirement">
                </editor>
              </div>
            </div>
          </div>
          <div class="text-h6 q-mb-md">单词列表</div>
          <div class="q-mb-md">
            <q-table :pagination="wordMsg" no-data-label="暂无相关数据" flat
              class="sticky-right-column-table sticky-column-table" separator="none" :data="WordData" :columns="columns"
              row-key="name">
              <template v-slot:top="">
                <q-space />
                <div class="page-option">
                  <q-btn color="accent" size="sm" class="q-mr-md" icon="add" label="新增单词" @click="EditWord(null)" />
                </div>
              </template>
              <template v-slot:bottom>
                <q-pagination class="full-width justify-end" v-model="wordMsg.PageIndex" color="primary"
                  :max="PageCount" :input="true" @input="changePage" />
              </template>
              <template v-slot:body-cell-Id="props">
                <q-td :props="props">
                  <div>
                    <q-btn flat size="xs" icon="edit" color="accent" style="font-weight:400" label="编辑"
                      @click="EditWord(props.row)" />
                    <q-btn flat size="xs" icon="delete" color="negative" style="font-weight:400" label="删除"
                      @click="delWord(props.row)"></q-btn>
                  </div>
                </q-td>
              </template>
            </q-table>
          </div>
        </div>
      </template>
    </q-splitter>
    <q-btn round padding="md" v-if="chapter && chapter.ChapterId>0" @click="saveChapterUpdate" :loading="submiting"
      color="primary" class="fixed-bottom-right" label="保存" style="z-index:9999999;right:20px;bottom:100px;">
      <template v-slot:loading>
        <q-spinner-ios />
      </template>
    </q-btn>
    <chapter-form v-if="isShowChapter" :CourseId="courseId" :MyChapterNo="MyChapterNo" @close="closeChapterForm"
      @success="refreshPage">
    </chapter-form>
    <words-form v-if="isShowWordForm" :save-obj="wordObj" :ChapterId="commonChapterId" :addObj="addObj" @close="closeChapterForm"
      @success="getAllWords"></words-form>
  </div>
</template>

<script>
  import editor from "../../components/editor/UeEditor";
  import chapterForm from "../../components/course/chapter-form";
  import wordsForm from "../../components/course/words-form"
  import {
    queryChapterTree,
    saveChapter,
    batchUpdateChapterNo,
    updateChapterName,
    getCourseRate,
    queryCourseInfo,
    deleteChapters,
    setChaptersRate,
    GetCourseWordsPage,
    RemoveCourseWords
  } from "../../api/course/index";
  import {
    compareObject
  } from '../../utils/validate';
  import {
    UploadLocalSystem
  } from '../../api/common/common'
  import {
    extend
  } from 'quasar'
  export default {
    meta: {
      title: "课程章节详情"
    },
    components: {
      editor,
      chapterForm,
      wordsForm
    },
    directives: {
      focus: {
        // 指令的定义
        inserted: function (el) {
          el.focus()
        }
      }
    },
    data() {
      return {
        chapter: null,
        config: {
          initialFrameWidth: null,
          initialFrameHeight: 400
        },
        showContent: true,
        courseId: 0,
        dataList: [],
        defaultProps: {
          children: 'ChildList',
          label: 'ChapterName'
        },
        currentNode: null,
        canOptions: true,
        updateChapters: [],
        editorNodeId: 0,
        canUp: false,
        canDown: false,
        rateList: [],
        defauRateObj: {
          Id: 8,
          Name: "其它"
        },
        courseInfo: {},
        submiting: false,
        bakObj: {},
        contentStyle: {
          backgroundColor: 'rgba(0,0,0,0.02)',
          color: '#555'
        },

        contentActiveStyle: {
          backgroundColor: '#eee',
          color: 'black'
        },

        thumbStyle: {
          right: '2px',
          borderRadius: '5px',
          backgroundColor: '#027be3',
          width: '5px',
          opacity: 0.75
        },
        defaultChapterId: 0,
        defaultExpandedKeys: [], //默认展开数组
        splitterModel: 30, //左侧默认占据多大
        isShowChapter: false, //是否显示导入
        chapterObj: {},
        MyChapterNo: 0,
        WordData: [], //单词数组
        columns: [{
          name: 'WordContent',
          required: true,
          label: '单词名',
          align: 'left',
          field: 'WordContent'
        }, {
          name: 'WordType',
          required: true,
          label: '单词类型',
          align: 'left',
          field: 'WordType'
        }, {
          name: 'WordWrite',
          required: true,
          label: '单词写法',
          align: 'left',
          field: 'WordWrite'
        }, {
          name: 'ChineseMean',
          required: true,
          label: '中文意思',
          align: 'left',
          field: 'ChineseMean'
        }, {
          name: 'Id',
          label: '操作',
          field: 'Id'
        }],
        wordObj: {},
        isShowWordForm: false,
        addObj: {
          CourseId: 0,
          ChapterId: 0
        },
        wordMsg: {
          CourseId: 0,
          ChapterId: 0,
          PageIndex: 1,
          PageSize: 15,
          rowsPerPage: 15
        },
        PageCount: 0,
        commonChapterId:0
      };
    },
    computed: {
      accept: {
        get() {
          return '.xls,.xlsx';
        },
      }
    },
    created() {
      if (this.$route.query.chapter) {
        this.defaultChapterId = this.$route.query.chapter;
        this.defaultExpandedKeys.push(this.defaultChapterId);
      }
      if (this.$route.query.courseId) {
        this.courseId = this.$route.query.courseId;
        this.initTree();
        this.initRateList();
        this.getCourseInfo();
      }
    },
    mounted() {
      this.showContent = false;
      this.getAllWords(0);
      setTimeout(() => {
        this.showContent = true;
      }, 3000);
    },
    methods: {
      //上传文件
      UploadAttachment(files) {
        this.questionData = [];
        var fileParams = {
          Analysis: 1,
          CourseId: this.courseId,
          CourseWords: 1,
          Uid: this.getLocalStorage().Id
        }
        UploadLocalSystem(JSON.stringify(fileParams), files.file, res => {
          if (res.Code == 1) {
            this.$q.notify({
              icon: 'iconfont icon-chenggong',
              color: 'accent',
              timeout: 2000,
              message: '导入单词成功!',
              position: 'top'
            })
            this.questionData = res.Data;
            this.refreshWordsPage();
          }
        })
      },
      //导入成功获取所有
      getAllWords(ChapterId) {
        this.wordMsg.CourseId = this.courseId;
        if (ChapterId) {
          this.wordMsg.ChapterId = ChapterId;
        }
        GetCourseWordsPage(this.wordMsg).then(res => {
          if (res.Code == 1) {
            this.WordData = res.Data.PageData;
            this.PageCount = res.Data.PageCount;
          }
        })
      },
      //刷新单词
      refreshWordsPage(ChapterId) {
        this.wordMsg.PageIndex = 1;
        this.getAllWords(ChapterId);
        this.commonChapterId = ChapterId;
      },
      //单词分页
      changePage(val) {
        this.wordMsg.PageIndex = val;
        this.getAllWords();
      },
      //删除单词
      delWord(item) {
        let delMsg = {
          Id: item.Id
        };
        this.$q.dialog({
          title: '提示信息',
          message: '是否确定删除该单词？',
          cancel: true,
          persistent: true,
          ok: "确定",
          cancel: "取消",
        }).onOk(() => {
          RemoveCourseWords(delMsg).then(res => {
            if (res.Code == 1) {
              this.$q.notify({
                icon: 'iconfont icon-chenggong',
                color: 'accent',
                timeout: 2000,
                message: '删除成功！',
                position: 'top'
              })
              this.refreshWordsPage();
            }
          })
        }).onCancel(() => {
        });
      },
      //新增单词
      EditWord(obj) {
        if (obj) {
          this.wordObj = obj
        } else {
          this.wordObj = null
        }
        this.isShowWordForm = true
      },
      changeContent() {},
      getCourseInfo() {
        queryCourseInfo({
          CourseId: this.courseId
        }).then(res => {
          this.courseInfo = res.Data;
        })
      },
      initRateList() {
        getCourseRate({}).then(r => {
          this.rateList = r.Data
        })
      },
      changeNode(data, node, ev) {
        if (this.chapter && this.chapter.ChapterId > 0) {
          if (this.defauRateObj.Id != 0) {
            this.chapter.CourseRate = this.defauRateObj.Id
            this.chapter.CourseRateName = this.defauRateObj.Name
          }
          if (!compareObject(this.bakObj, this.chapter, false)) {
            this.saveChapterUpdate(1);
            if (this.bakObj.CourseRate != this.chapter.CourseRate) {
              if (this.chapter.ChildList && this.chapter.ChildList.length > 0) {
                this.updateRate()
                this.updateRateNode(this.chapter.ChildList)
              }
            }
          }
        }
        try {
          data.ChapterContent = decodeURIComponent(data.ChapterContent)
          data.Objectives = decodeURIComponent(data.Objectives)
          data.Requirement = decodeURIComponent(data.Requirement)
        } catch (error) {
        }
        data.StudyMinutes = data.StudyMinutes.toString()
        this.chapter = data
        extend(this.bakObj, data)
        if (this.$refs.chapterContent) {
          this.$refs.chapterContent.reloadNewValue()
          this.$refs.objectives.reloadNewValue()
          this.$refs.requirement.reloadNewValue()
        }
        this.checkMove(node)
        this.rateList.forEach(x => {
          if (x.Id == data.CourseRate) {
            this.defauRateObj = x
          }
        })
        this.addObj.CourseId = data.CourseId;
        this.addObj.ChapterId = data.ChapterId;
      },
      updateRate() {
        setChaptersRate({
          CourseRate: this.defauRateObj.CourseRate,
          CourseId: this.courseId,
          ChapterNo: this.chapter.ChapterNo + "."
        }).then(r => {
        })
      },
      updateRateNode(arr) {
        arr.forEach(x => {
          x.CourseRate = this.defauRateObj.Id
          x.CourseRateName = this.defauRateObj.Name
          if (x.ChildList && x.ChildList.length > 0) {
            this.updateRateNode(x.ChildList)
          }
        })
      },
      deleteObj(data) {
        this.$q.dialog({
          title: '删除确认',
          message: '删除章节节点将会连同下属章节也会一并删除且无法恢复，你确定要这样执行吗',
          cancel: {
            label: "取消删除",
            flat: true
          },
          ok: {
            label: "确认",
            flat: true,
            focus: true,
            color: "negative"
          }
        }).onOk(() => {
          deleteChapters({
            CourseId: this.courseId,
            ChapterNo: data.ChapterNo + ".",
            ChapterId: data.ChapterId
          }).then(r => {
            this.$refs.chapterTree.remove(data.ChapterId)
            this.updateChapters = []
            this.genernalNo("", this.dataList)
            if (this.updateChapters && this.updateChapters.length > 0) {
              this.batchUpdate()
            }
            this.$q.notify({
              icon: 'iconfont icon-chenggong',
              color: 'accent',
              timeout: 2000,
              message: '删除成功！',
              position: 'top'
            })
          })
        }).onCancel(() => {
        })
      },
      saveChapterUpdate(type) {
        if (!this.submiting) {
          this.submiting = true
          if (this.defauRateObj.Id != 0) {
            this.chapter.CourseRate = this.defauRateObj.Id
            this.chapter.CourseRateName = this.defauRateObj.Name
          }
          let msg = {}
          extend(msg, this.chapter)
          msg.ChapterContent = encodeURIComponent(msg.ChapterContent)
          msg.Objectives = encodeURIComponent(msg.Objectives)
          msg.Requirement = encodeURIComponent(msg.Requirement)
          saveChapter(msg).then(r => {
            this.submiting = false
            let tipMsg = '';
            if (type == 1) {
              tipMsg = '自动保存成功！'
            } else {
              tipMsg = '数据保存成功！'
            }
            this.$q.notify({
              icon: 'iconfont icon-chenggong',
              color: 'accent',
              timeout: 2000,
              message: tipMsg,
              position: 'top'
            })
            //点击调用章节下的单词
            if (this.chapter && this.chapter.ParentId == 0) {
              this.refreshWordsPage(this.chapter.ChapterNo);
            }
            if (this.bakObj.CourseRate != this.defauRateObj.Id) {
              if (this.chapter.ChildList && this.chapter.ChildList.length > 0) {
                this.updateRate()
                this.updateRateNode(this.chapter.ChildList)
              }
              extend(this.bakObj, this.chapter)
            }
          }).catch(e => {
            this.submiting = false
          })
        }
      },
      checkMove(node) {
        let noTemp = node.data.ChapterNo.split('.')
        let no = parseInt(noTemp[noTemp.length - 1])
        let p = node.parent.data
        this.canUp = no != 1
        this.canDown = no != p.length
      },
      moveUp() {
        let data = this.$refs.chapterTree.getCurrentNode()
        let node = this.$refs.chapterTree.getNode(data.ChapterId)
        if (node) {
          let noTemp = data.ChapterNo.toString().split('.')
          let no = parseInt(noTemp[noTemp.length - 1]) - 1
          let p = node.parent.data
          if (data.ParentId == 0) {
            p = this.swapArray(p, no, no - 1)
          } else {
            p.ChildList = this.swapArray(p.ChildList, no, no - 1)
          }
          node.parent.childNodes = this.swapArray(node.parent.childNodes, no, no - 1)
          this.updateChapters = []
          this.genernalNo("", this.dataList)
          this.checkMove(this.$refs.chapterTree.getNode(data.ChapterId))
          if (this.updateChapters && this.updateChapters.length > 0) {
            this.batchUpdate()
          }
        }
      },
      moveDown() {
        let data = this.$refs.chapterTree.getCurrentNode()
        let node = this.$refs.chapterTree.getNode(data.ChapterId)
        if (node) {
          let noTemp = data.ChapterNo.toString().split('.')
          let no = parseInt(noTemp[noTemp.length - 1]) - 1
          let p = node.parent.data
          if (data.ParentId == 0) {
            p = this.swapArray(p, no, no + 1)
          } else {
            p.ChildList = this.swapArray(p.ChildList, no, no + 1)
          }
          node.parent.childNodes = this.swapArray(node.parent.childNodes, no, no + 1)
          this.updateChapters = []
          this.genernalNo("", this.dataList)
          this.checkMove(this.$refs.chapterTree.getNode(data.ChapterId))
          if (this.updateChapters && this.updateChapters.length > 0) {
            this.batchUpdate()
          }
        }
      },
      swapArray(arr, index1, index2) {
        arr[index1] = arr.splice(index2, 1, arr[index1])[0];
        return arr;
      },
      selectValue(e) {
        e.currentTarget.select();
      },
      changeChapterName(data) {
        this.editorNodeId = 0
        let msg = {
          ChapterId: data.ChapterId,
          ChapterName: data.ChapterName
        }
        updateChapterName(msg).then(r => {
        })
      },
      addSameLevel() {
        let temp = this.$refs.chapterTree.getCurrentNode()
        if (!temp || temp.ParentId == 0) {
          let no = this.dataList && this.dataList.length > 0 ? (this.dataList.length + 1) : 1
          let t = this.createNewNode(0, no, 8, '其它')
          saveChapter(t).then(r => {
            t.ChapterId = r.Data.ChapterId
            this.dataList.push(t)
          })
        } else {
          let parentTemp = this.$refs.chapterTree.getNode(temp.ParentId).data
          let no = parentTemp.ChildList && parentTemp.ChildList.length > 0 ? (parentTemp.ChildList.length + 1) : 1
          no = parentTemp.ChapterNo + "." + no
          let t = this.createNewNode(parentTemp.ChapterId, no, parentTemp.CourseRate, parentTemp.CourseRateName)
          saveChapter(t).then(r => {
            t.ChapterId = r.Data.ChapterId
            parentTemp.ChildList.push(t)
          })
        }
      },
      addChildLevel() {
        let temp = this.$refs.chapterTree.getCurrentNode()
        if (!temp) {
          let no = this.dataList && this.dataList.length > 0 ? (this.dataList.length + 1) : 1
          let t = this.createNewNode(0, no, 8, '其它')
          saveChapter(t).then(r => {
            t.ChapterId = r.Data.ChapterId
            this.dataList.push(t)
          })
        } else {
          if (!temp.ChildList) {
            this.$set(temp, 'ChildList', [])
          }
          let no = temp.ChildList && temp.ChildList.length > 0 ? (temp.ChildList.length + 1) : 1
          no = temp.ChapterNo + "." + no
          let t = this.createNewNode(temp.ChapterId, no, temp.CourseRate, temp.CourseRateName)
          saveChapter(t).then(r => {
            t.ChapterId = r.Data.ChapterId
            temp.ChildList.push(t)
          })
        }
      },
      handleDragStart(node, ev) {

      },
      handleDragEnter(draggingNode, dropNode, ev) {

      },
      handleDragLeave(draggingNode, dropNode, ev) {

      },
      handleDragOver(draggingNode, dropNode, ev) {

      },
      handleDragEnd(draggingNode, dropNode, dropType, ev) {
        this.updateChapters = []
        if (dropType == 'inner') {
          draggingNode.data.ParentId = dropNode.data.ChapterId
        } else {
          draggingNode.data.ParentId = dropNode.data.ParentId
        }
        this.genernalNo("", this.dataList)
        if (this.updateChapters && this.updateChapters.length > 0) {
          this.batchUpdate()
        }
      },
      handleDrop(draggingNode, dropNode, dropType, ev) {},
      allowDrop(draggingNode, dropNode, type) {
        return true;
      },
      allowDrag(draggingNode) {
        return true;
      },
      initTree() {
        this.canOptions = true
        queryChapterTree({
          CourseId: this.courseId
        }).then(r => {
          this.dataList = r.Data
          this.canOptions = false
          if (this.defaultChapterId != 0) {
            setTimeout(() => {
              this.$refs.chapterTree.setCurrentKey(this.defaultChapterId)
              let t = this.$refs.chapterTree.getNode(this.defaultChapterId)
              this.changeNode(t.data, t, null)
            }, 1000);
          }
          this.MyChapterNo = this.dataList.length;
        });
      },
      createNewNode(pid, no, rate, crn) {
        if (this.canOptions) return;
        let name = ""
        if (pid == 0) {
          name = `第${this.toChinesNum(no)}次课`
        } else {
          let d = no.split('.')
          name = `第${this.toChinesNum(d[d.length-1])}章节`
        }
        return {
          ChapterId: 0,
          ParentId: pid,
          ChapterContent: "",
          ChapterName: name,
          CourseId: this.courseId,
          ChapterNo: no.toString(),
          OpenStatus: 1,
          Progress: 0,
          Objectives: "",
          Requirement: "",
          StudyMinutes: 0,
          ChildList: [],
          CourseRate: rate,
          CourseRateName: crn
        }
      },
      toChinesNum(num) {
        let changeNum = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九']; //changeNum[0] = "零"
        let unit = ["", "十", "百", "千", "万"];
        num = parseInt(num);
        let getWan = (temp) => {
          let strArr = temp.toString().split("").reverse();
          let newNum = "";
          for (var i = 0; i < strArr.length; i++) {
            newNum = (i == 0 && strArr[i] == 0 ? "" : (i > 0 && strArr[i] == 0 && strArr[i - 1] == 0 ? "" : changeNum[
              strArr[i]] + (strArr[i] == 0 ? unit[0] : unit[i]))) + newNum;
          }
          return newNum;
        }
        let overWan = Math.floor(num / 10000);
        let noWan = num % 10000;
        if (noWan.toString().length < 4) noWan = "0" + noWan;
        return overWan ? getWan(overWan) + "万" + getWan(noWan) : getWan(num);
      },
      genernalNo(parentNo, list) {
        list.forEach((x, i) => {
          if (parentNo != "") {
            x.ChapterNo = parentNo + "." + (i + 1)
          } else {
            x.ChapterNo = (i + 1).toString()
          }
          this.updateChapters.push({
            ChapterNo: x.ChapterNo,
            ChapterId: x.ChapterId,
            ParentId: x.ParentId
          })
          if (x.ChildList && x.ChildList.length > 0) {
            x.ChildList = this.genernalNo(x.ChapterNo, x.ChildList)
          }
        })
        return list
      },
      batchUpdate() {
        batchUpdateChapterNo(this.updateChapters).then(r => {
        })
      },
      //点击导入
      getImport() {
        this.isShowChapter = true;
      },
      closeChapterForm() {
        this.isShowChapter = false;
        this.isShowWordForm = false;
      },
      refreshPage() {
        this.initTree();
        this.getCourseInfo();
      }
    }
  };
</script>

<style>
  .chapter-tree .chapter-node .oops-box,
  .chapter-tree .chapter-node:hover .rate-box {
    display: none;
  }

  .chapter-tree .chapter-node:hover .oops-box,
  .chapter-tree .chapter-node .rate-box {
    display: block;
  }

  .chapter-tree .el-tree-node__content {
    height: 32px !important;
    padding-right: 20px;
  }

  .chapter-tree .el-tree-node__content:hover,
  .chapter-tree .is-current>.el-tree-node__content {
    background: #eaeff7 !important;
  }

  .chapter-tree .el-tree-node__content {
    border-radius: 4px;
  }

  .chapter-tree .tree-input {
    outline: none;
    border: none;
    padding: 0 5px;
    font-size: 14px;
    width: 100%
  }
</style>