<script setup lang="ts">
import { useLoad } from '@/hooks'
import urmUrl from './urmUrl.json'
import { isWebEvn, $sleep } from '@/utils'
import { loading } from '@/components/mj/mj-loading'
/**
"/urm/system_activity_bg.svg",
"/urm/studyAnalysis_bg.svg",
"/urm/textbook_dia_bg.svg",

"/urm/task-week-kelingqu.svg",
"/urm/task-week-normal.svg",
"/urm/task-week-yilingqu.svg",
"/urm/task_teacher.svg",
"/urm/task_week.svg"
"/urm/mail_bg2.svg",


"/urm/task-day-kelingqu.svg",
"/urm/task-day-normal.svg",
"/urm/task-day-yilingqu.svg",
"/urm/task-lead-kelingqu.svg",
"/urm/task-lead-normal.svg",
 */

const props = withDefaults(
  defineProps<{
    urls?: string[]
    duration?: number
  }>(),
  {
    urls: () => urmUrl.urls,
    duration: 0,
  },
)
const emits = defineEmits(['loaded'])

const OSS_URL = import.meta.env.VITE_OSS_URL
const bg = `url(${OSS_URL}/urm/urm_load_bg.png) 100%/cover no-repeat`

const { size, loadProgress, loadSize, loaded, loadText, init } = useLoad()
const simulationLoadProgress = ref('0%') // 模拟进度
// 关闭全局弹框
loading.hide()

async function envInit() {
  if (!isWebEvn) {
    await $sleep(3000)
  }
  init(props.urls.map(i => `${OSS_URL}${i}`))
}

if (props.duration === 0) {
  envInit()
  // if (isWebEvn) {
  //     init(props.urls.map(i => `${OSS_URL}${i}`));
  // } else {
  //     getAssetsList()
  //         .then(({ data: { data: res } }) => {
  //             init(res, { android: true });
  //         })
  //         .catch(() => {
  //             loaded.value = true;
  //         });
  // }
  watch(loaded, newVal => {
    if (newVal) {
      emits('loaded', loadSize.value)
    }
  })
} else {
  // 时长效果
  let step = 0
  const totalStep = (props.duration * 1000) / 300
  const stepLength = 100 / totalStep
  let timer: any = setInterval(() => {
    if (step >= totalStep) {
      timer = null
      clearInterval(timer)
      emits('loaded', 100)
      return
    }
    step++
    let value = stepLength * step
    if (value > 100) value = 100
    simulationLoadProgress.value = value.toFixed(0) + '%'
  }, 300)
}

const progress = computed(() =>
  props.duration ? simulationLoadProgress.value : loadProgress.value,
)
</script>

<template>
  <div class="load">
    <div class="box">
      <div class="progress">
        <div class="strip">
          <Icon name="urm_load_logo" size="160" />
        </div>
      </div>
      <span class="num">{{ progress }}</span>
    </div>
    <div class="text">
      {{ loadText || '学习资源加载中' }}
      <template v-if="size > 0"> （{{ loadSize }}/{{ size }}） </template>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.load {
  width: 100%;
  height: 100%;
  background: v-bind(bg);
  padding: 0 160px;
  position: relative;
  z-index: 9999;
  .box {
    position: absolute;
    bottom: 7.5vh;
    display: flex;
    align-items: center;
    .progress {
      width: 1500px;
      height: 2.67vh;
      border-radius: 2.5vh;
      background: rgba(0, 0, 0, 0.65);
      box-shadow: 0 0 0.42vh 0 rgba(0, 0, 0, 0.25) inset;

      .strip {
        // transition: width 0.3s linear;
        width: v-bind(progress);
        height: 100%;
        background: $theme-color;
        border-radius: 2.5vh;
        position: relative;
        background: linear-gradient(249deg, #4de798 26.9%, #a2fb6e 79.86%);
        box-shadow: 0 0.33vh 0.33vh 0 rgba(0, 0, 0, 0.15);

        .x-icon {
          position: absolute;
          right: -80px;
          top: -14.17vh;
        }

        &::after {
          content: '';
          display: block;
          position: absolute;
          right: -28px;
          top: -0.83vh;

          width: 4.67vh;
          height: 4.67vh;
          border-radius: 50%;
          box-shadow: 0 0.33vh 0.33vh rgba(0, 0, 0, 0.15);
          background: radial-gradient(189.06% 189.06% at 49.22% 50.78%, #ffffff 0%, #becadf 100%);
        }
      }
    }
    .num {
      color: $font-color;
      font-family: $font-text;
      font-size: 2.67vh;
      line-height: 1.5em;
      margin-left: $space-3;
    }
  }
  .text {
    position: absolute;
    width: 1500px;
    text-align: center;
    bottom: 2vh;
    color: $font-color;
    font-family: $font-text;
    font-size: 2.67vh;
    line-height: 1.5em;
  }
}
</style>
