<template>
  <div class="tableBox">
    <div class="top-btn-wrap">
      <el-button
        type="primary"
        @click="getRoleList">搜索</el-button>
      <el-button
        type="primary"
        @click="showDialog('add')">新增角色</el-button>
    </div>
    <div class="block-title">
      角色列表
    </div>
    <el-table :data="tableData">
      <el-table-column
        prop="name"
        label="角色名"
        width="140">
      </el-table-column>
      <el-table-column
        prop="resourceList"
        label="权限列表">
        <template slot-scope="scope">
          <el-tag
            v-for="(item,index) in scope.row.resourceList"
            :key="index">
            {{ item.name }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="120">
        <template slot-scope="scope">
          <el-button
            type="text"
            @click="showDialog('edit',scope.row)">编辑</el-button>
          <el-button
            type="text"
            @click="delRole(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 账号弹框 -->
    <ElDialog
      title="添加角色"
      width="660px"
      v-model="addVisible">
      <AddDialog
        :permission-list="resourceList"
        @updateList="getRoleList"></AddDialog>
    </ElDialog>
    <ElDialog
      title="编辑角色"
      width="660px"
      v-model="editVisible">
      <EditDialog
        :role-item="currentItem"
        @updateList="getRoleList"></EditDialog>
    </ElDialog>
    <el-pagination
      background
      :page-size="10"
      @current-change="handlePage"
      layout="prev, pager, next"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>
import { getRoleList, delRole, getResourceList } from '@/api/systemSetting/role'
import ElDialog from '@/components/Dialog'
import AddDialog from './role/AddDialog'
import EditDialog from './role/EditDialog'

export default {
  components: {
    ElDialog,
    AddDialog,
    EditDialog
  },
  created () {
    this.params.pageNum = 1
    this.params.pageSize = 10
    this.getResourceList()
    this.getRoleList()
  },
  data () {
    return {
      loading: false,
      addVisible: false,
      editVisible: false,
      tableData: [],
      // 当前角色对象
      currentItem: {},
      params: {
        pageSize: 10,
        pageNum: 1
      },
      total: 0,
      resourceList: [] // 资源权限列表
    }
  },
  methods: {
    showDialog (type, item) {
      this[`${type}Visible`] = true
      this.currentItem = item
    },
    getResourceList () {
      getResourceList().then(res => {
        this.resourceList = res.data || []
      })
    },
    getRoleList () {
      this.loading = true
      getRoleList(this.params).then(res => {
        this.loading = false
        this.tableData = res.data.records || []
        this.total = res.data.total
      })
    },
    delRole (id) {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delRole(id).then(res => {
          this.$message.success('删除成功')
          this.getRoleList()
        })
      })
    },
    handlePage (pageNum) {
      this.params.pageNum = pageNum
      this.getAccountList()
    }
  }
}
</script>

<style scoped>

</style>
