<template>
  <view class="uni-card" :class="{ 'uni-card--full': isFull, 'uni-card--shadow': isShadow }">
    <!-- 卡片头部 -->
    <view v-show="showHeader" class="uni-card__header">
      <slot name="title">
        <view class="uni-card__header-content">
          <text v-if="icon" class="uni-icons mr-2" :class="icon"></text>
          <text class="uni-card__title">{{ title }}</text>
        </view>
        <text v-if="extra" class="uni-card__extra">{{ extra }}</text>
      </slot>
    </view>

    <!-- 卡片内容 -->
    <view class="uni-card__content" :class="{ 'uni-card__content--no-padding': noPadding }">
      <slot />
    </view>

    <!-- 卡片底部 -->
    <view v-show="hasFooter" class="uni-card__footer">
      <slot name="footer" />
    </view>
  </view>
</template>

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

const instance = getCurrentInstance()
const showHeader = ref(true)
const hasFooter = ref(false)

onMounted(() => {
  const slots = instance?.slots || {}
  showHeader.value = !!(props.title || slots.title)
  hasFooter.value = !!slots.footer
})

interface Props {
  title?: string
  extra?: string
  icon?: string
  isFull?: boolean
  isShadow?: boolean
  noPadding?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  isShadow: false,
  noPadding: false
})
</script>

<style scoped>
.uni-card {
  background-color: #fff;
  border-radius: 12px;
  overflow: hidden;
  margin: 12px 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.uni-card--full {
  margin: 0;
  border-radius: 0;
  border-left: none;
  border-right: none;
}
.uni-card--shadow {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 2px 8px rgba(0, 0, 0, 0.04);
}
.uni-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid #f0f0f0;
}
.uni-card__header-content {
  display: flex;
  align-items: center;
}
.uni-card__title {
  font-size: 15px;
  font-weight: 600;
  color: #1f2937;
}
.uni-card__extra {
  font-size: 13px;
  color: #2563eb;
}
.uni-card__content {
  padding: 16px;
}
.uni-card__content--no-padding {
  padding: 0;
}
.uni-card__footer {
  padding: 12px 16px;
  border-top: 1px solid #f0f0f0;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
</style>
