<template>
  <div class="app-container">
    <div class="container">
      <el-tabs v-model="activeName"
        class="tabs">
        <el-tab-pane v-for="item in list"
          :label="item.name"
          :name="item.name">
          <component :is="item.component"></component>
        </el-tab-pane>
      </el-tabs>
    </div>
  </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 {

    .container {
      display: flex;
      flex-direction: column;
    }

    .tabs {
      display: flex;
      flex-direction: column-reverse;

      ::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;
            display: flex;
            flex-direction: column;
            justify-content: center;
          }
        }
      }
    }
  }
</style>