<script setup lang="ts">
import Card from '@/page/subject/components/Card.vue'
import KnowledgeList from './KnowledgeList.vue'
import { userStore } from '@/stores'
import { storeToRefs } from 'pinia'
import { rateType, EncourageLanguage } from '@/hooks'
import dayjs from '@/plugins/dayjs'

const props = defineProps<{
  modelValue: boolean
  data: anyObj
  isHomework?: string
}>()
const emit = defineEmits(['update:modelValue'])

const { userInfo } = storeToRefs(userStore())

const OSS_URL = import.meta.env.VITE_OSS_URL
const homework_bg = `url(${OSS_URL}/urm/homeWork/report_bg.svg)`

const colorConfig = {
  // 字体颜色 背景svg色 progerss_border progress_bg progress_active
  primary: [
    '#2D39BC',
    'linear-gradient(92deg, #83B7FE -9.21%, #90E9FA 37.09%, #90E9FA 70.16%, #83B7FE 111.05%)',
    '#2D39BC',
    '#6B73E5',
    '#90FCF7',
  ],
  success: [
    '#2F8A5B',
    'linear-gradient(259deg, #4DE798 2.31%, #A2FB6E 40.46%, #A2FB6E 69.55%, #4DE798 97.69%)',
    '#27A363',
    '#25BF6E',
    '#1FFF8A',
  ],
  error: [
    '#fff',
    'linear-gradient(92deg, #FF2231 0%, #FFA370 38.1%, #FFA570 57.4%, #FF222F 98.96%)',
    '#B22731',
    '#CB3741',
    '#FF3542',
  ],
  warning: [
    '#a13c00',
    'linear-gradient(92deg, #FED769 -9.21%, #FFEF70 37.09%, #FFEF70 70.16%, #FED769 111.05%)',
    '#C08129',
    '#CC8A33',
    '#FFFE36',
  ],
}

const progressType = computed(() => {
  return (rate: number) => {
    if (rate >= 10000) {
      return colorConfig['success']
    } else if (rate >= 8000) {
      return colorConfig['primary']
    } else if (rate >= 6000) {
      return colorConfig['warning']
    } else {
      return colorConfig['error']
    }
  }
})

const timeFilter = computed(() => {
  const t = dayjs.duration(props.data.costTime)
  const h = t.hours()
  const m = t.minutes()
  const s = t.seconds()

  return (
    (h ? String(h).padStart(2, '0') + 'h ' : '') +
    (h || m ? String(m).padStart(2, '0') + 'm ' : '') +
    String(s).padStart(2, '0') +
    's'
  )
})
</script>
<template>
  <el-dialog
    :class="['report_dia', isHomework ? 'homework' : '']"
    align-center
    :modelValue="modelValue"
    @update:modelValue="$emit('update:modelValue', $event)"
  >
    <div v-if="isHomework" class="report_dia_homework" :style="{ 'background-image': homework_bg }">
      <div class="report_dia_title" :data-content="EncourageLanguage(data.answerRate)">
        {{ EncourageLanguage(data.answerRate) }}
      </div>
      <div class="reward-list">
        <div v-if="data.addDiamond" class="reward-list-item">
          <ItemPopover
            :data="{
              iconName: 'reward_diamond',
              rewardName: '钻石',
              personalCount: userInfo.diamond,
            }"
          >
            <Icon name="diamond_nobg" width="72"></Icon>
          </ItemPopover>
          <span class="text">+{{ data.addDiamond }}</span>
        </div>
        <div v-if="data.addExp" class="reward-list-item">
          <ItemPopover
            :data="{
              iconName: 'reward_exp',
              rewardName: '经验值',
              personalCount: userInfo.experience,
            }"
          >
            <Icon name="exp_nobg" width="72"></Icon>
          </ItemPopover>
          <span class="text">+{{ data.addExp }}</span>
        </div>
      </div>
      <div class="info">
        <div class="card-box-rate" :style="{ background: progressType(data.answerRate)[1] }">
          <div :style="{ color: progressType(data.answerRate)[0] }">
            答题正确率：{{ data.answerRate / 100 }}%
          </div>
          <div class="progress-box">
            <ProgressBar
              :rate="data.answerRate / 10000"
              :bg="progressType(data.answerRate)[3]"
              :border="progressType(data.answerRate)[2]"
              :activeBg="progressType(data.answerRate)[4]"
            ></ProgressBar>
          </div>
        </div>
        <div class="flex">
          <Card
            title="答题数"
            :text="data.answerCount + '题'"
            :type="rateType(data.answerRate)"
            width="460"
            height="166"
          ></Card>
          <Card
            title="作答时长"
            :text="timeFilter"
            :type="rateType(data.answerRate)"
            width="460"
            height="166"
          ></Card>
        </div>
      </div>
      <Btn width="386" height="108" size="48" @click="emit('update:modelValue', false)"
        >我知道了</Btn
      >
    </div>
    <board-bg v-else class="report_dia_main">
      <div class="hidden_scroll">
        <div class="report_dia_title" :data-content="EncourageLanguage(data.correctRate)">
          {{ EncourageLanguage(data.correctRate) }}
        </div>
        <div class="reward-list">
          <div v-if="data.diamond" class="reward-list-item">
            <ItemPopover
              :data="{
                iconName: 'reward_diamond',
                rewardName: '钻石',
                personalCount: userInfo.diamond,
              }"
            >
              <Icon name="diamond_nobg" width="72"></Icon>
            </ItemPopover>
            <span class="text">+{{ data.diamond }}</span>
          </div>
          <div v-if="data.experience" class="reward-list-item">
            <ItemPopover
              :data="{
                iconName: 'reward_exp',
                rewardName: '经验值',
                personalCount: userInfo.experience,
              }"
            >
              <Icon name="exp_nobg" width="72"></Icon>
            </ItemPopover>
            <span class="text">+{{ data.experience }}</span>
          </div>
        </div>
        <div class="card-box">
          <div class="card-list">
            <div class="card-box-rate" :style="{ background: progressType(data.correctRate)[1] }">
              <div :style="{ color: progressType(data.correctRate)[0] }">
                答题正确率：{{ data.correctRate / 100 }}%
              </div>
              <div class="progress-box">
                <ProgressBar
                  :rate="data.correctRate / 10000"
                  :bg="progressType(data.correctRate)[3]"
                  :border="progressType(data.correctRate)[2]"
                  :activeBg="progressType(data.correctRate)[4]"
                ></ProgressBar>
              </div>
            </div>
            <Card
              title="答题数"
              :text="data.num + '题'"
              :type="rateType(data.correctRate)"
              width="460"
              height="166"
            ></Card>
            <Card
              title="作答时长"
              :text="data.costTimeInfo"
              :type="rateType(data.correctRate)"
              width="460"
              height="166"
            ></Card>
          </div>
        </div>
        <div class="report_dia_title" data-content="我的知识图谱">我的知识图谱</div>
        <div class="card-box" style="margin-bottom: 0">
          <div class="card-list">
            <Card
              type="warning"
              center
              title="陌生数"
              :text="data.unknowNum"
              :tip="
                data.unknowImproveFlag > 0 ? '+' + data.unknowImproveFlag : data.unknowImproveFlag
              "
              width="460"
              height="166"
            ></Card>
            <Card
              title="熟悉数"
              center
              :text="data.knowNum"
              width="460"
              height="166"
              :tip="data.knowImproveFlag > 0 ? '+' + data.knowImproveFlag : data.knowImproveFlag"
            ></Card>
            <Card
              title="已掌握数"
              center
              :text="data.masteredNum"
              width="460"
              height="166"
              :tip="
                data.masteredImproveFlag > 0
                  ? '+' + data.masteredImproveFlag
                  : data.masteredImproveFlag
              "
            ></Card>
          </div>
          <KnowledgeList :list="data.knowledgeChangeVoList"></KnowledgeList>
        </div>
      </div>
      <mj-button
        type="warn"
        width="386"
        height="108"
        size="48"
        @click="emit('update:modelValue', false)"
        >我知道了</mj-button
      >
    </board-bg>
  </el-dialog>
</template>
<style lang="scss">
.report_dia {
  box-sizing: border-box;
  line-height: 1.5;
  &.el-dialog {
    box-shadow: none;
    background-color: transparent;
    padding: 0;
    border: none;
    width: 1600px;
    height: 92.5vh;
    &.homework {
      width: 1045.5px;
      height: 92vh;
    }
    // margin-top: 42px;
  }
  .el-dialog__header {
    display: none;
  }
  .el-dialog__body {
    width: 100%;
    height: 100%;
    padding: 0 !important;
    .report_dia_main {
      width: 100%;
      height: 100%;
      padding: 11vh 56px 4.67vh;
      background-position: center;
      background-size: 100%;
      background-repeat: no-repeat;
      // @include hidden_scroll;
      // overflow: hidden;
      .hidden_scroll {
        height: 100%;
        border-radius: 1.67vh;
      }
      .mj-button {
        position: absolute;
        bottom: 4.17vh;
        left: 50%;
        transform: translate(-50%);
      }
    }
    .report_dia_title {
      color: #fff;
      text-align: center;
      font-family: $font-special;
      font-size: 4vh;
      font-style: normal;
      font-weight: 400;
      line-height: 6vh; /* 150% */
      letter-spacing: 20px;
      @include font-stroke(#2d39bc, 6px);
    }
    .reward-list {
      margin-bottom: 2vh;
      display: flex;
      align-items: center;
      justify-content: center;
      &-item {
        display: flex;
        align-items: center;
        margin: 0 40px;
        color: $font-color;
        font-family: $font-special;
        font-size: 2.67vh;
        .x-icon {
          margin-right: 16px;
        }
      }
    }
    .card-box {
      background-color: #f5feff;
      padding: 2vh;
      border-radius: 1.67vh;
      margin-bottom: 3.33vh;
      .card-list {
        display: flex;
      }

      &-rate {
        width: 460px;
        height: 13.83vh;
        border-radius: 1.67vh;
        padding: 1.33vh 24px;
        margin-top: 0;
        background: linear-gradient(
          92deg,
          #83b7fe -9.21%,
          #90e9fa 37.09%,
          #90e9fa 70.16%,
          #83b7fe 111.05%
        );
        color: #2d39bc;
        font-family: $font-special;
        font-size: 2.33vh;

        .progress-box {
          margin-top: 2.75vh;
        }
      }
      .xxl-card {
        margin-left: 30px;
        &:first-child {
          margin-left: 0;
        }
      }
    }

    .report_dia_homework {
      width: 100%;
      height: 100%;
      margin: 0 auto;
      padding-top: 11.83vh;
      background-position: center;
      background-size: 100%;
      background-repeat: no-repeat;
      position: relative;
      .info {
        width: 888px;
        height: 33.83vh;
        padding: 2vh;
        background-color: #f5feff;
        border-radius: 2vh;
        margin: 0 auto;
        .card-box-rate {
          width: 100%;
          height: 13.83vh;
          margin-bottom: 2vh;
        }
        .flex {
          display: flex;
          width: 100%;
          justify-content: space-between;
        }
      }

      .reward-list {
        margin: 4.67vh auto;
      }
      .x-button {
        position: absolute;
        bottom: 7.92vh;
        left: 50%;
        transform: translate(-50%);
      }
    }
  }
}
</style>
