<template>
<div>
<v-layout>
    <v-flex xs12 mb-2  style="width:100%">
        <v-card>
            <v-card-text>
                <v-layout row>
                    <v-flex xs6>
                        <h4 class="headline">HAK AKSES HALAMAN</h4>
                        <v-layout>
                            <v-flex mt-2 xs5>
                                <v-select
                                    item-text="name"
                                    return-object
                                    hide-details
                                    outline
                                    :items="xlistregional"
                                    v-model="selected_listregional"
                                    label="Pilih Regional atau Cabang"
                                ></v-select>
                            </v-flex>
                        </v-layout>
                    </v-flex>
                    <v-flex class="text-sm-right" xs6>
                        <v-btn  @click="save()" color="primary">Simpan</v-btn>
                    </v-flex>
                </v-layout>
            </v-card-text>
        </v-card>
    </v-flex>
</v-layout>
<v-layout>
    <v-dialog v-model="dialogsuccess" persistent  max-width="290">
        <v-card>
            <v-card-title color="success"  class="headline">Berhasil !</v-card-title>
            <v-card-text>
                {{msgsuccess}}
            </v-card-text>
            <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn color="green darken-1" flat @click="closeDialogSuccess">OK</v-btn>
            </v-card-actions>
        </v-card>
    </v-dialog>
    <v-flex xs12>
        <v-layout row wrap>
            <v-flex  xs3>
                <v-card class="mb-2 mr-2" v-for="(mp,index) in xpriviledges" v-if="rmod(index) === 0">
                    <v-card-title
                        dark
                        class="headline info pt-2 pb-2"
                        primary-title
                        style="color:white"
                    >
                        <h5 dark>{{mp.name}}</h5>
                    </v-card-title>
                    <v-card-text>
                        <div v-for="(p,idx) in mp.childs" :key="p.S_PrivilegeID">
                            <v-btn v-if="p.status === 'N' && p.S_MenuUrl !== '#'"  small @click="changePriviledge(index,idx,p.status)" color="error"><v-icon left>close</v-icon>{{p.S_MenuName}}</v-btn>
                            <v-btn v-if="p.status === 'Y' && p.S_MenuUrl !== '#'"  small @click="changePriviledge(index,idx,p.status)" color="success"><v-icon left>check</v-icon>{{p.S_MenuName}}</v-btn>
                            <v-btn v-if="p.S_MenuUrl === '#'" small color="info"><v-icon left>home</v-icon>{{p.S_MenuName}}</v-btn>
                            <div v-for="(px,indx) in p.childs" :key="px.S_PrivilegeID">
                                <v-btn class="ml-4" v-if="px.status === 'N'" small @click="changePriviledgeLevel2(index,idx,indx,px.status)" color="error"><v-icon left>close</v-icon>{{px.S_MenuName}}</v-btn>
                                <v-btn class="ml-4" v-if="px.status === 'Y'" small @click="changePriviledgeLevel2(index,idx,indx,px.status)" color="success"><v-icon left>check</v-icon>{{px.S_MenuName}}</v-btn>
                            </div>
                        </div>
                    </v-card-text>
                </v-card>
            </v-flex>
            <v-flex xs3>
                <v-card class="mb-2 mr-2" v-for="(mp,index) in xpriviledges" v-if="rmod(index) === 1">
                    <v-card-title
                        dark
                        class="headline info pt-2 pb-2"
                        primary-title
                        style="color:white"
                    >
                        <h5 dark>{{mp.name}}</h5>
                    </v-card-title>
                   <v-card-text>
                        <div v-for="(p,idx) in mp.childs" :key="p.S_PrivilegeID">
                            <v-btn v-if="p.status === 'N' && p.S_MenuUrl !== '#'"  small @click="changePriviledge(index,idx,p.status)" color="error"><v-icon left>close</v-icon>{{p.S_MenuName}}</v-btn>
                            <v-btn v-if="p.status === 'Y' && p.S_MenuUrl !== '#'"  small @click="changePriviledge(index,idx,p.status)" color="success"><v-icon left>check</v-icon>{{p.S_MenuName}}</v-btn>
                            <v-btn v-if="p.S_MenuUrl === '#'" small color="info"><v-icon left>home</v-icon>{{p.S_MenuName}}</v-btn>
                            <div v-for="(px,indx) in p.childs" :key="px.S_PrivilegeID">
                                <v-btn class="ml-4" v-if="px.status === 'N'" small @click="changePriviledgeLevel2(index,idx,indx,px.status)" color="error"><v-icon left>close</v-icon>{{px.S_MenuName}}</v-btn>
                                <v-btn class="ml-4" v-if="px.status === 'Y'" small @click="changePriviledgeLevel2(index,idx,indx,px.status)" color="success"><v-icon left>check</v-icon>{{px.S_MenuName}}</v-btn>
                            </div>
                        </div>
                    </v-card-text>
                </v-card>
            </v-flex>
            <v-flex xs3>
                <v-card class="mb-2 mr-2" v-for="(mp,index) in xpriviledges" v-if="rmod(index) === 2">
                    <v-card-title
                        dark
                        class="headline info pt-2 pb-2"
                        primary-title
                        style="color:white"
                    >
                        <h5 dark>{{mp.name}}</h5>
                    </v-card-title>
                    <v-card-text>
                        <div v-for="(p,idx) in mp.childs" :key="p.S_PrivilegeID">
                            <v-btn v-if="p.status === 'N' && p.S_MenuUrl !== '#'"  small @click="changePriviledge(index,idx,p.status)" color="error"><v-icon left>close</v-icon>{{p.S_MenuName}}</v-btn>
                            <v-btn v-if="p.status === 'Y' && p.S_MenuUrl !== '#'"  small @click="changePriviledge(index,idx,p.status)" color="success"><v-icon left>check</v-icon>{{p.S_MenuName}}</v-btn>
                            <v-btn v-if="p.S_MenuUrl === '#'" small color="info"><v-icon left>home</v-icon>{{p.S_MenuName}}</v-btn>
                            <div v-for="(px,indx) in p.childs" :key="px.S_PrivilegeID">
                                <v-btn class="ml-4" v-if="px.status === 'N'" small @click="changePriviledgeLevel2(index,idx,indx,px.status)" color="error"><v-icon left>close</v-icon>{{px.S_MenuName}}</v-btn>
                                <v-btn class="ml-4" v-if="px.status === 'Y'" small @click="changePriviledgeLevel2(index,idx,indx,px.status)" color="success"><v-icon left>check</v-icon>{{px.S_MenuName}}</v-btn>
                            </div>
                        </div>
                    </v-card-text>
                </v-card>
            </v-flex>
             <v-flex xs3>
                <v-card class="mb-2" v-for="(mp,index) in xpriviledges" v-if="rmod(index) === 3">
                    <v-card-title
                        dark
                        class="headline info pt-2 pb-2"
                        primary-title
                        style="color:white"
                    >
                        <h5 dark>{{mp.name}}</h5>
                    </v-card-title>
                    <v-card-text>
                        <div v-for="(p,idx) in mp.childs" :key="p.S_PrivilegeID">
                            <v-btn v-if="p.status === 'N' && p.S_MenuUrl !== '#'"  small @click="changePriviledge(index,idx,p.status)" color="error"><v-icon left>close</v-icon>{{p.S_MenuName}}</v-btn>
                            <v-btn v-if="p.status === 'Y' && p.S_MenuUrl !== '#'"  small @click="changePriviledge(index,idx,p.status)" color="success"><v-icon left>check</v-icon>{{p.S_MenuName}}</v-btn>
                            <v-btn v-if="p.S_MenuUrl === '#'" small color="info"><v-icon left>home</v-icon>{{p.S_MenuName}}</v-btn>
                            <div v-for="(px,indx) in p.childs" :key="px.S_PrivilegeID">
                                <v-btn class="ml-4" v-if="px.status === 'N'" small @click="changePriviledgeLevel2(index,idx,indx,px.status)" color="error"><v-icon left>close</v-icon>{{px.S_MenuName}}</v-btn>
                                <v-btn class="ml-4" v-if="px.status === 'Y'" small @click="changePriviledgeLevel2(index,idx,indx,px.status)" color="success"><v-icon left>check</v-icon>{{px.S_MenuName}}</v-btn>
                            </div>
                        </div>
                    </v-card-text>
                </v-card>
            </v-flex>
        </v-layout>
    </v-flex>
</v-layout>
</div>
</template>

<style scoped>
    table, td, th {  
    border: 1px solid #ddd;
    text-align: left;
    }

    table {
    border-collapse: collapse;
    width: 100%;
    }

    th, td {
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 8px;
    padding-right: 5px;
    }

    .mini-input .v-input{
        margin-top: 0px; 
    }

    .mini-input .v-input, .mini-input .v-input--selection-controls,.mini-input .v-input__slot{
        margin-top: 0px; 
        margin-bottom:0px;
        margin-left:3px;
    }
    .mini-input .v-messages{
        min-height:0px;
    }
    input.fhm-input{
        border: 1px solid black; 
        border-radius: 2px;
        -webkit-box-shadow: 
        inset 0 0 2px  rgba(0,0,0,0.1),
                0 0 4px rgba(0,0,0,0.1); 
        -moz-box-shadow: 
        inset 0 0 2px  rgba(0,0,0,0.1),
                0 0 4px rgba(0,0,0,0.1); 
        box-shadow: 
        inset 0 0 2px  rgba(0,0,0,0.1),
                0 0 4px rgba(0,0,0,0.1); 
        padding: 2px 4px;
        background: rgba(255,255,255,0.5);
        margin: 0 0 1px 0;
        width:30px;
        text-align:center;
    }
</style>

<script>
module.exports = {
    data: () => ({
    
    }),
    computed: {
        xpriviledges() {
            return this.$store.state.priviledge.priviledges
        },
        dialogsuccess: {
            get() {
                return this.$store.state.priviledge.dialog_success
            },
            set(val) {
                this.$store.commit("priviledge/update_dialog_success",val)
            }
        },
        msgsuccess(){
            return this.$store.state.priviledge.msg_success
        },
        xlistregional() {
            return this.$store.state.priviledge.listregional
        },
        selected_listregional: {
            get() {
                return this.$store.state.priviledge.selected_listregional
            },
            set(val) {
                this.$store.commit("priviledge/update_selected_listregional",val)
                this.$store.dispatch("priviledge/lookup",{
                    id:this.$store.state.usergroup.selected_usergroup.id,
                    code:this.$store.state.priviledge.selected_listregional.code
                })
            }
        }
    },
    methods : {
        rmod(idx){
            return idx % 4
        },
        changePriviledge(idxpar,idxchild,val){
            var arrx = this.$store.state.priviledge.priviledges
            arrx[idxpar]['childs'][idxchild].status = val === 'N'?'Y':'N'
            arrx[idxpar]['childs'][idxchild].active = 'Y'

            this.$store.commit("priviledge/update_priviledges",arrx)
            this.$store.commit("usergroup/update_no_save",true)
        },
        changePriviledgeLevel2(idxpar,idxchild,idxchild2,val){
            var arrx = this.$store.state.priviledge.priviledges
            arrx[idxpar]['childs'][idxchild]['childs'][idxchild2].status = val === 'N'?'Y':'N'
            arrx[idxpar]['childs'][idxchild]['childs'][idxchild2].active = 'Y'

            this.$store.commit("priviledge/update_priviledges",arrx)
            this.$store.commit("usergroup/update_no_save",true)
        },
        closeDialogSuccess(){
            this.$store.commit("priviledge/update_dialog_success",false)
            this.$store.dispatch("priviledge/lookup",{
                id:this.$store.state.usergroup.selected_usergroup.id,
                code:this.$store.state.priviledge.selected_listregional.code
            })
        },
        save(){
            var prm = this.$store.state.priviledge.priviledges
            this.$store.dispatch("priviledge/save",prm)
        }
    }
}
</script>
