<template>
    <div class="active-directory">
        <div class="configuration-title">License</div>
        <div class="configuration-text">
            Below is a list of available Features and it's License validity. Click the "Upload License Key" button to upload a new Key to activate the particular feature.</div>
        <div class="configuration-table">
            <Table :columns="columnsDirectory" :data="dataDirectory" size="small" ref="table"></Table>
        </div>
        <div class="configuration-btn-right">
            <Button type="primary" @click="modalSettings = true">Upload License Key</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="License Key">
                    <Input v-model="formSettings.key" style="width: 300px;"/>
                </FormItem>
            </Form>
        </Modal>
    </div>
</template>

<script>
    export default {
        name: "License",
        data () {
            return {
                columnsDirectory: [
                    {
                        "title": "#",
                        "key": "ID",
                        "sortable": true
                    },
                    {
                        "title": "Feature Name",
                        "key": "Name",
                        "sortable": true
                    },
                    {
                        "title": "Validity",
                        "key": "Validity",
                        "sortable": true
                    }
                ],
                dataDirectory: [
                    {
                        ID: 1,
                        Name: 'Group Name',
                        Validity: 'Validity',
                    },
                    {
                        ID: 2,
                        Name: 'Group Name',
                        Validity: 'Validity',
                    }
                ],
                modalSettings: false,
                loading: true,
                formSettings: {
                    key: '',
                }
            }
        },
        methods: {
            save() {
                setTimeout(() => {
                    this.modalSettings = false;
                }, 2000);
            },
            cancel() {

            }
        }
    }
</script>

<style scoped>

</style>


