<template>
  <popup :value="!!loadingTitle" style="z-index: 99999;background-color: transparent"
    :class="{
      'loading-mask': mask
    }"
  >
    <aside  class="absolute loading center">
      <svg class="loading-icon" viewBox="0 0 100 100" enable-background="new 0 0 0 0" xml:space="preserve">
            <path fill="#fff" d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50">
              <animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="1s" from="0 50 50" to="360 50 50" repeatCount="indefinite"></animateTransform>
          </path>
        </svg>
      <div>{{loadingTitle}}</div>
    </aside>
  </popup>
</template>

<script>
import props from '../props';
import {
  Popup
} from "$components";
export default {
  name: "popup-loading",
  components: {Popup},
  watch:{

    title:{
      handler:function () {
        if (this.title) {
          return this.open();
        }else if (this.loadingTitle && !this.title) {
          return  this.close();
        }
      },
      immediate:true
    }

  },

  methods:{
    open:function () {

      if (this.title) {
        clearTimeout(this.time);
        clearTimeout(this.delayTime);

        if (this.loadingTitle || this.delay <= 0) {
          this.loadingTitle = this.title;
        } else {
          this.delayTime = setTimeout(()=>{
            this.loadingTitle = this.title;
          },this.delay);
        }

        this.time = setTimeout(()=> this.close(),this.duration || 30000);
      }

    },
    close(){
      clearTimeout(this.delayTime);
      clearTimeout(this.time);
      this.$emit('destroy-popup');
    }
  },

  data(){
    return {
      loadingTitle:''
    }
  },

  props,

  beforeUnmount() {
    this.close();
  }

}
</script>

<style scoped lang="scss" src="../style.scss"></style>