<template>
  <view
    :style="{
      background: props.backgroundUrl ? `url(${props.backgroundUrl || ''})` : '#fff',
      backgroundSize: '100% 100%',
      ...styles
    }"
    class="card_content"
    @click="$emit('click')"
  >
    <view
      v-if="props?.title"
      class="card_header"
      :style="{ borderBottom: props?.borderHead ? '1rpx solid #eee' : '' }"
    >
      <view class="title">
        {{ props?.title }}
      </view>
      <view class="right_value">
        <slot name="right_value"></slot>
      </view>
    </view>
    <view class="card_body" v-if="handleGetRelationNodes()">
      <slot></slot>
    </view>
  </view>
</template>
<script setup lang="ts">
import { ref, useSlots } from 'vue'
const props = defineProps(['title', 'backgroundUrl', 'styles', 'borderHead'])
const slots = useSlots()
const handleGetRelationNodes = () => {
  //插槽是否有值
  let show = slots.default
  return show
}
</script>
<style lang="scss">
.card_content {
  padding: 0 30rpx;
  margin: 30rpx;
  border-radius: 20rpx;
}
.card_header {
  padding: 30rpx 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .title {
    flex: 1;
    font-weight: 450;
    font-size: 30rpx;
  }
  .right_value {
    padding: 2rpx 12rpx;
    align-content: center;
    font-size: 27rpx;
    color: #000;
  }
}
</style>
