<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>
        <component :is="item.component"></component>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import cmm from './cmm'
import sycmStore from './sycm_store'
import sycmPrd from './sycm_prd'

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

<style scoped
  lang="scss">
  .app-container {

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

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

        .el-tab-pane {
          flex: 1;
          display: flex;
          flex-direction: column;
        }
      }

      ::v-deep(.tabs-container) {
        flex: 1;
        display: flex;
        flex-direction: column;

        .chart_wrap {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
        }
      }
    }
  }
</style>