<template>
  <div von-loading class="loading-container" :class="{'visible': state == 1, 'visible active': state == 2}">
    <div class="loading" :class="{'loading-bm': showSpinner, 'toast-bm': !showSpinner}">
      <div class="spinner spinner-ios" style='display: none;'>
        <svg viewBox="0 0 64 64">
          <g stroke-width="4" stroke-linecap="round"><line y1="17" y2="29" transform="translate(32,32) rotate(180)"><animate attributeName="stroke-opacity" dur="750ms" values="1;.85;.7;.65;.55;.45;.35;.25;.15;.1;0;1" repeatCount="indefinite"></animate></line><line y1="17" y2="29" transform="translate(32,32) rotate(210)"><animate attributeName="stroke-opacity" dur="750ms" values="0;1;.85;.7;.65;.55;.45;.35;.25;.15;.1;0" repeatCount="indefinite"></animate></line><line y1="17" y2="29" transform="translate(32,32) rotate(240)"><animate attributeName="stroke-opacity" dur="750ms" values=".1;0;1;.85;.7;.65;.55;.45;.35;.25;.15;.1" repeatCount="indefinite"></animate></line><line y1="17" y2="29" transform="translate(32,32) rotate(270)"><animate attributeName="stroke-opacity" dur="750ms" values=".15;.1;0;1;.85;.7;.65;.55;.45;.35;.25;.15" repeatCount="indefinite"></animate></line><line y1="17" y2="29" transform="translate(32,32) rotate(300)"><animate attributeName="stroke-opacity" dur="750ms" values=".25;.15;.1;0;1;.85;.7;.65;.55;.45;.35;.25" repeatCount="indefinite"></animate></line><line y1="17" y2="29" transform="translate(32,32) rotate(330)"><animate attributeName="stroke-opacity" dur="750ms" values=".35;.25;.15;.1;0;1;.85;.7;.65;.55;.45;.35" repeatCount="indefinite"></animate></line><line y1="17" y2="29" transform="translate(32,32) rotate(0)"><animate attributeName="stroke-opacity" dur="750ms" values=".45;.35;.25;.15;.1;0;1;.85;.7;.65;.55;.45" repeatCount="indefinite"></animate></line><line y1="17" y2="29" transform="translate(32,32) rotate(30)"><animate attributeName="stroke-opacity" dur="750ms" values=".55;.45;.35;.25;.15;.1;0;1;.85;.7;.65;.55" repeatCount="indefinite"></animate></line><line y1="17" y2="29" transform="translate(32,32) rotate(60)"><animate attributeName="stroke-opacity" dur="750ms" values=".65;.55;.45;.35;.25;.15;.1;0;1;.85;.7;.65" repeatCount="indefinite"></animate></line><line y1="17" y2="29" transform="translate(32,32) rotate(90)"><animate attributeName="stroke-opacity" dur="750ms" values=".7;.65;.55;.45;.35;.25;.15;.1;0;1;.85;.7" repeatCount="indefinite"></animate></line><line y1="17" y2="29" transform="translate(32,32) rotate(120)"><animate attributeName="stroke-opacity" dur="750ms" values=".85;.7;.65;.55;.45;.35;.25;.15;.1;0;1;.85" repeatCount="indefinite"></animate></line><line y1="17" y2="29" transform="translate(32,32) rotate(150)"><animate attributeName="stroke-opacity" dur="750ms" values="1;.85;.7;.65;.55;.45;.35;.25;.15;.1;0;1" repeatCount="indefinite"></animate></line></g></svg>
      </div>
      <!-- <img src="" alt="✘" v-if='toastType == "fail"'/> -->
      <i class="ff-icon pop-success-icon" v-if='toastType == "success"'></i>
      <span v-if="tips" class="tips" v-html="tips"></span>
      <!-- loading -->
      <div v-if="showSpinner" class="pop-loading-box"><i class="pop-loading-icon"> </i></div>
      <!-- loading end-->
    </div>
  </div>
</template>
<script>
  import {removeElement} from '../utils'

  function preventDefault (e) {
    e.preventDefault()
  }

  export default {
    data () {
      return {
        state: 0,
        tips: '',
        toastType: '',
        showSpinner: true
      }
    },

    destroyed() {
      console.log('[Vonic] Loading _vm destroyed')
      removeElement('von-loading')
    },

    methods: {
      show(options) {
        this.tips = options.tips
        this.toastType = options.toastType

        this.showSpinner = !!options.showSpinner

        this.state = 1
        setTimeout(() => {
          this.state = 2
        })
        document.body.addEventListener('touchmove', preventDefault)
      },

      hide(bool) {
        this.state = 1
        if(bool){
          this.state = 0;
          this.$destroy()
        }else{
          setTimeout(() => {
            this.state = 0
            setTimeout(() => {
              this.$destroy()
            })
          }, 300)
        }
        document.body.removeEventListener('touchmove', preventDefault)
      },

      update(options) {
        this.tips = options.tips
        this.toastType = options.toastType

        this.showSpinner = !!options.showSpinner
      },

      getState() {
        return this.state
      }
    }
  }
</script>
