<script setup lang="ts">
import { checkPermission } from '@/utils/permission'
import { getPaperStuList, getSearchList } from '../api'

const router = useRouter()
const route = useRoute()
const appList = ref()
const classId = ref('')
const classList: any = ref([])
const stuList: any = ref([])
const listOptions = $computed(() => {
  return {
    remote: {
      httpRequest: getPaperStuList,
      params: {
        course_id: route.query.course_id,
        paper_id: route.query.paper_id,
        paper_use: route.query.paper_use,
        class_id: '',
        student_id: ''
      },
      beforeRequest(params: any) {
        if (params.class_id !== '') {
          classId.value = params.class_id
        }

        return params
      }
    },
    filters: [
      {
        type: 'select',
        prop: 'class_id',
        label: '所属班级：',
        placeholder: '所属班级',
        options: classList.value,
        labelKey: 'name',
        valueKey: 'id',
        filterable: true,
        remote: true
      },
      {
        type: 'select',
        prop: 'student_id',
        label: '所属学生：',
        placeholder: '所属学生',
        options: stuList.value,
        labelKey: 'name',
        valueKey: 'id',
        filterable: true,
        remote: true
      }
    ],
    columns: [
      { label: '序号', type: 'index', align: 'center', width: '100px' },
      { label: '所属课程', prop: 'course_name', align: 'center' },
      { label: '所属班级', prop: 'class_name', align: 'center' },
      { label: '学生姓名', prop: 'student_name', align: 'center' },
      { label: '试卷名称', prop: 'paper_name', align: 'center' },
      { label: '得分', prop: 'score', align: 'center' },
      { label: '是否批改', prop: 'status_name', align: 'center' },
      { label: '更新时间', prop: 'updated_at', align: 'center', width: 200 },
      { label: '操作', slots: 'table-operate', align: 'center', width: 200, fixed: 'right' }
    ]
  }
})
onMounted(() => {
  checkPermission('v1-teaching-paper-search-list') && handleGetClassList()
})
// 批改试卷
const handleCheckPaper = (row: any) => {
  router.push({ path: '/teach/view', query: { id: row.id } })
}
// 获取学生搜索列表
const handleGetStuList = () => {
  const params: any = { type: 'class', search_id: classId.value }
  getSearchList(params).then((res: any) => {
    stuList.value = res.data
  })
}
// 获取班级搜索列表
const handleGetClassList = () => {
  const params: any = { type: 'class', search_id: route.query.course_id }
  getSearchList(params).then((res: any) => {
    classList.value = res.data
  })
}
watch(
  () => classId.value,
  value => {
    if (value !== undefined) {
      checkPermission('v1-teaching-paper-search-list') && handleGetStuList()
    }
  }
)
</script>

<template>
  <AppCard title="批改试卷">
    <AppList v-bind="listOptions" ref="appList" border stripe>
      <template #table-operate="{ row }">
        <el-space>
          <el-link
            type="primary"
            plain
            @click="handleCheckPaper(row)"
            v-permission="'v1-teaching-paper-update' || 'v1-teaching-paper-view'"
            >批改试卷</el-link
          >
        </el-space>
      </template>
    </AppList>
  </AppCard>
</template>
