<!--
* @FileDescription: 全局加载条
* @Author: 黄琪勇
* @Date:2022-05-23 15:33:04
-->
<template>
  <div v-show="loadingBarData.show" class="h-loading-bar">
    <div class="loading-bar-content">
      <div class="loadingBox">
        <div class="loadingItem"></div>
        <div class="loadingItem"></div>
        <div class="loadingItem"></div>
        <div class="loadingItem"></div>
      </div>
      <div class="loadingTip">{{ loadingBarData.text }}</div>
    </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%, -50%);
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: $themeColor;
    .loadingBox {
      width: 36px;
      height: 36px;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      align-content: space-between;
      margin-bottom: 28px;
      animation: rotate 1.5s linear infinite;
      .loadingItem {
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: #569cfe;
        opacity: 0.5;
        &:nth-child(2) {
          opacity: 1;
        }
      }
    }
    .loadingTip {
      font-size: 20px;
      color: #569cfe;
    }
    @keyframes rotate {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(360deg);
      }
    }
  }
}
</style>
