<!--
 * @Author: 曹捷
 * @Date: 2019-08-13 10:49:35
 * @LastEditors: 曹捷
 * @LastEditTime: 2021-04-28 17:09:10
 * @Description: 机构管理
 -->
<template>
  <obitUniversalTable name="菜单权限">
    <template #btn>
      <a-button type="primary" @click="addDialog(0)">
        <i class="iconfont icon-add-bold p-r-5"></i> 新 增
      </a-button>
    </template>
    <a-table v-if="menuList.length>0" :loading="loading" :childrenColumnName="'childs'" :defaultExpandAllRows="true"
      rowKey="menuId" :columns="tableColumns" :pagination="false" :dataSource="menuList" class="com-table"
      highlight-current-row style="width: 100%">
      <template #iconName="{ record  }">
        <span class="iconfont obit-link" :class="'icon-'+record.iconName"></span>
        <span class="obit-link m-l-10">{{record.iconName}} </span>
      </template>
      <template #operation="{ record  }" :key="record.menuId">
        <a-button type="link" @click="addDialog(record.menuId )">新增子级</a-button>
        <a-divider type="vertical" style="height: 16px;" />
        <a-button type="link" @click="editDialog(record)">编辑</a-button>
        <a-divider type="vertical" style="height: 16px;" />
        <a-button type="link" @click="remove(record)"> 删除</a-button>

      </template>
    </a-table>
  </obitUniversalTable>
  <!-- <div class="obit-main  ">
    <div class="obit-search t-r">
      <span class="p-r-10">
        <obit-button @click="addDialog(0)" type="primary" animation="line-left-bottom reverse">
          <i class="iconfont icon-add-bold"></i>
          新增
        </obit-button>
      </span>
    </div>
    <div class="obit-content">
    </div>
  </div> -->
  <menuAdd :addType="addType" :detailsInfo="detailsInfo" v-model:open="addVisable" @reload="getMenuTree"></menuAdd>

</template>

<script>
import menuAdd from './menuAdd.vue'
export default {
  components: { menuAdd },
  data () {
    return {
      loading: false,
      tableColumns: [
        { dataIndex: 'menuName', title: '菜单名称' },
        { dataIndex: 'menuCode', title: '菜单编码' },
        { dataIndex: 'permissionType', title: '类型' },
        { dataIndex: 'path', title: '菜单路径' },
        { title: '图标', slots: { customRender: 'iconName' } },
        { dataIndex: 'orderNo', title: '排序' },
        { title: '操作', slots: { customRender: 'operation' } },
      ],
      // 新增编辑相关
      addVisable: false,
      addType: 'add',
      detailsInfo: {},
      menuList: [],
    }
  },
  mounted () {
    this.getMenuTree()
  },
  methods: {
    // 机构新增和编辑相关  --------------start --------------------------
    addDialog (id) {
      this.detailsInfo = {
        parentId: id
      }
      this.addVisable = true
      this.addType = 'add'
    },
    editDialog (item) {
      this.detailsInfo = item
      this.addVisable = true
      this.addType = 'edit'
    },
    remove (item) {
      let _this = this
      this.$confirm({
        title: '提示',
        content: '是否删除',
        onOk () {
          _this.$http.removeSystemMenu(item).then((res) => {
            _this.$message.success('删除成功')
            _this.getMenuTree(true)
          })
        },
      })
    },
    // 机构新增和编辑相关   -------------------end-------------------
    getMenuTree () {
      this.loading = true
      this.$http.getSystemMenuTree().then((res) => {
        this.menuList = res
      }).finally(() => {
        this.loading = false
      })
    },
  },
}
</script>

<style lang="less">
</style>