<script setup lang="ts">
import type { RecordItem } from '../types'
import AppList from '@/components/base/AppList.vue'
import { getExperimentRecord } from '../api'

interface Props {
  data: RecordItem
}
const props = defineProps<Props>()

let detail = $ref<any>()
const dataList = $computed(() => {
  return (
    detail?.score_log.map((item: any) => {
      const customData = item.score_details.reduce((result: any, item: any) => {
        result[item.id] = item.commit_score
        return result
      }, {})
      return { ...item, ...customData }
    }) || []
  )
})
function fetchInfo() {
  getExperimentRecord({ experiment_id: props.data.experiment_id, student_id: props.data.student_id }).then(res => {
    detail = res.data
  })
}
watchEffect(() => {
  fetchInfo()
})

const appList = $ref<InstanceType<typeof AppList> | null>(null)
// 列表配置
const listOptions = $computed(() => {
  let customColumns: any = []
  if (detail?.score_details) {
    customColumns = Object.values(detail?.score_details)
      .filter((item: any) => item.id)
      .map((item: any) => {
        return { prop: item.id, label: `${item.name}成绩` }
      })
  }
  return {
    columns: [
      { label: '序号', type: 'index', width: 60 },
      { label: '姓名', prop: 'student_name', slots: 'table-name' },
      { label: '学号', prop: 'sno_number', slots: 'table-number' },
      ...customColumns,
      { label: '评分时间', prop: 'check_time' },
      { label: '评分人', prop: 'checker_id_name' }
    ],
    data: dataList
  }
})
</script>

<template>
  <el-dialog title="查看历史成绩">
    <AppList v-bind="listOptions" ref="appList">
      <template #table-name>{{ detail?.student_name }}</template>
      <template #table-number>{{ detail?.sno_number }}</template>
    </AppList>
  </el-dialog>
</template>

<style lang="scss" scoped>
.file-item {
  display: flex;
  align-items: center;
  color: var(--main-color);
  .el-icon {
    margin-right: 5px;
  }
}
.picture-list {
  width: 100%;
  li {
    display: flex;
    justify-content: space-between;
  }
  a {
    color: var(--main-color);
  }
  .t1 {
    flex: 1;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
}
.form-item-score {
  padding-top: 10px;
  background-color: #f8f9fb;
  border-radius: 16px;
  :deep(.el-form-item__label) {
    text-align: center;
  }
  .el-input-number {
    width: 100px;
  }
}
</style>
