<script setup>
import LiveProductCategory from '@/components/LiveProductCategory.vue'
import { getScoreList, publishAll } from '../api'
import { ElMessage } from 'element-plus'
import { useIntervalFn } from '@vueuse/core'
import { useScore } from '../composables/useScore'
import { useUserStore } from '@/stores/user'
const userStore = useUserStore()

const { isLoading, handleAIScoreList, handleResetScoreStatus } = useScore()

const route = useRoute()
const appList = ref(null)

defineProps({ hasAI: { type: Boolean, default: true } })
// 刷新
const handleRefresh = () => {
  appList.value?.refetch()
}
const listParams = reactive({ name: '', check_status: '' })

// 列表配置
const listOptions = computed(() => {
  return {
    remote: { httpRequest: getScoreList, params: listParams },
    filters: [
      { label: '姓名', prop: 'name', type: 'input' },
      {
        label: '状态',
        prop: 'check_status',
        type: 'select',
        options: [
          { label: '暂未评分', value: '0' },
          { label: '评分中', value: '1' },
          { label: '已评分', value: '2' },
        ],
      },
    ],
    columns: [
      { label: '序号', type: 'index', width: 60 },
      { label: 'ID', prop: 'student_id' },
      { label: '姓名', prop: 'student_name' },
      // { label: '专业', prop: 'specialty_name' },
      // { label: '班级', prop: 'class_name' },
      { label: '成绩', prop: 'score_display' },
      { label: '状态', prop: 'check_status_name' },
      {
        label: '评分人',
        prop: 'checker_name',
        computed: ({ row }) => {
          try {
            const scores = row.score_details ? JSON.parse(row.score_details) : []
            return Array.isArray(scores)
              ? scores
                  .filter((item) => !item.is_ai)
                  .map((item) => `${item.checker_name}(${item.total_score})`)
                  .join('<br/>')
              : ''
          } catch (error) {
            console.log('评分人解析失败', error)
            return ''
          }
        },
      },
      { label: '提交时间', prop: 'commit_time' },
      { label: '批改时间', prop: 'check_time' },
      { label: '操作', slots: 'table-x', width: 120 },
    ],
  }
})

const handleExport = () => {
  window.open(`/api/lab/v1/experiment/live-student-record/export?experiment_id=${route.query.experiment_id}`)
}

const handlePublishScore = () => {
  publishAll().then(() => {
    ElMessage.success('发布成绩成功')
    handleRefresh()
  })
}

useIntervalFn(() => {
  handleRefresh()
}, 2000)
</script>

<template>
  <AppCard title="成绩管理">
    <AppList v-bind="listOptions" :hasLoading="false" ref="appList">
      <template #header-buttons>
        <el-row justify="space-between">
          <el-button type="primary" @click="handleExport">导出成绩</el-button>
          <div>
            <el-button type="primary" @click="handleAIScoreList" :loading="isLoading" v-if="hasAI"
              >AI一键评分</el-button
            >
            <el-button type="primary" @click="handlePublishScore" v-if="false">一键发布成绩</el-button>
          </div>
        </el-row>
      </template>

      <template #filter-category>
        <LiveProductCategory v-model="listParams.live_commodity_type_id" @change="handleRefresh"></LiveProductCategory>
      </template>
      <template #table-x="{ row }">
        <el-button text type="primary" v-if="row.check_status != '1'">
          <router-link :to="{ path: 'score/view', query: { ...$route.query, id: row.id } }">评分</router-link>
        </el-button>
        <el-button text type="primary" @click="() => handleResetScoreStatus(row.id)" v-if="userStore.isAdmin"
          >重置</el-button
        >
      </template>
    </AppList>
  </AppCard>
</template>
