<template>
    <div :class="isOpen?'expend-open':'expend-close'">
        <div class="switch-button-open" @click="handlerOpen" v-if="!isOpen">
            <img src="/public/statistical/switch-button.png" alt="">
        </div>
        <div class="switch-button-close" @click="handlerOpen" v-if="isOpen">
            <img src="/public/statistical/switch-button-active.png" alt="">
        </div>
        <LeftChartsContainer class="expend"></LeftChartsContainer>
    </div>
</template>
<script lang="ts" setup>
import {ref} from 'vue'
import LeftChartsContainer from './left_charts_container.vue'

const isOpen = ref(false);

function handlerOpen(){
    isOpen.value = !isOpen.value;
}
</script>
<style type="less" scoped>



    .charts-main-container{
        width:100vw;
        height:100vh;
        background:rgba(0,0,0,0.6);
        position:absolute;
        top:0px;
        left: calc( 100vw - 580px);
        z-index:1;
        
    }

    .switch-button-open{
        width:50px;
        height:100px;
        position:absolute;
        left:-36px;
        top:50%;
        transform:translate(0,-50%);
        cursor:pointer;
        z-index:999;
        img{
            width:100%;
            height:100%;
        }
    }

    .switch-button-close{
        width:50px;
        height:100px;
        position:absolute;
        left:0px;
        top:50%;
        z-index:999;
        transform:translate(0,-50%);
        cursor:pointer;
        img{
            width:100%;
            height:100%;
        }
    }

    .expend-open {
        width:100vw;
        height:100vh;
        background:rgba(0,0,0,0.6);
        position:absolute;
        top:0px;
        z-index:1;
        animation: expend-open 1s;
    }

    .expend-close {
        width:100vw;
        height:100vh;
        background:rgba(0,0,0,0.6);
        position:absolute;
        top:0px;
        left:calc( 100vw - 580px);
        z-index:1;
        animation: expend-close 1s;
    }

    @keyframes expend-open {
        from {
            top: 0px;
            left:calc( 100vw - 580px);
        }

        to {
            top: 0px;
            left:0;
        }
    }

    @keyframes expend-close {
        from {
            top: 0px;
            left:0;
        }

        to {
            top: 0px;
            left:calc( 100vw - 580px);
        }
    }

</style>