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

// 实验类型
const types = useMapStore().getMapValuesByKey('experiment_type')
const route = useRoute()

const appList = $ref<InstanceType<typeof AppList> | null>(null)
// 列表配置
const listOptions = $computed(() => {
  return {
    remote: {
      httpRequest: getCaseList,
      params: { name: '', experiment_id: route.query.experiment_id || '' },
    },
    filters: [
      { type: 'select', prop: 'type', label: '实验类型', options: types },
      { type: 'input', prop: 'name', label: '案例名称', placeholder: '请输入案例名称' },
      { type: 'input', prop: 'experiment_name', label: '实验名称', placeholder: '请输入实验名称' },
    ],
    columns: [
      { label: '案例名称', prop: 'name' },
      { label: '实验类型', prop: 'type_name' },
      { label: '课时数', prop: 'times' },
      { label: '生效状态', prop: 'status_name' },
      { label: '更新人', prop: 'updated_operator_name' },
      { label: '更新时间', prop: 'updated_time' },
      { label: '操作', slots: 'table-x', width: 250, fixed: 'right' },
    ],
  }
})

// 删除
function handleDelete(row: CaseItem) {
  ElMessageBox.confirm('确定要删除吗？', '提示').then(() => {
    deleteCase({ id: row.id }).then(() => {
      ElMessage({ message: '删除成功', type: 'success' })
      appList?.refetch()
    })
  })
}
</script>

<template>
  <AppCard title="案例管理">
    <AppList v-bind="listOptions" ref="appList">
      <template #header-buttons>
        <router-link to="/admin/lab/example/create"
          ><el-button type="primary" :icon="CirclePlus">新增案例</el-button></router-link
        >
      </template>
      <template #table-x="{ row }">
        <el-button type="primary" round><router-link :to="`/admin/lab/example/${row.id}`">查看</router-link></el-button>
        <el-button type="primary" round
          ><router-link :to="`/admin/lab/example/${row.id}/edit`">编辑</router-link></el-button
        >
        <el-button type="danger" round @click="handleDelete(row)">删除</el-button>
      </template>
    </AppList>
  </AppCard>
</template>
