<template>
  <div class="page-body" style="height: calc(100% - 30px);">
    <div class="page-search row items-center">
      <div class="col row wrap q-mr-lg q-col-gutter-md"></div>
      <div class="page-option">
        <q-btn v-if="IsOperateAuth" color="accent" size="sm" class="q-mr-md" icon="add" label="编辑章节"
          @click="EditChapter(null)" />
      </div>
    </div>
    <div class="page-content" style="height:calc(100% - 42px)">
      <q-scroll-area :thumb-style="thumbStyle" :content-style="contentStyle" :content-active-style="contentActiveStyle"
        style="height: 100%; width: 100%;">
        <el-table :data="dataList" v-loading="loading" :expand-row-keys="expandKeys" :default-expand-all="true"
          :row-class-name="tableRowClassName" class="tree-tab-chapter" style="width: 100%;margin-bottom: 20px;"
          row-key="ChapterId" ref="chapterTab" @row-click="rowsClick"
          :tree-props="{ children: 'ChildList', hasChildren: 'hasChildren' }">
          <el-table-column prop="date" label="章节" width="450">
            <template slot-scope="scope">
              <div style="display: inline-block;">
                <div class="flex q-ml-md">
                  <div class="catalog_num" v-if="scope.row.ChapterNo.indexOf('.') == -1" style="cursor:pointer;">
                    <span>
                      <i>{{ scope.row.ChapterNo }}</i>
                    </span>
                  </div>
                  <div style="margin-left: 36px;width:360px;cursor:pointer;" class="ellipsis"
                    v-if="scope.row.ChapterNo.indexOf('.') == -1">
                    {{ scope.row.ChapterName }}
                  </div>
                  <div v-if="scope.row.ChapterNo.indexOf('.') != -1"
                    :style="{ marginLeft: 20 * (scope.row.ChapterNo.split('.').length+1 - 2) + 'px' }">
                    {{ scope.row.ChapterNo }}
                  </div>
                  <div v-if="scope.row.ChapterNo.indexOf('.') != -1" style="margin-left: 12px;" class="ellipsis"
                    :style="{width:(350-(20 * (scope.row.ChapterNo.split('.').length+1 - 2)))+'px'}">
                    {{ scope.row.ChapterName }}
                  </div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="课时" sortable width="100">
            <template slot-scope="scope">
              {{ scope.row.StudyHours }}课时
            </template>
          </el-table-column>
          <el-table-column prop="address" label="章节详情" width="200">
            <template slot-scope="scope">
              <q-btn flat color="primary" @click.stop="viewDetail(scope.row)">章节详情</q-btn>
            </template>
          </el-table-column>
          <el-table-column prop="address" label="状态" width="100">
            <template slot-scope="scope">
              <div class="text-negative" v-if="scope.row.OpenStatus == 0">
                隐藏
              </div>
              <div class="text-dark" v-if="scope.row.OpenStatus == 1">开放</div>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <div class="text-right op-box">
                <template v-if="IsOperateAuth">
                  <q-btn size="xs" class="q-mr-md" color="dark" @click.stop="EditChapter(scope.row.ChapterId)">修改
                  </q-btn>
                  <q-btn size="xs" flat color="negative" @click.stop="deleteObj(scope.row)">删除</q-btn>
                </template>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </q-scroll-area>
    </div>
    <q-dialog v-model="isViewer" v-if="viewObj">
      <q-card style="width: 540px;max-height:80%;">
        <q-card-section class="row items-center q-pb-none">
          <div class="text-h6">{{ viewObj.ChapterName }}</div>
          <q-space />
          <q-btn icon="close" flat round dense v-close-popup />
        </q-card-section>
        <q-card-section>
          <div class="text-subtitle1 q-mb-md">章节学习内容</div>
          <div v-html="viewObj.ChapterContent" v-if="viewObj.ChapterContent!=''"
            class="q-pa-md bg-grey-2 rounded-borders chapter-Content"></div>
          <div class="text-grey-3 text-center" v-else>未添加内容</div>
        </q-card-section>
        <q-card-section>
          <div class="text-subtitle1 q-mb-md">教学重点</div>
          <div v-html="viewObj.Objectives" class="chapter-Content" v-if="viewObj.ChapterContent!=''"></div>
          <div class="text-grey-3 text-center" v-else>未添加内容</div>
        </q-card-section>
        <q-card-section>
          <div class="text-subtitle1 q-mb-md">学生学习要求</div>
          <div v-html="viewObj.Requirement" class="chapter-Content" v-if="viewObj.ChapterContent!=''"></div>
          <div class="text-grey-3 text-center" v-else>未添加内容</div>
        </q-card-section>
      </q-card>
    </q-dialog>
  </div>
</template>

<script>
  import {
    queryChapterTree,
    batchUpdateChapterNo,
    deleteChapters
  } from "../../api/course/index";
  import {
    openURL
  } from "quasar";
  export default {
    meta: {
      title: "章节管理"
    },
    computed: {},
    watch: {},
    data() {
      return {
        currentUrl: "",
        selectedRowID: {},
        dataList: [],
        loading: true,
        msg: {
          CourseId: 0
        },
        CourseId: 0,
        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
        },
        expandKeys: [],
        updateChapters: [],
        updateNo: false,
        viewObj: null,
        isViewer: false,
        IsOperateAuth: false, //是否有章节【新增、修改、删除】权限
      };
    },
    created() {
      var localStorageData = window.localStorage["loginUserInfo"];
      let ActionMenuList = JSON.parse(localStorageData).data.ActionMenuList
      if (ActionMenuList && ActionMenuList.length > 0) {
        ActionMenuList.forEach(x => {
          if (x.FunctionCode == 'Operate_CourseChapter') {
            this.IsOperateAuth = true;
          }
        })
      }
      if (this.$route.query.CourseId) {
        this.CourseId = this.$route.query.CourseId;
        this.msg.CourseId = this.CourseId;
      }
    },
    mounted() {
      this.currentUrl = this.$route.path;
      this.getchaperTree();
    },
    methods: {
      viewDetail(obj) {
        try {
          obj.ChapterContent = decodeURIComponent(obj.ChapterContent)
          obj.Objectives = decodeURIComponent(obj.Objectives)
          obj.Requirement = decodeURIComponent(obj.Requirement)
        } catch (error) {

        }
        this.viewObj = obj
        this.isViewer = true
      },
      tableRowClassName({
        row,
        rowIndex
      }) {
        if (row.ChapterNo.indexOf(".") == -1) {
          return "first-level-node";
        }
        return "";
      },
      deleteObj(data) {
        this.$q
          .dialog({
            title: "删除确认",
            message: "删除章节节点将会连同下属章节也会一并删除且无法恢复，你确定要这样执行吗",
            cancel: {
              label: "取消删除",
              flat: true
            },
            ok: {
              label: "确认",
              flat: true,
              focus: true,
              color: "negative"
            }
          })
          .onOk(() => {
            deleteChapters({
              CourseId: this.msg.CourseId,
              ChapterNo: data.ChapterNo + ".",
              ChapterId: data.ChapterId
            }).then(r => {
              this.updateNo = true;
              this.getchaperTree();
              this.$q.notify({
                icon: "iconfont icon-chenggong",
                color: "accent",
                timeout: 2000,
                message: "删除成功！",
                position: "top"
              });
            });
          })
          .onCancel(() => {
 
          });
      },
      batchUpdate() {
        batchUpdateChapterNo(this.updateChapters).then(r => {});
      },
      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;
      },
      rowsClick(row, column, event) {
     
        this.$refs.chapterTab.toggleRowExpansion(row);
      },
      //新增修改章节
      EditChapter(obj) {
 
        if (!obj) {
          openURL(
            window.location.origin +
            "/#/course/chapter-editor?courseId=" +
            this.CourseId
          );
        } else {
          openURL(
            window.location.origin +
            "/#/course/chapter-editor?courseId=" +
            this.CourseId +
            "&chapter=" +
            obj
          );
        }
      },
      //获取菜单分页列表
      getchaperTree() {
        this.loading = true;
        queryChapterTree(this.msg)
          .then(res => {
            this.loading = false;
            res.Data.forEach(x => {
              this.expandKeys.push(x.ChapterId);
            });
         

            this.dataList = res.Data;
            if (this.updateNo) {
              this.updateNo = false;
              this.updateChapters = [];
              this.genernalNo("", this.dataList);
              if (this.updateChapters && this.updateChapters.length > 0) {
                this.batchUpdate();
              }
            }
          })
          .catch(() => {
            this.loading = false;
          });
      }
    }
  };

</script>

<style>
  .tree-tab-chapter thead {
    display: none;
  }

  .tree-tab-chapter td {
    border-bottom: none !important;
    padding: 5px 0 !important;
  }

  .tree-tab-chapter::before {
    display: none !important;
  }

  .tree-tab-chapter .el-table__expand-icon {
    /* display: none !important; */
    margin-right: 0 !important;
  }

  .tree-tab-chapter .catalog_num {
    height: 20px;
    padding-left: 14px;
    background: #d0d5db;
    border-radius: 10px;
    margin: 10px 20px 0 0;
    position: absolute;
    left: 15px;
    top: 50%;
    margin-top: -10px;
  }

  .tree-tab-chapter .catalog_num>span {
    min-width: 24px;
    height: 24px;
    padding: 4px;
    margin: -2px -4px 0 0;
    background: #d0d5db;
    display: block;
    border-radius: 20px;
  }

  .tree-tab-chapter .catalog_num>span>i {
    min-width: 16px;
    height: 16px;
    padding: 0 2px;
    line-height: 16px;
    background: #fff;
    font-size: 12px;
    font-family: Arial;
    color: #a8a8b3;
    border-radius: 20px;
    display: block;
    text-align: center;
    font-style: normal;
  }

  .tree-tab-chapter .first-level-node {
    background-color: #f5f7fa !important;
  }

  .tree-tab-chapter .first-level-node td:first-child {
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
  }

  .tree-tab-chapter .first-level-node td:last-child {
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
  }

  .tree-tab-chapter tr .op-box {
    display: none;
  }

  .tree-tab-chapter tr:hover .op-box {
    display: block;
  }

  .tree-tab-chapter .el-table__indent {
    display: none !important;
  }

  .tree-tab-chapter .el-table__expand-icon {
    display: none !important;
  }

  /**@import url('~assets/css/table.sass')*/
  .chapter-Content h6,
  .chapter-Content h5,
  .chapter-Content h4,
  .chapter-Content h3,
  .chapter-Content h2,
  .chapter-Content h1{
    font-size: unset !important;
    line-height: unset !important;
    letter-spacing: unset !important;
  }
</style>
