<script setup lang="ts">
import type { RecordItem } from '../types'
import AppList from '@/components/base/AppList.vue'
import { getExperimentScoreDetail } from '../api'
import { gradeRule } from '@/utils/dictionary'
import { useAppConfig } from '@/composables/useAppConfig'
const appConfig = useAppConfig()

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

let datalist = $ref<any>([])

function fetchInfo() {
  getExperimentScoreDetail({
    experiment_id: props.data.experiment_id,
    student_id: props.data.student_id,
    type: props.row.type,
  }).then((res) => {
    datalist = res.data
  })
}
watchEffect(() => {
  fetchInfo()
})

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

const title = computed(() => {
  return '查看' + gradeRule[props.row.type]
})

// 列表配置
const listOptions = computed(() => {
  let columns: any = []
  switch (props.row.type) {
    case 6:
      // 用户标签
      columns = [
        { label: '序号', type: 'index', width: 60 },
        { label: '标签名称', prop: 'student_name' },
        { label: '正确标签名称', prop: 'teacher_name' },
        { label: '标签数据量', prop: 'student_total' },
        { label: '正确标签数据量', prop: 'teacher_total' },
        { label: '操作', prop: 'status', slots: 'table-x' },
      ]
      break
    case 7:
      // 用户群组
      columns = [
        { label: '序号', type: 'index', width: 60 },
        { label: '群组名称', prop: 'student_name' },
        { label: '正确群组名称', prop: 'teacher_name' },
        { label: '群组数据量', prop: 'student_total' },
        { label: '正确群组数据量', prop: 'teacher_total' },
        { label: '操作', prop: 'status', slots: 'table-x' },
      ]
      break
    case 9:
      // 营销资料
      columns = [
        { label: '序号', type: 'index', width: 60 },
        { label: '营销资料名称', prop: 'student_name' },
        { label: '营销资料类型', prop: 'type_name' },
        { label: '正确营销资料名称', prop: 'teacher_name' },
        { label: 'AI综合评分', prop: 'score' },
        { label: 'AI评价', prop: 'comment' },
      ]
      break
    case 11:
      // 用户数据
      columns = [
        { label: '序号', type: 'index', width: 60 },
        { label: '文件名称', prop: 'file_name' },
        { label: '用户数据量', prop: 'student_total' },
        { label: '正确答案', prop: 'teacher_total' },
        { label: '导入时间', prop: 'created_time' },
        { label: '状态', prop: 'status' },
      ]
      break
    case 12:
      // 事件数据
      columns = [
        { label: '序号', type: 'index', width: 60 },
        { label: '文件名称', prop: 'file_name' },
        { label: '事件名称', prop: 'event_name' },
        { label: '事件数据量', prop: 'student_total' },
        { label: '正确答案', prop: 'teacher_total' },
        { label: '导入时间', prop: 'created_time' },
        { label: '状态', prop: 'status' },
      ]
      break
    default:
      break
  }
  return {
    columns,
    data: datalist,
  }
})

function getOperationUrl(row: any) {
  const type = props.row.type
  const dmlURL = appConfig.dmlURL || import.meta.env.VITE_DML_URL
  if (type === 6) {
    // 用户标签
    return `${dmlURL}/label?experiment_id=${props.data.experiment_id}&student_id=${props.data.student_id}&id=${row.id}&name=${row.student_name}`
  } else if (type === 7) {
    // 用户群组
    return `${dmlURL}/group?experiment_id=${props.data.experiment_id}&student_id=${props.data.student_id}&id=${row.id}&name=${row.student_name}`
  }
}
</script>

<template>
  <el-dialog :title="title" width="800px">
    <AppList v-bind="listOptions" ref="appList">
      <template #table-x="{ row }">
        <el-button type="primary" link>
          <a :href="getOperationUrl(row)" target="_blank">查看</a>
        </el-button>
      </template>
    </AppList>
    <template #footer>
      <el-row justify="center">
        <el-button round auto-insert-space @click="$emit('update:modelValue', false)">关闭</el-button>
      </el-row>
    </template>
  </el-dialog>
</template>
