<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">
        <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'

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

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

    .tabs {
      background: var(--el-bg-color-overlay);
      display: flex;
      flex-direction: column;
      width: 100%;

      ::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;
        width: 100%;

        .chart_wrap {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          width: 100%;
          margin-top: 20px;

          .chart{
            flex: 1;
          }
        }
      }
    }
  }
</style>