<!--
 * @Author: peerless_hero peerless_hero@outlook.com
 * @Date: 2023-07-08 01:36:19
 * @LastEditors: zhaojinfeng 121016171@qq.com
 * @LastEditTime: 2023-07-13 16:19:22
 * @FilePath: \uni\packages\card\index.vue
 * @Description:
 *
-->
<template>
  <view
    class="th-card" :class="{ 'th-card-box-shadow': !noShadow }" bg-white rounded-16rpx m-24rpx max-w-702rpx
    overflow-hidden
  >
    <view flex w-full>
      <view flex-grow class="th-card-body">
        <slot />
      </view>
      <view v-if="hasExtra" class="th-card-extra" w-128rpx m-16rpx>
        <slot name="extra" />
      </view>
    </view>
    <view v-if="noCardActions" h-16rpx />
  </view>
</template>

<script lang="ts" setup name="Card">
import { useSlots } from 'vue'

withDefaults(defineProps<{
  /** 取消阴影 */
  noShadow?: boolean
}>(),
{ noShadow: false },
)

/** 不存在操作栏组件时，自动增加底部的内边距 */
const noCardActions = useSlots().default().every(({ type }) =>
  typeof type !== 'object' || !('name' in type) || type.name !== 'CardActions',
)
const hasExtra = useSlots().extra
</script>

<style lang="scss">
.th-card {
  &.th-card-box-shadow {
    box-shadow: 0px 1px 6px 0px #d8d8d880;
  }
}
</style>
