<script lang="ts" setup>
import wordTableApi from '@/api/subject/wordTable'
import type { Word, Data, BaseSelect, NavListType, TextBook, TextBookData } from './interface'
import AllBooksSeleton from './components/AllBookSeleton.vue'
import useReadLoading from './hooks/useReadLoading'
import { nextTick, watch } from 'vue'
import Select from './components/Select.vue'
import Dropdown from './components/Dropdown.vue'
import WordPopup from './components/WordPopup.vue'
import AdaptiveText from './test/components/AdaptiveText.vue'
import { storeToRefs } from 'pinia'
import { useLearnWordStore } from '@/stores/learnWord/useLearnWordStore'
import useExam from './test/hooks/useExam'
import { useRoute, useRouter } from 'vue-router'
import { userStore } from '@/stores'
import hud from '@/utils/hud'
import { familiarity_know_well, familiarity_master } from '.'
import dict from '@/utils/dict'

defineOptions({ name: 'WordTable' })

const OSS_URL = import.meta.env.VITE_OSS_URL

const empty_gril = `${OSS_URL}/english_client/normalMode/empty_gril.png`
const nav_bg = `url(${OSS_URL}/english_client/normalMode/nav_bg.png)`
const back_btn = `url(${OSS_URL}/english_client/normalMode/back_btn.png)`
const { userInfo } = storeToRefs(userStore())

// 参数
const route = useRoute()
const { stageId, versionId, bookId, familiarity } = route.query

const router = useRouter()
const state = useLearnWordStore()
const isLoading = ref(false) // 书籍加载
const isLoading2 = ref(false) // 触底加载延时
const readLoading = useReadLoading() // 分级阅读加载
// 全部图书骨架屏
const allBooksSkeleton = ref({
  allLoading: true,
})
const showSeletonTimer = ref() // 骨架屏定时器

const showDetail = ref(false) // 弹框
const pupData = ref<Word>()
const cardListRef = ref()
const scrollBoxRef = ref()
/* 阶段列表 */
const stageList = ref([] as Data[])
const stageActive = ref('' as any)
// 是否处于掌握的界面
const isMaster = computed(
  () =>
    (activeNav.value.type === nav_stage && familiarityActive.value === familiarity_master) ||
    (activeNav.value.type === nav_book && textBookFamiliarityActive.value === familiarity_master),
)
const familiarityList = ref([
  {
    key: '',
    value: '全部',
    count: '',
    config: 'wordCount',
  },
  {
    key: '0',
    value: '未解锁',
    count: '',
    config: 'wordUnlockCount',
  },
  {
    key: '1',
    value: '陌生',
    count: '',
    config: 'wordStrangerCount',
  },
  {
    key: '2',
    value: '认识',
    count: '',
    config: 'wordKnowCount',
  },
  {
    key: familiarity_know_well,
    value: '熟悉',
    count: '',
    config: 'wordKnowWellCount',
  },
  {
    key: familiarity_master,
    value: '掌握',
    count: '',
    config: 'wordGraspCount',
  },
] as Data[])
const familiarityActive = ref('' as any)
/* 教材---阶段列表 */
const textBookStageList = ref([] as Data[])
const textBookStageActive = ref('' as any)

function isSameValue(a: any, b: any) {
  if ((a === undefined || a === null || a === '') && (b === undefined || b === null || b === '')) {
    return true
  }
  return String(a) === String(b)
}

async function loadVersionsByStage(stageId: any) {
  if (!stageId) return
  const currentStageId = stageId
  const courses = await wordTableApi.getXkwCourseList(stageId)
  if (!isSameValue(textBookStageActive.value, currentStageId)) return
  const englishCourse =
    courses.find((item: any) => item.shortName === '英语' || item.name.includes('英语')) ||
    courses[0]
  if (!englishCourse) return
  const versions = await wordTableApi.getXkwTextbookVersionList(englishCourse.id)
  if (!isSameValue(textBookStageActive.value, currentStageId)) return
  versionList.value = versions.map((item: BaseSelect) => ({
    key: item.id,
    value: item.name,
  })) as any
}

watch(() => textBookStageActive.value, loadVersionsByStage)

/* 教材---版本列表 */
const versionList = ref([] as Data[])
const versionActive = ref('' as any)

async function loadTextbooksByVersion(versionId: any) {
  if (!versionId) return
  const currentVersionId = versionId
  const textbooks = await wordTableApi.getXkwTextbookList(versionId)
  if (!isSameValue(versionActive.value, currentVersionId)) return
  textBookList.value = textbooks.map((item: any) => ({
    key: item.id,
    value: item.volume,
  })) as any
}

watch(() => versionActive.value, loadTextbooksByVersion)

/* 教材列表 */
const textBookList = ref([] as TextBook[])
const textBookActive = ref('' as any)
watch(
  () => textBookActive.value,
  nv => {
    const textBook = textBookList.value.find((item: TextBook) => item.key === nv)
    wordsInfo.all = textBook?.singleWordCount || 0
    wordsInfo.learned = textBook?.learnWordCount || 0
  },
)
const textBookFamiliarityActive = ref('' as any)

// 章节
const chapterList = ref([] as any[])
const chapterActive = ref('' as any)

watch(
  () => textBookActive.value,
  async nv => {
    if (!nv) return
    const currentTextbookId = nv
    const list = await wordTableApi.getXkwTextbookCatalogList(nv)
    if (!isSameValue(textBookActive.value, currentTextbookId)) return
    chapterList.value = [
      { key: undefined, value: '全部' },
      ...list.map((item: any) => ({ key: item.id, value: item.name })),
    ]
  },
)

// 模块
const nav_stage = 1
const nav_book = 2
const navList = [
  {
    name: '阶段',
    type: nav_stage,
    filterParams: reactive({
      vocabularyId: stageActive,
      grasp: familiarityActive,
    }),
    getData: wordTableApi.getWordTableStageList,
  },
  {
    name: '教材',
    type: nav_book,
    filterParams: reactive({
      chapterId: chapterActive,
      textbookId: textBookActive,
      grasp: textBookFamiliarityActive,
    }),
    getData: wordTableApi.getTextbookWord,
  },
]

const activeNav = ref(navList[0] as NavListType)

const wordList = ref<Word[]>([])
const filterReady = ref(false)
const allBookPage = ref({
  current: 1,
  size: 30,
  total: 0,
  totalPage: 0,
})
const scrollHeight = ref(0) // 书籍滚动高度
const wordsInfo = reactive({
  learned: 0,
  all: 0,
})
const exam = useExam()

// 返回首页
function tapBackBtn() {
  /* 关卡列表可能已经变成教材页的列表，需重新刷新 */
  state.refreshLevelList = true
  state.isBook = false
  // uni.navigateBack();
  router.back()
}

// 模块切换
function tapSwitchNav(i: NavListType) {
  if (fixedBook.value || fixedStage.value) {
    showFixedTips()
    return
  }
  activeNav.value = i
  saveUserFilter()
}

function jump() {
  const bookMode = activeNav.value.type === nav_book
  const params = {
    size: 20,
    testType: bookMode ? 3 : 4,
    wordGraspFlag: bookMode ? textBookFamiliarityActive.value : familiarityActive.value,
    textbookId: bookMode ? textBookActive.value : null,
    chapterId: bookMode ? chapterActive.value : null,
    vocabularyId: bookMode ? null : stageActive.value,
  }
  let subtitle = ''
  const titleSep = '·'
  if (bookMode) {
    // 初中
    const stage = getNameTool(textBookStageList.value, textBookStageActive.value)
    // 版本
    const version = getNameTool(versionList.value, versionActive.value) || '全部'
    // 年级
    const grade = getNameTool(textBookList.value, textBookActive.value).replace(
      /\（\d+\/\d+\）/,
      '',
    )
    // 单元
    const chapter = getNameTool(chapterList.value, chapterActive.value)
    // 熟悉度
    const familiarity = getNameTool(familiarityList.value, textBookFamiliarityActive.value)
    subtitle = [stage, version, grade, chapter, familiarity].join(titleSep)
  } else {
    // 阶段
    const stage = getNameTool(stageList.value, stageActive.value)
    // 熟悉度
    const familiarity = getNameTool(familiarityList.value, familiarityActive.value)
    subtitle = [stage, familiarity].join(titleSep)
  }
  const path = `/subject/learnWord/word-table-test`
  dict.set(path, {
    params,
    subtitle,
  })
  router.push(path)

  // exam.wordGraspFlag.value = Number(familiarityActive.value)
  // exam.mode.value = activeNav.value.type === 2 ? 3 : 4 // 0: 复习模式， 1：随机模式   3: 从教材进去
  // exam.wordGrade.value = stageActive.value

  // if (activeNav.value.type === 2) {
  //   exam.teachData.value.textBookFamiliarityActive = textBookFamiliarityActive.value
  //   exam.teachData.value.textBookId = textBookActive.value
  // }
  // hud.loading('加载中')
  // getWordTestWords({
  //   size: exam.numOfQuestions.value,
  //   testType: exam.mode.value,
  //   wordGraspFlag:
  //     activeNav.value.type === 2 ? textBookFamiliarityActive.value : familiarityActive.value,
  //   startTime: new Date().getTime(),
  //   textbookId: activeNav.value.type === 2 ? textBookActive.value : null,
  //   chapterId: activeNav.value.type === 2 ? chapterActive.value : null,
  //   vocabularyId: stageActive.value,
  // })
  //   .then(res => {
  //     if (!res.chooseTitle && !res.spellTitle) {
  //       return XMessage.error('暂无单词')
  //     }
  //     exam.questionsChooseTitleLib.value = res.chooseTitle
  //     exam.questionSpellTitleLib.value = res.spellTitle
  //     exam.questions.total = res.chooseTitle.length + res.spellTitle.length
  //     let title = ''
  //     const titleSep = ' · '
  //     if (activeNav.value.type === 2) {
  //       // 初中
  //       const stage = getNameTool(textBookStageList.value, textBookStageActive.value)
  //       // 版本
  //       const version = getNameTool(versionList.value, versionActive.value) || '全部'
  //       // 年级
  //       const grade = getNameTool(textBookList.value, textBookActive.value).replace(
  //         /\（\d+\/\d+\）/,
  //         '',
  //       )
  //       // 单元
  //       const chapter = getNameTool(chapterList.value, chapterActive.value)
  //       // 熟悉度
  //       const familiarity = getNameTool(familiarityList.value, textBookFamiliarityActive.value)
  //       title = [stage, version, grade, chapter, familiarity].join(titleSep)
  //     } else {
  //       // 阶段
  //       const stage = getNameTool(stageList.value, stageActive.value)
  //       // 熟悉度
  //       const familiarity = getNameTool(familiarityList.value, familiarityActive.value)
  //       title = [stage, familiarity].join(titleSep)
  //     }
  //     router.push(`/subject/learnWord/word-table-test?title=${title}`)
  //   })
  //   .catch(() => {
  //     hud.error('网络异常，请稍后重试')
  //   })
  //   .finally(() => {
  //     hud.hideLoading()
  //   })
}
function getNameTool(list: anyObj[], id: any | number) {
  return list.find(item => item.key === id)?.value
}

//  触底滚动加载
function onScrollToLower(e: anyObj) {
  if (isLoading.value || isLoading2.value) return
  if (allBookPage.value.totalPage >= allBookPage.value.current) {
    fetchList()
  }
}
// 获取图书筛选条件
async function fetchFilterList() {
  try {
    /* 阶段---年级 */
    const res = await wordTableApi.getWordTableStage()
    if (res.data.code === 200) {
      let list = res.data.data.map((item: BaseSelect) => ({
        key: item.id,
        value: item.name,
      }))
      list.unshift({
        key: '',
        value: '全部',
      })
      stageList.value = list
    }

    /* 教材---阶段 */
    const stageRes = await wordTableApi.getXkwStageList()
    textBookStageList.value = stageRes.map((item: BaseSelect) => ({
      key: item.id,
      value: item.name,
    }))
    // 如果没有已选阶段，默认选第一项并主动触发级联
    if (!textBookStageActive.value && textBookStageList.value.length) {
      textBookStageActive.value = textBookStageList.value[0].key
    }

    setTimeout(() => {
      allBooksSkeleton.value.allLoading = false
    }, 100)
  } catch (err) {
    console.log(err)
  }
}
// 弹出框
function showPup(item: Word) {
  if (!item.grasp) return
  showDetail.value = true
  pupData.value = { ...item }
}

watch(
  () => activeNav.value.filterParams,
  () => {
    if (!filterReady.value) return
    resetAndFetchList()
  },
  {
    deep: true,
    flush: 'post',
  },
)

function resetAndFetchList(needLoading = true) {
  wordList.value = []
  allBookPage.value.current = 1
  fetchList(needLoading)
}
// 获取全部图书
async function fetchList(needLoading = false) {
  isLoading2.value = true
  if (needLoading) {
    isLoading.value = true
  }

  try {
    const res = await activeNav.value.getData({
      ...allBookPage.value,
      ...activeNav.value.filterParams,
    })
    if (res.data.code === 200) {
      allBookPage.value.total = res.data.data.totalRows
      allBookPage.value.totalPage = res.data.data.totalPage
      familiarityList.value.forEach(item => {
        item.count = item.config ? res.data.data[item.config] : ''
      })
      wordList.value.push(...res.data.data.rows)
      allBookPage.value.current++
      allBooksSkeleton.value.allLoading = false
    }
  } catch (err) {
    console.log(err)
  } finally {
    isLoading.value = false
    isLoading2.value = false
  }
}

// async function updata() {
//   const pageNum = allBookPage.value.current
//   await nextTick()
//   wordList.value = []
//   allBookPage.value.current = 1
//   for (let i = 1; i < pageNum; i++) {
//     await fetchList()
//   }
// }

function saveUserFilter() {
  const saveData = {
    activeNavType: activeNav.value.type,
    familiarityActive: familiarityActive.value,
    stageActive: stageActive.value,
    textBookStageActive: textBookStageActive.value,
    versionActive: versionActive.value,
    textBookActive: textBookActive.value,
    chapterActive: chapterActive.value,
    textBookFamiliarityActive: textBookFamiliarityActive.value,
  }
  wordTableApi.saveUserWordFilterRecord({
    userId: userInfo.value.userId,
    wordTestConfig: JSON.stringify(saveData),
  })
}

async function initUserFilter() {
  // 获取用户筛选条件记录
  return wordTableApi
    .getUserWordFilterRecord({
      userId: userInfo.value.userId,
    })
    .then((res: any) => {
      const config = res.data.data.wordTestConfig
      if (config) {
        const data = JSON.parse(config)
        if (data.activeNavType === nav_book) {
          activeNav.value = navList[1]
        } else if (data.activeNavType === nav_stage) {
          activeNav.value = navList[0]
        }
        familiarityActive.value = data.familiarityActive
        stageActive.value = data.stageActive
        textBookStageActive.value = data.textBookStageActive
        versionActive.value = data.versionActive
        textBookActive.value = data.textBookActive
        chapterActive.value = data.chapterActive
        textBookFamiliarityActive.value = data.textBookFamiliarityActive
      }
    })
    .catch((err: any) => {
      console.log(err)
    })
}

// 是否固定教材，不让修改
const fixedBook = ref(false)
// 是否固定阶段，不让修改
const fixedStage = ref(false)
function showFixedTips() {
  hud.error('请您专心完成导学任务哦，加油！')
}

onMounted(async () => {
  if (bookId) {
    // 通过路由参数来初始化
    activeNav.value = navList[1]
    textBookStageActive.value = stageId
    versionActive.value = versionId
    textBookActive.value = bookId
    textBookFamiliarityActive.value = familiarity
    fixedBook.value = true
    saveUserFilter()
  } else if (familiarity) {
    familiarityActive.value = familiarity
    if (stageId) {
      stageActive.value = stageId
      fixedStage.value = true
    }
  } else {
    await initUserFilter()
  }
  await fetchFilterList()
  await nextTick()
  filterReady.value = true
  resetAndFetchList()
  // await Promise.all([initUserFilter(), fetchFilterList()]);
  // fetchList()
  // updata();
})

onUnmounted(() => {
  clearTimeout(showSeletonTimer.value)
  readLoading.clearLoadingTimer()
})
</script>

<template>
  <div class="page__container">
    <div id="page_box" class="page__box">
      <div id="navigationBox" class="navigation">
        <div
          v-for="i in navList"
          :key="i.type"
          :class="{ inactivity: true, active: i.type === activeNav.type }"
          @click="tapSwitchNav(i)"
        >
          <span class="name">{{ i.name }}</span>
        </div>
      </div>
      <div
        class="back-btn"
        :style="{ position: activeNav.type === nav_stage ? 'fixed' : 'absolute' }"
        @click="tapBackBtn"
      ></div>
      <div id="books" class="all_books">
        <template v-if="allBooksSkeleton.allLoading">
          <!-- 骨架屏 -->
          <AllBooksSeleton />
        </template>
        <template v-else>
          <div id="filterBox" class="filter_box">
            <div class="filter_list">
              <!-- 阶段筛选项 -->
              <div v-show="activeNav.type === nav_stage" class="filter_bar">
                <div class="filter_item">
                  <div class="label">年级：</div>
                  <Select
                    v-model="stageActive"
                    :disabled="fixedStage"
                    :list="stageList"
                    @onChange="saveUserFilter"
                    @disabled-click="showFixedTips"
                  />
                </div>
                <div class="filter_item">
                  <div class="label">熟悉度：</div>
                  <Select
                    v-model="familiarityActive"
                    :list="familiarityList"
                    is-colored
                    @onChange="saveUserFilter"
                  />
                </div>
              </div>
              <!-- 教材筛选项 -->
              <div v-show="activeNav.type === nav_book" class="filter_bar filter_bar_textbook">
                <div class="books">
                  <Dropdown
                    v-model="textBookStageActive"
                    :menu="textBookStageList"
                    :disabled="fixedBook"
                    @changeValue="saveUserFilter"
                    @disabled-click="showFixedTips"
                  />
                  <Dropdown
                    v-model="versionActive"
                    :menu="versionList"
                    :disabled="fixedBook"
                    @changeValue="saveUserFilter"
                    @disabled-click="showFixedTips"
                  />
                  <Dropdown
                    v-model="textBookActive"
                    :menu="textBookList"
                    :disabled="fixedBook"
                    @changeValue="saveUserFilter"
                    @disabled-click="showFixedTips"
                  />
                  <Dropdown
                    v-model="chapterActive"
                    :menu="chapterList"
                    :disabled="fixedBook"
                    @changeValue="saveUserFilter"
                    @disabled-click="showFixedTips"
                  />
                </div>
                <div class="filter_item">
                  <!-- <div class="label">熟悉度：</div> -->
                  <Select
                    v-model="textBookFamiliarityActive"
                    :list="familiarityList"
                    is-colored
                    @onChange="saveUserFilter"
                  />
                </div>
              </div>

              <!-- <div class="books_num">数量：{{ allBookPage.total }}</div> -->
            </div>
          </div>
          <div class="books_box">
            <div v-if="isLoading" class="shelf">
              <div class="loading">
                <img :src="readLoading.getLoading()" />
                <text>正在加载中...</text>
              </div>
            </div>
            <van-list
              v-else
              ref="scrollBoxRef"
              class="scroll_box hidden_scroll"
              offset="50"
              @load="onScrollToLower"
            >
              <!-- 加载动效 -->

              <!-- 空状态 -->
              <template v-if="allBookPage.total === 0">
                <div class="flex-col-center empty">
                  <img :src="empty_gril" />
                  <span>暂无单词</span>
                </div>
              </template>
              <!-- 非空状态 -->
              <template v-else>
                <div ref="cardListRef" class="card_list">
                  <!-- 单词卡片 -->
                  <div
                    v-for="item in wordList"
                    :key="item.wordId"
                    :class="['card', `familiarity_${item.grasp + 1}`]"
                    @click="showPup(item)"
                  >
                    <div class="word">{{ item.spell }}</div>
                    <div class="chinese">
                      <AbbrImg :abbr="item.typeAbbr" gap="8"></AbbrImg>
                      <AdaptiveText
                        :text="item.simpleDesc"
                        :defaultFontSize="20"
                        font-family="PingFang SC"
                        wrap
                        :lineWidth="218"
                        :maxNumRows="3"
                      />
                    </div>
                    <div v-if="isMaster" class="review-count">
                      <span class="review-success">{{ item.reviewSuccessful }}</span>
                      <span class="review-failure">{{ item.reviewFailed }}</span>
                    </div>
                  </div>
                </div>
                <span
                  v-if="scrollHeight"
                  class="t-icon t-icon-huidaodingbu scroll_top_icon"
                  @click="() => (scrollHeight = 0)"
                ></span>
              </template>
            </van-list>

            <div v-show="wordList.length" class="btn pointer" @click="jump">开始学习</div>
          </div>
        </template>
      </div>
    </div>
    <WordPopup v-model="showDetail" :pupData="pupData || {}"></WordPopup>
  </div>
</template>

<style scoped lang="scss">
@use './style/familiarityColor.scss' as *;

* {
  box-sizing: border-box;
}
.flex-col-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.page__container {
  width: 100vw;
  height: 100%;
  z-index: 1;
  background-color: #dfdaf2;

  .over_filter {
    position: fixed;
    top: 0;
    z-index: 99;
    left: 50%;
    transform: translate(-25%);
    width: 100%;

    .condition {
      padding: 1.33vh 76px;
      margin-right: 160px;
      white-space: nowrap;
      border: 0.33vh solid #fffef2;
      background-color: #fff01f;
      border-radius: 0 0 1.67vh 1.67vh;
      font-size: 2.67vh;
      line-height: 4vh;
      color: rgba(0, 0, 0, 0.75);

      &:last-child {
        margin-right: 0;
      }
    }
  }

  .page__box {
    padding-top: 3.33vh;

    .back-btn {
      left: 30px;
      z-index: 999;
      cursor: pointer;
      width: 10vh;
      height: 10vh;
      background-image: v-bind(back_btn);
      background-repeat: no-repeat;
      background-size: cover;
    }

    .btn__rank {
      position: fixed;
      left: 32px;
      top: 21.67vh;
      z-index: 2;

      .trophy__box {
        width: 120px;
        height: 10vh;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 0.33vh solid #fffef5;
        background: rgba(0, 0, 0, 0.35);
        backdrop-filter: blur(3px);
        border-radius: 50%;

        .trophy {
          width: 80px;
          height: 6.67vh;
        }
      }

      .btn__rank__text {
        box-sizing: content-box;
        position: relative;
        width: 120px;
        text-align: center;
        margin-top: -1.83vh;
        font-size: 0;
        z-index: 1;

        span {
          color: #fffef5;
          text-align: center;
          font-family: $font-text;
          font-size: 2.33vh;
          text-shadow:
            -2px -2px 0 #6a3906,
            2px -2px 0 #6a3906,
            -2px 2px 0 #6a3906,
            2px 2px 0 #6a3906;
          /* 设置描边效果 */
        }

        img {
          width: 82px;
          height: 2.08vh;
        }
      }
    }

    .navigation {
      display: flex;
      position: absolute;
      left: 50%;
      transform: translate(-50%);
      z-index: 99;

      .inactivity {
        display: flex;
        justify-content: center;
        padding: 1.33vh 0 0.67vh 0;
        margin-right: 56px;
        width: 212px;
        height: 6vh;
        line-height: 4vh;
        font-size: 2.33vh;
        font-family: $font-special;
        background-color: #fff78c;
        border: 0.33vh solid #d9d163;
        border-radius: 1.67vh 1.67vh 0 0;
        box-sizing: border-box;
        color: rgba(0, 0, 0, 0.45);
        cursor: pointer;
      }

      .active {
        background-color: #fffef2;
        border-bottom: 0.33vh solid #fffef2;
        color: rgba(0, 0, 0, 0.75);
      }
    }

    .all_books {
      position: relative;
      width: 1920px;
      margin: 0 auto;
      padding: 4.83vh 30px 0 30px;
      height: calc(100vh - 58px);

      .filter_box {
        position: relative;
        z-index: 2;
        padding: 0.83vh;

        &::before {
          content: '';
          position: absolute;
          top: 0.5vh;
          right: -50px;
          display: block;
          width: 1860px;
          height: 7.83vh;
          background-image: v-bind(nav_bg);
          background-size: 100% 100%;
          background-repeat: no-repeat;
          z-index: -1;
        }

        &::after {
          content: '';
          position: absolute;
          top: 0.5vh;
          left: -60px;
          display: block;
          width: 1860px;
          height: 7.83vh;
          background-image: v-bind(nav_bg);
          background-size: 100% 100%;
          background-repeat: no-repeat;
          z-index: -1;
        }

        .filter_list {
          position: relative;
          padding: 1.83vh 20px 2.5vh;
          margin: 0 10px;
          // margin-left: 13px;
          // width: 1814px;
          background-color: #fffef5;
          border-radius: 3.33vh;
          border: 0.33vh solid #d9d163;
          box-sizing: border-box;
          .filter_bar {
            display: flex;
            justify-content: space-around;
            align-items: center;
          }
          .filter_bar_textbook {
            padding: 0 22px;
            gap: 20px;

            .books {
              flex: 1;
              display: flex;
              gap: 20px;
              min-width: 0;

              :deep(.dropdown__container) {
                flex: 1;
                min-width: 0;
              }
              :deep(.dropdown__container:first-child) {
                flex: none;
                .btn {
                  width: 150px;
                }
              }
            }

            .filter_item {
              :deep(.select_item) {
                width: 100px;

                .name,
                .count {
                  width: 100%;
                }
              }
            }
          }

          .filter_item {
            display: flex;
            align-items: center;
            color: #6a3906;
            font-family: $font-special;
            font-size: 2vh;
          }

          .books_num {
            position: absolute;
            right: 32px;
            bottom: 0;
            text-align: right;
            font-size: 1.67vh;
            color: #736d20;
          }
        }
      }

      .books_box {
        position: relative;
        width: 1756px;
        margin: -6.83vh auto 0;
        padding: 8.17vh 0 1.33vh;
        border-radius: 3.33vh;
        background-color: #fffef5;
        border: 0.33vh solid #d9d163;

        .scroll_box {
          height: 76.5vh;
          overflow: auto;
        }
        ::-webkit-scrollbar {
          width: 0;
          height: 0;
          color: transparent;
          display: none;
        }

        .scroll_top_icon {
          position: fixed;
          bottom: 6.67vh;
          right: 32px;
          width: 96px;
          height: 8vh;
          cursor: pointer;
          background-repeat: no-repeat;
        }

        .empty {
          height: 100%;
          color: rgba(0, 0, 0, 0.45);
          text-align: center;
          font-family: 'PingFang SC';
          font-size: 1.67vh;
          text-align: center;

          img {
            width: 240px;
            height: 20vh;
            margin-bottom: 1.67vh;
          }
        }

        .shelf {
          position: relative;
          // height: 100%;
          height: calc(100vh - 282px);

          .loading {
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            margin-top: 8.33vh;

            img {
              width: 240px;
              height: 23.33vh;
            }
            span {
              font-size: 2vh;
              color: #666;
              font-family: $font-text;
            }
          }
        }
        .card_list {
          margin: 0 41px;
          display: flex;
          flex-wrap: wrap;
          padding-bottom: 11.67vh;
          .card {
            position: relative;
            z-index: 0;
            width: 264px;
            height: 13.33vh;
            padding: 1.67vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            overflow: hidden;

            border-radius: 1.67vh;
            border: 0.33vh solid $color-familiarity-1;
            cursor: pointer;

            .review-count {
              position: absolute;
              top: 0;
              left: 0;
              right: 0;
              display: flex;
              justify-content: space-between;
              text-align: center;
              .review-success {
                width: 60px;
                color: #fff;
                background-color: rgba(105, 191, 59, 0.8);
                border-bottom-right-radius: 20px;
              }
              .review-failure {
                width: 60px;
                color: #fff;
                background-color: rgba(187, 47, 38, 0.8);
                border-bottom-left-radius: 20px;
              }
            }

            &:not(:nth-child(6n)) {
              margin-right: 16px;
            }
            &:nth-child(n + 7) {
              margin-top: 1.33vh;
            }
            &.familiarity_1 {
              border-color: $color-familiarity-1;
              background-color: $bg-familiarity-1;
            }
            &.familiarity_2 {
              border-color: $color-familiarity-2;
              background-color: $bg-familiarity-2;
            }
            &.familiarity_3 {
              border-color: $color-familiarity-3;
              background-color: $bg-familiarity-3;
            }
            &.familiarity_4 {
              border-color: $color-familiarity-4;
              background-color: $bg-familiarity-4;
            }
            &.familiarity_5 {
              border-color: $color-familiarity-5;
              background-color: $bg-familiarity-5;
            }

            .word {
              color: $font-color;
              text-align: center;
              font-family: $font-text;
              font-size: 2vh;
              font-weight: 900;
            }
            .chinese {
              color: $font-color;
              text-align: center;
              font-family: $font-text;
              font-size: 1.67vh;
              font-weight: 600;
              :deep(.abbr-box) {
                margin: 0.5vh 0 0.83vh;
                img {
                  height: 2.67vh;
                  vertical-align: middle;
                }
              }
            }
          }
        }
        .btn {
          position: absolute;
          left: 50%;
          bottom: 3.33vh;
          transform: translateX(-50%);

          border-radius: 4.67vh;
          border: 0.33vh solid #6a3906;
          background: #fff01f;
          padding: 0.83vh 90px;
          color: #ffa51f;
          text-align: center;
          font-family: $font-special;
          font-size: 4vh;
        }
      }
    }
  }
}
</style>
