<template>
  <div class="page-body">
    <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 color="accent" size="sm" class="q-mr-md" icon="add" label="编辑章节" @click="EditChapter(null)" />
      </div>
    </div>
    <div class="page-content">
      <div class="q-table-container q-table-dense">
        <el-table :data="data" style="width: 100%;margin-bottom: 20px;" row-key="ChapterId" border default-expand-all
          :tree-props="{children: 'ChildList'}">
          <el-table-column prop="ChapterName" label="目录">
            <template slot-scope="scope">
              <span>{{scope.row.ChapterNo}} {{scope.row.ChapterName}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="OpenStatus" label="开发状态" width="200">
            <template slot-scope="scope" v-if="scope.row.OpenStatus==1||scope.row.OpenStatus==2">
              <span>开放</span>
            </template>
          </el-table-column>
          <el-table-column prop="Progress" label="进度" width="200">
            <template slot-scope="scope">
              <q-linear-progress stripe size="10px" :value="scope.row.Progress/100.0" />
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200">
            <template slot-scope="scope">
              <a>编辑</a>
              &nbsp;
              <a>设置</a>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    queryChapterTree
  } from '../../api/course/index'


  export default {
    meta: {
      title: "章节管理"
    },
    components: {

    },
    computed: {

    },
    watch: {

    },
    data() {
      return {
        currentUrl: "",
        selectedRowID: {},
        data: [],
        loading: true,
        msg: {
          CourseId: 0,
        },
        CourseId: 0,
      }
    },
    created() {
      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: {
      //新增修改章节
      EditChapter(obj) {

      },
      //获取菜单分页列表
      getchaperTree() {
        this.loading = true;
        queryChapterTree(this.msg).then(res => {
          this.loading = false
          this.data = res.Data;
        }).catch(() => {
          this.loading = false
        })
      },
    }
  }

</script>
<style lang="sass">
  @import url('~assets/css/table.sass')

</style>
