<script setup lang="ts">
import { CirclePlus } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import AppList from '@/components/base/AppList.vue'
import { unbindExperiment, getContest } from '../api'
import { useMapStore } from '@/stores/map'

const FormDialog = defineAsyncComponent(() => import('./ViewExperimentFormDialog.vue'))

interface Props {
  id: string
  pid: string
}
const props = defineProps<Props>()

const types = useMapStore().getMapValuesByKey('experiment_type')
const appList = $ref<InstanceType<typeof AppList> | null>(null)
// 列表配置
const listOptions = {
  hasPagination: false,
  remote: {
    httpRequest: getContest,
    params: { id: props.pid },
    callback(res: any) {
      let list: any = []
      if (Object.keys(res?.detail?.experiment).length) {
        list = [res?.detail?.experiment]
      }
      return { list: list }
    }
  },
  columns: [
    { label: '序号', type: 'index', width: 60 },
    { label: '实验名称', prop: 'name' },
    {
      label: '实验类型',
      prop: 'type',
      computed({ row }: { row: any }) {
        const type = types.find(item => item.value === row.type)?.label
        return type || ''
      }
    },
    {
      label: '实验指导老师',
      prop: 'teachers',
      computed({ row }: { row: any }) {
        let name = ''
        if (row.teachers) {
          name = row.teachers[0]?.name || ''
        }
        return name
      }
    },
    {
      label: '实验学生人数',
      prop: 'classes',
      computed({ row }: { row: any }) {
        let num = ''
        if (row.classes) {
          num = row.classes[0]?.student_total
        }
        return num
      }
    },
    { label: '更新时间', prop: 'updated_time' },
    { label: '操作', slots: 'table-x', width: 180 }
  ]
}

let dialogVisible = $ref(false)
const rowData = ref<any>()
// 新增
function handleAdd() {
  rowData.value = undefined
  dialogVisible = true
}
// 查阅
function handleView(row: any) {
  const qaURL = `/admin/lab/experiment/${row.id}`
  window.open(qaURL)
}
// 删除
function handleRemoveClass(row: any) {
  ElMessageBox.confirm('确定要删除吗？', '提示').then(() => {
    unbindExperiment({ id: props.id, experiment_id: row.id }).then(() => {
      ElMessage({ message: '删除成功', type: 'success' })
      onUpdateSuccess()
    })
  })
}
function onUpdateSuccess() {
  appList?.refetch()
}
</script>

<template>
  <AppList v-bind="listOptions" ref="appList">
    <template #header-buttons>
      <el-button type="primary" :icon="CirclePlus" @click="handleAdd" v-permission="'competition-book-create'"
        >关联</el-button
      >
    </template>
    <template #table-x="{ row }">
      <el-button link round type="info" @click="handleView(row)" v-permission="'competition-book-detail'"
        >查阅</el-button
      >
      <el-button link round type="danger" @click="handleRemoveClass(row)" v-permission="'competition-book-delete'"
        >删除</el-button
      >
    </template>
  </AppList>
  <FormDialog v-model="dialogVisible" :id="id" @update="onUpdateSuccess" v-if="dialogVisible"></FormDialog>
</template>
