<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" :class="direction === 'right' ? 'spinner-right' : ''">
        <img v-if="!spinner" class="circular" :src="require('examples/assets/images/loading.png')" :style="[{'width':`${size}px`},{'height':`${size}px`}]" alt="">
        <!-- <svg class="circular" :style="[{'width':`${size}px`},{'height':`${size}px`}]" viewBox="0 0 200 200">
          <linearGradient id="right" gradientUnits="userSpaceOnUse" x1="150" y1="20" x2="150" y2="180">
            <stop offset="0%" stop-color="rgb(22, 93, 255)"/>
            <stop offset="100%" stop-color="rgba(22, 93, 255, 0.7)" />
          </linearGradient>
          <path fill="url(#right)" d="M100,0v20c44.1,0,80,35.9,80,80c0,44.1-35.9,80-80,80v20c55.2,0,100-44.8,100-100S155.2,0,100,0z"/>
          <linearGradient id="left" gradientUnits="userSpaceOnUse" x1="50" y1="25" x2="50" y2="260">
            <stop  offset="0%" style="stop-color:rgba(255, 255, 255,0)"/>
            <stop  offset="10%" style="stop-color:rgba(255, 255, 255,0)"/>
            <stop  offset="100%" style="stop-color:rgba(22, 93, 255, 0.5)"/>
          </linearGradient>
          <path fill="url(#left)" d="M20,100c0-44.1,35.9-80,80-80V0C44.8,0,0,44.8,0,100s44.8,100,100,100v-20C55.9,180,20,144.1,20,100z"/>
          <circle fill="rgba(22, 93, 255, 0.7)" cx="100" cy="10" r="10"/>
        </svg> -->
        <i v-else :class="spinner"></i>
        <p v-if="text" class="el-loading-text" :class="size === null || Number(size) === 40 || Number(size) === 30 ? '' : 'small-text'">{{ text }}</p>
      </div>
    </div>
  </transition>
</template>

<script>
  export default {
    data() {
      return {
        size: null,
        direction: 'down',
        text: null,
        spinner: null,
        background: null,
        fullscreen: true,
        visible: false,
        customClass: ''
      };
    },
    mounted() {
    },
    methods: {
      handleAfterLeave() {
        this.$emit('after-leave');
      },
      setText(text) {
        this.text = text;
      }
    }
  };
</script>
