<template>
  <div class="app-container">
    <el-tabs v-model="activeName"
      class="tabs">
      <el-tab-pane v-for="item in list"
        :label="item.name"
        :name="item.name"
        lazy>
        <keep-alive>
          <component :is="item.component"></component>
        </keep-alive>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import cmm from './cmm'
import sycmStore from './sycm_store'
import sycmPrd from './sycm_prd'
import { ref } from 'vue'
const list = ref([
  { name: '蝉妈妈', component: shallowRef(cmm) },
  { name: '生意参谋-竞店', component: shallowRef(sycmStore) },
  { name: '生意参谋-竞品', component: shallowRef(sycmPrd) }
])
const activeName = ref(list.value[1].name)
</script>

<style scoped
  lang="scss">
  .app-container {
    min-height: calc(100vh - 84px);

    .tabs {
      background: var(--el-bg-color-overlay);
      padding: 20px;
      display: flex;
      flex-direction: column;
      min-height: 100%;

      ::v-deep(.el-tabs__content) {
        flex: 1;

        .el-tab-pane {
          min-height: 100%;
        }

      }
    }
  }
</style>