<template>
  <!--  @touchmove.stop.prevent="" -->
  <view
    class="mix-loading-mask"
    @tap.stop="() => {}"
    @touchmove.stop.prevent="() => {}"
    v-if="status"
    :class="[{ 'is-fullscreen': fullscreen }]"
    :style="{ backgroundColor: background || '' }"
  >
    <view class="mix-loading-spinner">
      <!-- <svg v-if="!spinner" class="circular" viewBox="25 25 50 50">
        <circle class="path" cx="50" cy="50" r="20" fill="none" />
      </svg>
      <i v-else :class="spinner"></i> -->
      <i :class="spinner ? spinner : 'loader'"></i>
    </view>
  </view>
</template>

<script>
/**
 * 加载数据时显示动效
 * @displayName Loading
 * @since 0.0.1
 * @property {Boolean} value/v-model = [true|false] 是否显示（默认false）
 * @property {Boolean} fullscreen = [true|false] 是否全屏
 * @property {String} spinner = [loader|iview|iview-big|clock|hourglass|loader1|loader2|loader3|loader4|loader5|loader6|loader7|loader8|loader9|loader10|battery|magnifier|eye|coffee_cup|circle] 自定义加载效果类名（默认loader）
 * @property {String} background 遮罩背景色（默认#ffffffe6）
 */
export default {
  name: 'mix-loading',
  props: {
    /**
     * value:是否显示
     * @model
     */
    value: { type: Boolean, default: false },
    /**
     * 是否全屏
     */
    fullscreen: { type: Boolean, default: false },
    /**
     * 自定义加载效果类名
     * @values loader,iview,iview-big,clock,hourglass,loader1,loader2,loader3,loader4,loader5,loader6,loader7,loader8,loader9,loader10,battery,magnifier,eye,coffee_cup,circle
     */
    spinner: { type: String, default: 'loader' },
    /**
     * 遮罩背景色
     */
    background: { type: String, default: '#ffffffe6' }
  },
  data() {
    return {
      status: false
    }
  },
  watch: {
    value: function (val, old) {
      if (this.status != val) {
        this.status = val
        this.$emit('input', this.status)
      }
    }
  },
  created: function () {
    this.status = this.value
  },
  methods: {}
}
</script>

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

.mix-loading-mask {
  width: 100% !important;
  max-width: 100vw;
  height: 100%;
  background: rgba(0, 0, 0, 0.1);
  position: absolute;
  z-index: 9999;
  left: 0;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
// .mix-loading-mask {
//   position: absolute;
//   z-index: 2000;
//   background-color: rgba(255, 255, 255, 0.9);
//   margin: 0;
//   top: 0;
//   right: 0;
//   bottom: 0;
//   left: 0;
//   -webkit-transition: opacity 0.3s;
//   transition: opacity 0.3s;
// }
.mix-loading-mask.is-fullscreen {
  position: fixed;
}
.mix-loading-mask.is-fullscreen .mix-loading-spinner {
  margin-top: -90rpx;
}
.mix-loading-mask.is-fullscreen .mix-loading-spinner .circular {
  height: 140rpx;
  width: 140rpx;
}
.mix-loading-spinner {
  top: 48%;
  margin-top: -42rpx;
  width: 100%;
  text-align: center;
  position: absolute;
}
.mix-loading-spinner .mix-loading-text {
  color: $mix-c-primary;
  margin: 6rpx 0;
  font-size: 28rpx;
}
.mix-loading-spinner .circular {
  height: 90rpx;
  width: 90rpx;
  // animation: loading-rotate 2s linear infinite;
}
.mix-loading-spinner .path {
  animation: loading-dash 1.5s ease-in-out infinite;
  stroke-dasharray: 90, 150;
  stroke-dashoffset: 0;
  stroke-width: 2;
  stroke: $mix-c-primary;
  stroke-linecap: round;
}
.mix-loading-spinner i {
  color: $mix-c-primary;
}
@keyframes loading-rotate {
  100% {
    transform: rotate(360deg);
  }
}
@keyframes loading-dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -40px;
  }
  100% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -120px;
  }
}
</style>