<script setup lang="ts">
import Chapter from './Chapter.vue'
import { debounce } from '@/hooks'
import { useRoute } from 'vue-router'

const props = withDefaults(
  defineProps<{
    modelValue: boolean
    subjectId: any
    data: anyObj
  }>(),
  {
    modelValue: false,
    subjectId: '',
    data: () => ({}),
  },
)
const emit = defineEmits(['update:modelValue', 'ok'])

const route = useRoute()

const diaTitle = computed(() => (route.params.type === '0' ? '章节组卷范围' : '知识点组卷范围'))

const subtitle = ref('')
async function onOk() {
  let selectObj = ChapterRef.value?.getSelectObj()
  let chapterList = ChapterRef.value?.chapterList
  if (route.params.type === '1') {
    selectObj = selectObj.map((i: anyObj) => ({
      id: i.id,
      name: i.name,
      knowledgeVoList: i.children,
      selected: i.selected,
    }))
  }
  emit('update:modelValue', false)
  emit('ok', selectObj, chapterList, ChapterRef.value?.getProgress())
}

const debounceOk = debounce(onOk, 1000)

const ChapterRef = ref()
const version = ref<anyObj>({})
const selectTextbook = ref<anyObj>({})
async function onOpen() {
  version.value = {
    id: props.data.bookVersionId,
    name: props.data.bookVersionName,
  }
  selectTextbook.value = {
    id: props.data.textBookId,
    name: props.data.textBookName,
    chapter: props.data.chapter,
  }
  subtitle.value = `${version.value.name || ''}${selectTextbook.value.name}`
  await nextTick()
  ChapterRef.value.init()
}
</script>
<template>
  <el-dialog
    :modelValue="modelValue"
    class="textbook-dia"
    :show-close="false"
    destroy-on-close
    align-center
    v-bind="$attrs"
    @update:modelValue="emit('update:modelValue', $event)"
    @open="onOpen"
  >
    <board-bg class="body">
      <div class="content">
        <div class="content-progress">
          <Chapter ref="ChapterRef" :data="selectTextbook" :subtitle="subtitle" :title="diaTitle" />
        </div>
      </div>
      <div class="footer is-suspension">
        <mj-button type="warn" width="306" height="88" size="48" @click="debounceOk"
          >确认</mj-button
        >
      </div>
    </board-bg>
  </el-dialog>
</template>
<style lang="scss">
.textbook-dia {
  width: 1600px;
  height: 92vh;
  margin: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;

  .el-dialog__header {
    display: none;
  }

  .el-dialog__body {
    height: 100%;
    padding: 0;
    position: relative;

    .body {
      height: 100%;
      padding: 0;
      .content {
        width: 100%;
        .tips {
          width: 100%;
          height: auto;
          padding: 4.33vh 0 $space-3;
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          justify-content: center;
          font-family: $font-special;
          font-size: $font-size-7;
          color: $font-tag-color;
          .small-tip {
            width: 100%;
            font-family: OPPOSans;
            text-align: center;
            font-size: $font-size-7;
            line-height: 1.5em;
            margin-top: $space-1_h;
          }
        }
      }
      .footer {
        text-align: center;
        &.is-suspension {
          position: absolute;
          bottom: 3.17vh;
          left: 50%;
          transform: translateX(-50%);
        }
      }
    }
  }
}
</style>
