<script setup lang="ts">
import {
  getSubjectsByStage,
  stage_xiaoxue,
  stages,
  subject_map,
  useBasicData,
} from '#/store/basic-data'

defineOptions({ name: 'TextbookSelect' })
const props = withDefaults(
  defineProps<{
    data?: any
    modelValue?: boolean
  }>(),
  {
    modelValue: false,
    data: {},
  },
)
const emits = defineEmits(['update:modelValue', 'ok'])
const show = computed({
  get() {
    return props.modelValue
  },
  set(newVal) {
    emits('update:modelValue', newVal)
    if (newVal) {
      stageId.value = undefined
      initData = props.data
      if (initData?.stageId) {
        nextTick(() => {
          stageId.value = initData.stageId
        })
      } else {
        nextTick(() => {
          stageId.value = `${stage_xiaoxue}`
        })
      }
    }
  },
})

const { getTextbooks } = useBasicData()

// 用于初始化的数据
let initData = undefined as any

// 阶段
const stageId = ref(undefined as any)
function handleStage(stageValue: any) {
  initData = undefined
  stageId.value = stageValue
}
function stageChange() {
  subjectId.value = undefined
  if (stageId.value) {
    subjectOptions.value = getSubjectsByStage(stageId.value)
    nextTick(() => {
      subjectId.value = initData?.subjectId || subjectOptions.value[0].value
    })
  } else {
    subjectOptions.value = []
  }
}

function getById(items: any, id: any) {
  for (const v of items) {
    if (v.id === id) return v
  }
  return undefined
}

// 学科
const subjectOptions = ref([] as any)
const subjectId = ref('' as any)
function handleSubject(subjectValue: any) {
  initData = undefined
  subjectId.value = subjectValue
}
async function subjectChange() {
  version.value = undefined
  if (subjectId.value) {
    versions.value = await getTextbooks(stageId.value, subjectId.value)
    nextTick(() => {
      version.value =
        getById(versions.value, initData?.versionId) || versions.value[0]
    })
  } else {
    versions.value = []
  }
}

// 教材
const versions = ref([] as any)
const version = ref({} as any)
function handleVersion(versionValue: any) {
  initData = undefined
  version.value = versionValue
}
function versionChange() {
  // eslint-disable-next-line unicorn/prefer-ternary
  if (version.value?.id) {
    books.value = version.value.textBookVoList
  } else {
    books.value = []
  }
  book.value = getById(books.value, initData?.bookId)
}

// 年级
const books = ref([] as any)
const book = ref('' as any)
function handleBook(bookValue: any) {
  initData = undefined
  book.value = bookValue
  emits('ok', {
    stageId: stageId.value,
    subjectId: subjectId.value,
    versionId: version.value.id,
    bookId: book.value.id,
    title: `${subject_map[subjectId.value]}-${version.value.name}-${book.value.displayName}`,
  })
  emits('update:modelValue', false)
}

// 监控
watch(() => stageId.value, stageChange, {
  immediate: false,
})
watch(() => subjectId.value, subjectChange, {
  immediate: false,
})
watch(() => version.value, versionChange, {
  immediate: false,
})
</script>

<template>
  <mj-modal
    v-model="show"
    :options="{
      title: '教材选择',
      width: '86%',
      height: '80%',
    }"
  >
    <div class="textbook-select">
      <div class="section">
        <span class="title">阶段</span>
        <div class="items">
          <div
            v-for="item in stages"
            :key="item.value"
            class="item"
            :class="{
              active: stageId === item.value,
            }"
            @click="handleStage(item.value)"
          >
            {{ item.label }}
          </div>
        </div>
      </div>
      <hr />
      <div class="section">
        <span class="title">学科</span>
        <div class="items">
          <div
            v-for="item in subjectOptions"
            :key="item.value"
            class="item"
            :class="{
              active: subjectId === item.value,
            }"
            @click="handleSubject(item.value)"
          >
            {{ item.label }}
          </div>
        </div>
      </div>
      <hr />
      <div class="section">
        <span class="title">教材</span>
        <div class="items">
          <div
            v-for="item in versions"
            :key="item.id"
            class="item"
            :class="{
              active: version?.id === item.id,
            }"
            @click="handleVersion(item)"
          >
            {{ item.name }}
          </div>
        </div>
      </div>
      <hr />
      <div class="section">
        <span class="title">年级</span>
        <div class="items">
          <div
            v-for="item in books"
            :key="item.id"
            class="item"
            :class="{
              active: book?.id === item.id,
            }"
            @click="handleBook(item)"
          >
            {{ item.displayName }}
          </div>
        </div>
      </div>
    </div>
  </mj-modal>
</template>

<style lang="scss" scoped>
.textbook-select {
  padding: 0 24px;

  .section {
    display: flex;
    padding: 20px 0;

    .title {
      margin-right: 20px;
      font-size: 18px;
      font-weight: bold;
    }

    .items {
      display: flex;
      flex: 1;
      flex-wrap: wrap;
      gap: 20px;
      font-size: 16px;

      .item {
        cursor: pointer;

        &.active {
          color: rgb(0 107 230);
        }
      }
    }
  }
}
</style>
