<template>
  <div class="content-view">
    <div class="table-head-tool">
      <Button type="primary" @click="showAddWarp">新增</Button>
    </div>
    <div class="table-body">
      <tables ref="tables" v-model="gridOption.data" :columns="gridOption.columns" />
    </div>

    <editModal ref="editModal" :columns="gridOption.columns" :data="gridOption.editRow">
    </editModal>

    <Modal v-model="isShowPermission" title="权限设置" @on-ok="submitPermission">
      <Tree ref="trees" :check-strictly='true' :data="treeData" show-checkbox></Tree>
    </Modal>
  </div>
</template>
<script>
import uiTool from '@/utils/uiTool'
import roleServer from '@/api/system/roleServer'
import menuServer from '@/api/system/menuServer'

export default {
  name: 'tables_page',

  data() {
    return {
      row: {},
      isShowPermission: false,
      expandTreeAll: [],
      gridOption: {
        columns: [
          { title: '序号', key: 'id' },
          { title: '角色名称', key: 'name' },
          {
            title: '操作',
            type: 'template',
            render: (h, params) => {
              let btns = [
                {
                  title: '修改',
                  type: 'primary',
                  click: () => {
                    this.showEditWarp(params.row)
                  }
                },
                {
                  title: '删除',
                  type: 'primary',
                  click: () => {
                    this.delConfirm(params.row)
                  }
                },
                {
                  title: '配置权限',
                  type: 'primary',
                  click: () => {
                    this.configPermission(params.row)
                  }
                }
              ]

              return uiTool.getBtn(h, btns)
            }
          }
        ],
        data: []
      },
      treeData: []
    }
  },
  created() {
    this.init()
  },
  methods: {
    async init() {
      let res = await roleServer.list()
      this.gridOption.data = res.data
    },

    showAddWarp() {
      this.$refs.editModal.addShow({}, async (row) => {
        await roleServer.add(row)
        this.init()
        await this.$Message.success('新增成功！')
      })
    },
    showEditWarp(row) {
      this.$refs.editModal.editShow(row, async (newRow) => {
        await roleServer.edit(newRow)
        await this.init()
        this.$Message.success('修改成功！')
      })
    },
    async delConfirm(row) {
      uiTool.delConfirm(async () => {
        await roleServer.del(row)
        await this.init()
        this.$Message.success('删除成功！')
      })
    },
    async submitPermission() {
      let checkNodes = this.$refs['trees'].getCheckedNodes()
      let checkNodeIds = checkNodes.map((p) => p.id)
      let param = {
        id: this.row.id,
        name: this.row.name,
        menus: JSON.stringify(checkNodeIds)
      }

      await roleServer.edit(param)
      await this.init()
      this.$Message.success('权限修改成功！')

      this.isShowPermission = false
    },
    async configPermission(row) {
      this.row = row
      this.expandTreeAll = []

      let res = await menuServer.list()
      let tree = uiTool.transformTree(res.data)
      if (row.menus) {
        this.expandTreeAll = JSON.parse(row.menus)
        this.treeData = this.mapTree(tree)
      } else {
        this.treeData = this.mapTree(tree)
      }

      this.isShowPermission = true
    },

    mapTree(tree) {
      return tree.map((p) => {
        if (p.children && p.children.length > 0) {
          p.children = this.mapTree(p.children)
        }

        let row = this.expandTreeAll.find((p2) => p2 === p.id)
        if (row) {
          p.checked = true
        }

        return Object.assign({}, p, { title: p.name, expand: false })
      })
    }
  }
}
</script>
