<script lang="ts" setup>
import { onMounted, reactive, ref, watch } from 'vue'
import { columns, searchFormSchema } from './model.data'
import { BasicTable, TableAction, useTable } from '@/components/Table'
import { getModelPage } from '@/api/alert/run/model'
import { IconEnum } from '@/enums/appEnum'
import { useI18n } from '@/hooks/web/useI18n'

defineOptions({ name: 'ModelTable' })
const emit = defineEmits(['success'])

const { t } = useI18n()

const [registerTable, { setSelectedRowKeys }] = useTable({
  title: '模型列表',
  api: getModelPage,
  rowKey: 'id',
  rowSelection: { type: 'radio', async onChange(selectedRowKeys, selectedRows) {
    emit('success', selectedRowKeys, selectedRows)
  } },
  size: 'small',
  immediate: true,
  columns,
  formConfig: {
    labelWidth: 80,
    schemas: searchFormSchema,
    showResetButton: false,
    actionColOptions: {
      span: 2,
    },
  },
  useSearchForm: true,
  showTableSetting: true,
  showIndexColumn: false,

})
onMounted(async () => {
})

// watch(
//   () => props.selectedRowKeys,
//   () => {
//     state.selectedRowKeys = props.selectedRowKeys
//   },
// )
</script>

<template>
  <div>
    <BasicTable @register="registerTable">
      <template #pointNumber="{ record }">
        {{ (JSON.parse(record.modelInfo)).pointInfo.length }}
      </template>
      <template #precision="{ record }">
        {{ (JSON.parse(record.modelInfo)).precision }}
      </template>
    </BasicTable>
  </div>
</template>

<style lang="less" scoped>
:deep(.ant-table-body){
  height:100% !important;
  max-height:100% !important
}
</style>
