<template>
  <div v-if="loading">
    <!--只能999，不然菜单抽屉就会有问题-->
    <div style="position:absolute;z-index: 999;width: 100%;height: 100%;top:0;left:0; background: white; opacity: 0.25"
         @contextmenu.prevent>
    </div>
    <div style="position:absolute;z-index: 3999;" :style="styleJs">
      <div class="container animation-6">
        <div class="shape shape1"></div>
        <div class="shape shape2"></div>
        <div class="shape shape3"></div>
        <div class="shape shape4"></div>
      </div>
    </div>
  </div>
  <!--  <div class="loading"></div>-->
</template>
<script>

export default {
  name: 'Loading',
  data() {
    return {
      styleJs: {
        left: '45%',
        top: '50%',
      }
    }
  },
  props: {
    loading: {
      type: Boolean,
      default: false
    },
    shade: {
      type: Boolean,
      default: false
    },
    width: {
      type: Number,
      default: undefined
    },
    height: {
      type: Number,
      default: undefined
    },
  },
  watch: {
    loading(n, o) {
      if (this.shade && n) {
        this.$Spin.show({
          render: (h) => {
            return h('div')
          }
        })
      } else {
        this.$Spin.hide()
      }
    }
  },
  mounted() {
    //如果传入了屏幕的宽度和高度，动态计算位置
    if (this.width && this.height) {
      this.styleJs.left = this.width / 2 + 'px'
      this.styleJs.top = this.height / 2 + 'px'
    }
  },
}
</script>
<style scoped lang="less">
@import './index.less';
</style>
