<template>
    <PageHeader :title="title">
        <template #action>
            <Button v-if="elements.indexOf('1-1') != -1" name="添加顶级组织" type="primary" @click="modlShow = true">添加顶级组织</Button>
        </template>
    </PageHeader>
    <div style="margin-top: 8px;">
        <Table highlight border row-key="id" :columns="columns" :data="orgData">
            <template #name="{ row }">
                <strong>{{ row.name }}</strong>
            </template>
            <template v-if="elements.indexOf('1-2') != -1" name="编辑列" #action="{ row }">
                <Button v-if="elements.indexOf('1-3') != -1" name="新增子组织" type="primary" size="small" style="margin-right: 5px"
                    @click="addinfo.parent_id = row.id; addinfo.parent_name = row.name; modlShow = true">新增子组织</Button>
                <Button v-if="elements.indexOf('1-4') != -1" name="删除" type="error" size="small" @click="delOrg(row.id)">删除</Button>
            </template>
        </Table>
    </div>
    <Space wrap>
        <Modal title="添加组织" v-model="modlShow" class-name="vertical-center-modal" @on-cancel="closeShow()" >
            <Form ref="addForm" :model="addinfo" :rules="ruleValidate" :label-width="80">
                <FormItem label="父组织" prop="parent_name">
                    <Input v-model="addinfo.parent_name" disabled></Input>
                </FormItem>
                <FormItem label="组织名" prop="name">
                    <Input v-model="addinfo.name" placeholder="请输入组织名"></Input>
                </FormItem>
            </Form>
            <template #footer>
                <Button @click="closeShow()">取消</Button>
                <Button type="primary" @click="addOrg()">确认</Button>
            </template>
        </Modal>
    </Space>
</template>

<script>

export default {
    props: ['isCollapsed',],
    data() {
        return {
            page_id:14,
            title: "组织管理",
            modlShow: false,
            addinfo: {
                parent_id: null,
                parent_name: null,
                name: null
            },
            ruleValidate: {
                name: [
                    { required: true, message: '组织名不能为空', trigger: 'blur' }
                ],
            },
            elements: [],
            columns: [
                {
                    title: '组织名',
                    key: 'name',
                    tree: true
                }
            ],
            orgData: [
            ]
        }
    },
    methods: {
        closeShow() {
            this.modlShow = false;
            this.addinfo = {
                parent_id: 0,
                parent_name: null,
                name: null,
            }
        },
        async addOrg() {
            var next_ = await this.$refs["addForm"].validate((valid) => {
                if (!valid) {
                    this.$Message.error('请完善信息')
                };
            })
            if (!next_) return
            this.$request("post", "/identity/add_organization", this.addinfo, this, () => { this.getOrg(); this.closeShow() })
        },
        getOrg() {
            this.$request("get","/identity/organization",null,this,(data)=>{this.orgData=data.data})
        },
        async delOrg(id_) {
            this.$request("delete","/identity/delete_organization/" + id_,null,this,()=>{this.getOrg();})
        },
    },

    watch: {
        elements(value) {
            console.info(value)
            if (this.elements.indexOf("1-2") != -1) {
                this.columns.push({
                    title: '编辑',
                    slot: 'action',
                    width: 200,
                    align: 'center'
                })
            } else {
                const index = this.columns.findIndex(ele => { return ele.title == 'Action' })
                index != -1 && this.columns.splice(index, 1)
            }
        }
    },
    created() {
        this.$getElements(this.page_id,this,(data)=>this.elements=data.data)
        this.getOrg()
    }
};
</script>

<style>
.vertical-center-modal {
    display: flex;
    align-items: center;
    justify-content: center;
}

.vertical-center-modal .ivu-modal {
    top: 0;
}
</style>