<script setup lang="ts">
import { checkPermission } from '@/utils/permission'
import CheckWork from '../components/CheckWork.vue'
import { getWorkList, getSearchList } from '../api'
const appList = ref()
const isShowCheckDialog = ref(false)
const id = ref('')
const course_id = ref('')
const searchCourseList: any = ref([])
const searchClassList: any = ref([])

const listOptions = $computed(() => {
  return {
    remote: {
      httpRequest: getWorkList,
      params: {
        course_id: '',
        class_id: ''
      },
      beforeRequest(params: any) {
        if (params.course_id !== '') {
          course_id.value = params.course_id
        }

        return params
      }
    },
    filters: [
      {
        type: 'select',
        prop: 'course_id',
        label: '所属课程：',
        placeholder: '所属课程',
        options: searchCourseList.value,
        labelKey: 'name',
        valueKey: 'id',
        filterable: true,
        remote: true
      },
      {
        type: 'select',
        prop: 'class_id',
        label: '班级名称：',
        placeholder: '班级名称',
        options: searchClassList.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: 'name', align: 'center' },
      { label: '学号', prop: 'sno_number', align: 'center' },
      {
        label: '提交时间',
        prop: 'created_at',
        align: 'center',
        computed(row: any) {
          return row.row.created_at || '-'
        }
      },
      {
        label: '批改人',
        prop: 'checker_id_name',
        align: 'center',
        computed(row: any) {
          return row.row.checker_id_name || '-'
        }
      },
      {
        label: '批改时间',
        prop: 'marking_time',
        align: 'center',
        computed(row: any) {
          return row.row.marking_time || '-'
        }
      },
      {
        label: '得分',
        prop: 'score',
        align: 'center',
        computed(row: any) {
          if (row.row.score === '0.00' || row.row.score === null) {
            return '-'
          } else if (row.row.score > '0.00') {
            return row.row.score
          }
        }
      },
      { label: '操作', slots: 'table-operate', align: 'center', fixed: 'right' }
    ]
  }
})
const handleCheckPaper = (row: any) => {
  id.value = row.job_id
  isShowCheckDialog.value = true
}
onMounted(() => {
  checkPermission('v1-teaching-job-search-list') && handleGetSearchCourseList()
  // checkPermission('v1-teaching-job-search-list') && handleGetSearchClassList()
})
// 获取课程搜索列表
const handleGetSearchCourseList = () => {
  getSearchList({ type: 'course', search_id: '' }).then(res => {
    searchCourseList.value = res.data
  })
}
// 获取班级搜索列表
const handleGetSearchClassList = () => {
  getSearchList({ type: 'class', search_id: course_id.value }).then(res => {
    searchClassList.value = res.data
  })
}
// 页面刷新
const handleFresh = () => {
  appList.value.refetch()
}
// 课程信息不为空的时候获取班级搜索列表
watch(
  () => course_id.value,
  value => {
    if (value !== undefined) {
      checkPermission('v1-teaching-job-search-list') && handleGetSearchClassList()
    }
  }
)
</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-if="row.created_at !== null"
            v-permission="'v1-teaching-job-update' || 'v1-teaching-job-view'"
            >批改</el-link
          >
          <div v-else>-</div>
        </el-space>
      </template>
    </AppList>
  </AppCard>
  <CheckWork
    v-if="isShowCheckDialog === true"
    v-model:isShowCheckDialog="isShowCheckDialog"
    :id="id"
    @create="handleFresh"
  />
</template>
