<script setup lang="ts">
import subjectApi from '@/api/subject/subject'
import { useRoute, useRouter } from 'vue-router'
import { subjectStore } from '@/stores'
import { cleanBooks } from '@/api/subject/config'

const { subject } = subjectStore()

const route = useRoute()
const router = useRouter()
let subjectId = route.params.subjectId

const textbookList = ref<anyObj[]>([])

function onClick(item: anyObj) {
  // router.push(
  //     `textbookDetail/${subjectId}/${item.textBookId}?id=${item.id}&textbookName=${item.bookVersionName + item.textBookName}&businessFlag=${item.businessFlag}`,
  // );
  const query: anyObj = {
    id: item.id,
    textbookName: item.clean?.fullName || item.bookVersionName + item.textBookName,
    businessFlag: item.businessFlag,
  }
  router.push({
    path: `textbookDetail/${subjectId}/${item.textBookId}`,
    query,
  })
}

const loading = ref(false)
async function init() {
  loading.value = true
  try {
    const res = await subjectApi.getUserTextBookList({
      size: -1,
      subjectId,
    })
    cleanBooks(res.rows)
    textbookList.value = res.rows
  } catch (err) {
    console.log(err)
  } finally {
    loading.value = false
  }
}

// (() => {
//     init();
// })();

onActivated(() => {
  subjectId = route.params.subjectId
  init()
})
</script>
<template>
  <div class="free-study">
    <div class="top">
      <BackBar :leftText="`【${subject.name}】自由学`" />
    </div>
    <div class="main">
      <book-shelf
        v-if="!loading"
        class="box"
        :books="textbookList as any"
        :width="1820"
        @select="onClick"
      />
      <Empty v-else :type="loading ? 'loading' : 'network'"></Empty>
    </div>
  </div>
</template>
<style scoped lang="scss">
.free-study {
  position: relative;
  width: 100%;
  height: 100%;
  // overflow: hidden;
  box-sizing: border-box;
  line-height: 1.5;
  @include main_bg;
  @include hidden_scroll;
  .top {
    // padding: 32px 64px 0;
    position: absolute;
    top: 2.67vh;
    left: 64px;
    z-index: 1;
    // margin-bottom: 24px;
  }
  .main {
    // position: absolute;
    // top: 0;
    // left: 0;
    width: 100%;
    height: 100%;
  }
}
.box {
  height: 79.58vh;
  top: 14.17vh;
}
</style>
