<template>
  <a-alert
    class="bitable-error-state"
    type="error"
    show-icon
    :message="message"
    :description="description"
    role="alert"
  >
    <template v-if="$slots.action || retryable" #action>
      <slot name="action">
        <a-button size="small" :loading="retrying" @click="emit('retry')">
          重试
        </a-button>
      </slot>
    </template>
  </a-alert>
</template>

<script setup lang="ts">
import { Alert as AAlert, Button as AButton } from 'ant-design-vue'

withDefaults(
  defineProps<{
    message?: string
    description?: string
    retryable?: boolean
    retrying?: boolean
  }>(),
  {
    message: '加载失败',
    description: '请检查网络后重试',
    retryable: true,
    retrying: false,
  },
)

const emit = defineEmits<{
  (e: 'retry'): void
}>()
</script>

<style scoped>
.bitable-error-state {
  margin: var(--bitable-spacing-md, 12px) 0;
  border-radius: var(--bitable-radius-md, 6px);
}
</style>
