<script setup lang="ts">
import { useRouter } from 'vue-router'
import Card from '@/page/subject/components/Card.vue'
import ReportDia from './ReportDia.vue'

const OSS_URL = import.meta.env.VITE_OSS_URL
const rightBg = `url(${OSS_URL}/urm/sentence_collect_list_right_bg.svg) 100%/contain no-repeat`

const router = useRouter()

const statistics = ref<anyObj[]>([
  {
    title: '阅读时长',
    type: 'warning',
    num: 0,
  },
  {
    title: '阅读词汇量',
    type: 'primary',
    num: 0,
  },
  {
    title: '练习次数',
    type: 'success',
    num: 0,
  },
  {
    title: '正确率：',
    type: 'error',
    rate: 0.12,
  },
])
const total = ref([
  {
    label: '选词填空',
    content: 'sw',
    class: 'pink',
  },
  {
    label: '阅读理解',
    content: 'bl',
    class: 'purple',
  },
  {
    label: '选词填空',
    content: 'cl',
    class: 'error',
    color: '#b22731',
    showTotal: true,
    rate: 0.36,
    num: 5,
  },
  {
    label: '阅读理解',
    content: 'blends',
    showTotal: true,
    // class: 'success',
    // color: '#2F8A5B',
    // class: 'primary',
    // color: '#2D39BC',
    class: 'warning',
    color: '#A13C00',
    rate: 0.36,
    num: 5,
  },
])

function goDetail() {
  router.push('/subject/happyRead/phonics/PhonicsDetail')
}

const showReport = ref(false)
</script>
<template>
  <!-- <Load /> -->
  <div class="page">
    <BackBar leftText="自然拼读" class="backBar" />
    <div class="content">
      <div class="top">
        <Card
          v-for="item in statistics"
          :key="item.title"
          :type="item.type"
          :title="item.title"
          :text="item.num || 0"
          :rate="item.rate"
          width="404"
          height="160"
          size="32"
          showTitleRate
        ></Card>
      </div>
      <div class="row">
        <div v-for="(item, idx) in total" :key="idx" :class="['card-item', item.class]">
          <div class="sub">{{ item.label }}</div>
          <div class="text">{{ item.content }}</div>
          <div v-if="item.showTotal" class="total" :style="{ color: item.color }">
            <div class="total-num">
              <LineFont text="练习数：" size="24" border="4" :borderColor="item.color" />
              <span class="num">{{ item.num }}次</span>
            </div>
            <div class="total-rate">
              <div class="rate-text">
                <LineFont text="正确率：" size="24" border="4" :borderColor="item.color" />
                <span class="rate"> {{ (item.rate || 0) * 100 }} % </span>
              </div>
              <ProgressBar :rate="item.rate" :type="item.class" height="24"></ProgressBar>
            </div>
          </div>
        </div>
      </div>
      <Btn width="386" height="108" size="48" @click="goDetail">开始练习</Btn>
    </div>
  </div>
  <ReportDia v-model="showReport" />
</template>
<style lang="scss" scoped>
.page {
  width: 100%;
  height: 100%;
  padding: $space-4_h $space-6;
  @include main_bg;
  .content {
    width: 100%;
    height: calc(100% - 80px - 52px);
    margin-top: 4.33vh;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    .top {
      width: 100%;
      height: 20vh;
      border-radius: 3.33vh;
      background: linear-gradient(342.95deg, #f5feff 14.38%, #ebfdff 88.66%);
      display: flex;
      justify-content: space-between;
      padding: 3.33vh;
      :deep(.xxl-card) {
        .xxl-card-rate {
          margin-top: 2vh;
        }
      }
    }
    .row {
      width: 100%;
      height: 42.67vh;
      display: flex;
      .card-item {
        width: 424px;
        height: 42.67vh;
        border-radius: 3.33vh;
        overflow: hidden;
        position: relative;
        margin-right: $space-4;
        background: #fff;
        --sub-bg: rgba(251, 159, 213, 0.3);

        &::after {
          content: '';
          display: block;
          position: absolute;
          bottom: -3.33vh;
          right: 0;
          width: 167px;
          height: 16.25vh;
          background: v-bind(rightBg);
        }

        &:last-child {
          margin-right: 0;
        }

        .sub {
          width: 172px;
          height: 5.33vh;
          line-height: 5.33vh;
          text-align: center;
          border-radius: 0 0 3.33vh 0;
          font-size: $font-size-5;
          color: $font-tag-color;
          background: var(--sub-bg);
        }
        .text {
          width: 344px;
          height: 14.17vh;
          font-size: 5vh;
          border-radius: 1.67vh;
          display: flex;
          align-items: center;
          justify-content: center;
          font-family: $font-special;
          margin: 5vh auto;
        }
        .total {
          width: 344px;
          margin: 5vh auto 0;
          display: flex;

          &-num {
            width: 120px;
            display: flex;
            flex-wrap: wrap;
            padding: 1vh;
            border-radius: 0.83vh;
            background: var(--sub-bg);
            .num {
              font-family: $font-special;
              font-size: $font-size-3;
              margin-top: 0.67vh;
            }
          }

          &-rate {
            margin-left: 8px;
            flex: 1;
            padding: 1vh;
            border-radius: 0.83vh;
            background: var(--sub-bg);
            .rate-text {
              display: flex;
              flex-wrap: wrap;
              align-items: center;
              margin-bottom: 0.67vh;
              .rate {
                font-size: $font-size-3;
                font-family: $font-special;
              }
            }
          }
        }

        &.pink {
          background: linear-gradient(342.95deg, #fff3fa 14.38%, #ffffff 88.66%);
          --sub-bg: rgba(251, 159, 213, 0.3);
          .text {
            background: #fb9fd5;
          }
        }

        &.purple {
          background: linear-gradient(343.1deg, #f6f6ff 11.92%, #ffffff 88.75%);
          --sub-bg: rgba(158, 162, 255, 0.3);
          .text {
            background: #b1b5ff;
          }
        }

        &.error {
          background: linear-gradient(343.1deg, #fff4f2 11.92%, #ffffff 88.75%);
          --sub-bg: rgba(255, 130, 115, 0.3);
          .text {
            background: #ff8273;
          }
        }

        &.success {
          background: linear-gradient(343.1deg, #f2fffe 11.92%, #ffffff 88.75%);
          --sub-bg: rgba(184, 252, 144, 0.3);
          .text {
            background: #b8fc90;
          }
        }

        &.primary {
          background: linear-gradient(343.1deg, #f2fffe 11.92%, #ffffff 88.75%);
          --sub-bg: rgba(161, 252, 248, 0.3);
          .text {
            background: #a1fcf8;
          }
        }

        &.warning {
          background: linear-gradient(343.1deg, #fffbf2 11.92%, #ffffff 88.75%);
          --sub-bg: rgba(255, 243, 210, 0.5);
          .text {
            background: #fed769;
          }
        }
      }
    }
  }
}
</style>
