<!-- src/components/GlobalLoading.vue -->
<template>
   <div class="content-loading-overlay" v-if="isLoading">
    <div class="loading-content">
      <div ref="lottieContainer" class="animation-container"></div>
      <!-- <div class="loading-text">{{ text }}</div> -->
    </div>
  </div>
  <div v-else>
      <slot></slot>
    </div>
</template>

<script>
import lottie from 'lottie-web'
import { mapState } from 'vuex'
import defaultAnimation from '@/assets/loadingAni.json' // 导入JSON文件
export default {
  name: 'GlobalLoading',
  data() {
    return {
      text: '加载中',
      autoplay: true,
      animationData: defaultAnimation,
      animInstance: null
    }
  },
  computed: {
      ...mapState(['isLoading', 'loadingText'])
    },
  mounted() {
    this.$nextTick(()=>{
      this.initAnimation()
    })
  },
  methods: {
    initAnimation() {
      console.log('1====000000');
      this.animInstance = lottie.loadAnimation({
        container: this.$refs.lottieContainer,
        renderer: 'svg',
        loop: true,
        // autoplay: true,
        animationData: this.animationData
      })
      console.log(this.animInstance,'this.animInstance---');
      if (this.animInstance) {
        this.animInstance.play()
      }
    },
    show(text = '加载中...') {
      this.text = text
      this.isLoading = true
      if (this.animInstance) {
        this.animInstance.play()
      }
    },
    hide() {
      this.isLoading = false
      if (this.animInstance) {
        this.animInstance.stop()
      }
    },
    setAnimationData(data) {
      this.animationData = data
      this.initAnimation()
    }
  },
  beforeDestroy() {
    if (this.animInstance) {
      this.animInstance.destroy()
    }
  }
}
</script>

<style scoped>

.global-loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}
/* 关键样式 */
.content-loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.8);
  z-index: 1000; /* 确保高于内容 */
  display: flex;
  justify-content: center;
  align-items: center;
}

.loading-content {
  text-align: center;
}

.animation-container {
  width: 160px;
  height: 160px;
  margin: 0 auto;
}
</style>