<template>
    <div class="active-directory">
        <div class="configuration-title">Active Directory Settings</div>
        <div  class="configuration-btn-right">
            <Button type="primary" @click="modalSettings = true">Advanced Settings</Button>
        </div>
        <div class="configuration-text">The list below shows the current list of configured Role Groups. If you would like to delete or modify a role group, select the name in the list and click Delete Role Group or Modify Role Group. To add a new Role Group, select an unconfigured slot and click Add Role Group.</div>
        <div class="configuration-table">
            <Table :columns="columnsDirectory" :data="dataDirectory" size="small" ref="table"></Table>
        </div>
        <div class="configuration-btn-right">
            <Button type="primary" style="margin-right: 10px;">Add Role Group</Button>
            <Button type="primary" style="margin-right: 10px;">Modify Role Group</Button>
            <Button type="primary">Delete Role Group</Button>
        </div>
        <Modal
                v-model="modalSettings"
                title="Advanced Settings"
                width="660"
                :loading="loading"
                @on-ok="save"
                @on-cancel="cancel">
            <Form :model="formSettings" label-position="left" :label-width="260">
                <FormItem label="Active Directory Authentication">
                    <Checkbox v-model="formSettings.authentication">Enable</Checkbox>
                </FormItem>
                <FormItem label="Secret Username">
                    <Input v-model="formSettings.userName" style="width: 300px;"/>
                </FormItem>
                <FormItem label="Secret Password">
                    <Input v-model="formSettings.password" style="width: 300px;"/>
                </FormItem>
                <FormItem label="User Domain Name">
                    <Input v-model="formSettings.domainName" style="width: 300px;"/>
                </FormItem>
                <FormItem label="Domain Controller Server Address1">
                    <Input v-model="formSettings.address1" style="width: 300px;"/>
                </FormItem>
                <FormItem label="Domain Controller Server Address2">
                    <Input v-model="formSettings.address2" style="width: 300px;"/>
                </FormItem>
                <FormItem label="Domain Controller Server Address3">
                    <Input v-model="formSettings.address3" style="width: 300px;"/>
                </FormItem>
            </Form>
        </Modal>
    </div>
</template>

<script>
    export default {
        name: "ActiveDirectory",
        data () {
            return {
                columnsDirectory: [
                    {
                        "title": "Role Group ID",
                        "key": "ID",
                        "sortable": true
                    },
                    {
                        "title": "Group Name",
                        "key": "Name",
                        "sortable": true
                    },
                    {
                        "title": "Group Domain",
                        "key": "Domain",
                        "sortable": true
                    },
                    {
                        "title": "Group Privilege",
                        "key": "Privilege",
                        "sortable": true
                    }
                ],
                dataDirectory: [
                    {
                        ID: 1,
                        Name: 'Group Name',
                        Domain: 'Group Domain',
                        Privilege: 'Group Privilege'
                    },
                    {
                        ID: 2,
                        Name: 'Group Name',
                        Domain: 'Group Domain',
                        Privilege: 'Group Privilege'
                    }
                ],
                modalSettings: false,
                loading: true,
                formSettings: {
                    authentication: true,
                    userName: '',
                    password:  '',
                    domainName: '',
                    address1: '',
                    address2: '',
                    address3: ''
                }
            }
        },
        methods: {
            save() {
                setTimeout(() => {
                    this.modalSettings = false;
                }, 2000);
            },
            cancel() {

            }
        }
    }
</script>

<style scoped>

</style>
