<template>
  <view
    class="base-card"
    :class="[
      `card-${variant}`,
      { 'card-clickable': clickable },
      { 'card-shadow': shadow }
    ]"
    :style="cardStyle"
    @tap="handleClick"
  >
    <!-- 卡片头部 -->
    <view v-if="title || $slots.header" class="card-header">
      <slot name="header">
        <view class="card-title">{{ title }}</view>
        <view v-if="extra" class="card-extra">{{ extra }}</view>
      </slot>
    </view>

    <!-- 卡片内容 -->
    <view class="card-body" :style="bodyStyle">
      <slot></slot>
    </view>

    <!-- 卡片底部 -->
    <view v-if="$slots.footer" class="card-footer">
      <slot name="footer"></slot>
    </view>
  </view>
</template>

<script setup lang="ts">
import { computed } from 'vue'

type CardVariant = 'elevated' | 'flat' | 'outlined' | 'gradient'

interface Props {
  variant?: CardVariant     // 卡片变体
  title?: string            // 标题
  extra?: string            // 额外内容
  padding?: string          // 内边距
  margin?: string           // 外边距
  borderRadius?: string     // 圆角
  shadow?: boolean          // 是否显示阴影
  clickable?: boolean       // 是否可点击
  background?: string       // 背景色
}

const props = withDefaults(defineProps<Props>(), {
  variant: 'elevated',
  padding: '',
  margin: '',
  borderRadius: '',
  shadow: true,
  clickable: false,
  background: ''
})

const emit = defineEmits<{
  'click': [event: any]
}>()

// 卡片样式
const cardStyle = computed(() => {
  const style: Record<string, string> = {}

  if (props.padding) style.padding = props.padding
  if (props.margin) style.margin = props.margin
  if (props.borderRadius) style.borderRadius = props.borderRadius
  if (props.background) style.background = props.background

  return style
})

// 内容区域样式
const bodyStyle = computed(() => {
  const style: Record<string, string> = {}
  return style
})

// 点击事件
const handleClick = (event: any) => {
  if (props.clickable) {
    emit('click', event)
  }
}
</script>

<style lang="scss" scoped>
@import '@/static/styles/design-tokens.scss';

.base-card {
  background: $bg-card;
  border-radius: $radius-md;
  overflow: hidden;
  transition: $transition-all;
}

/* ========== 卡片变体 ========== */

/* 悬浮卡片（默认） */
.card-elevated {


  &.card-shadow {
    box-shadow: $shadow-md;
  }
}

/* 扁平卡片 */
.card-flat {
  box-shadow: none;
  border: 1rpx solid $border-light;
}

/* 描边卡片 */
.card-outlined {
  box-shadow: none;
  border: 2rpx solid $border-base;
}

/* 渐变卡片 */
.card-gradient {
  background: $gradient-primary;
  color: $text-inverse;
  box-shadow: $shadow-primary;

  .card-title,
  .card-extra {
    color: $text-inverse;
  }
}

/* ========== 可点击状态 ========== */
.card-clickable {
  cursor: pointer;

  &:active {
    transform: scale(0.98);
    opacity: 0.95;
  }

  &.card-elevated:active {
    box-shadow: $shadow-sm;
  }
}

/* ========== 卡片头部 ========== */
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: $spacing-xl $spacing-xl $spacing-md;
  border-bottom: 1rpx solid $border-light;
}

.card-gradient .card-header {
  border-bottom-color: rgba(255, 255, 255, 0.2);
}

.card-title {
  font-size: $font-lg;
  font-weight: $font-semibold;
  color: $text-primary;
  flex: 1;
}

.card-extra {
  font-size: $font-sm;
  color: $text-tertiary;
  margin-left: $spacing-md;
}

/* ========== 卡片内容 ========== */
.card-body {
  padding: $spacing-xl;
}

/* 如果有头部，减少顶部内边距 */
.card-header + .card-body {
  padding-top: $spacing-md;
}

/* ========== 卡片底部 ========== */
.card-footer {
  padding: $spacing-md $spacing-xl $spacing-xl;
  border-top: 1rpx solid $border-light;
}

.card-gradient .card-footer {
  border-top-color: rgba(255, 255, 255, 0.2);
}

/* 如果有内容，减少底部内边距 */
.card-body + .card-footer {
  padding-top: $spacing-md;
}
</style>
