<template>
  <div class="collection-box">
    <van-nav-bar left-arrow @click-left="onClickLeft" placeholder>
      <template #title>
        <div class="title">
          <span
            :class="{ active: isType == 0 }"
            @click="
              isType = 0;
              swiper.swipeTo(0);
            "
            >做错题</span
          >
          <span
            :class="{ active: isType == 1 }"
            @click="
              isType = 1;
              swiper.swipeTo(1);
            "
            >收藏题</span
          >
        </div>
      </template>
    </van-nav-bar>
    <van-swipe ref="swiper" :show-indicators="false" :touchable="false">
      <van-swipe-item> <listCom type="wrong" /> </van-swipe-item>
      <van-swipe-item> <listCom type="collection" /> </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useRouter } from "vue-router";
import listCom from "./components/list.vue";
const router = useRouter();
const onClickLeft = () => {
  router.back();
};

const isType = ref(0); //0错题 1收藏
const swiper = ref();
</script>

<style lang="scss" scoped>
.collection-box {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.title {
  display: flex;
  width: 130px;
  justify-content: space-between;
  align-items: center;
  span {
    font-size: 15px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 13px;
    color: #0a1a33;
    position: relative;
    padding: 8px;
  }
  .active {
    &:after {
      position: absolute;
      content: "";
      width: 20px;
      height: 4px;
      border-radius: 3px;
      background-color: #498ef5;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      z-index: 100;
    }
  }
}
</style>
