<script setup lang="ts">
// import ProgressBar from './components/ProgressBar.vue';
import Card from '@/page/subject/components/Card.vue'
import languageSenseApi from '@/api/subject/languageSense'
import dayjs from '@/plugins/dayjs'
import router from '@/router'
import { wordSortStore } from '@/stores'
import { useLangSenseStore } from '@/stores/learnWord/language-sense'
import { storeToRefs } from 'pinia'

const store = useLangSenseStore()
const { selectedStage } = storeToRefs(store)

const wordStore = wordSortStore()

const OSS_URL = `${import.meta.env.VITE_OSS_URL}`
// 阶段
const selectConfig = ref([] as any)
const statistics = ref<anyObj[]>([])

// 获取统计数据
async function getStatisticalData(type: 1 | 7 | 0) {
  const params = {
    endTime: '',
    startTime: '',
  }
  switch (type) {
    case 1:
      params.startTime = dayjs().format('YYYY-MM-DD') + ' 00:00:00'
      params.endTime = dayjs().format('YYYY-MM-DD HH:mm:ss')
      break
    case 7:
      params.startTime = dayjs().subtract(7, 'd').format('YYYY-MM-DD HH:mm:ss')
      params.endTime = dayjs().format('YYYY-MM-DD HH:mm:ss')
      break
  }
  const { data: res } = await languageSenseApi.queryStatByTimeFlag(params)
  if (res.code === 200) {
    return res.data.userSentenceRecordStatTimeRange
  } else {
    return {}
  }
}

function selectChange(item: anyObj) {
  selectedStage.value = item.value
}
function goWordSort() {
  wordStore.onclear()
  router.replace(`/subject/languageSense/sentenceSort?grade=${selectedStage.value}`)
}

onMounted(async () => {
  const stages = await languageSenseApi.getSenseStagesApi()
  selectConfig.value = stages.map((stage: any) => ({
    value: stage.code,
    label: stage.value,
  }))
  if (!selectedStage.value) {
    selectedStage.value = stages[0].code
  }
  const res = await Promise.all([
    getStatisticalData(1),
    getStatisticalData(7),
    getStatisticalData(0),
  ])
  statistics.value = res
})
</script>
<template>
  <div class="languageSense">
    <div class="top">
      <BackBar leftText="语感" class="backBar" />
      <Select
        v-model="selectedStage"
        width="450"
        :selectList="selectConfig"
        @selectChange="selectChange"
      ></Select>
    </div>
    <div class="main">
      <div class="statistics">
        <div v-for="(i, idx) in statistics" :key="idx" class="statistics-item">
          <div
            class="statistics-item-title"
            :style="{
              'background-image': `url(${OSS_URL}/urm/languageSense_statistics_top_bg.svg)`,
            }"
          >
            <img
              :src="`${OSS_URL}/urm/languageSense_statistics_top_left.svg`"
              class="bg-img left"
            />
            <img
              :src="`${OSS_URL}/urm/languageSense_statistics_top_left.svg`"
              class="bg-img right"
            />
            <span class="text">{{ idx ? (idx === 1 ? '近七日' : '累计') : '今日' }}</span>
          </div>
          <div class="statistics-item-main">
            <div class="statistics-item-main-single rate">
              <div>句子练习正确率：{{ i.trainSentenceCorrectRate }}%</div>
              <div class="progress-box">
                <ProgressBar
                  :rate="i.trainSentenceCorrectRate / 100"
                  :bg="idx ? '#6B73E5' : '#CC8A34'"
                  :border="idx ? '#2D39BC' : '#c08129'"
                  :activeBg="idx ? '#90FCF7' : '#fffe36'"
                ></ProgressBar>
              </div>
            </div>
            <Card
              class="statistics-item-main-single"
              :type="idx ? 'primary' : 'warning'"
              title="句子练习数"
              height="166"
              :text="i.trainSentenceCount"
            ></Card>
            <Card
              class="statistics-item-main-single"
              :type="idx ? 'primary' : 'warning'"
              title="阅读词汇量"
              height="166"
              :text="i.trainSentenceWordCount"
            ></Card>
          </div>
        </div>
      </div>
      <div class="btn-box">
        <mj-button type="warn" width="386" height="108" size="48" @click="goWordSort"
          >开始训练</mj-button
        >
      </div>
    </div>
  </div>
</template>
<style scoped lang="scss">
.languageSense {
  @include main_bg;
  height: 100%;
  overflow: hidden;
  box-sizing: border-box;
  line-height: 1.5;
  .top {
    padding: 2.67vh $space-6 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .main {
    box-sizing: border-box;
    width: 100%;
    height: calc(100% - 9.33vh);
    max-height: 90.67vh;

    padding: 8.92vh 142px 4.67vh;

    .statistics {
      display: flex;
      height: calc(100% - 14.33vh);
      margin-bottom: 5.33vh;
      &-item {
        width: 508px;
        margin-right: 56px;
        background-color: #f5feff;
        border-radius: 3.33vh;
        overflow: hidden;
        &:last-child {
          margin-right: 0;
        }
        &-title {
          position: relative;
          height: 14.14%;
          min-height: 8.33vh;
          background-repeat: no-repeat;
          background-size: cover;
          background-position: center;
          display: flex;
          justify-content: center;
          align-items: center;
          .bg-img {
            position: absolute;
            width: 21.83vh;
            height: 5.83vh;
            object-fit: fill;
            &.left {
              top: 0;
              left: 0;
            }
            &.right {
              right: 0;
              bottom: 0;
              transform: rotate(180deg);
            }
          }
          .text {
            position: relative;
            z-index: 1;
            color: $font-color;
            text-align: center;
            font-family: $font-special;
            font-size: 4vh;
          }
        }
        &-main {
          height: calc(100% - 9vh);
          padding: 3.33vh 24px 1vh;

          @include hidden_scroll;
          &-single {
            width: 100%;
            border-radius: 1.67vh;
            box-shadow: 0 0.33vh 0.33vh 0 rgba(0, 0, 0, 0.15);
            color: #2d39bc;
            font-family: $font-special;
            font-size: 2.33vh;
            overflow: hidden;
            margin-top: 4vh;
            &:first-child {
              height: 12.33vh;
              padding: 1.33vh 24px;
              margin-top: 0;
              background: linear-gradient(
                92deg,
                #83b7fe -9.21%,
                #90e9fa 37.09%,
                #90e9fa 70.16%,
                #83b7fe 111.05%
              );
            }
            .progress-box {
              margin-top: 1.33vh;
            }
          }
        }
        &:first-child {
          .statistics-item-main-single:first-child {
            background: linear-gradient(
              92deg,
              #fed769 -9.21%,
              #ffef70 37.09%,
              #ffef70 70.16%,
              #fed769 111.05%
            );
          }
          .statistics-item-main-single {
            color: #a13c00;
          }
        }
      }
    }
    .btn-box {
      text-align: center;
    }
  }
}
</style>
