<template>
  <a-card title="角色列表">
    <a-button
      slot="extra"
      type="primary"
      size="small"
      @click="handleAdd"
    >
      新增角色
    </a-button>
    <a-spin :spinning="loading">
      <a-table
        :columns="columns"
        :data-source="roleList"
        :row-key="record => record.id"
        :pagination="false"
      >
        <template
          slot="managers"
          slot-scope="text, record"
        >
          <a-tag
            v-for="(member,index) in record.managers"
            :key="index"
          >
            {{ member.nick_name }}
          </a-tag>
        </template>

        <template
          slot="operation"
          slot-scope="text, record, index"
        >
          <a-button
            size="small"
            @click="handleEdit(record)"
          >
            编辑
          </a-button>
          <a-popconfirm
            v-if="index!==0"
            title="确定要删除这个角色吗？"
            @confirm="handleDelete(record.id)"
          >
            <a-icon
              slot="icon"
              type="question-circle-o"
              style="color: red"
            />
            <a-button
              size="small"
              type="danger"
            >
              删除
            </a-button>
          </a-popconfirm>
        </template>
      </a-table>
    </a-spin>

    <AddModal
      v-model="addVisible"
      :permissions="permissions"
      @update="getRoleList"
    ></AddModal>

    <EditModal
      v-model="eidtVisible"
      :permissions="permissions"
      :current-role="currentRole"
      @update="getRoleList"
    ></EditModal>
  </a-card>
</template>

<script>
import { getRoleList, getPermissionList, delRole } from '@/api/systemSetting/role'
import AddModal from './role/AddModal'
import EditModal from './role/EditModal'

const columns = [
  {
    title: '账号',
    dataIndex: 'name',
    key: 'name'
  },
  {
    title: '昵称',
    dataIndex: 'nick_name',
    key: 'nick_name'
  },
  {
    title: '成员',
    dataIndex: 'managers',
    key: 'managers',
    scopedSlots: { customRender: 'managers' }
  },
  {
    title: '操作',
    dataIndex: 'operation',
    key: 'operation',
    width: '200px',
    scopedSlots: { customRender: 'operation' }
  }
]
export default {
  created () {
    this.getRoleList()

    getPermissionList().then(res => {
      this.permissions = res.extraInfo
    })
  },
  components: {
    AddModal,
    EditModal
  },
  data () {
    return {
      columns,
      loading: true,
      addVisible: false,
      eidtVisible: false,
      currentRole: null,
      roleList: [],
      permissions: []
    }
  },
  methods: {
    handleAdd () {
      this.addVisible = true
    },
    handleEdit (data) {
      this.eidtVisible = true
      this.currentRole = data
    },
    handleDelete (id) {
      delRole(id).then(res => {
        this.$message.success('删除成功')
        this.getRoleList()
      })
    },
    getRoleList () {
      this.loading = true
      getRoleList().then(res => {
        this.roleList = res.extraInfo
        this.loading = false
      })
    }
  }
}
</script>

<style scoped>

</style>
