<script setup lang="ts">
const props = withDefaults(
  defineProps<{
    fill: string
    fontColor: string
    title: string
  }>(),
  {
    fill: '#a2fcf8',
    fontColor: '#A13C00',
  },
)

const OSS_URL = `${import.meta.env.VITE_OSS_URL}`
</script>
<template>
  <div
    class="count-card-item"
    :style="{
      'background-image': `url(${OSS_URL}/urm/sentence_collect_list_right_bg.svg)`,
    }"
  >
    <svg class="svg" viewBox="0 0 200 80">
      <path
        d="M59.9168 -235.807L64.4151 -235.313C175.574 -225.921 255.31 -176.822 276.958 -104.726C290.91 -58.5438 278.275 -11.5999 244.61 15.0135C212.736 40.0773 169.966 41.6822 124.905 19.2758C96.4414 59.8677 57.7353 79.567 17.7544 72.8096C-24.541 65.5488 -58.0981 30.3735 -68.4577 -16.7241C-83.9464 -90.3895 -37.4237 -171.655 55.6898 -233.09L59.9168 -235.807Z"
      />
    </svg>
    <div :data-content="title">{{ title }}</div>
    <div class="count-card-item-text">
      <slot></slot>
    </div>
  </div>
</template>

<style lang="scss">
//
.count-card-item {
  width: 340px;
  height: 13.83vh;
  border-radius: 1.67vh;
  position: relative;
  text-align: center;
  font-size: 3.33vh;
  padding: 1.33vh 24px;
  background-repeat: no-repeat;
  background-position: 120% 110%;
  background-size: 167px 195px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  box-shadow: 0 0.33vh 0.33vh 0 #00000026;
  .svg {
    position: absolute;
    top: 0;
    left: -50px;
    fill: v-bind(fill);
    width: 96%;
    height: 50%;
  }
  [data-content] {
    position: absolute !important;
    top: 1.33vh;
    left: 24px;
    margin-bottom: 0.67vh;
    text-align: left;
    color: #fff;
    font-family: $font-special;
    font-size: 2.33vh;
    @include font-stroke(v-bind(fontColor), 2px);
  }
  &-text {
    position: relative;
    top: 1.08vh;
    font-family: $font-special;
    font-size: 3.33vh;
    font-weight: 400;
    line-height: 5vh;
    text-align: center;
    .data-content-card-content {
      display: flex;
      align-items: center;
      .number {
        color: v-bind(fontColor);
        padding: 0 5px;
      }
    }
  }
}
</style>
