<script lang="ts" setup>
import { ElMessage } from 'element-plus'
import { getRelationClassStuList, relationClassStu } from '../api'
const emit = defineEmits<Emits>()

const props = defineProps({
  isAddStuDialog: {
    type: Boolean
  },
  id: {
    type: String
  }
})
interface Emits {
  (e: 'update:isAddStuDialog', isAddStuDialog: boolean): void
  (e: 'create'): void
}

const classInfo: any = ref({}) // 班级信息
const multiSelection = ref([])
const listOptions = $computed(() => {
  return {
    remote: {
      httpRequest: getRelationClassStuList,
      params: { name: '', class_id: props.id },
      callback(data: any) {
        classInfo.value = data.info
        return { list: data.list, total: data.total }
      }
    },
    filters: [{ type: 'input', prop: 'name', label: '学生姓名：', placeholder: '学生姓名' }],
    columns: [
      { type: 'selection' },
      { label: '序号', type: 'index', align: 'center' },
      { label: '学号', prop: 'sno_number', align: 'center' },
      { label: '姓名', prop: 'name', align: 'center' },
      { label: '性别', prop: 'gender_name', align: 'center' },
      { label: '出生年月', prop: 'birthday', align: 'center' },
      { label: '省', prop: 'province_name', align: 'center' },
      { label: '市', prop: 'city_name', align: 'center' },
      { label: '县', prop: 'county_name', align: 'center' },
      { label: '联系电话', prop: 'mobile', align: 'center' },
      { label: '部门/学校', prop: 'organ_id_name', align: 'center' },
      { label: '专业', prop: 'specialty_id_name', align: 'center' },
      { label: '班级', prop: 'class_id_name', align: 'center' }
    ]
  }
})
const handleSelectChange = (val: any) => {
  multiSelection.value = val
}
const handleAddStu = () => {
  const params: any = {
    class_id: props.id,
    students_id: multiSelection.value.map((item: any) => item.id).toString(),
    type: 'add'
  }
  relationClassStu(params).then(() => {
    ElMessage.success('关联学生成功')
    emit('update:isAddStuDialog', false)
    emit('create')
  })
}

const handleCancel = () => {
  emit('update:isAddStuDialog', false)
}
</script>
<template>
  <el-dialog :model-value="isAddStuDialog" draggable title="添加班级学生" width="60%" :before-close="handleCancel">
    <div style="overflow-y: auto; height: 70vh">
      <el-descriptions>
        <el-descriptions-item label="班级代码:">{{ classInfo.code }}</el-descriptions-item>
        <el-descriptions-item label="班级名称">{{ classInfo.name }}</el-descriptions-item>
        <el-descriptions-item label="所属部门/学校:">{{ classInfo.organ_id_name }}</el-descriptions-item>
        <el-descriptions-item label="班  主  任:">
          {{ classInfo.teacher_id_name }}
        </el-descriptions-item>
        <el-descriptions-item label="所属专业:">{{ classInfo.specialty_id_name }}</el-descriptions-item>
        <el-descriptions-item label="入学年份:">{{ classInfo.start_year_name }}</el-descriptions-item>
      </el-descriptions>
      <AppList
        v-bind="listOptions"
        ref="appList"
        border
        stripe
        style="margin-top: 30px"
        @selection-change="handleSelectChange"
      >
        <template #header-aside>
          <el-button type="primary" round @click="handleAddStu" v-permission="'v1-learning-class-add-students'"
            >关联选择学生</el-button
          ></template
        >
      </AppList>
    </div>
    <!-- 新增学生 -->
  </el-dialog>
</template>
