<script setup lang="ts">
import { px2vh, px2vw } from '@/utils'

const props = withDefaults(
  defineProps<{
    title: string | number
    text?: string | number
    rate?: number
    tip?: string | number
    type?: 'warning' | 'primary' | 'success' | 'error' | 'other'
    width?: number | string
    height?: number | string
    center?: boolean
    size?: number | string
    showTitleRate?: boolean
    difficulty?: number
  }>(),
  {
    size: 28,
    showTitleRate: false,
  },
)
const OSS_URL = `${import.meta.env.VITE_OSS_URL}`

const colorConfig = {
  // 字体颜色 背景svg色 progerss_border progress_bg progress_active
  primary: ['#2D39BC', '#a2fcf8', '#2D39BC', '#6B73E5', '#90FCF7'],
  success: ['#2F8A5B', '#B8FC90', '#27A363', '#25BF6E', '#1FFF8A'],
  error: ['#BC2D37', '#FF7A6A', '#B22731', '#CB3741', '#FF3542'],
  warning: ['#a13c00', '#fed769', '#C08129', '#CC8A33', '#FFFE36'],
  other: ['#2D39BC', '#C6CCFF', '#2D39BC', '#6B73E5', '#90FCF7'],
}
const color = computed(() => colorConfig[props.type || 'primary'][0])
const fill = computed(() => colorConfig[props.type || 'primary'][1])
const progress_border = computed(() => colorConfig[props.type || 'primary'][2])
const progress_bg = computed(() => colorConfig[props.type || 'primary'][3])
const progress_active = computed(() => colorConfig[props.type || 'primary'][4])

const _width = isNaN(Number(props.width)) ? props.width : px2vw(props.width)
const _height = isNaN(Number(props.height)) ? props.height : px2vh(props.height)
const _size = isNaN(Number(props.size)) ? props.size : px2vh(props.size)

const scale = window.innerWidth / 1920
</script>
<template>
  <div
    class="xxl-card"
    :style="{
      'background-image': `url(${OSS_URL}/urm/sentence_collect_list_right_bg.svg)`,
    }"
  >
    <svg class="px-svg">
      <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>
    <slot>
      <div class="xxl-card-title" :data-content="title">
        {{ title }}
        <template v-if="rate !== undefined && showTitleRate">
          <span class="rate-text"> {{ (rate || 0) * 100 }} % </span>
        </template>
      </div>
      <slot name="text">
        <div v-if="rate !== undefined" class="xxl-card-rate">
          <ProgressBar
            :rate="rate"
            :bg="progress_bg"
            :border="progress_border"
            :activeBg="progress_active"
          ></ProgressBar>
          <div class="difficulty-start-box">
            <DifficultyStart
              v-if="difficulty !== undefined"
              disabled
              :modelValue="difficulty"
              title="试题难度:"
              emptyText="智能"
            ></DifficultyStart>
          </div>
        </div>
        <div v-else class="xxl-card-text">
          {{ text }}
        </div>
      </slot>
      <div v-if="tip !== undefined" class="xxl-card-tip">{{ tip }}</div>
    </slot>
  </div>
</template>
<style scoped lang="scss">
.xxl-card {
  width: v-bind(_width);
  height: v-bind(_height);
  border-radius: 1.67vh;
  box-shadow: 0 0.33vh 0.33vh 0 rgba(0, 0, 0, 0.15);
  background-color: #fff;
  font-family: $font-special;
  overflow: hidden;
  position: relative;
  font-size: 3.33vh;
  padding: 1.33vh 24px;
  background-repeat: no-repeat;
  background-position: 120% 110%;
  background-size: 167px 195px;
  position: relative;
  svg {
    position: absolute;
    top: 0;
    left: 0;

    fill: v-bind(fill);

    transform: scale(v-bind(scale));
    transform-origin: 0 0;
    // &.px-svg {
    //   width: 22.08vh;
    //   height: 6.67vh;
    // }
  }
  &-title {
    // margin-bottom: 8px;
    text-align: left;
    color: #fff;
    font-family: $font-special;
    font-size: v-bind(_size);
    @include font-stroke(v-bind(color), 2px);
    .rate-text {
      color: v-bind(color);
    }
  }
  &-rate {
    position: relative;
    top: 1.33vh;
    .difficulty-start-box {
      margin-top: 0.67vh;
      :deep(.difficulty-start) {
        padding: 0;
        height: 2.67vh;
        background-color: transparent;
        .text {
          font-size: 1.67vh;
          line-height: 2.67vh;
          color: #666;
        }
        .starts {
          .start {
            width: 24px !important;
            height: 2vh !important;
            // .x-icon {
            //     width: 24px !important;
            //     height: 24px !important;
            // }
            img {
              width: 24px !important;
              height: 2vh !important;
            }
          }
        }
      }
    }
  }
  &-text {
    position: relative;
    top: 1.08vh;
    font-size: 3.33vh;
    text-align: center;
    color: v-bind(color);
  }
  &-tip {
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 0.67vh 32px;
    border-radius: 1.67vh 0 0 0;
    text-align: center;
    color: $font-color;
    text-align: center;
    font-family: $font-special;
    font-size: 2.33vh;
    line-height: 1.5;
    background-color: v-bind(fill);
  }
}
</style>
