<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>
          </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="defaultChapterId" @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 v-if="chapter.ParentId!=0"> -->
            <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 v-else class="text-center text-h5 text-grey-4 q-mt-lg">单元节点不支持编辑相关内容</div> -->
          </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>
  </div>
</template>

<script>
  import editor from "../../components/editor/UeEditor";
  import chapterForm from "../../components/course/chapter-form";
  import {
    queryChapterTree,
    saveChapter,
    batchUpdateChapterNo,
    updateChapterName,
    getCourseRate,
    queryCourseInfo,
    deleteChapters,
    setChaptersRate
  } from "../../api/course/index";
  import {
    compareObject
  } from '../../utils/validate'
  import {
    extend
  } from 'quasar'
  export default {
    meta: {
      title: "课程章节详情"
    },
    components: {
      editor,
      chapterForm
    },
    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,
        splitterModel: 30, //左侧默认占据多大
        isShowChapter: false, //是否显示导入
        chapterObj:{},
        MyChapterNo:0
      };
    },
    created() {
      if (this.$route.query.chapter) {
        this.defaultChapterId = this.$route.query.chapter;
      }
      if (this.$route.query.courseId) {
        this.courseId = this.$route.query.courseId;
        this.initTree();
        this.initRateList();
        this.getCourseInfo();
      }

    },
    mounted() {
      this.showContent = false;
      setTimeout(() => {
        this.showContent = true;
      }, 3000);
    },
    methods: {
      changeContent() {},
      getCourseInfo() {
        queryCourseInfo({
          CourseId: this.courseId
        }).then(res => {
          this.courseInfo = res.Data;
        })
      },
      initRateList() {
        getCourseRate({}).then(r => {
          this.rateList = r.Data

        })
      },
      changeNode(data, node, ev) {
        console.log(data,'data');
        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
          }
        })

      },
      updateRate() {
        setChaptersRate({
          CourseRate: this.defauRateObj.CourseRate,
          CourseId: this.courseId,
          ChapterNo: this.chapter.ChapterNo + "."
        }).then(r => {
          //this.initTree()
        })
      },
      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.initTree()
            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(() => {
          // console.log('>>>> Cancel')
        })

      },
      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 msg = '';
            if(type==1){
                msg='自动保存成功！'
            }else{
                msg='数据保存成功！'
            }
            this.$q.notify({
              icon: 'iconfont icon-chenggong',
              color: 'accent',
              timeout: 2000,
              message: msg,
              position: 'top'
            })
            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)
        console.log(data)
        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)
        console.log(data)
        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) {
        console.log('drag start', node);
      },
      handleDragEnter(draggingNode, dropNode, ev) {
        console.log('tree drag enter: ', dropNode.label);
      },
      handleDragLeave(draggingNode, dropNode, ev) {
        console.log('tree drag leave: ', dropNode.label);
      },
      handleDragOver(draggingNode, dropNode, ev) {
        console.log('tree drag over: ', dropNode.label);
      },
      handleDragEnd(draggingNode, dropNode, dropType, ev) {
        console.log(draggingNode, dropNode, dropType)
        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) {
        // if (dropNode.data.ChapterName === '二级 3-1') {
        //     return type !== 'inner';
        // } else {
        return true;
        //}
      },
      allowDrag(draggingNode) {
        return true;
      },
      initTree() {
        this.canOptions = true
        queryChapterTree({
          CourseId: this.courseId
        }).then(r => {
          console.log(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 => {
          console.log(x)
        })
      },
      //点击导入
      getImport(){
        this.isShowChapter=true;
      },
      closeChapterForm(){
        this.isShowChapter=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>
