<script setup lang="ts">
withDefaults(
  defineProps<{
    title: string
    trend?: 'increase' | 'decrease' | 'stable' | undefined | string
    color?: string
    brandColor?: string
    meshColor?: string
  }>(),
  {
    color: '#2D39BC',
    brandColor: 'rgba(167, 174, 255, 0.63)',
    meshColor: 'rgb(75, 75, 104, 0.65)',
  },
)

const OSS_URL = import.meta.env.VITE_OSS_URL
const stableBgUrl = `url(${OSS_URL}/icon/arrow_flat.svg)`
const increaseBgUrl = `url(${OSS_URL}/icon/arrow_up.svg)`
const decreaseBgUrl = `url(${OSS_URL}/icon/arrow_down.svg)`
</script>

<template>
  <div :class="['stat', trend]">
    <div class="stat-title">
      <LineFont size="28" :border-color="color" border="4" :text="title" />
    </div>
    <div class="stat-body">
      <slot />
    </div>
  </div>
</template>

<style scoped lang="scss">
.stat {
  border-radius: 1.67vh;
  background:
    linear-gradient(0deg, #fff 0%, #fff 100%), linear-gradient(90deg, #83b7fe 0%, #90e9fa 100%);
  width: 338px;
  height: 13.83vh;
  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.15));
  overflow: hidden;

  &:before {
    pointer-events: none;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    mask-image: url(../assets/stat-corner.svg);
    mask-size: 100% 100%;
    -webkit-mask-image: url(../assets/stat-corner.svg);
    -webkit-mask-size: 100% 100%;
    background: v-bind(brandColor);
    width: 262px;
    height: 5.92vh;
    background-size: cover;
  }

  &:after {
    pointer-events: none;
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    mask-image: url(../assets/stat-mesh.svg);
    mask-size: 100% 100%;
    -webkit-mask-image: url(../assets/stat-mesh.svg);
    -webkit-mask-size: 100% 100%;
    background: v-bind(meshColor);
    width: 158px;
    height: 10.67vh;
    background-size: cover;
  }
}

.stat-title {
  position: absolute;
  top: 1.33vh;
  left: 24px;
  font-weight: normal;

  .title-outline {
    line-height: normal;
  }
}

.stat-body {
  color: $font-color;
  font-family: $font-special, sans-serif;
  font-size: 3.33vh;
  line-height: 5vh;
  text-align: center;
  margin-top: 6.17vh;
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 8px;

  .stable &:after,
  .increase &:after,
  .decrease &:after {
    display: block;
    content: '';
    background: center no-repeat;
    background-size: 100% 100%;
    width: 40px;
    height: 3.33vh;
    margin-left: 4px;
  }

  .stable &:after {
    background-image: v-bind(stableBgUrl);
  }

  .increase &:after {
    background-image: v-bind(increaseBgUrl);
  }

  .decrease &:after {
    background-image: v-bind(decreaseBgUrl);
  }

  :deep(.stat-value) {
    color: v-bind(color);
  }
}

.title-outline {
  line-height: normal;
}
</style>
