<template>
    <div>
        <navbar title="权限管理" />
        <a-card>
            <div class="flex flex-center flex-justify-between mb-15">
                <edit @ok="fetchList" />
            </div>
            <a-table :data="list" :columns="columns">
                <template #menu="{ record }">
                    <div class="flex flex-center flex-justify-between">
                        <div class="flex flex-center flex-justify-start">
                            <permission :id="record.id"/>
                            <edit type="edit" :info="record"></edit>
                            <div>
                                <a-popconfirm
                                    content="确认删除？"
                                    @ok="remove(record.id)"
                                >
                                    <a-button type="text" size="small">
                                        删除
                                    </a-button>
                                </a-popconfirm>
                            </div>
                        </div>
                    </div>
                </template>
            </a-table>
        </a-card>
    </div>
</template>

<script>
import navbar from '@/components/navbar/index.vue'
import edit from './components/edit.vue'
import permission from './components/permission.vue'
export default {
    components: {
        navbar,
        edit,
      permission
    },
    data() {
        return {
            page: {
                current: 1,
                pageSize: 10
            },
            list: [],
            columns: [
                { title: '名称', dataIndex: 'name' },
                { title: 'code', dataIndex: 'code' },
                { title: '排序', dataIndex: 'sort' },
                { title: '操作', slotName: 'menu', width: 260 }
            ]
        }
    },
    mounted() {
        this.fetchList()
    },
    methods: {
        fetchList() {
            const data = { ...this.page }
            this.$api.sys.roleList(data).then(res => {
                if (res.code === 200) {
                    this.list = res.data.list
                } else {
                    this.$message.error(res.msg)
                }
            })
        },
        remove(id) {
            this.$api.sys.roleRemove({ ids: [id] }).then(res => {
                if (res.code === 200) {
                    this.$message.success(res.msg)
                    this.fetchList()
                } else {
                    this.$message.error(res.msg)
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped></style>
