<template>
<div>

<v-layout>
    <v-flex xs12>
        <v-layout row wrap>
            <v-flex  class="text-xs-center" xs3>
                <v-card color="#5d7aaa" class="mb-2 mr-2" v-for="(mp,index) in xpriviledges" v-if="rmod(index) === 0">
                    <v-card-title
                        dark
                        class="headline text-xs-center pa-0 pb-1"
                        primary-title
                        style="color:white;background:#00000042"
                    >
                        <v-toolbar  class="text-xs-center" color="cyan" dark>
                            

                            <v-toolbar-title class="text-xs-center">{{mp.name}}</v-toolbar-title>
                        </v-toolbar>
                    </v-card-title>
                    <v-card-text>
                        <v-navigation-drawer
                            class="blue lighten-3"
                            dark
                            permanent
                            style="width:100%"
                        >
                            <v-list>
                            <v-list-tile
                                v-for="(p,idx) in mp.childs" :key="p.S_PrivilegeID"
                                @click="changePriviledge(index,idx,p.status)"
                            >
                                <v-list-tile-content>
                                <v-list-tile-title>{{ p.S_MenuName }}</v-list-tile-title>
                                </v-list-tile-content>
                            </v-list-tile>
                            </v-list>
                        </v-navigation-drawer>
                    </v-card-text>
                </v-card>
            </v-flex>
            <v-flex xs3>
                <v-card color="#5d7aaa"  class="mb-2 mr-2" v-for="(mp,index) in xpriviledges" v-if="rmod(index) === 1">
                    <v-card-title
                        dark
                        class="headline font-weight-black mono  pa-0 pb-1"
                        primary-title
                        style="color:white;background:#00000042"
                    >
                        <v-toolbar   class="text-xs-center" color="cyan" dark>
                            

                            <v-toolbar-title class="text-xs-center">{{mp.name}}</v-toolbar-title>
                        </v-toolbar>
                    </v-card-title>
                   <v-card-text>
                        <v-navigation-drawer
                            class="blue lighten-3"
                            dark
                            permanent
                            style="width:100%"
                        >
                            <v-list>
                            <v-list-tile
                                v-for="(p,idx) in mp.childs" :key="p.S_PrivilegeID"
                                @click="changePriviledge(index,idx,p.status)"
                            >
                                <v-list-tile-content>
                                <v-list-tile-title>{{ p.S_MenuName }}</v-list-tile-title>
                                </v-list-tile-content>
                            </v-list-tile>
                            </v-list>
                        </v-navigation-drawer>
                    </v-card-text>
                </v-card>
            </v-flex>
            <v-flex xs3>
                <v-card color="#5d7aaa"  class="mb-2 mr-2" v-for="(mp,index) in xpriviledges" v-if="rmod(index) === 2">
                    <v-card-title
                        dark
                        class="headline font-weight-black mono  pa-0 pb-1"
                        primary-title
                        style="color:white;background:#00000042"
                    >
                        <v-toolbar   class="text-xs-center" color="cyan" dark>
                            

                            <v-toolbar-title class="text-xs-center">{{mp.name}}</v-toolbar-title>
                        </v-toolbar>
                    </v-card-title>
                    <v-card-text>
                        <v-navigation-drawer
                            class="blue lighten-3"
                            dark
                            permanent
                            style="width:100%"
                        >
                            <v-list>
                            <v-list-tile
                                v-for="(p,idx) in mp.childs" :key="p.S_PrivilegeID"
                                @click="changePriviledge(index,idx,p.status)"
                            >
                                <v-list-tile-content>
                                <v-list-tile-title>{{ p.S_MenuName }}</v-list-tile-title>
                                </v-list-tile-content>
                            </v-list-tile>
                            </v-list>
                        </v-navigation-drawer>
                    </v-card-text>
                </v-card>
            </v-flex>
             <v-flex xs3>
                <v-card color="#5d7aaa"  class="mb-2" v-for="(mp,index) in xpriviledges" v-if="rmod(index) === 3">
                    <v-card-title
                        dark
                        class="headline font-weight-black mono  pa-0 pb-1"
                        primary-title
                        style="color:white;background:#00000042"
                    >
                        <v-toolbar   class="text-xs-center" color="cyan" dark>
                            

                            <v-toolbar-title class="text-xs-center">{{mp.name}}</v-toolbar-title>
                        </v-toolbar>
                    </v-card-title>
                    <v-card-text>
                        <v-navigation-drawer
                            class="blue lighten-3"
                            dark
                            permanent
                            style="width:100%"
                        >
                            <v-list>
                            <v-list-tile
                                v-for="(p,idx) in mp.childs" :key="p.S_PrivilegeID"
                                @click="changePriviledge(index,idx,p.status)"
                            >
                                <v-list-tile-content>
                                <v-list-tile-title>{{ p.S_MenuName }}</v-list-tile-title>
                                </v-list-tile-content>
                            </v-list-tile>
                            </v-list>
                        </v-navigation-drawer>
                    </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: () => ({
    
    }),
    mounted() {
        var items = JSON.parse(localStorage.getItem('user'))
        items.id = items.M_UserGroupID
        console.log(items)
        this.$store.dispatch("priviledge/lookup", items)
    },
    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
        }
    },
    methods : {
        rmod(idx){
            return idx % 4
        },
        changePriviledge(idxpar,idxchild,val){
            var arrx = this.$store.state.priviledge.priviledges
            console.log(arrx[idxpar])
            window.location.href = '/one-ui/'+arrx[idxpar]['childs'][idxchild].S_MenuUrl
            /*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
            })
        },
        save(){
            var prm = this.$store.state.priviledge.priviledges
            this.$store.dispatch("priviledge/save",prm)
        }
    }
}
</script>
