<template>
  <div class="app-container">
    <div class="container">
      <van-nav-bar fixed
        left-arrow
        @click-left="router.back()"
        title="店内执行上报浏览"
        right-text="筛选"
        @click-right="handleClickRight" />
      <SearchList v-model:showSearch="showSearch"
        :queryParams="params"
        @change="getTableList" />
      <el-tabs v-model="activeName"
        class="demo-tabs"
        @tab-click="handleClickTabs">
        <el-tab-pane label="常规陈列"
          name="常规陈列">
          <Display :params="params" ref="display"/>
        </el-tab-pane>
        <el-tab-pane label="档期计划"
          name="档期计划">
          <Schedule :params="params" ref="schedule"/>
        </el-tab-pane>
        <el-tab-pane label="档期陈列"
          name="档期陈列">
          <ScheduleDis :params="params" ref="scheduleDis"/>
        </el-tab-pane>
        <el-tab-pane label="零食陈列"
          name="零食陈列">
          <Snack :params="params" ref="snack"/>
        </el-tab-pane>
        <el-tab-pane label="三米两秒"
          name="三米两秒">
          <ThreeTwoSeconds :params="params" ref="threeTwoSeconds"/>
        </el-tab-pane>
        <el-tab-pane label="六小金刚"
          name="六小金刚">
          <SixLittleDiamonds :params="params" ref="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'
import SearchList from './components/SearchList'

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

const showSearch = ref(false)
const handleClickRight = () => {
  showSearch.value = true;
}

const params = ref({
  pageNum: 1,
  pageSize: 20,
  salesMonth: new Date(),
  deptName: '',
  dealerCN: '',
  lineNameLike: '',
  storeCN: ''
})

const display = ref(null)
const schedule = ref(null)
const scheduleDis = ref(null)
const snack = ref(null)
const threeTwoSeconds = ref(null)
const sixLittleDiamonds = ref(null)

const getTableList = () => {
  display.value.getTableList()
  schedule.value.getTableList()
  scheduleDis.value.getTableList()
  snack.value.getTableList()
  threeTwoSeconds.value.getTableList()
  sixLittleDiamonds.value.getTableList()
}
</script>

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

    .container {
      padding: 0px;

      .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>