<!-- 用户中心分区错误状态，统一展示加载失败原因和重试入口。 -->
<script setup lang="ts">
import { CircleAlert } from "@/icons";

defineProps<{ message: string }>();
const emit = defineEmits<{ retry: [] }>();
</script>

<template>
  <div class="account-section-state">
    <CircleAlert :size="20" />
    <div>
      <strong>加载失败</strong>
      <p>{{ message }}</p>
    </div>
    <el-button @click="emit('retry')">重新加载</el-button>
  </div>
</template>

<style scoped lang="scss">
.account-section-state {
  min-height: 116px;
  padding: var(--space-lg);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-md);
  color: var(--web-danger);
  background: var(--web-danger-soft);
  border: 1px solid var(--web-line-critical);
  border-radius: var(--radius-md);
}
.account-section-state strong {
  color: var(--web-text);
  font-size: 14px;
}
.account-section-state p {
  margin-top: var(--space-xs);
  color: var(--web-text-secondary);
  font-size: 12px;
  line-height: 1.5;
}
@media (max-width: 560px) {
  .account-section-state {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .account-section-state .el-button {
    grid-column: 1 / -1;
    width: 100%;
    margin-left: 0;
  }
}
</style>
