<template>
    <div class="main-layout-warp">
        <div class="layout-header-tank" @mouseenter="onMouseOver" @mouseleave="onMouseOut">
            <SHeader :class="['layout-header',headShow?'layout-header-fold':'layout-header-unfold']"></SHeader>
            <!--<div :class="['header-btn',headShow?'header-btn-fold':'header-btn-unfold']">
                <div class="white"></div>
                <i class="indicator" @click="headShowChange">
                    <i :class="['icon',headShow?'iconLeft':'iconRight']"></i>
                </i>
                <i :class="['indicator-gray',iconShow === true || headShow=== false?'grayShow':'']">
                    <i></i>
                </i>
            </div>-->
        </div>
        <div class="layout-main-warp">
            <div :class="['layout-aside',menuShow?'layout-aside-fold':'layout-aside-unfold']"
                 @mouseenter="onMouseOver(1)" @mouseleave="onMouseOut(1)">
                <SAside></SAside>
            </div>
            <div :class="['btn',menuShow?'btn-fold':'btn-unfold']">
                <div class="white"></div>
                <i class="indicator" @click="menuShowChange">
                    <i :class="['icon',menuShow?'iconLeft':'iconRight']"></i>
                </i>
                <i :class="['indicator-gray',iconShow === true || menuShow=== false?'grayShow':'']">
                    <i></i>
                </i>
            </div>
            <div class="layout-main-i-warp">
                <div class="layout-main-i-warp-item">
                    <tags-view/>
                    <SMain class="layout-main"></SMain>
                </div>

            </div>
        </div>
    </div>
</template>

<script>
    import SHeader from './header';
    import SAside from './aside';
    import SMain from './main';
    import SFooter from './footer'
    import {setStorage} from '@/utils/storageUtil';
    import TagsView from '@/components/TagsView';

    export default {
        data() {
            return {
                menuShow: true,
                headShow: true,
                iconShow: false,
                headIconShow: false
            }
        },
        props: {},
        components: {
            SHeader,
            SAside,
            SMain,
            SFooter,
            TagsView
        },
        mounted() {

        },
        methods: {
            menuShowChange: function () {
                this.menuShow = !this.menuShow;
                setStorage("menuShow", this.menuShow ? "1" : "0");

            },
            headShowChange: function () {
                this.headShow = !this.headShow;
                setStorage("headShow", this.headShow ? "1" : "0");

            },
            onMouseOver(type) {
                type?this.iconShow = true: this.headIconShow = true
            },
            onMouseOut(type) {
                type?this.iconShow = false: this.headIconShow = false
            },
        }
    }
</script>

<style lang="scss" scoped>
    .main-layout-warp {
        width: 100%;
        height: 100%;

        // min-width: 1168px;
        overflow: hidden;

        display: flex;
        flex-direction: column;

        .layout-header-tank{
            position: relative;
            .layout-header {
                width: 100%;
                height: 50px;
                transition: all 400ms ease-in-out;
                /*background-color: red;*/
            }
            .header-btn{
                display: flex;
                justify-content: center;
                position: absolute;
                bottom: -18px;
                width: 100%;
                height: 18px;
                transition: all 0.3s;
                cursor: pointer;
                z-index: 22;

                .white {
                    transition: all 400ms ease-in-out;
                    height: 2px;
                    width: 100%;
                    opacity: 0;
                }

                .indicator {
                    position: absolute;
                    transition: all 400ms ease-in-out;
                    border-radius: 0 0 5px 5px;
                    height: 100%;
                    width: 38px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    opacity: 0;
                    z-index: 8;

                    .icon {
                        position: relative;
                        width: 6px;
                        height: 6px;
                        border-left: 1px solid;
                        border-bottom: 1px solid;
                        border-color: #fff;
                    }

                    .iconLeft {
                        top: 2px;
                        transform: rotate(135deg);
                    }

                    .iconRight {
                        top: -2px;
                        transform: rotate(315deg);
                    }
                }

                .indicator-gray {
                    position: absolute;
                    transition: all 800ms ease-in-out;
                    height: 100%;
                    width: 28px;
                    display: flex;
                    opacity: 0;
                    border-radius: 0 0 5px 5px;
                    justify-content: center;
                    align-items: center;
                    background-color: #e6e8e7;
                    z-index: 1;

                    i {
                        position: relative;
                        width: 14px;
                        height: 2px;
                        background-color: #fff;
                    }
                }

                .grayShow {
                    transition: all 800ms ease-in-out;
                    opacity: 1;
                }
            }
            .header-btn-fold{
                /*top: 50px;*/
                /*overflow: hidden;*/

                .white {
                    height: 2px;
                    width: 100%;

                    box-shadow: 3px -3px 5px -1px rgba(0, 0, 0, .1);
                }
            }
            .header-btn-unfold{
                /*top: 0;*/
            }

            .header-btn:hover {
                .white {
                    background-color: #589ef8;
                    opacity: 1;
                }

                .indicator {
                    background-color: #589ef8;
                    opacity: 1;
                }
            }

            .layout-header-fold {
                height: 50px;
            }

            .layout-header-unfold {
                height: 0;
            }
        }


        .layout-main-warp {
            position: relative;
            width: 100%;
            height: calc(100% - 50px);
            flex: 1;
            display: flex;
            flex-direction: row;


            .btn {
                width: 18px;
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                transition: all 0.3s;
                cursor: pointer;
                z-index: 1;
                height: 100%;
                display: flex;
                align-items: center;

                .white {
                    transition: all 400ms ease-in-out;
                    /*position: absolute;*/
                    width: 2px;
                    height: 100%;
                    opacity: 0;
                }

                .indicator {
                    position: absolute;
                    transition: all 400ms ease-in-out;
                    width: 100%;
                    height: 38px;
                    display: flex;
                    opacity: 0;
                    border-radius: 0 5px 5px 0;
                    justify-content: center;
                    align-items: center;
                    z-index: 8;

                    .icon {
                        position: relative;
                        width: 6px;
                        height: 6px;
                        border-left: 1px solid;
                        border-bottom: 1px solid;
                        border-color: #fff;
                    }

                    .iconLeft {
                        left: 2px;
                        transform: rotate(45deg);
                    }

                    .iconRight {
                        left: -2px;
                        transform: rotate(225deg);
                    }
                }

                .indicator-gray {
                    position: absolute;
                    transition: all 800ms ease-in-out;
                    width: 100%;
                    height: 38px;
                    display: flex;
                    opacity: 0;
                    border-radius: 0 5px 5px 0;
                    justify-content: center;
                    align-items: center;
                    background-color: #e6e8e7;
                    z-index: 1;

                    i {
                        position: relative;
                        width: 2px;
                        height: 14px;
                        background-color: #fff;
                    }
                }

                .grayShow {
                    transition: all 800ms ease-in-out;
                    opacity: 1;
                }
            }

            .btn:hover {
                .white {
                    background-color: #589ef8;
                    opacity: 1;
                }

                .indicator {
                    background-color: #589ef8;
                    opacity: 1;
                }
            }

            .btn-fold {
                left: 195px;
                overflow: hidden;

                .white {
                    /*position: absolute;*/
                    width: 2px;
                    height: 100%;

                    box-shadow: 3px -3px 5px -1px rgba(0, 0, 0, .1);
                }
            }

            .btn-unfold {
                left: -1px;
            }

            .layout-aside {
                flex: none;
                width: 212px;
                height: 100%;
                overflow: hidden;
                transition: all 0.3s;
                z-index: 9;
                /*background-color: blue;*/
            }

            .layout-aside-fold {
                width: 195px;
            }

            .layout-aside-unfold {
                width: 0;
            }

            .layout-main-i-warp {
                flex: 1;
                height: 100%;
                width: calc(100% - 195px);
                background-color: #e6e8e7;

                .layout-main-i-warp-item {
                    width: calc(100% - 10px);
                    height: calc(100% - 10px);
                    margin: 5px;
                    background-color: #fff;
                }

                .layout-main {
                    width: 100%;
                    height: calc(100% - 33px);
                    /*margin: 5px;*/

                    /*min-height: 565px;*/
                    overflow-y: auto;

                    background-color: #fff;

                }

                .layout-footer {
                    width: 100%;
                    height: 20px;

                    background-color: #666666;
                }
            }

            .indicator-gray {
                position: absolute;
                transition-duration: 300ms;
                transition-property: background-color, width;
                transition-timing-function: ease-in-out;
                width: 100%;
                height: 38px;
                display: flex;
                opacity: 0;
                border-radius: 0 5px 5px 0;
                justify-content: center;
                align-items: center;
            }
        }
    }
    ::v-deep .el-notification:hover {
        cursor: pointer;
    }
</style>
