<template>
  <view class="ep-card" :class="shadowClass">
    <view v-if="$slots.header" class="ep-card__header">
      <slot name="header" />
    </view>
    <view class="ep-card__body">
      <slot />
    </view>
  </view>
</template>

<script setup>
import { computed } from 'vue'
const props = defineProps({ shadow: { type: String, default: 'always' } })
const shadowClass = computed(() => {
  const s = String(props.shadow || '').toLowerCase()
  if (s === 'hover') return 'is-hover-shadow'
  if (s === 'never') return 'is-no-shadow'
  return 'is-always-shadow'
})
</script>

<style lang="scss" scoped>
.ep-card {
  background: $bg-card;
  border: 1rpx solid $border-color-light;
  border-radius: $radius-lg;
  overflow: hidden;
  transition: all 0.3s ease;
}

.is-always-shadow {
  box-shadow: $shadow-sm;
}

.is-hover-shadow {
  /* 在移动端hover效果不如PC明显，这里可以处理为点击态 */
  box-shadow: $shadow-sm;
}

.is-no-shadow {
  box-shadow: none;
}

.ep-card__header {
  padding: $spacing-sm $spacing-md;
  border-bottom: 1rpx solid $border-color-light;
  font-weight: 600;
  color: $text-main;
}

.ep-card__body {
  padding: $spacing-md;
}
</style>
