<script setup lang="ts">
import happyReadApi from '@/api/subject/happyRead'
import { useRouter } from 'vue-router'
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 list = ref<anyObj[]>([
  {
    label: '练习次数',
    config: 'TrainCount',
    style: 'blue',
    today: 0,
    all: 0,
  },
  {
    label: '阅读词汇量',
    config: 'WordCount',
    style: 'green',
    today: 0,
    all: 0,
  },
  {
    label: '阅读时长',
    config: 'LearnTime',
    style: 'yellow',
    today: 0,
    all: 0,
  },
  {
    label: '正确率',
    config: 'RightRate',
    style: 'purple',
    today: 0,
    all: 0,
  },
])
const styleConfig: anyObj = {
  blue: {
    headwear: '#A0FCF8',
    color: '#2D39BC',
    bg: '#F4FFFF',
    textBg: '#E7FFFE',
  },
  green: {
    headwear: '#B8FC90',
    color: '#2F8A5B',
    bg: '#F9FFF5',
    textBg: '#ECFFE0',
  },
  yellow: {
    headwear: '#FED769',
    color: '#A13C00',
    bg: '#FFFCF5',
    textBg: '#FFF3D2',
  },
  purple: {
    headwear: '#E9CFF5',
    color: '#C032CC',
    bg: '#FCF5FF',
    textBg: '#F9ECFF',
  },
}
// 阶段
const selectId = ref(1)
const selectList = ref([
  {
    value: 1,
    label: '一阶',
  },
])
function dealTime(time: number) {
  if (time <= 60) return `${time}s`
  const h = parseInt(String(time / 60 / 60), 10)
  const m = parseInt(String((time / 60) % 60), 10)

  if (time === undefined) return '0'

  if (h > 0 || m > 0) {
    return `${h}h ${m}m`
  } else {
    return '0'
  }
}
// 获取阶段下拉列表
function getSelectList() {
  happyReadApi.getReadGradeList().then(res => {
    selectList.value = res.data.data.map((item: number) => {
      return {
        value: item,
        label: ['', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十'][item] + '阶',
      }
    })
    console.log('selectList.value', selectList.value)
  })
}

function init() {
  happyReadApi.shortQueryFirstPageInfo().then(res => {
    if (res.data.data) {
      list.value.forEach(item => {
        item.all = res.data.data.allStat['all' + item.config] || 0
        item.today = res.data.data.todayStat['today' + item.config] || 0
      })

      list.value[2].today = dealTime(list.value[2].today)
      list.value[2].all = dealTime(list.value[2].all)
      list.value[3].today = (res.data.data.todayStat.todayAvgRightRate || 0) + '%'
      list.value[3].all = (res.data.data.allStat.avgRightRate || 0) + '%'
    }
  })
}
onActivated(() => {
  init()
})

onMounted(() => {
  getSelectList()
})
</script>
<template>
  <div class="page">
    <div class="top">
      <BackBar leftText="短篇阅读" class="backBar" />
      <div class="right">
        <Select v-model="selectId" :selectList="selectList"></Select>
        <Btn
          type="success"
          tilt
          class="btn"
          @click="router.push('/subject/happyRead/shortReading/shortReadingRecord')"
          >阅读记录</Btn
        >
      </div>
    </div>
    <div class="content">
      <div class="list">
        <div
          v-for="item in list"
          :key="item.label"
          :style="{ background: styleConfig[item.style].bg }"
          class="item"
        >
          <svg class="px-svg" :style="{ fill: styleConfig[item.style].headwear }">
            <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>
          <LineFont :text="item.label" :borderColor="styleConfig[item.style].color" :size="56" />
          <div class="info" :style="{ background: styleConfig[item.style].textBg }">
            <div class="text">
              <div class="row">
                今日：<span>{{ item.today }}</span>
              </div>
              <div class="row">
                汇总：<span>{{ item.all }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <mj-button
      type="warn"
      width="386"
      height="108"
      size="48"
      @click="router.push(`/subject/happyRead/shortReading/shortReadingDetail?grade=${selectId}`)"
      >开始练习</mj-button
    >
  </div>
</template>
<style lang="scss" scoped>
.page {
  width: 100%;
  height: 100%;
  padding: $space-4_h $space-6;
  @include main_bg;
  text-align: center;
  .top {
    display: flex;
    justify-content: space-between;
    .right {
      display: flex;
      align-items: center;
      margin-right: 16px;

      :deep(.btn) {
        border-radius: 1.25vh 2.08vh 1.25vh 2.08vh;
        margin-left: 40px;
        &.tilt {
          transform: skew(-15deg);

          .x-button-left,
          .x-button-right,
          .x-button-text {
            transform: skew(15deg);
          }
        }
      }
    }
  }
  .content {
    width: 100%;
    height: 68.17vh;
    display: flex;
    justify-content: center;

    .list {
      width: 100%;
      height: calc(100% - 6.67vh);
      display: grid;
      grid-template-columns: repeat(4, 424px);
      grid-auto-rows: 42.67vh;
      gap: $space-2_h $space-4;
      margin-top: 11.67vh;

      .item {
        border-radius: $radius-5;
        overflow: hidden;
        position: relative;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        padding: 8.67vh $space-4 $space-4_h $space-4;
        box-shadow: 0 0.33vh 0.83vh 0 rgba(0, 0, 0, 0.15);

        .px-svg {
          // width: 22.08vh;
          // height: 6.67vh;
          position: absolute;
          top: 0;
          left: 0;
        }

        .info {
          width: 100%;
          height: 11.67vh;
          border-radius: 1.67vh;
          display: flex;
          flex-wrap: wrap;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          font-size: 2.83vh;
          color: $font-tag-color;
          margin-top: 8.33vh;
          box-shadow: 0 0.17vh 0.17vh 0 rgba(0, 0, 0, 0.15);
          .text {
            .row {
              text-align: left;
              span {
                font-family: $font-special;
              }
            }
          }

          // flex-direction: column;
          // gap: $space-2;
        }

        // .title {
        //     position: absolute;
        //     bottom: 0;
        //     width: 100%;
        //     height: 100%;
        //     .name {
        //         position: absolute;
        //         bottom: 64px;
        //         width: 100%;
        //         font-family: $font-special;
        //         font-size: 44px;
        //         line-height: 80px;
        //         text-align: center;
        //     }
        // }

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