<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<RecordItem>()
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(() => {
  return {
    columns: [
      { label: '序号', type: 'index', width: 60 },
      { label: '姓名', prop: 'student_name', slots: 'table-name' },
      { label: '学号', prop: 'sno_number', slots: 'table-number' },
      { label: '实验操作成绩', prop: 'operate' },
      { label: '实验结果成绩', prop: 'result' },
      { label: '实验报告成绩', prop: 'file' },
      { label: '综合实验成绩', prop: 'score' },
      { label: '评分时间', prop: 'check_time' },
      { label: '评分人', prop: 'checker_id_name' }
    ],
    data: detail?.score_log
  }
})
</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>
