<!-- eslint-disable unicorn/prefer-ternary -->
<script setup lang="ts">
import { studentService } from '#/api/service/org/student'
import { paperRecordService } from '#/api/service/question-bank/paper-record'

defineOptions({ name: 'MjFormTargetPlugin' })

const props = withDefaults(
  defineProps<{
    modelValue?: any
    schoolId?: any
  }>(),
  {
    modelValue: {},
    schoolId: '',
  },
)

const emits = defineEmits(['update:modelValue'])
const value = computed({
  get() {
    return props.modelValue
  },
  async set(newVal) {
    emits('update:modelValue', newVal)
  },
})

export type Class = {
  id: any
  name: any
}

// 发布对象类型
const target_type_user = '1'
const target_type_class = '2'
const target_type_options = [
  {
    label: '班级',
    value: target_type_class,
  },
  {
    label: '学员',
    value: target_type_user,
  },
]
const type = ref(target_type_class)

// 班级列表
const classList = ref([] as Class[])
// let classMap = {} as Record<string, Class>
const checkedClassIds = ref([] as any[])
const classLoading = ref(false)

// 用户列表
const studentClassId = ref('')
const studentList = ref([] as any[])
const checkedStudentIds = ref([] as any[])
const studentLoading = ref(false)

watch(
  () => props.schoolId,
  async (newVal) => {
    if (!newVal) return
    classLoading.value = true
    try {
      const res = await paperRecordService.getClassList()
      classList.value = res
      // classMap = obj.list2map(res.rows, 'id', 'name')
      studentClassId.value = res[0]?.id || ''
    } finally {
      classLoading.value = false
    }
  },
  {
    immediate: true,
  },
)

watch(
  () => studentClassId.value,
  async (newVal) => {
    if (!newVal) return
    studentLoading.value = true
    try {
      const res = await studentService.getClassStudents(newVal)
      studentList.value = res.rows
    } finally {
      studentLoading.value = false
    }
  },
)

watch(
  [
    () => type.value,
    () => checkedClassIds.value,
    () => checkedStudentIds.value,
  ],
  (val) => {
    if (!val) return
    updateValue()
  },
)

function updateValue() {
  let typeIds = undefined as any
  if (type.value === target_type_class) {
    // 班级
    typeIds = checkedClassIds.value
  } else {
    // 用户
    typeIds = checkedStudentIds.value
  }
  value.value = typeIds?.length
    ? {
        targetType: type.value,
        typeIds,
      }
    : undefined
}
</script>

<template>
  <div class="select-target">
    <div class="type-wrapper">
      <el-radio-group v-model="type">
        <el-radio
          v-for="item in target_type_options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
          {{ item.label }}
        </el-radio>
      </el-radio-group>
    </div>
    <div class="id-wrapper">
      <div
        v-if="type === target_type_class"
        v-loading="classLoading"
        class="target-class"
      >
        <mj-check-group
          v-model="checkedClassIds"
          :options="classList"
          value-key="id"
          label-key="name"
        />
      </div>
      <div
        v-else
        v-loading="studentLoading || classLoading"
        class="target-user"
      >
        <el-select v-model="studentClassId">
          <el-option
            v-for="item in classList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
        <mj-check-group
          v-model="checkedStudentIds"
          :options="studentList"
          value-key="id"
          label-key="name"
        />
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.select-target {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 300px;
  padding: 12px;
  overflow-y: auto;
}

.target-user {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
</style>
