<script lang="ts" setup>
import { ElMessage, ElMessageBox } from 'element-plus'
import AddStudentDialog from './AddStudentDialog.vue'
import AddStudent from '../../student/components/AddStudent.vue'
import { getClassStuList, relationClassStu } from '../api'
const emit = defineEmits<Emits>()
const appList = ref()
const isAddStuDialog = ref(false)
const props = defineProps({
  isShowClassStuDialog: {
    type: Boolean
  },
  id: {
    type: String
  }
})
interface Emits {
  (e: 'update:isShowClassStuDialog', isShowClassStuDialog: boolean): void
}
const isShowAddDialog = ref(false)
const title = ref('')
const id = ref('')
const classInfo: any = ref({})
const listOptions = $computed(() => {
  return {
    remote: {
      httpRequest: getClassStuList,
      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: [
      { label: '序号', type: 'index', align: 'center' },
      { label: '学号', prop: 'sno_number', align: 'center', minWidth: '200' },
      { label: '姓名', prop: 'name', align: 'center' },
      { label: '性别', prop: 'gender_name', align: 'center' },
      { label: '有效状态', prop: 'status_name', align: 'center' },
      { label: '更新时间', prop: 'updated_time', align: 'center', minWidth: '200' },
      { label: '操作', slots: 'table-operate', align: 'center', minWidth: '200', fixed: 'right' }
    ]
  }
})
const handleAddStu = () => {
  isAddStuDialog.value = true
}
const handleDel = (row: any) => {
  const params: any = {
    class_id: props.id,
    students_id: row.id,
    type: 'delete'
  }
  ElMessageBox.confirm('确定要删除吗？', '提示').then(() => {
    relationClassStu(params).then(() => {
      ElMessage.success('移除学生成功')
      handleRefresh()
    })
  })
}
const handleDetail = (row: any) => {
  id.value = row.id
  isShowAddDialog.value = true
  title.value = '查看详情'
}
const handleCancel = () => {
  emit('update:isShowClassStuDialog', false)
}
const handleRefresh = () => {
  appList.value.refetch()
}
</script>
<template>
  <el-dialog :model-value="isShowClassStuDialog" draggable title="班级学生" width="70%" :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">
        <template #header-aside>
          <el-button type="primary" round @click="handleAddStu" v-permission="'v1-learning-class-add-students'"
            >添加学生</el-button
          >
        </template>
        <template #table-operate="{ row }">
          <el-space>
            <el-link type="primary" plain @click="handleDetail(row)">查看</el-link>
            <el-link plain @click="handleDel(row)">移除</el-link>
          </el-space>
        </template>
      </AppList>
    </div>
    <AddStudentDialog
      v-model:isAddStuDialog="isAddStuDialog"
      v-if="isAddStuDialog === true"
      :id="props.id"
      @create="handleRefresh"
    />
    <AddStudent
      v-if="isShowAddDialog === true"
      v-model:isShowAddDialog="isShowAddDialog"
      :id="id"
      :title="title"
      @create="handleRefresh"
      :isEdit="'2'"
    />
  </el-dialog>
</template>
