<script setup lang="ts">
import type { ClassItem } from '../types'

import { getClassStudentList } from '../api'

interface Props {
  experimentId: string
  data: ClassItem
}

const props = defineProps<Props>()

// 列表配置
const listOptions = {
  remote: {
    httpRequest: getClassStudentList,
    params: { class_id: props.data?.id, experiment_id: props.experimentId },
    callback(res: any) {
      questions.value = res.questions
      return res
    }
  }
}

const questions = ref<{ id: string }[]>([])
const questionColumns = computed(() => {
  return questions.value.map((item, index) => {
    return {
      prop: item.id,
      label: `第${index + 1}题`,
      computed({ row }: any) {
        const value = row[item.id]
        if (value === '进行中') return '<span style="color:#b20f3c">进行中</span>'
        if (value === '已完成') return '<span style="color:#b8b5b5">已完成</span>'
        return value
      }
    }
  })
})

const columns = computed(() => {
  return [
    { label: '序号', type: 'index', width: 60 },
    { label: '学号', prop: 'id_number' },
    { label: '姓名', prop: 'name' },
    { label: '手机号', prop: 'mobile' },
    { label: '性别', prop: 'gender_name' },
    { label: '所属部门/学校', prop: 'organ_id_name' },
    { label: '专业', prop: 'specialty_id_name' },
    { label: '班级', prop: 'class_id_name' }
  ].concat(questionColumns.value)
})
</script>
<template>
  <el-dialog title="查看班级学生">
    <AppList v-bind="listOptions" :columns="columns"></AppList>
    <el-row justify="center">
      <el-button round auto-insert-space @click="$emit('update:modelValue', false)">关闭</el-button>
    </el-row>
  </el-dialog>
</template>
