<template>
  <view
    :style="{
      width: systemInfo.width + 'rpx',
      height: systemInfo.height + 'rpx',
      'background-color': bgcolor,
      position: 'absolute',
      left: '0',
      top: '0',
      'z-index': '9998',
      overflow: 'hidden'
    }"
  >
    <view
      v-for="(item, index) in skeletonRectLists"
      :key="index"
      :class="{ chiaroscuro: loading == 'chiaroscuro' }"
      :style="{
        width: item.width + 'rpx',
        height: item.height + 'rpx',
        'background-color': 'rgb(194, 207, 214)',
        position: 'absolute',
        left: item.left + 'rpx',
        top: item.top + 'rpx'
      }"
    ></view>
    <view
      v-for="(item, index) in skeletonCircleLists"
      :key="index"
      :class="{ chiaroscuro: loading == 'chiaroscuro' }"
      :style="{
        width: item.width + 'rpx',
        height: item.height + 'rpx',
        'background-color': 'rgb(194, 207, 214)',
        'border-radius': item.width + 'rpx',
        position: 'absolute',
        left: item.left + 'rpx',
        top: item.top + 'rpx'
      }"
    ></view>

    <view class="cv-spinbox" v-if="loading == 'spin'">
      <view class="cv-spin"></view>
    </view>
  </view>
</template>
<script>
import mpMixin from '../../libs/mixin/mpMixin.js';
import mixin from '../../libs/mixin/mixin.js';
export default {
  mixins: [mpMixin, mixin],
  name: '',
  props: {
    bgcolor: {
      type: String,
      default: '#FFF'
    },
    selector: {
      type: String,
      default: 'skeleton'
    },
    loading: {
      type: String,
      default: 'spin'
    }
  },
  data() {
    return {
      loadingAni: ['spin', 'chiaroscuro'],
      systemInfo: {},
      skeletonRectLists: [],
      skeletonCircleLists: []
    };
  },
  created() {},
  mounted() {},
  methods: {
    attached() {
      //默认的首屏宽高，防止内容闪现
      const systemInfo = uni.getStorageSync('cache_system_info');
      (this.systemInfo = {
        width: systemInfo.windowWidth,
        height: systemInfo.windowHeight
      }),
        (this.loading = this.loadingAni.includes(this.loading) ? this.loading : 'spin');
    },
    rectHandle() {
      const that = this;
      //绘制不带样式的节点
      uni
        .createSelectorQuery()
        .selectAll(`.${this.selector}-rect`)
        .boundingClientRect()
        .exec(function (res) {
          that.skeletonRectLists = res[0];
        });
    },

    radiusHandle() {
      const that = this;
      uni
        .createSelectorQuery()
        .selectAll(`.${this.selector}-radius`)
        .boundingClientRect()
        .exec(function (res) {
          that.skeletonCircleLists = res[0];
        });
    }
  },
  ready() {
    const that = this;

    //绘制背景
    uni
      .createSelectorQuery()
      .select(`.${this.data.selector}`)
      .boundingClientRect()
      .exec(function (res) {
        that.systemInfo.height = res[0].height + res[0].top;
        //绘制矩形
        that.rectHandle();

        //绘制圆形
        that.radiusHandle();
      });
  }
};
</script>
<style>
.spinbox {
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  z-index: 9999;
}

.spin {
  display: inline-block;
  width: 64rpx;
  height: 64rpx;
}

.spin:after {
  content: ' ';
  display: block;
  width: 46rpx;
  height: 46rpx;
  margin: 1rpx;
  border-radius: 50%;
  border: 5rpx solid #409eff;
  border-color: #409eff transparent #409eff transparent;
  animation: spin 1.2s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.chiaroscuro {
  width: 100%;
  height: 100%;
  background-color: rgb(194, 207, 214);
  animation-duration: 2s;
  animation-name: blink;
  animation-iteration-count: infinite;
}

@keyframes blink {
  0% {
    opacity: 0.4;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0.4;
  }
}

@keyframes flush {
  0% {
    left: -100%;
  }

  50% {
    left: 0;
  }

  100% {
    left: 100%;
  }
}

.shine {
  animation: flush 2s linear infinite;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  background: linear-gradient(to left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.85) 50%, rgba(255, 255, 255, 0) 100%);
}
</style>
