<script lang="ts" setup>
import { Card } from 'ant-design-vue'
import { onBeforeUpdate, onMounted, onUpdated } from 'vue'
import { BasicTable, useTable } from '@/components/Table'
import { getExaNow } from '@/api/alert/exa'

const props = defineProps({
  data: {
    type: Object,
    default: () => {},
  },
})

function getInterval(record: any) {
  console.log(record)
  if (record.originValue === '-')
    return '-'
  record.originValue = Number(record.originValue).toFixed(2)

  const threshold = record.ResidualThreshold
  console.log(threshold)
  const originValue = record.originValue || 0
  return `[${Number(originValue) - threshold},${Number(originValue) + threshold}]`
}
const [registerTable, { setTableData }] = useTable({
  dataSource: [],
  rowKey: 'ID',
  size: 'small',

  immediate: false,
  columns: props.data.Columns,
  useSearchForm: false,
  showTableSetting: false,
  showIndexColumn: false,
})
// 页面挂载时批量请求并更新数据（避免在模板中调用异步）
onBeforeUpdate(async () => {
  const rr = [] as any[]
  const rows = props.data.Content || []
  for (const item of rows) {
    try {
      // 如果后端需要同时传 ObservedPoint 和 PredictedPoint，用逗号拼接（请根据后端接口调整）
      const param = item.PredictedPoint ? `${item.ObservedPoint},${item.PredictedPoint}` : `${item.ObservedPoint}`
      const res = await getExaNow(param)

      let origin: any = '-'
      let predict: any = '-'
      if (res != null) {
        if (Array.isArray(res)) {
          origin = res[0] ?? '-'
          predict = res[1] ?? '-'
        }
        else if (typeof res === 'object') {
          origin = res.originValue ?? res[0] ?? '-'
          predict = res.predictValue ?? res[1] ?? '-'
        }
        else {
          origin = String(res)
        }
      }
      rr.push(Object.assign({}, item, { originValue: origin, predictValue: predict }))
    }
    catch (e) {
    }
  }

  setTableData(rr)
})
</script>

<template>
  <Card :title="props.data.Header" v-bind="$attrs">
    <!-- <template #extra>
      <a-button type="link">
        更多
      </a-button>
    </template> -->
    <BasicTable @register="registerTable">
      <template #threshold="{ record }">
        <span>{{ getInterval(record) }}</span>
      </template>
    </BasicTable>
  </Card>
</template>

<style scoped>
::v-deep(.ant-card-body) {
  padding:5px;
}
</style>
