<!--
 * @Author: 曹捷
 * @Date: 2021-03-29 09:09:35
 * @LastEditors: 曹捷
 * @LastEditTime: 2022-01-22 17:17:31
 * @Description: fileContent
-->
<template>
  <transition name="el-loading-fade" @after-leave="handleAfterLeave">
    <div v-show="visible" class="el-loading-mask" :style="{ backgroundColor: background || '' }" :class="[customClass, { 'is-fullscreen': fullscreen }]">
      <div class="el-loading-spinner flex-c-c" style="height:auto;">
        <span class="la-ball-climbing-dot  " v-if="spinner ==='dot'">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </span>
        <span class="la-line-scale " v-else-if="spinner ==='line'">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </span>
        <span class="la-pacman  " v-else-if="spinner ==='pacman'">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </span>
        <i class="iconfont icon-loading" v-else-if="!spinner"></i>
        <i v-else :class="spinner"></i>
        <p v-if="text" class="el-loading-text" :style="{'color':color}">{{ text }}</p>
      </div>
    </div>
  </transition>
</template>

<script>
export default {
  props: {
    // text: {
    //   type: String,
    //   default: ''
    // },
    // spinner: {
    //   type: String,
    //   default: ''
    // },
    // background: {
    //   type: String,
    //   default: ''
    // },
    // fullscreen: {
    //   type: Boolean,
    //   default: true
    // },
    // visible: {
    //   type: Boolean,
    //   default: false
    // },
    // customClass: {
    //   type: String,
    //   default: ''
    // },
  },
  data () {
    return {
      text: '',
      spinner: '',
      background: '',
      fullscreen: true,
      visible: false,
      customClass: '',
      color: '#40a9ff'
    }
  },

  methods: {
    handleAfterLeave () {
      this.$emit('after-leave');
    },
    init (options) {
      Object.keys(options).forEach(element => {
        if (options[element] !== null) {
          this[element] = options[element]
        }
      })
    },
    setText (text) {
      this.text = text;
    }
  }
};
</script>
<style lang="less">
@import url('./loading.css');
.flex-c-c {
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
}
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}
.icon-loading {
  display: inline-block;
  font-size: 16px !important;
  animation: rotate 3s linear infinite;
}
</style>
