<template>
    <div
        style="height:100%; width:100%;"
        v-domresize
        @domresize="resize"
    >

        <template v-if="syncState">

            <WDrawer
                :style="`height:${panelHeight}px; width:100%;`"
                v-model="drawer"
                :drawerWidth.sync="drawerWidth"
                :drawerWidthMin="drawerWidthMin"
                :drawerWidthMax="drawerWidthMax"
                :mode="'from-left'"
                :dragDrawerWidth="true"
                :autoSwitchToHide="true"
                :autoSwitchToShow="true"
                :autoSwitchToFloat="true"
                :switchWidth="drawerWidth*2.3"
            >

                <template v-slot:drawer="props">
                    <div :style="`height:${props.height}px; background:#fff; position:relative;`">

                        <WListVertical
                            style="height:100%;"
                            :items="menus"
                            :itemActive="menuActive"
                            :item-text-color="'#222'"
                            :item-text-color-hover="'#444'"
                            :item-text-color-active="'#E65100'"
                            :item-icon-color="'#222'"
                            :item-icon-color-hover="'#444'"
                            :item-icon-color-active="'#F57C00'"
                            :item-background-color="'#fff'"
                            :item-background-color-hover="'#f6f6f6'"
                            :item-background-color-active="'#fff3e0'"
                            :paddingStyle="{v:15,h:15}"
                            @click="(menu)=>{menuKey=menu.key}"
                        ></WListVertical>

                        <div
                            :style="`position:absolute; top:2px; right:4px;`"
                            v-if="drawer"
                        >
                            <WButtonCircle
                                :paddingStyle="{h:2,v:2}"
                                :icon="mdiArrowLeftBoldHexagonOutline"
                                :iconSize="20"
                                :backgroundColor="'rgba(255,255,255,0.1)'"
                                :backgroundColorHover="'rgba(255,255,255,0.4)'"
                                :backgroundColorFocus="'rgba(255,255,255,0.7)'"
                                :borderColor="'transparent'"
                                :borderColorHover="'transparent'"
                                :borderColorFocus="'transparent'"
                                _tooltip="$t('menuTreeHide')"
                                :shadow="false"
                                @click="drawer=false"
                            ></WButtonCircle>
                        </div>

                    </div>
                </template>

                <template v-slot:content="props">
                    <div :style="`height:${props.height}px; width:${props.width}px; position:relative;`">

                        <template>

                            <LayoutContentTargets
                                :drawer="drawer"
                                v-if="menuKey==='mmTargets'"
                            ></LayoutContentTargets>

                            <LayoutContentPemis
                                :drawer="drawer"
                                v-if="menuKey==='mmPemis'"
                            ></LayoutContentPemis>

                            <LayoutContentGrups
                                :drawer="drawer"
                                v-if="menuKey==='mmGrups'"
                            ></LayoutContentGrups>

                            <LayoutContentUsers
                                :drawer="drawer"
                                v-if="menuKey==='mmUsers'"
                            ></LayoutContentUsers>

                            <LayoutContentStaInfor
                                :drawer="drawer"
                                v-if="menuKey==='mmStaInfor'"
                            ></LayoutContentStaInfor>

                        </template>

                        <div
                            :style="`position:absolute; top:3px; left:5px;`"
                            v-if="!drawer"
                        >
                            <WButtonCircle
                                :paddingStyle="{h:2,v:2}"
                                :icon="mdiArrowRightBoldHexagonOutline"
                                :iconSize="20"
                                :backgroundColor="'rgba(255,255,255,0.1)'"
                                :backgroundColorHover="'rgba(255,255,255,0.4)'"
                                :backgroundColorFocus="'rgba(255,255,255,0.7)'"
                                :borderColor="'transparent'"
                                :borderColorHover="'transparent'"
                                :borderColorFocus="'transparent'"
                                _tooltip="$t('menuTreeShow')"
                                :shadow="false"
                                @click="drawer=true"
                            ></WButtonCircle>
                        </div>

                    </div>
                </template>

            </WDrawer>

        </template>

        <div
            style="padding:20px; font-size:0.9rem;"
            v-else
        >
            {{$t('waitingData')}}
        </div>

    </div>
</template>

<script>
import { mdiArrowLeftBoldHexagonOutline, mdiArrowRightBoldHexagonOutline, mdiGamepadCircle, mdiStackOverflow, mdiSelectGroup, mdiAccountGroupOutline, mdiChartBoxOutline } from '@mdi/js/mdi.js'
import get from 'lodash-es/get.js'
import find from 'lodash-es/find.js'
import WDrawer from 'w-component-vue/src/components/WDrawer.vue'
import WListVertical from 'w-component-vue/src/components/WListVertical.vue'
import WButtonCircle from 'w-component-vue/src/components/WButtonCircle.vue'
import LayoutContentTargets from './LayoutContentTargets.vue'
import LayoutContentPemis from './LayoutContentPemis.vue'
import LayoutContentGrups from './LayoutContentGrups.vue'
import LayoutContentUsers from './LayoutContentUsers.vue'
import LayoutContentStaInfor from './LayoutContentStaInfor.vue'


export default {
    components: {
        WDrawer,
        WListVertical,
        WButtonCircle,
        LayoutContentTargets,
        LayoutContentPemis,
        LayoutContentGrups,
        LayoutContentUsers,
        LayoutContentStaInfor,
    },
    props: {
    },
    data: function() {
        return {
            mdiArrowLeftBoldHexagonOutline,
            mdiArrowRightBoldHexagonOutline,

            menuKey: 'mmTargets',

            panelHeight: 0,

            drawer: true,
            drawerWidth: 200,
            drawerWidthMin: 150,
            drawerWidthMax: 300,

        }
    },
    computed: {

        syncState: function() {
            let vo = this
            return get(vo, '$store.state.syncState')
        },

        menus: function() {
            let vo = this
            let ms = [
                {
                    key: 'mmTargets',
                    text: vo.$t('mmTargets'),
                    icon: mdiGamepadCircle,
                },
                {
                    key: 'mmPemis',
                    text: vo.$t('mmPemis'),
                    icon: mdiStackOverflow,
                },
                {
                    key: 'mmGrups',
                    text: vo.$t('mmGrups'),
                    icon: mdiSelectGroup,
                },
                {
                    key: 'mmUsers',
                    text: vo.$t('mmUsers'),
                    icon: mdiAccountGroupOutline,
                },
                {
                    key: 'mmStaInfor',
                    text: vo.$t('mmStaInfor'),
                    icon: mdiChartBoxOutline,
                },
            ]
            return ms
        },

        menuActive: function() {
            let vo = this
            let r = find(vo.menus, { key: vo.menuKey })
            // console.log(r)
            return r
        },

    },
    methods: {

        resize: function(msg) {
            // console.log('methods resize', msg)

            let vo = this

            //save
            vo.panelHeight = msg.snew.clientHeight
            // console.log('vo.panelHeight', vo.panelHeight)

        },

    }
}
</script>

<style scoped>
</style>
