<template>
  <div>
    <div class="right-list-toobar">
      <el-toolbar>
        <el-button @click.stop="reportClickHandler()" type="text" title="表情统计"><i class="fa fa-bar-chart"></i>本站点</el-button>
        <el-col>当前报表：表情统计</el-col>
      </el-toolbar>
      <div v-loading="dataLoading">
        <tree-grid :columns="columns" :tree-structure="true" :data-source="catalogList"  :need-checkbox="false" :strict="true">
        </tree-grid>
      </div>
    </div>
  </div>
</template>

<script>
import TreeGrid from '@src/components/TreeGrid.vue'
export default {
  components: {
    'tree-grid': TreeGrid
  },
  data() {
    return {
      columns: [
        {
          text: '栏目名称',
          dataIndex: 'name',
          minwidth: '30%'
        },
        {
          text: 'ID',
          dataIndex: 'ID',
          minwidth: '15%'
        },
        {
          text: '别名',
          dataIndex: 'alias',
          minwidth: '15%'
        },
        {
          text: '栏目类型',
          dataIndex: 'typeName',
          minwidth: '15%'
        },
        {
          text: '内容类型',
          dataIndex: 'contentTypeName',
          minwidth: '15%'
        },
        {
          text: '操作',
          menus: [
            {
              iconClass: 'fa fa-bar-chart f16',
              title: '表情统计',
              method: 'reportClickHandler'
            }
          ],
          minwidth: '10%'
        }
      ],
      dataLoading: false,
      catalogList: [],
      catalogID: ''
    }
  },
  methods: {
    reportClickHandler(row) {
      if (!row) {
        row = {ID: 0}
      }
      this.$router.push(`${this.$route.path}/${row.ID}`)
    },
    async loadCatalogTree() {
      this.dataLoading = true
      let res
      try {
        res = await axios.get('/ui/catalog/bindeditortree')
        this.dataLoading = false
      } catch (e) {
        this.dataLoading = false
        return
      }
      this.catalogList = res.data.data
    }
  },
  created() {
    this.loadCatalogTree()
  }
}

</script>

<style scoped>
  .page-wrap {
    margin-top: 20px;
    margin-right: 20px;
  }

  .page-wrap .page {
    float: right;
  }

</style>
