<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="OpenUser"
                @create="$refs.form.open()"
                @edit="({row, index})=>$refs.form.open(row)">
                <template slot-scope="{ row }"
                    slot="command">
                    <Button size="small"
                        title="接口权限"
                        type="primary"
                        custom-icon="fa fa-atom"
                        @click="openApiTableOpen(row)"></Button>
                </template>
            </view-table>
        </Card>
        <modal-form ref="form"
            view-code="OpenUserEdit"
            @on-after-save="$refs.table.loadData()" />
        <modal-table ref="openApiTable"
            view-code="OpenApiCheck"
            :select-enable="true"
            :static="true"
            :select-func="(item)=>{ return item.checked; }">
            <template slot-scope="{ table, filter, param }"
                slot="filter">
                <Col v-bind="grid6">
                <FormItem :label-width="0">
                    <Button type="primary"
                        custom-icon="fa fa-save"
                        @click="saveOpenApiPermission()"
                        size="small">保存</Button>
                </FormItem>
                </Col>
            </template>
        </modal-table>
    </div>
</template>
<script>
    import { mixinPage } from '/src/index.js';
    import openApiPermissionApi from '../../api/openApiPermission';

    export default {
        name: 'system-openUser',
        mixins: [mixinPage],
        components: {},
        data() {
            return {
                openUserID: null
            };
        },
        computed: {},
        created() {},
        methods: {
            // 打开接口列表界面
            async openApiTableOpen(row) {
                this.openUserID = row.id;
                let openApis = await openApiPermissionApi.queryForCheck(row.id);
                this.$refs.openApiTable.loadData(openApis);
                this.$refs.openApiTable.open();
            },
            // 保存接口权限
            async saveOpenApiPermission() {
                this.confirm('确定要保存吗？', () => {
                    let openApiIDs = this.$refs.openApiTable.getSelected().map(item => {
                        return item.id;
                    });

                    openApiPermissionApi.batchSave(this.openUserID, openApiIDs).then(() => {
                        this.success('保存成功！', () => {
                            this.$refs.openApiTable.close();
                        });
                    });
                });
            }
        }
    };
</script>
