<template>
  <view class="custom-loading" v-if="visible">
    <view class="centerContent">
      <!-- <image class="loading-icon" src="/static/icon/logotransparent.png" /> -->
      <image class="loading-icon" src="https://eshangtech.com/minTestImg/logotransparent.png" />

      
      <!-- <text class="loading-text">{{ text }}</text> -->
    </view>
  </view>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
    }
  },
  data() {
    return {
      timer: null
    };
  },
  watch: {
    visible(newVal) {
      console.log('newVal', newVal);
      if (newVal) {
        // 当 visible 变为 true 时，设置 15 秒后自动隐藏
        this.startTimer();
      } else {
        // 当 visible 变为 false 时，清除计时器
        this.clearTimer();
      }
    }
  },
  methods: {
    startTimer() {
      this.clearTimer(); // 先清除已有的计时器
      this.timer = setTimeout(() => {
        this.$emit('update:visible', false); // 15 秒后自动隐藏
      }, 15000); // 15 秒 = 15000 毫秒
    },
    clearTimer() {
      if (this.timer) {
        clearTimeout(this.timer);
        this.timer = null;
      }
    }
  },
  beforeDestroy() {
    // 组件销毁前清除计时器
    this.clearTimer();
  }
};
</script>

<style>
.custom-loading {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* background: rgba(0, 0, 0, 0.5); */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999999;
  width: 100vw;
  height: 100vh;
}

.centerContent {
  width: 100px;
  height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* background: rgba(0, 0, 0, 0.5); */
  border-radius: 18rpx;
  box-sizing: border-box;
  padding: 16rpx;
}

.loading-icon {
  width: 60rpx;
  height: 60rpx;
  animation: spinZ 3s linear infinite;
  /* 添加旋转动画 */
}

@keyframes spinZ {
  0% {
    transform: rotateY(0deg);
    /* 从 0 度开始 */
  }

  50% {
    transform: rotateY(180deg);
    /* 旋转到 360 度 */
  }

  100% {
    transform: rotateY(0deg);
    /* 旋转到 360 度 */
  }
}

.loading-text {
  color: white;
  margin-top: 10px;
  font-size: 28rpx;
}
</style>