<template>
  <AuditTimeline :items="items" />
</template>

<script setup lang="ts">
  import { ref, watch } from 'vue'
  import AuditTimeline from '@/components/merchant/AuditTimeline.vue'
  import { fetchMerchantAuditHistory } from '@/api/merchant'

  interface Props {
    merchantId?: string
    refreshKey?: number
  }

  const props = defineProps<Props>()
  const items = ref<Api.Merchant.MerchantAuditRecord[]>([])

  const load = async () => {
    if (!props.merchantId) {
      items.value = []
      return
    }

    const result = await fetchMerchantAuditHistory(props.merchantId)
    items.value = result || []
  }

  watch(
    () => [props.merchantId, props.refreshKey],
    () => {
      load()
    },
    { immediate: true }
  )
</script>
