<template>
  <div class="basket">
    <el-affix :offset="132">
      <div class="basket-left">
        <TreeFilter />
      </div>
    </el-affix>
    <div class="basket-right">
      <el-tabs
        v-if="[0, 2].includes(paperConfig.showLabelType)"
        v-model="paperConfig.paneActive"
        @tab-change="tabChange"
      >
        <el-tab-pane label="试题" :name="0" lazy>
          <QuestionList />
        </el-tab-pane>
        <!-- <el-tab-pane label="同步套题" :name="1" lazy>
          <SyncPaper />
        </el-tab-pane> -->
      </el-tabs>
      <QuestionList v-if="[1].includes(paperConfig.showLabelType)" />
      <SyncPaper v-if="[3, 4].includes(paperConfig.showLabelType)" />
    </div>
  </div>
</template>

<script setup name="Basket">
import TreeFilter from "./TreeFilter.vue";
import QuestionList from "../components/QuestionList";
import SyncPaper from "../components/SyncPaper";
import usePaperStore from "@/store/modules/paper";
import { storeToRefs } from "pinia";
import { onActivated, onMounted } from "vue";

// getStaffChapterJson
// updateStaffChapterJson

// 页面展示类型
// 0-章节选题 1-知识点选题 2-同步专区 3-备考专区 4-升学专区
const { paperConfig } = storeToRefs(usePaperStore());

function tabChange(val) {
  if (val === 0) {
    paperConfig.value.showLabelType = 0;
  }
  if (val === 1) {
    paperConfig.value.showLabelType = 2;
  }
}
</script>

<style lang="scss" scoped>
.basket {
  display: flex;
  padding: 16px;
  &-left {
    width: 280px;
    margin-right: 16px;
  }
  &-right {
    width: calc(100% - 280px - 16px);
    .el-tabs {
      :deep(.el-tabs__header) {
        padding: 16px 16px 0 16px;
        background: #fff;
        .el-tabs__nav-wrap {
          &::after {
            display: none;
          }
        }
      }
    }
  }
}
</style>
