<script setup lang="ts">
import { useRoute } from 'vue-router'
import studentManageApi from '@/api/studentManage'
import { cleanBooks, getSubjectsByGrade } from '@/api/subject/config'
import { book_select_practice } from '@/components/book-select'
import hud from '@/utils/hud'
import type { TextBook } from '@/api/subject/subject'
import { only_last_id } from '@/api/only-last'

defineOptions({ name: 'SetBook' })

const route = useRoute()
const { classId, className, gradeId } = route.query
const textbookList = ref([] as TextBook[])
const loading = ref(false)
// 学科列表
const subjectList = getSubjectsByGrade(gradeId) as any[]
// 选中的学科
const selectedSubject = ref(subjectList[0].subjectId)
// 是否显示选择教材
const showBookSelect = ref(false)

// 切换教材
function changeSubject(item: anyObj) {
  selectedSubject.value = item.subjectId
}

function selectBook(book: TextBook) {
  hud.load({
    option: '添加',
    task: async () => {
      await studentManageApi.addClassBook({
        classId: classId as string,
        textBookId: book.id,
      })
      showBookSelect.value = false
      await init()
    },
  })
}

function addBook() {
  showBookSelect.value = true
}

async function removeBook(book: TextBook) {
  await studentManageApi.removeClassBook(book.id)
  await init()
}

async function init() {
  loading.value = true
  try {
    const books = await studentManageApi.getClassBookList(
      {
        classId,
        subjectId: selectedSubject.value,
      },
      {
        [only_last_id]: 'set-book-getClassBookListApi',
      },
    )
    cleanBooks(books)
    textbookList.value = books
  } finally {
    loading.value = false
  }
}

watch(
  () => selectedSubject.value,
  () => {
    init()
  },
  {
    immediate: true,
  },
)
</script>

<template>
  <div class="set-book">
    <div class="top">
      <BackBar :leftText="className" />
    </div>
    <div class="nav_list">
      <SelectTab
        v-model="selectedSubject"
        :dataList="subjectList"
        :format="{ label: 'subject', value: 'subjectId' }"
        @change="changeSubject"
      ></SelectTab>
    </div>
    <div class="main">
      <book-shelf
        v-if="!loading"
        title="教材设置"
        class="box"
        :onRemove="removeBook"
        :books="textbookList"
        :width="1824"
        add
        remove
        @add="addBook"
      />
      <Empty v-else :type="loading ? 'loading' : 'network'"></Empty>
    </div>
    <book-select
      v-model="showBookSelect"
      v-model:type="book_select_practice"
      :subjectId="selectedSubject"
      :grade-id="gradeId"
      :locked-book-ids="textbookList.map((item: any) => item.textBookId)"
      @ok="selectBook"
    />
  </div>
</template>
<style scoped lang="scss">
.set-book {
  position: relative;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  line-height: 1.5;
  @include main_bg;
  @include hidden_scroll;
  .top {
    position: absolute;
    top: 2.67vh;
    left: 64px;
    z-index: 1;
  }
  .main {
    width: 100%;
    height: 100%;
  }

  .nav_list {
    position: absolute;
    top: 3.67vh;
    right: $space-6;
    :deep(.select-list) {
      display: flex;

      .data-item {
        width: auto;
        flex: 0 0 auto;
        padding: 0 32px;
      }
    }
  }
}
.box {
  height: 79.58vh;
  top: 14.17vh;
}
</style>
