<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-dropdown outline color="dark" label="添加教案">
          <q-list>
            <q-item clickable v-close-popup>
              <q-item-section>
                <q-item-label @click="EditTeachPlan(null)">编辑章节</q-item-label>
              </q-item-section>
            </q-item>

          </q-list>
        </q-btn-dropdown>
      </div>
    </div>
    <div class="page-content">
      <div class="q-table-container q-table-dense">
          <q-sortable-tree :nodes="data"
                 node-key="id"
                 label-key="name"
                 no-connectors
                 :default-expand-all="true"/>

        <div class="q-table-middle scroll">
          <table class="q-table">
            <thead>
              <tr class style="text-align: left;">
                <th>目录</th>
                <th>开发状态</th>
                <th>进度</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item ,index)  in (data)" :key="index"
                v-bind:class="[(item.ChapterId != selectedRowID.ChapterId) ? 'my-label':'text-green bg-light-green-11','']">
                <td data-th="Name" @click="toggle(item, index)">
                  <span class="q-tree-link q-tree-label" v-bind:style="setPadding(item)">
                    <q-icon style="cursor: pointer;" :name="iconName(item)" color="secondary"></q-icon>
                    {{item.ChapterName}}
                  </span>
                </td>
                <td width="20%" data-th="Account">{{item.niif_account}} </td>
                <td width="10%" data-th="Actions">
                  <q-btn dense flat color="blue" icon="add_circle"></q-btn>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>

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


  export default {
    meta: {
      title: "教案管理"
    },
    components: {

    },
    computed: {
      arrayTreeObj() {
        let vm = this;
        var newObj = [];
        vm.recursive(vm.table, newObj, 0, vm.itemId, vm.isExpanded);
        return newObj;
      }
    },
    watch: {
      selectedIDRow: function (val) {
        if (this.selectedRowID != null) {
          this.$set(this.selectedRowID, "id", val);
        }
      }
    },
    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: {
      recursive(obj, newObj, level, itemId, isExpend) {
        let vm = this;
        obj.forEach(function (o) {
          if (o.ChildList && o.ChildList.length != 0) {
            o.level = level;
            o.leaf = false;
            newObj.push(o);
            if (o.ChapterId == itemId) {
              o.expend = isExpend;
            }
            if (o.expend == true) {
              vm.recursive(o.ChildList, newObj, o.level + 1, itemId, isExpend);
            }
          } else {
            o.level = level;
            o.leaf = true;
            newObj.push(o);
            return false;
          }
        });
      },
      iconName(item) {
        if (item.expend == true) {
          return "remove_circle_outline";
        }
        if (item.ChildList && item.ChildList.length > 0) {
          return "control_point";
        }
        return "done";
      },
      toggle(item, index) {
        let vm = this;
        vm.itemId = item.id;

        item.leaf = false;
        //show  sub items after click on + (more)
        if (
          item.leaf == false &&
          item.expend == undefined &&
          item.ChildList != undefined
        ) {
          if (item.ChildList.length != 0) {
            vm.recursive(item.ChildList, [], item.level + 1, item.id, true);
          }
        }


        if (item.expend == true && item.ChildList != undefined) {
          var __subindex = 0;
          item.ChildList.forEach(function (o) {
            o.expend = undefined;
          });

          vm.$set(item, "expend", undefined);
          vm.$set(item, "leaf", false);
          vm.itemId = null;
        }
      },
      setPadding(item) {
        return `padding-left: ${item.level * 30}px;`;
      },
      //获取菜单分页列表
      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>
