<script setup lang="ts">
import type { RecordItem } from '../types'
import { Upload, Promotion, Download, Refresh } from '@element-plus/icons-vue'
import AppList from '@/components/base/AppList.vue'
import { getExperimentRecordList } from '../api'
import { useFilterList } from '../composables/useFilterList'
import { useCookies } from '@vueuse/integrations/useCookies'

const ScoreDialog = defineAsyncComponent(() => import('../components/ScoreDialog.vue'))
const ImportDialog = defineAsyncComponent(() => import('../components/ImportDialog.vue'))
const ExportDialog = defineAsyncComponent(() => import('../components/ExportDialog.vue'))
const SyncExamDialog = defineAsyncComponent(() => import('../components/SyncExamDialog.vue'))
const ScoreLogDialog = defineAsyncComponent(() => import('../components/ScoreLogDialog.vue'))

const { courses, experiments, specialties, classes } = useFilterList()
const cookies = useCookies(['TGC'])
const LAB_URL = `${import.meta.env.VITE_LAB_URL}&token=${cookies.get('TGC')}`

const route = useRoute()

const appList = $ref<InstanceType<typeof AppList> | null>(null)

const params = reactive({
  student_name: '',
  course_id: '',
  experiment_id: (route.query.experiment_id as string) || '',
  specialty_id: '',
  class_id: ''
})
const classList = $computed(() => {
  const specialty = specialties.value.find(item => item.id === params.specialty_id)
  if (specialty) {
    return classes.value.filter(item => item.specialty_id === specialty.id)
  }
  return classes.value
})

// 列表配置
const listOptions = $computed(() => {
  return {
    remote: {
      httpRequest: getExperimentRecordList,
      params,
      beforeRequest(requestParams: any) {
        if (params.specialty_id !== requestParams.specialty_id) {
          requestParams.class_id = ''
        }
        params.specialty_id = requestParams.specialty_id || ''
        return requestParams
      }
    },
    filterForm: { labelWidth: 100 },
    filters: [
      {
        type: 'select',
        prop: 'course_id',
        label: '实验课程名称',
        placeholder: '请选择实验课程名称',
        options: courses.value,
        labelKey: 'name',
        valueKey: 'id'
      },
      {
        type: 'select',
        prop: 'experiment_id',
        label: '实验名称',
        placeholder: '请选择实验名称',
        options: experiments.value,
        labelKey: 'name',
        valueKey: 'id'
      },
      {
        type: 'select',
        prop: 'specialty_id',
        label: '专业',
        placeholder: '请选择专业',
        options: specialties.value,
        labelKey: 'name',
        valueKey: 'id'
      },
      {
        type: 'select',
        prop: 'class_id',
        label: '班级',
        placeholder: '请选择班级',
        options: classList,
        labelKey: 'name',
        valueKey: 'id'
      },
      { type: 'input', prop: 'student_name', label: '学生姓名', placeholder: '请输入学生姓名' }
    ],
    columns: [
      { label: '序号', type: 'index', width: 60 },
      { label: '所属专业', prop: 'specialty_name' },
      { label: '所属班级', prop: 'class_name' },
      { label: '姓名', prop: 'student_name' },
      { label: '学号', prop: 'sno_number' },
      { label: '实验名称', prop: 'experiment_name' },
      { label: '提交状态', prop: 'status_name', slots: 'table-status' },
      { label: '实验成绩', prop: 'score', slots: 'table-score' },
      { label: '更新时间', prop: 'commit_time' },
      { label: '操作', slots: 'table-x', width: 210 }
    ]
  }
})
const importVisible = $ref(false)
let dialogVisible = $ref(false)
let scoreLogVisible = $ref(false)
const rowData = ref<RecordItem>()
// 评分
function handleScore(row: RecordItem) {
  rowData.value = row
  dialogVisible = true
}
// 历史成绩
function handleScoreLog(row: RecordItem) {
  rowData.value = row
  scoreLogVisible = true
}
function onUpdateSuccess() {
  appList?.refetch()
}

const exportVisible = ref(false)
const syncVisible = ref(false)
</script>

<template>
  <AppCard title="实验成绩管理">
    <AppList v-bind="listOptions" ref="appList">
      <template #header-buttons>
        <el-row justify="space-between">
          <div>
            <el-button type="primary" round :icon="Upload" @click="importVisible = true" v-permission="'v1-teacher-record-upload'">批量导入</el-button>
            <el-button type="primary" round :icon="Download" @click="exportVisible = true" v-permission="'v1-teacher-record-download'">批量导出</el-button>
            <el-button type="primary" round :icon="Refresh" @click="syncVisible = true" v-permission="'v1-teacher-record-sync-theory-score'"
              >同步理论成绩</el-button
            >
          </div>
          <a :href="LAB_URL" target="_blank">
            <el-button type="primary" round :icon="Promotion">进入实验室</el-button>
          </a>
        </el-row>
      </template>
      <template #table-status="{ row }">
        <span :class="{ 'is-success': row.status !== 0 }">{{ row.status_name }}</span>
      </template>
      <template #table-score="{ row }">
        <span :class="{ 'is-info': row.score !== '--' }">{{ row.score }}</span>
      </template>
      <template #table-x="{ row }">
        <el-button text type="primary" v-if="row.status === 1 || row.status === 2" @click="handleScore(row)" v-permission="'v1-teacher-record-check'"
          >打分</el-button
        >
        <el-button text type="primary" v-if="row.has_score_log" @click="handleScoreLog(row)" v-permission="'v1-teacher-record-check'">查看历史成绩</el-button>
      </template>
    </AppList>
  </AppCard>
  <!-- 评分 -->
  <ScoreDialog v-model="dialogVisible" :data="rowData" @update="onUpdateSuccess" v-if="dialogVisible && rowData"></ScoreDialog>
  <!-- 历史成绩 -->
  <ScoreLogDialog v-model="scoreLogVisible" :data="rowData" v-if="scoreLogVisible && rowData"></ScoreLogDialog>
  <!-- 批量导入 -->
  <ImportDialog v-model="importVisible" @update="onUpdateSuccess" v-if="importVisible"></ImportDialog>
  <!-- 批量导出 -->
  <ExportDialog v-model="exportVisible" v-if="exportVisible"></ExportDialog>
  <!-- 同步理论成绩 -->
  <SyncExamDialog v-model="syncVisible" v-if="syncVisible"></SyncExamDialog>
</template>

<style lang="scss" scoped>
.is-success {
  color: #63a103;
}
.is-info {
  color: #b18862;
}
</style>
