<script setup lang="ts">
import { getExperimentList } from '../api'

defineEmits<{
  (e: 'bind', id: string): void
}>()

// 列表配置
const listOptions = computed(() => {
  return {
    remote: {
      httpRequest: getExperimentList,
      callback(res: any) {
        return { list: res }
      },
    },
    columns: [
      { label: '序号', type: 'index', width: 60 },
      { label: '实验名称', prop: 'name' },
      { label: '操作', slots: 'table-x', width: 180 },
    ],
  }
})
</script>

<template>
  <el-dialog title="选择实验" width="600px">
    <AppList v-bind="listOptions" ref="appList">
      <template #table-x="{ row }">
        <el-button text type="primary"
          ><router-link :to="`/admin/lab/experiment/${row.id}`" target="_blank">查看</router-link></el-button
        >
        <el-button text type="primary" @click="$emit('bind', row.id)">关联</el-button>
      </template>
    </AppList>
  </el-dialog>
</template>
