<template>
  <div class="layout-row-inpage">
    <tree-table :data="catalogTrees" :expanded-level="1" row-key="ID" class="catalog-tree-table">
      <tree-table-column label="名称">
        <template slot-scope="scope">
          <a class="list-card-title f14" href="javascript:void(0)" @click.stop="handleNodeClick(scope.row)">
            <i :class="scope.row.icon" aria-hidden="true"></i> {{scope.row.name}}
          </a>
        </template>
      </tree-table-column>
      <el-table-column prop="alias" label="别名" show-overflow-tooltip></el-table-column>
      <el-table-column prop="typeName" label="栏目类型"></el-table-column>
      <el-table-column prop="path" label="路径" show-overflow-tooltip></el-table-column>
    </tree-table>
  </div>
</template>

<script>
import commentView from './commentView.vue'
import TreeTableColumn from '@src/components/treeTable/TreeTableColumn.vue'
import TreeTable from '@src/components/treeTable/TreeTable.vue'
export default {
  components: {
    'comment-view': commentView,
    'tree-table': TreeTable,
    'tree-table-column': TreeTableColumn
  },
  data() {
    return {
      // 栏目树数据
      catalogTrees: [],
      // 栏目树加载
      treeLoading: false,
      clientHeight: document.documentElement.clientHeight - 130
    }
  },
  methods: {
    // 栏目树请求事件
    handleNodeClick(data) {
      this.$router.push({path: `/plugins/comment/${data.ID}`, query: { showback: true }})
    },

    // 栏目树数据加载
    async getCatalogsTree() {
      this.treeLoading = true
      let res = await axios.get('/ui/catalog')
      this.catalogTrees = res.data.data
      this.treeLoading = false
    }
  },

  created() {
    // 栏目树数据加载
    this.getCatalogsTree()
  }
}
</script>
