<template>
  <div class="app-container">
    <div class="container">
      <el-tabs v-model="activeName"
        class="demo-tabs"
        @tab-click="handleClickTabs">
        <el-tab-pane label="常规陈列"
          name="常规陈列">
          <Display />
        </el-tab-pane>
        <el-tab-pane label="档期计划"
          name="档期计划">
          <Schedule />
        </el-tab-pane>
        <el-tab-pane label="档期陈列"
          name="档期陈列">
          <ScheduleDis />
        </el-tab-pane>
        <el-tab-pane label="零食陈列"
          name="零食陈列">
          <Snack />
        </el-tab-pane>
        <el-tab-pane label="三米两秒"
          name="三米两秒">
          <ThreeTwoSeconds />
        </el-tab-pane>
        <el-tab-pane label="六小金刚"
          name="六小金刚">
          <SixLittleDiamonds />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script setup>
import Display from './tabs/display.vue'
import Schedule from './tabs/schedule.vue'
import ScheduleDis from './tabs/schedule_dis.vue'
import Snack from './tabs/snack.vue'
import ThreeTwoSeconds from './tabs/three_two_seconds.vue'
import SixLittleDiamonds from './tabs/six_little_diamonds.vue'

const activeName = ref('常规陈列');
const handleClickTabs = (tab) => {
  activeName.value = tab.name;
}
</script>

<style scoped
  lang="scss">
  .app-container {
    padding: 10px;

    .container {
      padding: 10px;

      .el-tabs {
        height: 100%;
        display: flex;
        flex-direction: column-reverse;

        .el-tabs__content {
          display: flex;
          flex-direction: column;
          height: 100%;

          .el-tab-pane {
            height: 100%;
            display: flex;
            flex-direction: column;
          }

          .formula-column {
            display: flex;
            justify-content: center;
            align-items: center;

            .el-icon {
              margin-left: 2px;
            }
          }
        }
      }

      .el-form-item {
        align-items: center;
      }

    }
  }

</style>