<script setup lang="ts">
import dayjs from '@/plugins/dayjs'
import { useRouter } from 'vue-router'
import { subjectStore, groupPaperStore } from '@/stores'
import { rateType } from '@/hooks'

const props = withDefaults(
  defineProps<{
    id?: any
    createTime?: string
    correctRate?: number
    titleNum?: number
    trainNum?: number
    num?: number
    detail?: boolean
    trainType: 0 | 1
  }>(),
  {
    id: '',
    correctRate: 0,
    detail: false,
    trainType: 1,
  },
)

const router = useRouter()

const { subject } = subjectStore()
const { groupPaperParams } = toRefs(groupPaperStore())

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'],
}
const color = computed(() => colorConfig[rateType.value(props.correctRate)][0])
const fill = computed(() => colorConfig[rateType.value(props.correctRate)][1])
const progress_border = computed(
  () => colorConfig[rateType.value(props.correctRate) || 'primary'][2],
)
const progress_bg = computed(() => colorConfig[rateType.value(props.correctRate) || 'primary'][3])
const progress_active = computed(
  () => colorConfig[rateType.value(props.correctRate) || 'primary'][4],
)

const window_width = ref(window.screen.width)

function handleStart() {
  groupPaperParams.value = {
    subjectId: subject.id,
    id: props.id,
    trainType: props.trainType,
  }
  router.push({ path: '/subject/doWork', query: { subjectId: subject.id, resourceType: 7 } })
}

function toDetail() {
  if (props.detail) {
    console.log('props.trainType', props.trainType)
    groupPaperParams.value = {
      trainType: props.trainType,
      subjectId: subject.id,
    }
    return router.push({
      path: '/subject/doWork/' + props.id,
      query: { resourceType: 7 },
    })
  }
  router.push('/subject/groupPaper/hisDetail/' + props.id)
}
</script>
<template>
  <div
    class="xxl-card"
    :style="{
      'background-image': `url(${OSS_URL}/urm/sentence_collect_list_right_bg.svg)`,
    }"
    @click="toDetail"
  >
    <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>

    <div class="xxl-card-top">
      <div class="xxl-card-time">
        {{ dayjs(createTime).format('YYYY-MM-DD HH:mm') }}
      </div>
      <div
        class="xxl-card-look"
        :style="{
          color: color,
        }"
      >
        查看
      </div>
    </div>

    <div class="xxl-card-info">
      <div
        v-if="trainNum !== undefined"
        class="xxl-card-info-text"
        :data-content="`练习次数：${trainNum}次`"
      >
        练习次数：{{ trainNum }}次
      </div>
      <div
        v-if="titleNum !== undefined"
        class="xxl-card-info-text"
        :data-content="`练习题数：${titleNum}道`"
      >
        练习题数：{{ titleNum }}道
      </div>
      <div v-if="num !== undefined" class="xxl-card-info-text" :data-content="`答题数：${num}道`">
        答题数：{{ num }}道
      </div>
      <div class="xxl-card-info-text" :data-content="`答题正确率：${correctRate / 100}%`">
        答题正确率：{{ correctRate / 100 }}%
      </div>
    </div>
    <div class="xxl-card-rate">
      <ProgressBar
        :rate="correctRate / 10000"
        :bg="progress_bg"
        :border="progress_border"
        :activeBg="progress_active"
      ></ProgressBar>
    </div>
    <div v-if="!detail" class="btn-box">
      <Btn width="192" height="64" size="32" @click.stop="handleStart">开始练习</Btn>
    </div>
  </div>
</template>
<style scoped lang="scss">
.xxl-card {
  width: 398px;
  // height: 374px;
  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;
  line-height: 1.5;
  svg {
    position: absolute;
    top: 0;
    left: 0;

    fill: v-bind(fill);

    transform: scale(calc(v-bind(window_width) / 1920));
    transform-origin: 0 0;
    &.px-svg {
      width: 265px;
      height: 6.67vh;
    }
  }
  &-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.33vh;
  }
  &-info {
    &-text {
      margin: 0.67vh 0;
      color: #fff;
      font-family: $font-special;
      font-size: 2.33vh;
      @include font-stroke(v-bind(color), 2px);
    }
  }
  &-time {
    color: $font-color;
    font-family: 'OPPO Sans';
    font-size: 2vh;
    position: relative;
    z-index: 1;
  }
  &-look {
    font-family: $font-special;
    font-size: 2.33vh;
  }
  &-rate {
    margin-bottom: 2vh;
  }
  .btn-box {
    text-align: center;
  }
}
</style>
