<template>
  <slot v-if="!hasError" />
  <view v-else class="error-boundary">
    <view class="error-icon-wrap">
      <text class="error-icon-text">!</text>
    </view>
    <text class="error-title">页面出了点问题</text>
    <text class="error-desc">请返回重试</text>
    <view class="error-retry-btn" @tap="handleRetry">
      <text class="error-retry-text">重新加载</text>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onErrorCaptured } from 'vue'

const hasError = ref(false)

onErrorCaptured((err) => {
  console.error('[ErrorBoundary]', err)
  hasError.value = true
  return false
})

function handleRetry() {
  hasError.value = false
}
</script>

<style lang="scss" scoped>
.error-boundary {
  @include flex-center;
  flex-direction: column;
  padding: 80px 40px;
}

.error-icon-wrap {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: $dan-l;
  @include flex-center;
  margin-bottom: 24px;
}

.error-icon-text {
  font-size: 40px;
  font-weight: bold;
  color: $dan;
}

.error-title {
  font-size: var(--tk-font-body-lg);
  font-weight: 600;
  color: $tx;
  margin-bottom: 8px;
}

.error-desc {
  font-size: var(--tk-font-body-sm);
  color: $tx3;
  margin-bottom: 32px;
}

.error-retry-btn {
  background: $pri;
  border-radius: $r-pill;
  padding: 16px 48px;
}

.error-retry-text {
  color: $white;
  font-size: var(--tk-font-body);
}
</style>
