<template>
<transition :name="transitionName">
  <div :class="['f-loading',{'ici-disabled':disabled},{'ici-block':block}]"
       :style="{background:block?maskColor:'',color:backWhite?'#fff':color}">
    <svg :fill="backWhite?'#fff':color" :height="sizeValue[1]" :width="sizeValue[0]" version="1.1" viewBox="0 0 32 32"
         x="0px"
         xml:space="preserve" xmlns="http://www.w3.org/2000/svg" y="0px">
        <g v-if="type==1">
          <path d="M0 12 V20 H4 V12z" transform="translate(2)">
            <animate attributeName="d" begin="0"
                     calcMode="spline" dur="1s" keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8;0.2 0.8 0.4 0.8"
                     keytimes="0;.2;.5;1"
                     repeatCount="indefinite"
                     values="M0 12 V20 H4 V12z; M0 4 V28 H4 V4z; M0 12 V20 H4 V12z; M0 12 V20 H4 V12z"/>
          </path>
          <path d="M0 12 V20 H4 V12z" transform="translate(9)">
            <animate attributeName="d" begin="0.2"
                     calcMode="spline" dur="1s" keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8;0.2 0.8 0.4 0.8"
                     keytimes="0;.2;.5;1"
                     repeatCount="indefinite"
                     values="M0 12 V20 H4 V12z; M0 4 V28 H4 V4z; M0 12 V20 H4 V12z; M0 12 V20 H4 V12z"/>
          </path>
          <path d="M0 12 V20 H4 V12z" transform="translate(16)">
            <animate attributeName="d" begin="0.4"
                     calcMode="spline" dur="1s" keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8;0.2 0.8 0.4 0.8"
                     keytimes="0;.2;.5;1"
                     repeatCount="indefinite"
                     values="M0 12 V20 H4 V12z; M0 4 V28 H4 V4z; M0 12 V20 H4 V12z; M0 12 V20 H4 V12z"/>
          </path>
          <path d="M0 12 V20 H4 V12z" transform="translate(23)">
            <animate attributeName="d" begin="0.6"
                     calcMode="spline" dur="1s" keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8;0.2 0.8 0.4 0.8"
                     keytimes="0;.2;.5;1"
                     repeatCount="indefinite"
                     values="M0 12 V20 H4 V12z; M0 4 V28 H4 V4z; M0 12 V20 H4 V12z; M0 12 V20 H4 V12z"/>
          </path>
        </g>
      <g v-else-if="type==2">
          <circle cx="0" cy="16" r="0" transform="translate(8 0)">
            <animate attributeName="r" begin="0" calcMode="spline" dur="1.2s"
                     keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8;0.2 0.6 0.4 0.8"
                     keytimes="0;0.2;0.7;1" repeatCount="indefinite"
                     values="0; 4; 0; 0"/>
          </circle>
        <circle cx="0" cy="16" r="0" transform="translate(16 0)">
            <animate attributeName="r" begin="0.3" calcMode="spline" dur="1.2s"
                     keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8;0.2 0.6 0.4 0.8"
                     keytimes="0;0.2;0.7;1" repeatCount="indefinite"
                     values="0; 4; 0; 0"/>
          </circle>
        <circle cx="0" cy="16" r="0" transform="translate(24 0)">
            <animate attributeName="r" begin="0.6" calcMode="spline" dur="1.2s"
                     keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8;0.2 0.6 0.4 0.8"
                     keytimes="0;0.2;0.7;1" repeatCount="indefinite"
                     values="0; 4; 0; 0"/>
          </circle>
        </g>
      <g v-else-if="type==3">
          <path d="M0 12 V20 H4 V12z" transform="translate(0 0)">
            <animateTransform attributeName="transform" begin="0" calcMode="spline" dur="1.5s"
                              keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" keytimes="0;0.3;0.6;1"
                              repeatCount="indefinite"
                              type="translate" values="0 0; 28 0; 0 0; 0 0"/>
          </path>
        <path d="M0 12 V20 H4 V12z" opacity="0.5" transform="translate(0 0)">
            <animateTransform attributeName="transform" begin="0.1s" calcMode="spline" dur="1.5s"
                              keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" keytimes="0;0.3;0.6;1"
                              repeatCount="indefinite"
                              type="translate" values="0 0; 28 0; 0 0; 0 0"/>
          </path>
        <path d="M0 12 V20 H4 V12z" opacity="0.25" transform="translate(0 0)">
            <animateTransform attributeName="transform" begin="0.2s" calcMode="spline" dur="1.5s"
                              keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" keytimes="0;0.3;0.6;1"
                              repeatCount="indefinite"
                              type="translate" values="0 0; 28 0; 0 0; 0 0"/>
          </path>
        </g>
      <g v-else-if="type==4">
          <path d="M16 0 A16 16 0 0 0 16 32 A16 16 0 0 0 16 0 M16 4 A12 12 0 0 1 16 28 A12 12 0 0 1 16 4"
                opacity=".25"/>
        <path d="M16 0 A16 16 0 0 1 32 16 L28 16 A12 12 0 0 0 16 4z">
            <animateTransform attributeName="transform" dur="0.8s" from="0 16 16" repeatCount="indefinite"
                              to="360 16 16"
                              type="rotate"/>
          </path>
        </g>
      <g v-else-if="type==5">
         <circle cx="16" cy="3" r="0">
           <animate attributeName="r" begin="0" calcMode="spline" dur="1s"
                    keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8"
                    repeatCount="indefinite" values="0;3;0;0"/>
        </circle>
        <circle cx="16" cy="3" r="0" transform="rotate(45 16 16)">
          <animate attributeName="r" begin="0.125s" calcMode="spline" dur="1s"
                   keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8"
                   repeatCount="indefinite" values="0;3;0;0"/>
        </circle>
        <circle cx="16" cy="3" r="0" transform="rotate(90 16 16)">
          <animate attributeName="r" begin="0.25s" calcMode="spline" dur="1s"
                   keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8"
                   repeatCount="indefinite" values="0;3;0;0"/>
        </circle>
        <circle cx="16" cy="3" r="0" transform="rotate(135 16 16)">
          <animate attributeName="r" begin="0.375s" calcMode="spline" dur="1s"
                   keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8"
                   repeatCount="indefinite" values="0;3;0;0"/>
        </circle>
        <circle cx="16" cy="3" r="0" transform="rotate(180 16 16)">
          <animate attributeName="r" begin="0.5s" calcMode="spline" dur="1s"
                   keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8"
                   repeatCount="indefinite" values="0;3;0;0"/>
        </circle>
        <circle cx="16" cy="3" r="0" transform="rotate(225 16 16)">
          <animate attributeName="r" begin="0.625s" calcMode="spline" dur="1s"
                   keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8"
                   repeatCount="indefinite" values="0;3;0;0"/>
        </circle>
        <circle cx="16" cy="3" r="0" transform="rotate(270 16 16)">
          <animate attributeName="r" begin="0.75s" calcMode="spline" dur="1s"
                   keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8"
                   repeatCount="indefinite" values="0;3;0;0"/>
        </circle>
        <circle cx="16" cy="3" r="0" transform="rotate(315 16 16)">
          <animate attributeName="r" begin="0.875s" calcMode="spline" dur="1s"
                   keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8"
                   repeatCount="indefinite" values="0;3;0;0"/>
        </circle>
        <circle cx="16" cy="3" r="0" transform="rotate(180 16 16)">
          <animate attributeName="r" begin="0.5s" calcMode="spline" dur="1s"
                   keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8"
                   repeatCount="indefinite" values="0;3;0;0"/>
        </circle>
        </g>
      <g v-else-if="type==6">
         <path d="M14 0 H18 V8 H14 z" opacity=".1" transform="rotate(0 16 16)">
            <animate attributeName="opacity" begin="0" dur="1s" from="1" repeatCount="indefinite" to=".1"/>
          </path>
        <path d="M14 0 H18 V8 H14 z" opacity=".1" transform="rotate(45 16 16)">
            <animate attributeName="opacity" begin="0.125s" dur="1s" from="1" repeatCount="indefinite" to=".1"/>
          </path>
        <path d="M14 0 H18 V8 H14 z" opacity=".1" transform="rotate(90 16 16)">
            <animate attributeName="opacity" begin="0.25s" dur="1s" from="1" repeatCount="indefinite" to=".1"/>
          </path>
        <path d="M14 0 H18 V8 H14 z" opacity=".1" transform="rotate(135 16 16)">
            <animate attributeName="opacity" begin="0.375s" dur="1s" from="1" repeatCount="indefinite" to=".1"/>
          </path>
        <path d="M14 0 H18 V8 H14 z" opacity=".1" transform="rotate(180 16 16)">
            <animate attributeName="opacity" begin="0.5s" dur="1s" from="1" repeatCount="indefinite" to=".1"/>
          </path>
        <path d="M14 0 H18 V8 H14 z" opacity=".1" transform="rotate(225 16 16)">
            <animate attributeName="opacity" begin="0.675s" dur="1s" from="1" repeatCount="indefinite" to=".1"/>
          </path>
        <path d="M14 0 H18 V8 H14 z" opacity=".1" transform="rotate(270 16 16)">
            <animate attributeName="opacity" begin="0.75s" dur="1s" from="1" repeatCount="indefinite" to=".1"/>
          </path>
        <path d="M14 0 H18 V8 H14 z" opacity=".1" transform="rotate(315 16 16)">
            <animate attributeName="opacity" begin="0.875s" dur="1s" from="1" repeatCount="indefinite" to=".1"/>
          </path>
        </g>
    </svg>
    <span class="loading-text"><slot></slot></span><span class="endtext"><slot name="endtext"></slot></span>
  </div>
</transition>
</template>

<script>
export default {
  name: 'a-loading',
  data() {
    return {};
  },
  computed: {
    transitionName() {
      let name = 'none'
      if (this.block) {
        if (this.$slots.endtext) {
          name = 'loading-endtext'
        } else {
          name = 'loading'
        }
      }
      return name
    },
    sizeValue() {
      var obj = ['30px', '30px'];
      switch (this.size) {
        case 'mintiny':
          obj = ['10px', '10px'];
          break;
        case 'tiny':
          obj = ['18px', '18px'];
          break;
        case 'small':
          obj = ['22px', '22px'];
          break;
        case 'big':
          obj = ['36px', '36px'];
          break;
      }
      return obj;
    }
  },

  props: {
    size: {
      type: String,
      default: ''
    },
    backWhite: Boolean,
    disabled: Boolean,
    block: Boolean,
    color: {
      type: String,
      default: '#f45a12'
    },
    maskColor: {
      type: String,
      default: 'rgba(255,255,255,.6)'
    },
    type: {
      type: [Number, String],
      default: '4'
    }
  },
};
</script>
