<script setup lang="ts">
import type { MjListProps } from '#/components/mj/mj-list'
import type { MjFormProps } from '#/components/mj/mj-table'

import {
  getQuestionTypeList,
  schoolBookService,
  xkwQuestionTitleService,
} from '#/api/service/question-bank/school-book'
import { mj_form_select } from '#/components/mj/mj-table'

import { usePaperStore } from '..'

defineOptions({ name: 'QuestionBank' })

const paperStore = usePaperStore()
const { paper } = storeToRefs(paperStore)

// 题型
const channelTypeId = ref('')
const channelTypeOptions = ref([] as any[])

// 章节
const chapterRef = ref()
const chapterSearchText = ref('')
const chapters = ref([] as any)
watch(
  () => chapterSearchText.value,
  (v) => {
    // eslint-disable-next-line unicorn/no-array-callback-reference
    chapterRef.value.filter(v)
  },
)
const chapterFilter = (v: any, chapter: any) => {
  if (!v) return true
  return chapter.name.toLowerCase().includes(v.toLowerCase())
}

/**
 * 章节选择变化了
 */
function handleChapterCheck() {
  refresh()
}

watch(
  () => channelTypeId.value,
  () => {
    refresh()
  },
)

const refresh = async () => {
  listRef.value.reloadAndScrollTop()
}

onMounted(async () => {
  getQuestionTypeList({ courseId: paper.value.courseId, current: -1 }).then(
    (res: any) => {
      channelTypeOptions.value = (res || []).map((item: any) => ({
        label: item.name,
        value: item.id,
      }))
    },
  )

  schoolBookService.getChapterTree(paper.value.textBookId).then((res: any) => {
    chapters.value = res
    if (paperStore.defaultChapterId) {
      nextTick(() => {
        chapterRef.value?.setCheckedKeys([paperStore.defaultChapterId])
        refresh()
      })
    }
  })
})

// 搜索表单
const searchItems = [
  {
    title: '题型',
    field: 'typeId',
    span: 6,
    itemRender: {
      name: mj_form_select,
      options: computed(() => channelTypeOptions.value),
      props: { clearable: true },
      events: {
        change: refresh,
      },
    },
  },
] as any
const searchForm = {
  items: searchItems,
  data: {},
} as MjFormProps

// 表格
const listRef = ref()
const listProps = {
  beforeLoadData(params) {
    params.catalogIds = chapterRef.value?.getCheckedKeys(false, false)
    return params
  },
} as MjListProps
</script>

<template>
  <div class="question-bank">
    <!-- 目录 -->
    <div class="dir-wrapper">
      <div class="chapter-wrapper">
        <el-input v-model="chapterSearchText" placeholder="可以搜索章节" />
        <el-tree
          class="tree"
          :data="chapters"
          @check="handleChapterCheck"
          ref="chapterRef"
          node-key="id"
          show-checkbox
          check-strictly
          :props="{
            children: 'children',
            label: 'name',
          }"
          :filter-node-method="chapterFilter"
        />
      </div>
    </div>
    <!-- 题目 -->
    <div class="questions-wrapper">
      <div class="questions">
        <mj-list
          ref="listRef"
          v-bind="listProps"
          :search-form="searchForm"
          :service="xkwQuestionTitleService"
        >
          <template #item="{ row, index }">
            <paper-question-item :index="index + 1" :question="row" />
          </template>
        </mj-list>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.question-bank {
  display: flex;
  gap: 16px;
  justify-content: space-between;
  height: 100%;

  .dir-wrapper {
    width: 280px;
    padding-right: 10px;
    overflow: hidden;
    background-color: #fff;
    border-radius: 4px;

    .chapter-wrapper {
      display: flex;
      flex-direction: column;

      :deep(.el-input) {
        .el-input__wrapper {
          height: 50px;
          background-color: #fff !important;
          border-radius: 0 !important;
        }
      }
    }

    :deep(.el-tree) {
      .el-tree-node__content {
        height: auto;
      }

      .el-text.is-truncated {
        white-space: wrap;
      }
    }
  }

  .questions-wrapper {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 16px;
    height: 100%;

    .questions {
      flex: 1;
      height: 100%;
      overflow: hidden;
    }
  }
}
</style>
