<template>
  <BaesData :data="data" :colums="colums">
    <template v-slot="{ data, slotName }">
      <slot :slotName="slotName" :data="data"> </slot>
    </template>
  </BaesData>
</template>
<script setup>
import { onBeforeMount } from 'vue'
import { http } from '@/utils/request'
import { ref } from 'vue'
import BaesData from './base-data.vue'
const props = defineProps({
  colums: {
    type: Array,
    default: () => [],
  },
  apiUrl: {
    type: String,
    default: '',
  },
  data: {
    type: Object,
  },
  params: {
    type: Object,
  },
  method: {
    type: String,
    default: 'GET',
  },
  header: {
    type: Object,
  },
})

const data = ref({})

onBeforeMount(async () => {
  init()
})

const init = async () => {
  if (!props.apiUrl) return
  try {
    const resData = await http.request({
      url: props.apiUrl,
      method: props.method,
      data: props.data,
      params: props.params,
      header: props.header,
    })
    data.value = resData
  } catch (error) {}
}
</script>
