<template>
  <transition name="fade">
    <div
      class="fl-loading-layout"
      :class="{
    ...size,
    'is-global': type === 'global'
    }"
    >
      <svg
        v-if="colorCircle"
        class="fl-loading"
        :width="defineSize.width"
        :height="defineSize.height"
      >
        <defs>
          <linearGradient id="gradient">
            <stop
              offset="0"
              :stop-color="colorCircle"
            />
            <stop
              offset="100%"
              :stop-color="shaderColor(colorCircle, 20)"
            />
          </linearGradient>
        </defs>
        <circle
          fill="transparent"
          :r="defineSize.r"
          :cx="defineSize.x"
          :cy="defineSize.y"
          stroke="url(#gradient)"
          :stroke-width="defineSize.sw"
        />
      </svg>
      {{ text }}
    </div>
  </transition>
</template>

<script>

export default {
  name: 'FlLoadingSecondary',
  props: {
    size: {
      type: String,
      default: ''
    },
    text: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: ''
    }
  },
  computed: {
    defineSize () {
      switch (this.size) {
        case 'big':
          return {
            r: 26,
            x: 30,
            y: 30,
            sw: 8,
            width: 60,
            height: 60
          }
        case 'small':
          return {
            r: 8,
            x: 10,
            y: 10,
            sw: 4,
            width: 20,
            height: 20
          }
        default: {
          return {
            r: 17,
            x: 20,
            y: 20,
            sw: 6,
            width: 40,
            height: 40
          }
        }
      }
    },

    colorCircle () {
      return '#0060e1'
    }
  },

  methods: {
    shaderColor (color, percent) {
      var num = parseInt(color.slice(1), 16)
      var amt = Math.round(2.55 * percent)
      var R = (num >> 16) + amt
      var G = (num >> 8 & 0x00FF) + amt
      var B = (num & 0x0000FF) + amt
      var newColor = ('#' + (0x1000000 +
          (R < 255 ? R < 1 ? 0 : R : 255) * 0x10000 +
          (G < 255 ? G < 1 ? 0 : G : 255) * 0x100 +
          (B < 255 ? B < 1 ? 0 : B : 255)).toString(16).slice(1))
      return newColor
    }
  }
}
</script>
<style lang="scss" scoped>
  .fl-loading {
    margin-bottom: 10px;
    animation: spin 2s linear infinite;

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

  .is-global.fl-loading-layout {
    position: fixed;
    z-index: 10000;
  }

  .fl-loading-layout {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    background-color: rgba($light-01, 0.7);
  }

  .fade-enter-active, .fade-leave-active {
    animation: opacity 0.2s;
  }

  @keyframes opacity {
    0% {
      opacity: 1;
    }
    99% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
</style>
