<template>
  <div class="zy-loading" v-if="loadingShow" @touchmove.stop.prevent="moveHandle" :animation="animationData">
    <div class="zy-loading-mask"></div>
    <div class="zy-loading-border"></div>
    <div class="zy-loading-img"></div>
  </div>
</template>

<script>
export default {
  name: 'ZYLoading',
  data () {
    return {
      animationData: {}
    }
  },
  computed: {
    loadingShow() {
      // console.log('this.$store',this.$store.getters.loading)
      return this.$store.getters.loading
    }
  },
  methods: {
    show () {
      const animation = uni.createAnimation({
        duration: 500,
        timingFunction: 'ease-in-out'
      })
      animation.opacity(0).step()
      this.animationData = animation.export()
      setTimeout(() => {
        animation.opacity(1).step()
        this.animationData = animation.export()
      }, 50)
    },
    moveHandle () {}
  },
  watch: {
    loadingShow (to) {
      // if (to) this.show()
    }
  }
}
</script>

<style lang="scss">
@import './loading';
</style>