<script setup lang="ts">
import { useSound } from '@/hooks'
import ProgressBar from '../home/components/ProgressBar.vue'
import { wordSortStore } from '@/stores'
import { userStore } from '@/stores'
import { storeToRefs } from 'pinia'
import router from '@/router'
import { useRoute } from 'vue-router'

const OSS_URL = `${import.meta.env.VITE_OSS_URL}`
const wordData = wordSortStore()
const route = useRoute()
const grade = route.query.grade as any

const { userInfo } = storeToRefs(userStore())
const figureBoy = `url(${import.meta.env.VITE_OSS_URL}/urm/ip_boy.png) center / contain no-repeat`
const figureGirl = `url(${import.meta.env.VITE_OSS_URL}/urm/ip_girl.png) center / contain no-repeat`

const showData = ref({
  costTime: 0,
  costTimeStr: '',
  diamond: 0,
  exp: 0,
  rate: 0,
  wordCount: 0,
  wordTable: null,
})

const sound_path = (type: number) => `${OSS_URL}/sound/report_${type}.mp3`

watch(
  () => wordData.showData,
  nv => {
    Object.assign(showData.value, wordData.showData)
    if (nv?.costTimeStr) {
      // 音效
      if (wordData.showData.rate >= 100) {
        useSound(sound_path(100))
      } else if (wordData.showData.rate > 60) {
        useSound(sound_path(99))
      } else {
        useSound(sound_path(0))
      }
    }
  },
  {
    deep: true,
    immediate: true,
  },
)
const getNum = computed(() => {
  return numTools(['100', '80', '60', '0'])
})
const userInfoBg = computed(() => {
  return `url(${OSS_URL}/urm/wordSort_bg_${getNum.value}.svg) 100% / cover no-repeat`
})
const userLeftBg = computed(() => {
  return `url(${OSS_URL}/urm/wordSort_statistics_${getNum.value}.png) 100% / cover no-repeat`
})
const progressData = computed(() => {
  return {
    bg: numTools(['#1FFF8B', '#6A74E5', '#CC8A33', '#CC3333']),
    border: numTools(['#5ECC93', '#2D39BC', '#C08129', '#C02929']),
    activeBg: numTools(['#1FFF8B', '#90FCF7', '#FFFE35', '#FF3542']),
  }
})

function numTools(strList: string[]) {
  return showData.value.rate === 100
    ? strList[0]
    : showData.value.rate >= 80
      ? strList[1]
      : showData.value.rate >= 60
        ? strList[2]
        : strList[3]
}

function clickBtn(type: 'repeat' | 'next' | 'out') {
  switch (type) {
    case 'repeat':
      router.replace(`/subject/languageSense/sentenceSort?grade=${grade}`)
      break
    case 'next':
      wordData.onclear()
      router.replace(`/subject/languageSense/sentenceSort?grade=${grade}`)
      break
    case 'out':
      wordData.onclear()
      router.replace('/subject/languageSense')
      break
  }
}
defineOptions({
  name: 'SentenceSortStatistics',
})

onMounted(() => {
  // init();
})
</script>
<template>
  <div
    class="languageSense"
    :style="{
      background: userInfoBg,
    }"
  >
    <div
      class="left"
      :style="{
        background: userLeftBg,
      }"
    >
      <BackBar leftText="统计" class="backBar" />
      <div
        class="top-user"
        :style="{ background: userInfo.sex === 1 ? figureBoy : figureGirl }"
      ></div>
    </div>
    <div class="right">
      <div
        :class="[
          'statistics-item',
          showData.rate === 100
            ? 'bg_100'
            : showData.rate >= 80
              ? 'bg_80'
              : showData.rate >= 60
                ? 'bg_60'
                : 'bg_0',
        ]"
      >
        <div
          class="statistics-item-title"
          :style="{
            'background-image': `url(${OSS_URL}/urm/languageSense_statistics_top_bg.svg)`,
          }"
        >
          <ItemPopover
            placement="bottom"
            :data="{
              iconName: 'reward_exp',
              rewardName: '经验值',
              personalCount: userInfo.exp,
            }"
          >
            <div class="user-assets-item">
              <Icon name="reward_exp" size="72" />
              <span class="count">+{{ showData.exp }}</span>
            </div>
          </ItemPopover>
          <ItemPopover
            placement="bottom"
            :data="{
              iconName: 'reward_diamond',
              personalCount: userInfo.diamond,
            }"
          >
            <div class="user-assets-item">
              <Icon name="diamond" size="72" />
              <span class="count">+{{ showData.diamond }}</span>
            </div>
          </ItemPopover>
          <div
            class="bg-img left"
            :style="{
              'background-image': `url(${OSS_URL}/urm/wordSort_statistics_bg_${getNum}.svg)`,
            }"
          ></div>
          <div
            class="bg-img right"
            :style="{
              'background-image': `url(${OSS_URL}/urm/wordSort_statistics_bg_${getNum}.svg)`,
            }"
          ></div>
        </div>
        <div class="statistics-item-main">
          <div class="statistics-item-main-single rate px-single">
            <div>句子练习正确率：{{ showData.rate }}%</div>
            <div class="progress-box">
              <ProgressBar
                :rate="showData.rate / 100"
                :bg="progressData.bg"
                :border="progressData.border"
                :activeBg="progressData.activeBg"
              ></ProgressBar>
            </div>
          </div>
          <div class="data-content">
            <div
              class="statistics-item-main-single count px-single"
              :style="{
                'background-image': `url(${OSS_URL}/urm/sentence_collect_list_right_bg.svg)`,
              }"
            >
              <div
                class="content-bg"
                :style="{
                  'background-image': `url(${OSS_URL}/urm/wordSort_statistics_bg_${getNum}.svg)`,
                }"
              ></div>
              <div data-content="本关单词数">本关单词数</div>
              <div class="text">
                {{ showData.wordCount }}
              </div>
            </div>
            <div
              class="statistics-item-main-single count px-single"
              :style="{
                'background-image': `url(${OSS_URL}/urm/sentence_collect_list_right_bg.svg)`,
              }"
            >
              <div
                class="content-bg"
                :style="{
                  'background-image': `url(${OSS_URL}/urm/wordSort_statistics_bg_${getNum}.svg)`,
                }"
              ></div>

              <div data-content="耗时">耗时</div>
              <div class="text">
                {{ showData.costTimeStr }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="bottom">
        <!-- <Btn type="success" tilt @click="clickBtn('repeat')">再来一次</Btn> -->
        <mj-button type="warn" tilt @click="clickBtn('next')">下一关</mj-button>
        <mj-button type="info" tilt @click="clickBtn('out')">退出</mj-button>
      </div>
    </div>
  </div>
</template>
<style scoped lang="scss">
.languageSense {
  height: 100%;
  overflow: hidden;
  box-sizing: border-box;
  line-height: 1.5;
  display: flex;
  .left {
    width: 860px;
    height: 100%;
    margin-left: 44px;
    .backBar {
      margin: 2.67vh 0 0 20px;
    }
    .top-user {
      width: 100%;
      height: 75vh;
      margin-top: 4.17vh;
    }
  }
  .right {
    margin-top: 16.67vh;
    padding-left: 96px;
    .statistics-item {
      position: relative;
      box-shadow: 0 0 0.67vh 0.33vh #00000030;

      width: 856px;
      // height: 100%;
      margin-right: 56px;
      background-color: #f5feff;
      border-radius: 3.33vh;
      overflow: hidden;
      &:last-child {
        margin-right: 0;
      }
      &-title {
        position: absolute;
        height: 8vh;
        width: 856px;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        display: flex;
        justify-content: center;
        align-items: center;
        left: 0px;
        top: 0;
        .bg-img {
          position: absolute;
          overflow: hidden;
          height: 8.83vh;
          display: flex;
          align-items: flex-end;
          background-repeat: no-repeat;
          &.left {
            width: 420px;
            top: 0;
            left: 0px;
            margin: 0;
            background-size: 170%;
            background-position: -230px 100%;
          }
          &.right {
            width: 350px;
            right: 0px;
            bottom: 0;
            margin: 0;
            padding: 0;
            background-size: 150%;
            background-position: -210px -300px;
            transform: rotate(180deg);
          }
        }
        .user-assets-item {
          color: #000;
          font-family: $font-special;
          font-size: 2.67vh;
          font-style: normal;
          font-weight: 400;
          line-height: normal;
          display: flex;
          align-items: center;
          position: relative;
          z-index: 9;
          &:first-child {
            margin-right: 80px;
          }
          .count {
            margin-left: 14px;
          }
        }
      }
      &-main {
        height: calc(100% - 108px);
        padding: 8vh 24px 1.33vh;
        display: flex;
        flex-direction: column;
        @include hidden_scroll;
        &-single {
          margin: 2vh 0;
          width: 100%;
          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;
          font-size: 2.33vh;
          overflow: hidden;
          .content-bg {
            position: absolute;
            top: 0;
            left: 0;

            height: 7.5vh;
            width: 96%;
            background-repeat: no-repeat;
            background-position: -60px -184px;
            background-size: 90%;
          }
          &:first-child {
            height: 12.33vh;
            padding: 1.33vh 24px;
            background: linear-gradient(
              92deg,
              #83b7fe -9.21%,
              #90e9fa 37.09%,
              #90e9fa 70.16%,
              #83b7fe 111.05%
            );
          }
          .progress-box {
            margin-top: 1.33vh;
            height: 1.67vh;
          }
          &.count {
            position: relative;
            text-align: center;
            font-size: 3.33vh;
            padding: 1.33vh 24px;
            background-repeat: no-repeat;
            background-position: 120% 110%;
            background-size: 167px 195px;
            display: flex;
            justify-content: center;
            align-items: center;

            [data-content] {
              position: absolute !important;
              top: 1.33vh;
              left: 24px;
              margin-bottom: 0.67vh;
              text-align: left;
              color: #fff;
              font-family: $font-special;
              font-size: 2.33vh;
            }
            .text {
              position: relative;
              top: 1.08vh;
            }
          }
        }
        .data-content {
          display: flex;
          .statistics-item-main-single {
            margin-right: 32px;
            &:last-child {
              margin-right: 0;
            }
          }
        }
      }
      &:first-child {
        .rate {
          background: linear-gradient(
            92deg,
            #fed769 -9.21%,
            #ffef70 37.09%,
            #ffef70 70.16%,
            #fed769 111.05%
          );
        }
        .statistics-item-main-single {
          color: #a13c00;
          &.count {
            [data-content] {
              @include font-stroke(#a13c00, 2px);
            }
            svg {
              fill: #fed769;
            }
          }
        }
      }
      &.bg_100 {
        &:first-child {
          .rate {
            background: linear-gradient(
              258.61deg,
              #4de798 2.31%,
              #a2fb6e 40.46%,
              #a2fb6e 69.55%,
              #4de798 97.69%
            );
            color: #2f8a5b;
          }
          .statistics-item-main-single {
            color: #2f8a5b;
            &.count {
              [data-content] {
                @include font-stroke(#2f8a5b, 2px);
              }
              svg {
                fill: #b8fc90;
              }
            }
          }
        }
      }
      &.bg_80 {
        .rate {
          background: linear-gradient(
            92.12deg,
            #83b7fe -9.21%,
            #90e9fa 37.09%,
            #90e9fa 70.16%,
            #83b7fe 111.05%
          );

          color: #2d39bc;
        }
        .statistics-item-main-single {
          color: #2d39bc;
          &.count {
            [data-content] {
              @include font-stroke(#2d39bc, 2px);
            }
            svg {
              fill: #90fcf7;
            }
          }
        }
      }
      &.bg_60 {
        .rate {
          background: linear-gradient(
            92.12deg,
            #fed769 -9.21%,
            #ffef70 37.09%,
            #ffef70 70.16%,
            #fed769 111.05%
          );

          color: #a13c00;
        }
        .statistics-item-main-single {
          color: #a13c00;
          &.count {
            [data-content] {
              @include font-stroke(#a13c00, 2px);
            }
            svg {
              fill: #fed769;
            }
          }
        }
      }
      &.bg_0 {
        .rate {
          background: linear-gradient(
            92.02deg,
            #ff2231 0%,
            #ffa370 38.1%,
            #ffa570 57.4%,
            #ff222f 98.96%
          );
          color: white;
        }
        .statistics-item-main-single {
          color: #bc2d37;
          &.count {
            [data-content] {
              @include font-stroke(#bc2d37, 2px);
            }
            svg {
              fill: #ff6350;
            }
          }
        }
      }
    }

    .bottom {
      display: flex;
      justify-content: center;
      gap: 40px;
      margin-top: 25vh;
    }
  }
}
</style>
