<!--
* @FileDescription: 全局加载条
* @Author: 黄琪勇
* @Date:2022-05-23 15:33:04
-->
<template>
   <div v-show="loadingBarData.show" class="h-loading-bar">
      <div class="loading-bar-content">
         <!-- <img src="./loading.gif" /> -->
         <div class="loading-svg">
            <svg class="circular" viewBox="0 0 50 50"><circle class="path" cx="25" cy="25" r="20" fill="none" /></svg>
         </div>
         <span>{{ loadingBarData.text }}</span>
      </div>
   </div>
</template>

<!-- <script setup lang="ts">
import { shallowReactive } from "vue"
import { addClass, removeClass } from "@/libs/tools"

const loadingBarData = shallowReactive({
   text: "",
   show: false
})
const body = document.querySelector("body"),
   name = "h-loadingBarBody",
   defaultText = "正在拼命为您加载中..."
/** 显示或关闭加载条 */
const loading = (isShow: boolean, text?: string) => {
   loadingBarData.text = text ?? defaultText
   loadingBarData.show = isShow
   loadingBarData.show ? addClass(body, name) : removeClass(body, name)
}
defineExpose({ loading })
</script> -->

<!-- 由于setup模式 编译方式好像改了 defineExpose出去的属性proxy上面访问不到  setup()访问的到 所以改为这种模式-->
<script lang="ts">
import { shallowReactive, defineComponent } from "vue"
import { addClass, removeClass } from "@/libs/tools"
export default defineComponent({
   setup() {
      const loadingBarData = shallowReactive({
         text: "",
         show: false
      })
      const body = document.querySelector("body"),
         name = "h-loadingBarBody",
         defaultText = "正在加载中..."
      /** 显示或关闭加载条 */
      const loading = (isShow: boolean, text?: string) => {
         loadingBarData.text = text ?? defaultText
         loadingBarData.show = isShow
         loadingBarData.show ? addClass(body, name) : removeClass(body, name)
      }
      return {
         loadingBarData,
         loading
      }
   }
})
</script>
<!-- 取消scoped 减少属性权重  外部添加class可以修改里面的样式 -->
<style lang="scss">
body.h-loadingBarBody {
   overflow: hidden;
}
.h-loading-bar {
   position: fixed;
   top: 0;
   left: 0;
   z-index: 12345678;
   cursor: wait;
   width: 100%;
   height: 100%;
   background: rgba(255, 255, 255, 0.4);
   .loading-bar-content {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -100%);
      z-index: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      color: $color-primary;
      .loading-svg {
         height: 58px;
         width: 58px;
         .circular {
            display: inline;
            height: 100%;
            width: 100%;
            animation: loading-rotate-svg 2s linear infinite;
            .path {
               animation: loading-dash-svg 1.5s ease-in-out infinite;
               stroke-dasharray: 90, 150;
               stroke-dashoffset: 0;
               stroke-width: 4;
               stroke: #f5c42d;
               stroke-linecap: round;
            }
         }
      }
      & > img {
         width: 260px;
      }
      & > span {
         margin-top: 10px;
         font-size: $font-size-extra-large;
      }
   }
}
@keyframes loading-rotate-svg {
   to {
      transform: rotate(360deg);
   }
}
@keyframes loading-dash-svg {
   0% {
      stroke-dasharray: 1, 200;
      stroke-dashoffset: 0;
   }
   50% {
      stroke-dasharray: 90, 150;
      stroke-dashoffset: -40px;
   }
   to {
      stroke-dasharray: 90, 150;
      stroke-dashoffset: -120px;
   }
}
</style>
