<template>
    <div>
        <div class="i-layout-page-header">
            <PageHeader :title="$route.meta.title"
                :content="$route.meta.description"
                hidden-breadcrumb />
        </div>
        <Card :bordered="false"
            dis-hover
            class="ivu-mt">
            <view-table ref="table"
                view-code="Role"
                @create="$refs.form.open()">
                <template slot-scope="{ row }"
                    slot="command">
                    <Button size="small"
                        title="用户"
                        type="info"
                        custom-icon="fa fa-user"
                        @click="$refs.userTable.open({roleID: row.id})"></Button>
                    <Button size="small"
                        title="编辑"
                        type="primary"
                        custom-icon="fa fa-edit"
                        @click="$refs.form.open(row)"></Button>
                    <Button size="small"
                        title="PC端权限"
                        type="primary"
                        custom-icon="fa fa-desktop"
                        @click="webPermission(row)"></Button>
                    <Button size="small"
                        title="APP权限"
                        type="primary"
                        custom-icon="fa fa-mobile"
                        @click="appPermission(row)"></Button>
                    <Button size="small"
                        title="删除"
                        type="warning"
                        custom-icon="fa fa-trash-alt"
                        @click="$refs.table.remove(row)"></Button>
                </template>
            </view-table>
        </Card>
        <modal-form ref="form"
            view-code="RoleEdit"
            @on-after-save="$refs.table.loadData()" />
        <modal-table ref="userTable"
            view-code="RoleUser"
            @create="(param)=>$refs.roleForm.openDefault(param)" />
        <modal-form ref="roleForm"
            view-code="RoleUserEdit"
            @on-after-save="$refs.userTable.loadData()" />
        <Modal v-model="permissionOpened"
            scrollable
            :width="800">
            <div slot="header">
                <span class="title">权限</span>
                <span class="description">Permission</span>
            </div>
            <div class="ivu-ml-8 ivu-mr-8">
                <Tree :data="permissions"
                    show-checkbox></Tree>
            </div>
            <div slot="footer">
                <Button type="primary"
                    custom-icon="fa fa-save"
                    @click="permissionSave()">
                    确定
                </Button>
                <Button type="default"
                    custom-icon="fa fa-times"
                    @click="permissionOpened=false">
                    关闭
                </Button>
            </div>
        </Modal>
    </div>
</template>
<script>
    import { mixinPage } from '/src/index.js';
    import permissionApi from '../../api/permission';
    import rolePermissionApi from '../../api/rolePermission';

    // 转换为tree列表对象
    var convertList = nodes => {
        if (!nodes) {
            return null;
        }

        return nodes.map(item => {
            let children = convertList(item.subPermissions);

            return {
                id: item.id,
                title: item.name + ' (' + item.subName + ')',
                checked: item.checked && (children == null || children.length === 0),
                expand: children != null,
                children: children
            };
        });
    };

    // 获取选中项目
    var getChecked = data => {
        let checked = [];

        data.forEach(item => {
            if (item.checked) {
                checked.push(item.id);
            }

            if (item.children) {
                let children = getChecked(item.children);
                if (children.length > 0 && !item.checked) {
                    checked.push(item.id);
                }
                checked = checked.concat(children);
            }
        });

        return checked;
    };

    export default {
        name: 'system-role',
        mixins: [mixinPage],
        components: {},
        data() {
            return {
                roleID: null,
                clientType: null,
                permissions: [],
                permissionOpened: false
            };
        },
        computed: {},
        created() {},
        methods: {
            // PC端权限
            async webPermission(row) {
                this.roleID = row.id;
                this.clientType = 'Admin';
                let res = await permissionApi.queryByRoleID(this.roleID, this.clientType);
                this.permissions = convertList(res);

                setTimeout(() => {
                    this.permissionOpened = true;
                });
            },
            // APP权限
            async appPermission(row) {
                this.roleID = row.id;
                this.clientType = 'PDA';
                let res = await permissionApi.queryByRoleID(this.roleID, this.clientType);
                this.permissions = convertList(res);

                setTimeout(() => {
                    this.permissionOpened = true;
                });
            },
            permissionSave() {
                let permissionIDs = getChecked(this.permissions);

                this.confirm('确定要保存权限设置吗？', async () => {
                    await rolePermissionApi.update(this.roleID, this.clientType, permissionIDs);
                    this.success('操作成功！', () => {
                        this.permissionOpened = false;
                    });
                });
            }
        }
    };
</script>
