<template>
  <view class="load-view">
    <view v-if="loading" class="load-view-loading">
      <wd-loading size="40" color="#999999"></wd-loading>
      <!--      <view class="load-text">{{ loadText }}</view>-->
      <div class="loading-text">
        加载中
        <span></span>
        <span></span>
        <span></span>
      </div>
    </view>
    <view v-if="empty && !loading" class="not-data">
      <image :src="notInspector" alt="" />
      <view>{{ emptyText }}</view>
    </view>
    <view v-else-if="!empty">
      <slot></slot>
    </view>
  </view>
</template>

<script setup lang="ts">
import notInspector from '@/static/svg/not-inspector.svg';
import { ref, watchEffect } from 'vue';

const props = withDefaults(
  defineProps<{
    emptyText?: string;
    loading: boolean;
    empty: boolean;
  }>(),
  {
    emptyText: '暂无数据',
    empty: true,
  },
);

const loadText = ref('加载中...');
let loadInterval = ref(undefined);
watchEffect(() => {
  const loading = props.loading;
  if (loading) {
    const text = '加载中';
    const dots = ['.', '..', '...'];
    let index = 0;
    loadInterval.value = setInterval(() => {
      index = index === 2 ? 0 : index + 1;
      loadText.value = text + dots[index];
    }, 500);
  } else {
    clearInterval(loadInterval.value);
    loadInterval.value = undefined;
  }
});
</script>

<style scoped lang="scss">
.load-view {
  position: relative;

  &-loading {
    width: 750rpx;
    min-height: 300rpx;
    position: absolute;
    display: flex;
    place-content: center;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 100%;
    z-index: 1000;
    background-color: rgba(0, 0, 0, 0.02);
  }
}

.not-data {
  color: #666;
  text-align: center;
  font-size: 28rpx;
  font-style: normal;
  font-weight: 400;

  & > image {
    width: 250rpx;
    height: 250rpx;
    margin-bottom: 20rpx;
  }
}

.loading-text {
  //width: 100rpx;
  font-size: 24rpx;
  white-space: nowrap;
  overflow: hidden;
  position: relative;
  color: #999999;
  margin-top: 10rpx;
}

.loading-text span {
  display: inline-block;
  width: 10rpx;
  height: 10rpx;
  margin-left: 2rpx;
  background: #999999; /* 点的颜色 */
  border-radius: 50%;
  animation: loading 1.5s linear infinite;
  opacity: 0;
}

.loading-text span:nth-child(1) {
  animation-delay: 0s;
  //background-color: red;
}

.loading-text span:nth-child(2) {
  animation-delay: 0.5s;
  //background-color: red;
}

.loading-text span:nth-child(3) {
  animation-delay: 1s;
  //background-color: red;
}

@keyframes loading {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(0.5);
    opacity: 0.5;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
</style>
