<template>
  <article class="enterprise-detail-page" :class="variant">
    <div class="detail-scroll">
      <section v-if="error" class="detail-inline-state panel error">
        <slot name="error" :error="error">
          <i class="mdi mdi-alert-circle-outline"></i>
          <div>
            <strong>{{ errorTitle }}</strong>
            <p>{{ error }}</p>
          </div>
        </slot>
      </section>

      <TableLoadingState
        v-else-if="loading"
        class="detail-loading-state panel"
        variant="panel"
        :title="loadingTitle"
        :message="loadingMessage"
        :icon="loadingIcon"
        :show-skeleton="false"
      />

      <template v-else>
        <section v-if="$slots.hero" class="detail-hero panel">
          <slot name="hero"></slot>
        </section>

        <slot></slot>

        <div v-if="$slots.main || $slots.side" class="detail-grid">
          <section v-if="$slots.main" class="detail-main">
            <slot name="main"></slot>
          </section>

          <aside v-if="$slots.side" class="detail-side">
            <slot name="side"></slot>
          </aside>
        </div>

        <section v-if="$slots.bottom" class="detail-bottom">
          <slot name="bottom"></slot>
        </section>
      </template>
    </div>

    <footer v-if="backLabel || $slots.actions" class="detail-actions" :class="actionsClass">
      <button v-if="backLabel" class="back-action" type="button" @click="emit('back')">
        <i class="mdi mdi-arrow-left"></i>
        <span>{{ backLabel }}</span>
      </button>

      <div v-if="$slots.actions" class="detail-action-group">
        <slot name="actions"></slot>
      </div>
    </footer>
  </article>
</template>

<script setup>
import TableLoadingState from './TableLoadingState.vue'

defineProps({
  actionsClass: { type: [String, Array, Object], default: '' },
  backLabel: { type: String, default: '' },
  error: { type: String, default: '' },
  errorTitle: { type: String, default: '详情加载失败' },
  loading: { type: Boolean, default: false },
  loadingIcon: { type: String, default: 'mdi mdi-file-document-outline' },
  loadingMessage: { type: String, default: '' },
  loadingTitle: { type: String, default: '正在加载详情' },
  variant: { type: [String, Array, Object], default: '' }
})

const emit = defineEmits(['back'])
</script>
