<template>
  <div class="content-card">
    <!-- 卡片头部 -->
    <div class="card-header">
      <h2 class="card-title">{{ title }}</h2>
      <div class="card-actions">
        <slot name="header-actions" />
      </div>
    </div>

    <!-- 卡片内容区 -->
    <div class="card-body">
      <!-- 加载状态 -->
      <LoadingState
        v-if="loading"
        status="loading"
        :loading-text="loadingText"
      />

      <!-- 空状态 -->
      <LoadingState
        v-else-if="empty"
        status="empty"
        :empty-text="emptyText"
      >
        <template v-if="$slots['empty-action']" #empty-action>
          <slot name="empty-action" />
        </template>
      </LoadingState>

      <!-- 正常内容 -->
      <slot v-else />
    </div>
  </div>
</template>

<script setup lang="ts">
import LoadingState from '@/components/loading/LoadingState.vue'

withDefaults(
  defineProps<{
    /** 卡片标题 */
    title: string
    /** 是否加载中 */
    loading?: boolean
    /** 是否为空状态 */
    empty?: boolean
    /** 加载中文本 */
    loadingText?: string
    /** 空状态文本 */
    emptyText?: string
  }>(),
  {
    loading: false,
    empty: false,
    loadingText: '加载中...',
    emptyText: '暂无数据',
  },
)
</script>

<style scoped lang="scss">
.content-card {
  width: 100%;
  max-width: 1792px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.30);
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: 16px;
  overflow: hidden;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 32px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.card-title {
  font-size: 32px;
  height: 48px;
  color: #121212;
  margin: 0;
  line-height: 48px;
}

.card-actions {
  display: flex;
  align-items: center;
  gap: 20px;
}

.card-body {
  display: flex;
  flex-direction: column;
  padding: 32px 40px;
  background: rgba(255, 255, 255, 0.5);
  height: 940px;
  overflow-y: auto;
  scrollbar-width: none;

  &::-webkit-scrollbar {
    display: none;
  }
}
</style>
