<template>
  <view class="yi-loading-wrap" :style="{ height: isShow ? '100%' : '0px' }" @click="clickMaskClose">
    <view class="yi-loading" v-if="isShow">
      <view v-for="v in 5" :key="v" :style="{ '--bg-color': primaryColor }"></view>
    </view>
  </view>
</template>

<script>
import { mapState } from 'vuex';

export default {
  name: 'yi-loading',
  props: {
    // 点击遮罩是否可以关闭
    maskCloseAble: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      isShow: false,
    };
  },
  computed: {
    ...mapState({
      primaryColor: state => state.primaryColor,
    }),
  },
  methods: {
    show() {
      this.isShow = true;
    },
    hide() {
      this.isShow = false;
    },
    clickMaskClose() {
      if (this.maskCloseAble) {
        this.isShow = false;
      }
    },
  },
};
</script>

<style lang="scss">
.yi-loading-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 2020;
}
.yi-loading {
  width: 45rpx;
  position: relative;

  view {
    display: block;
    position: absolute;
    bottom: 0rpx;
    width: 10rpx;
    height: 10rpx;
    background: var(--bg-color);
    -webkit-animation: yi-loading 1.5s infinite ease-in-out;
    animation: yi-loading 1.5s infinite ease-in-out;

    &:nth-child(2) {
      left: 15rpx;
      -webkit-animation-delay: 0.2s;
      animation-delay: 0.2s;
    }

    &:nth-child(3) {
      left: 30rpx;
      -webkit-animation-delay: 0.4s;
      animation-delay: 0.4s;
    }

    &:nth-child(4) {
      left: 45rpx;
      -webkit-animation-delay: 0.6s;
      animation-delay: 0.6s;
    }

    &:nth-child(5) {
      left: 60rpx;
      -webkit-animation-delay: 0.8s;
      animation-delay: 0.8s;
    }
  }
}

@-webkit-keyframes yi-loading {
  0% {
    height: 5rpx;
    -webkit-transform: translateY(0rpx);
    transform: translateY(0rpx);
  }
  25% {
    height: 36rpx;
    -webkit-transform: translateY(15rpx);
    transform: translateY(15rpx);
  }
  50% {
    height: 5rpx;
    -webkit-transform: translateY(0rpx);
    transform: translateY(0rpx);
  }
  100% {
    height: 5rpx;
    -webkit-transform: translateY(0rpx);
    transform: translateY(0rpx);
  }
}

@keyframes yi-loading {
  0% {
    height: 5rpx;
    -webkit-transform: translateY(0rpx);
    transform: translateY(0rpx);
  }
  25% {
    height: 36rpx;
    -webkit-transform: translateY(15rpx);
    transform: translateY(15rpx);
  }
  50% {
    height: 5rpx;
    -webkit-transform: translateY(0rpx);
    transform: translateY(0rpx);
  }
  100% {
    height: 5rpx;
    -webkit-transform: translateY(0rpx);
    transform: translateY(0rpx);
  }
}
</style>
