<template>
  <div class="layout-no-cols">
     <!--
     <el-toolbar align="left">
      <el-button @click="saveClickHandler" priv="Platform.Menu.Add||Platform.Menu.Edit">
        <i class="fa fa-save"></i>保存
      </el-button>
    </el-toolbar>
    -->
    <div v-loading="dataLoading">
      <tree-grid serialNumberName="序号" :columns="columns" :need-checkbox="false" :tree-structure="true" :data-source="dataSource" @selection-change="onSelectionChange" :strict="true">
      </tree-grid>
    </div>
  </div>
</template>

<script>
import TreeGrid from '@src/components/TreeGrid.vue'
import util from '@src/common/util.js'

export default {
  data() {
    return {
      columns: [
        {
          text: '菜单名称',
          dataIndex: 'name'
        },
        {
          text: 'ID',
          dataIndex: 'id'
        },
        {
          text: 'URL',
          dataIndex: 'URL'
        }
      ],
      dataSource: [],
      selectedRows: [],
      dataLoading: false
    }
  },
  methods: {
    onSelectionChange(selection) {
      this.selectedRows = selection
    },
    // 保存
    async saveClickHandler() {
      let ids = []
      this.selectedRows.forEach(row => {
        ids.push(row.id)
      })
      let res = await axios.put('/ui/menus/selectedrows', { ids: ids.join() })
      if (res.data.status === 1) {
        this.menuList()
      }
      util.showResponseMessage(res.data)
    },
    // 菜单列表数据加载
    async menuList() {
      this.dataLoading = true
      let res
      try {
        res = await axios.get('/ui/menus')
      } catch (e) {
        this.dataLoading = false
        return
      }
      this.dataLoading = false
      this.dataSource = res.data.data
    }
  },
  components: {
    TreeGrid
  },
  created() {
    this.menuList()
  }
}
</script>
<style scoped>

</style>
