<template>
  <div class="layout-no-cols">
    <div >
      <el-table :data="logList" tooltip-effect="dark" style="width: 100%">
        <el-table-column label="日志名称">
          <template slot-scope="scope">
            <a href="javascript:void(0)" @click.stop="handleNodeClick(scope.row)">{{scope.row.name}}</a>
          </template>
        </el-table-column>
        <el-table-column label="日志ID" prop="ID"></el-table-column>
        <el-table-column label="操作" align="right" width="100">
          <template slot-scope="scope">
            <el-button @click.stop="handleNodeClick(scope.row)"  type="text" title="查看">
              <i class="fa fa-search"></i> 查看
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      logTree: []
    }
  },
  computed: {
    logList () {
      if (!this.logTree.length || !this.logTree[0].children) {
        return []
      }

      return this.logTree[0].children
    }
  },
  methods: {
    renderContent(createElement, { node, data, store }) {
      let className = !data.ID || data.ID === 'System' ? 'fa fa-folder' : 'fa fa-file-text-o'
      let icon = createElement('i', { attrs: { class: className } })
      let label = createElement('span', ' ' + node.label)
      return createElement('span', [icon, label])
    },
    handleNodeClick(data) {
      this.$router.push({path: '/platform/log/' + String(data.ID).toLocaleLowerCase()})
    }
  },

  async created() {
    const res = await axios.get('/ui/logs/tree')
    this.logTree = res.data.data
  }
}
</script>
