<template>
  <view
    class="jx-loading"
    :class="{ isAnimation: isAnimation }"
    v-show="isLoading"
    @touchmove.prevent
  >
    <view class="jx-loading-border"></view>
    <view class="jx-loading-img"></view>
    <view class="text">
      <text style="--i: 1">拼</text>
      <text style="--i: 2">命</text>
      <text style="--i: 3">加</text>
      <text style="--i: 4">载</text>
      <text style="--i: 5">中</text>
      <text style="--i: 6">,</text>
      <text style="--i: 7">请</text>
      <text style="--i: 8">稍</text>
      <text style="--i: 9">后</text>
      <text style="--i: 10">.</text>
      <text style="--i: 11">.</text>
      <text style="--i: 12">.</text>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { store } from '@/store'
import { ref, watch } from 'vue'
const isAnimation = ref<boolean>(false)
const isLoading = ref<boolean>(false)
let time: any = null
let time1: any = null
watch(
  () => store.state.storeInfo.jxLoading,
  (nVal) => {
    if (nVal) {
      clearTimeout(time)
      isLoading.value = true
      setTimeout(() => {
        isAnimation.value = true
      }, 10)
    } else {
      clearTimeout(time1)
      isAnimation.value = false
      setTimeout(() => {
        isLoading.value = false
      }, 500)
    }
  }
)
</script>

<style lang="scss" scoped>
$size: 120rpx;
@use 'sass:math';

%loading {
  position: absolute;
  width: $size;
  height: $size;
  z-index: 999999;
  left: 50%;
  top: 50%;
  margin-left: math.div(-$size, 2);
  margin-top: math.div(-$size, 2);
  box-sizing: border-box;
}

.isAnimation {
  opacity: 1 !important;
}

.jx-loading {
  position: fixed;
  z-index: 999999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba($color: #fff, $alpha: 1);
  opacity: 0;
  transition: all 0.5s;

  .text {
    position: absolute;
    width: 100%;
    text-align: center;
    z-index: 999999;
    top: 50%;
    margin-top: 70rpx;

    text {
      display: inline-block;
      font-size: 28rpx;
      animation: animate 2s ease-in-out infinite;
      animation-delay: calc(0.1s * var(--i));
    }
  }

  .jx-loading-img {
    @extend %loading;
    background: url(data:image/png;base64,[encoded data, 11104 characters])
      center center no-repeat;
    background-size: 80%;
    animation: jump 2s infinite ease-in-out;
    animation-direction: alternate;
  }

  .jx-loading-border {
    @extend %loading;
    border-radius: 50%;
    border-top: 3rpx solid $jx-primary;
    border-bottom: 3rpx solid $jx-primary;
    animation: loading 1s linear infinite;
  }
}

@keyframes jump {
  0% {
    transform: translate(0);
  }
  10% {
    transform: translateY(5px) scaleX(1.2) scaleY(0.8);
  }
  30% {
    transform: translateY(-13px) scaleX(1) scaleY(1) rotateZ(5deg);
  }
  50% {
    transform: translateY(0) scale(1) rotateZ(0);
  }
  55% {
    transform: translateY(0) scaleX(1.1) scaleY(0.9) rotateZ(0);
  }
  70% {
    transform: translateY(-4px) scaleX(1) scaleY(1) rotateZ(-2deg);
  }
  80% {
    transform: translateY(0) scaleX(1) scaleY(1) rotateZ(0);
  }
  85% {
    transform: translateY(0) scaleX(1.05) scaleY(0.95) rotateZ(0);
  }
  100% {
    transform: translateY(0) scaleX(1) scaleY(1);
  }
}

@keyframes loading {
  from {
    transform: rotateZ(0);
  }
  to {
    transform: rotateZ(360deg);
  }
}

@keyframes animate {
  0% {
    transform: translateY(0rpx);
  }

  20% {
    transform: translateY(-15rpx);
  }

  40%,
  100% {
    transform: translateY(0rpx);
  }
}
</style>