<template>
  <view
    class="hy-card-container"
    :class="isBg ? 'bg-card' : ''"
    :style="{ marginBottom: marginBottom + 'rpx', backgroundImage: isBg ? 'url(' + bgImg + ')' : 'none' }"
  >
    <view class="main-title-box" v-if="title">
      <view class="text">{{ title }}</view>
      <view v-if="isShowRight" class="right-text-wrap" @click="handleClickRight">
        <text>{{ rightText }}</text>
        <u-icon name="arrow-right-double" size="21" color="#292e36"></u-icon>
      </view>
    </view>
    <slot></slot>
  </view>
</template>

<script lang="ts" setup>
defineProps({
  title: {
    type: String,
    default: ''
  },
  marginBottom: {
    type: Number,
    default: 24
  },
  isShowRight: {
    type: Boolean,
    default: false
  },
  rightText: {
    type: String,
    default: '更多'
  },
  isBg: {
    type: Boolean,
    default: false
  },
  bgImg: {
    type: String,
    default: ''
  }
})

const emit = defineEmits(['clickRight'])

const handleClickRight = () => {
  emit('clickRight')
}
</script>

<style lang="scss" scoped>
.hy-card-container {
  width: 100%;
  box-sizing: border-box;
  padding: 22rpx;
  background-color: #fff;
  border-radius: 14rpx;
  &.bg-card {
    width: 100%;
    // min-height: 549rpx;
    padding-bottom: 24rpx;
    background-position: center center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  .main-title-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .text {
      font-size: 31rpx;
      color: #333;
      font-weight: 600;
    }
    .right-text-wrap {
      display: flex;
      align-items: center;
      text {
        font-size: 21rpx;
        color: #292e36;
      }
    }
  }
}
</style>
