<template>
    <div>
        <a-modal title="编辑角色" centered :visible="visible" @ok="handOK" :confirmLoading="confirmLoading"
            @cancel="closeBtn" width="700px" okText="确认" cancelText="取消" :maskClosable="false" :destroyOnClose="true">

            <a-tabs default-active-key="1" style="height:500px;overflow-y: auto;overflow-x: hidden;">
                <a-tab-pane key="1" tab="角色详情">
                    <a-form :form="form" layout="horizontal" :label-col="{ span: 5 }" :wrapper-col="{ span: 18 }">
                        <a-form-item label="名称：" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
                            <a-input placeholder="请输入" v-decorator="[
                      'name',
                      {
                        initialValue:editData.name,
                        rules: [{ required: true, message: '此项为必填!' },{max:32,message: '最大长度不能超过32个字符'}],
                      },
                    ]" />
                        </a-form-item>
                        <a-form-item label="显示名称：" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
                            <a-input placeholder="请输入" v-decorator="[
                      'displayName',
                      {
                        initialValue:editData.displayName,
                        rules: [{ required: true, message: '此项为必填!' },{max:64,message: '最大长度不能超过64个字符'}],
                      },
                    ]" />
                        </a-form-item>
                        <!-- <a-form-item label="标准名称：" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
                            <a-input placeholder="请输入" v-decorator="[
                      'normalizedName',
                      {
                        initialValue:editData.normalizedName,
                      },
                    ]" />
                        </a-form-item> -->
                        <a-form-item label="描述：" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
                            <a-textarea placeholder="请输入" :autoSize="{ minRows: 5 }" v-decorator="[
                            'description',
                            {
                                initialValue:editData.description
                            }
                            ]" />
                        </a-form-item>
                    </a-form>
                </a-tab-pane>
                <a-tab-pane key="2" tab="角色权限">
                    <a-tree @check="onCheck" checkable :tree-data="$parent.permissions"
                        :default-checked-keys="defaultArr" :replace-fields="replaceFields" />
                </a-tab-pane>
            </a-tabs>
        </a-modal>
    </div>
</template>
<script>
    import { trimStr } from '@/utils/tools'
    import { RoleCreate, RoleUpdate } from "@/api/api";
    export default {
        data() {
            return {
                defaultArr: [],
                type: '',
                editData: {},
                loading: false,
                visible: false,
                form: this.$form.createForm(this),
                confirmLoading: false,
                checkedKeys: [],
                replaceFields: {
                    name: "displayName",
                    title: 'displayName',
                    key: "name"
                },
            };
        },
        mounted() {

        },
        methods: {
            showModal(type, data) {
                console.log(type, 'type')
                this.type = type;
                this.editData = data;
                this.defaultArr = data.grantedPermissions ? data.grantedPermissions : [];
                this.checkedKeys = data.grantedPermissions ? data.grantedPermissions : [];
                this.visible = true;
            },
            closeBtn() {
                this.confirmLoading = false;
                this.checkedKeys = [];
                this.visible = false;
            },
            //表单确认
            handOK(e) {
                e.preventDefault();
                this.form.validateFields((err, values) => {
                    if (err) {
                        this.$message.error('请完善相关信息！')
                    }
                    if (!err) {
                        if (this.checkedKeys.length == 0) {
                            this.$message.error('请配置角色权限！');
                            return;
                        }
                        this.confirmLoading = true;
                        let params = {
                            name: trimStr(values.name),
                            displayName: trimStr(values.displayName),
                            normalizedName: trimStr(values.normalizedName),
                            grantedPermissions: this.checkedKeys || []
                        }
                        console.log(params, 'params')
                        if (this.type === 'add') {
                            RoleCreate(params).then(res => {
                                this.$parent._RoleGetAll();
                                this.$message.success('添加成功');
                                this.closeBtn();
                            }).catch(err => {
                                this.confirmLoading = false;
                            })
                        }
                        if (this.type === 'edit') {
                            params.id = this.editData.id;
                            RoleUpdate(params).then(res => {
                                this.$parent._RoleGetAll();
                                this.$message.success('修改成功');
                                this.closeBtn();
                            }).catch(err => {
                                this.confirmLoading = false;
                            })
                        }
                    }
                });
            },
            onCheck(checkedKeys, info) {
                this.checkedKeys = checkedKeys;
            },
        },
        beforeDestroy() { },
    };
</script>
<style scoped>
</style>