<template>
  <div :class="isOpen ? 'expend-open' : 'expend-close'">
    <div class="switch-button-open" @click="handlerOpen" v-if="!isOpen">
      <img src="/statistical/switch-button.png" alt="" />
    </div>
    <div class="switch-button-close" @click="handlerOpen" v-if="isOpen">
      <img src="/statistical/switch-button-active.png" alt="" />
    </div>

    <div :style="isOpen ? 'display: flex;width:100vw;' : ''">
      <LeftChartsContainer class="expend"></LeftChartsContainer>
      <RightDataScreen v-if="isOpen" />
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import LeftChartsContainer from './left_charts_container.vue';
  import { RightDataScreen } from '../rightDataScreen/page';

  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.8);
    position: absolute;
    top: 0px;
    z-index: 2;
    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: 2;
    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>
