<template>
  <!--  @touchmove.stop.prevent="" -->
  <view
    class="wb-loading-mask u-flex u-col-center u-row-center u-text-center"
    @tap.stop="() => {}"
    @touchmove.stop.prevent="() => {}"
    v-if="status"
    :class="[{ 'is-fullscreen': fullscreen }]"
    :style="{ backgroundColor: background || '' }"
  >
    <view class="wb-loading-spinner">
      <!-- <svg v-if="!spinner" class="circular" viewBox="25 25 50 50">
        <pendule class="path" cx="50" cy="50" r="20" fill="none" />
      </svg>
      <i v-else :class="spinner"></i> -->
      <i :class="spinner ? spinner : 'default'"></i>
      <view v-if="text" class="wb-loading-mask-text u-p-t-10 u-text-center" :style="{ color }">{{ text }}</view>
    </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} text 加载时文本，默认不显示
 * @property {String} spinner = [default|single1|single2|clock|hourglass|load|surround1|radar1|loading1|loading2|points3|surround2|radar2|points2|points1|battery|lookup|eye|cup|pendule] 加载效果（默认default）
 * @property {String} background 遮罩背景色（默认#ffffffe6）
 * @property {String} color 字体颜色
 */
export default {
  name: 'wb-loading',
  props: {
    /**
     * value:是否显示
     * @model
     */
    value: { type: Boolean, default: false },
    /**
     * 是否全屏
     */
    fullscreen: { type: Boolean, default: false },
    /**
     * 自定义加载效果类名
     * @values default,single1,single2,clock,hourglass,surround1,radar1,loading1,loading2,points3,surround2,radar2,points2,points1,battery,lookup,eye,cup,pendule
     */
    spinner: { type: String, default: 'default' },
    // #a0cfff
    /**
     * 字体颜色
     */
    color: { type: String, default: '#999' },
    /**
     * 遮罩背景色
     */
    background: { type: String, default: '#ffffffe6' },
    /**
     * 加载时文本，默认不显示
     */
    text: { type: String, default: '' }
  },
  data() {
    return {
      status: false
    }
  },
  watch: {
    value: function (val, old) {
      if (this.status != val) {
        this.status = val
        this.$emit('input', this.status)
      }
    }
  },
  created: function () {
    // console.log('object')
    this.status = this.value
  },
  methods: {}
}
</script>

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

.wb-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;
}

.wb-loading-mask-text {
  font-size: 26rpx;
  margin-top: 10rpx;
  letter-spacing: 1rpx;
}
// .wb-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;
// }
.wb-loading-mask.is-fullscreen {
  position: fixed;
  // top: calc(var(--status-bar-height));
}
// .wb-loading-mask.is-fullscreen .wb-loading-spinner {
//   margin-top: -90rpx;
// }
.wb-loading-spinner {
  // top: 48%;
  // margin-top: -42rpx;
  // width: 100%;
  text-align: center;
  // position: absolute;
}
.wb-loading-spinner i {
  color: $wb-c-primary;
}
.wb-loading-spinner .wb-loading-text {
  color: $wb-c-primary;
  margin: 6rpx 0;
  font-size: 28rpx;
}

// .wb-loading-mask.is-fullscreen .wb-loading-spinner .circular {
//   height: 140rpx;
//   width: 140rpx;
// }

// .wb-loading-spinner .circular {
//   height: 90rpx;
//   width: 90rpx;
//   // animation: loading-rotate 2s linear infinite;
// }
// .wb-loading-spinner .path {
//   animation: loading-dash 1.5s ease-in-out infinite;
//   stroke-dasharray: 90, 150;
//   stroke-dashoffset: 0;
//   stroke-width: 2;
//   stroke: $wb-c-primary;
//   stroke-linecap: round;
// }
// @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>