<template>
    <div class="info">
      <Menus :pactiveI="3"/>
      <div class="bottom">
        <LeftMenu @showContent="showContent" />
        <div class="search-content" v-if="activeindex === 0">
            044
        </div>
        <div class="search-content" v-if="activeindex === 1">
            1
        </div>
      </div>
    
    </div>
  </template>
  
  <script>
  import { onMounted, reactive, toRefs } from "vue";
  import LeftMenu from "@/components/LeftMenu.vue";
  import Menus from "@/components/Menus.vue";
  export default {
    name: "history",
    components: {
        LeftMenu,
        Menus
    },
    setup() {
      const state = reactive({
        activeindex: 0
      });
      onMounted(() => {
      });
      const showContent = (i) => {
        console.log(i)
        state.activeindex = i;
      }
      return {
        ...toRefs(state),
        showContent
      };
    },
  };
  </script>
  
  <style lang="scss" scoped>
  .info 
  {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .bottom {
    width: 100%;
    display: flex;
    justify-content: space-between;
    height: 92%;
    border: 1px solid red;
  }
    .search-content {
        width: calc(100% - 50px);
        border: 1px solid red;
    }
  </style>
  