<template>
  <div class="app-container">
    <div class="container">
      <van-nav-bar fixed
        left-arrow
        @click-left="router.back()"
        title="店内执行上报看板" />
      <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 router = useRouter()
const activeName = ref('常规陈列');
const handleClickTabs = (tab) => {
  activeName.value = tab.name;
}
</script>

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

    .container {
      padding: 10px;

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

        ::v-deep(.el-tabs__header) {
          // 确保底部边框线完整显示
          border-bottom: 1px solid var(--el-border-color-light);
          width: 100%;
        }

        ::v-deep(.el-tabs__nav-wrap) {
          overflow-x: auto;
          overflow-y: hidden;
          -webkit-overflow-scrolling: touch; // iOS平滑滚动
          scrollbar-width: none; // Firefox隐藏滚动条

          &::after {
            // 隐藏el-tabs默认的底部伪元素边框
            display: none;
          }

          &::-webkit-scrollbar {
            display: none; // Chrome/Safari隐藏滚动条
          }
        }

        ::v-deep(.el-tabs__nav-scroll) {
          overflow: visible;
          width: max-content;
        }

        ::v-deep(.el-tabs__content) {
          display: flex;
          flex-direction: column;
          overflow-y: scroll;

          // height: 100%;

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