<script setup lang="ts">
import Card from '@/page/subject/components/Card.vue'
import { userStore } from '@/stores'
import { storeToRefs } from 'pinia'

interface dataType {
  // seeTranslateNum: number;
  // seeWordNum: number;
  rate: number
  readCount: number
  readTime: string
  rewardData: {
    diamond: number
    exp: number
    nextGrade: null | number
    nextType: null | number
  }
}
const props = withDefaults(
  defineProps<{
    modelValue: boolean
    data: dataType
  }>(),
  {
    data: () => ({
      // seeTranslateNum: 0,
      // seeWordNum: 0,
      rate: 0,
      readCount: 0,
      readTime: '',
      rewardData: {
        diamond: 0,
        exp: 0,
        nextGrade: null,
        nextType: null,
      },
    }),
    modelValue: false,
  },
)
const emits = defineEmits(['update:modelValue', 'changeModel', 'next', 'back'])
const { userInfo } = storeToRefs(userStore())

const OSS_URL = import.meta.env.VITE_OSS_URL
const headBg = `url(${OSS_URL}/urm/dia_head_bg.svg) 100%/100% no-repeat`
const textType = [
  '跌倒了，爬起来再战！',
  '没关系，失败是成功的爸爸！',
  '勇往直前，不怕失败！',
  '坚持不懈，成功在望！',
  '不要气馁，继续努力！',
  '有进步空间，继续加油！',
  '基础不错，继续提升！',
  '值得骄傲，向完美进发！',
  '实力不凡，继续冲刺！',
  '你离完美只有一步之遥！',
  '超凡实力，名不虚传！',
]
const primaryBg = `url(${OSS_URL}/urm/report_dia_bg_primary.png) 100%/100% no-repeat`
const successBg = `url(${OSS_URL}/urm/report_dia_bg_success.png) 100%/100% no-repeat`
const errorBg = `url(${OSS_URL}/urm/report_dia_bg_error.png) 100%/100% no-repeat`
const warningBg = `url(${OSS_URL}/urm/report_dia_bg_warning.png) 100%/100% no-repeat`
const bgConfig = {
  primary: primaryBg,
  success: successBg,
  error: errorBg,
  warning: warningBg,
}

const show = computed({
  get() {
    return props.modelValue
  },
  set(newVal) {
    emits('update:modelValue', newVal)
  },
})

// 按钮文字显示提高难度或降低难度

const titleText = computed(
  () =>
    textType[
      props.data.rate === 1 ? 10 : props.data.rate === 0 ? 0 : Number(String(props.data.rate)[2])
    ],
)
const cardColor = computed(() => {
  return props.data.rate === 1
    ? 'success'
    : props.data.rate >= 0.8
      ? 'primary'
      : props.data.rate >= 0.6
        ? 'warning'
        : 'error'
})
const bg = computed(() => bgConfig[cardColor.value])
const typeStyle: anyObj = {
  primary: {
    color: '#2D39BC',
    borderColor: '#90FCF7',
    bg: '#F3FEFF',
    title: '实力不凡 继续冲刺',
  },
  success: {
    color: '#2F8A5B',
    borderColor: '#82E64B',
    bg: '#F9FFF5',
    title: '超凡实力 名不虚传',
  },
  error: {
    color: '#BC2D36',
    borderColor: '#FF5C48',
    bg: '#FFF5F5',
    title: '跌倒了 爬起来再战',
  },
  warning: {
    color: '#A13C00',
    borderColor: '#FEDD7A',
    bg: '#FFFEF5',
    title: '基础不错 继续提升',
  },
}

function onClick(type: number) {
  switch (type) {
    case 0:
      emits('changeModel')
      break
    case 1:
      emits('next')
      break
    case 2:
      emits('back')
      break
  }
}
const statistics = computed(() => [
  {
    title: '正确率：',
    rate: props.data.rate,
    width: 836,
    showTitleRate: true,
  },
  {
    title: '阅读时长',
    text: props.data.readTime,
    width: 404,
  },
  {
    title: '阅读词汇量',
    text: props.data.readCount,
    width: 404,
  },
  // {
  //     title: '查看单词数',
  //     text: props.data.seeWordNum,
  //     width: 258,
  // },
  // {
  //     title: '查看翻译量',
  //     text: props.data.seeTranslateNum,
  //     width: 258,
  // },
])
</script>

<template>
  <el-dialog
    v-model="show"
    class="report-dia"
    :show-close="false"
    destroy-on-close
    align-center
    v-bind="$attrs"
  >
    <div class="body">
      <div class="content" :style="{ background: typeStyle[cardColor].bg }">
        <div class="title" :style="{ background: bg }">
          <LineFont
            :text="titleText"
            :borderColor="typeStyle[cardColor].color"
            size="76"
            border="14"
          />
        </div>
        <div class="info">
          <div class="reward" :style="{ '--borderColor': typeStyle[cardColor].borderColor }">
            <!-- <div><Icon name="diamond" size="72" /> +10</div>

                        <div><Icon name="coin" size="72" /> +10</div> -->
            <ItemPopover
              placement="bottom"
              :data="{
                iconName: 'reward_diamond',
                personalCount: userInfo.diamond,
              }"
            >
              <div class="user-assets-item">
                <Icon name="diamond" size="72" />
                <span>+{{ props.data.rewardData.diamond }}</span>
              </div>
            </ItemPopover>
            <ItemPopover
              placement="bottom"
              :data="{
                iconName: 'reward_exp',
                personalCount: userInfo.experience,
                rewardName: '经验值',
              }"
            >
              <div class="user-assets-item">
                <Icon name="exp_nobg" size="72" />
                <span>+{{ props.data.rewardData.exp }}</span>
              </div>
            </ItemPopover>
          </div>
          <div class="data">
            <Card
              v-for="item in statistics"
              :key="item.title"
              v-bind="item"
              :type="cardColor"
              height="160"
              size="36"
            ></Card>
          </div>
        </div>
      </div>
      <div :class="{ footer: true, short: props.data.rewardData.nextType }">
        <Btn v-if="props.data.rewardData.nextType" type="success" tilt @click="onClick(0)">{{
          props.data.rewardData.nextType === 1 ? '提高难度' : '降低难度'
        }}</Btn>
        <Btn tilt @click="onClick(1)">下一关</Btn>
        <Btn type="info" tilt @click="onClick(2)">返回</Btn>
        <!-- <Btn tilt @click="onClick(1)">下一关</Btn> -->
      </div>
    </div>
  </el-dialog>
</template>

<style lang="scss">
.report-dia {
  width: 920px;
  height: 78.5vh;
  margin: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
  .el-dialog__header {
    display: none;
  }
  .el-dialog__body {
    height: 100%;
    padding: 0 !important;

    .body {
      .content {
        height: 66.5vh;
        border-radius: 1.67vh;
        background: #fff;
        .title {
          display: flex;
          align-items: center;
          justify-content: center;
          height: 15.5vh;
        }
        .info {
          padding: 0 40px;

          .reward {
            padding: 0 40px;
            height: 13.67vh;
            border-bottom: 0.33vh dashed var(--borderColor);
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: $font-special;
            font-size: 2.67vh;
            position: relative;
            div {
              display: flex;
              align-items: center;
              margin-right: 80px;
              &:last-child {
                margin-right: 0;
              }
              .x-icon {
                margin-right: $space-2;
              }
            }
            &::after,
            &::before {
              display: block;
              content: '';
              width: 16px;
              height: 1.33vh;
              background: var(--borderColor);
              position: absolute;
              bottom: -0.67vh;
              transform: rotate(45deg);
            }

            &::after {
              left: -8px;
            }

            &::before {
              right: -8px;
            }
          }
          .data {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            .xxl-card {
              margin-top: $space-4_h;
            }
          }
        }
      }
      .footer {
        display: flex;
        justify-content: center;
        height: 6.67vh;
        margin-top: 5.33vh;

        .x-button {
          margin-right: 172px;

          &:last-child {
            margin-right: 0;
          }
        }
        &.short {
          .x-button {
            margin-right: 52px;

            &:last-child {
              margin-right: 0;
            }
          }
        }
      }
    }
  }
}
</style>
