<template>
  <view
    class="xd-loading"
    @touchmove.stop.prevent
    :style="{zIndex:loading.zIndex <= 4000? 4000 :loading.zIndex }"
    v-if="show"
  >
    <template v-if="0">
      <view
        class="xd-loading__mask"
        v-if="loading.isMask"
        :style="{
          backgroundColor:loading.bgColor,
      }"></view>
      <view class="xd-loading__body" :style="{borderRadius: loading.radius}">
        <view class="xd-loading__body-content"></view>
        <view class="xd-loading__body-title" v-if="loading.title">{{loading.title}}</view>
      </view>
    </template>
    <template v-else>
      <view
        class="xd-loading__mask"
        v-if="loading.isMask"
        :style="[{backgroundColor: loading.maskBackgroundColor}]"
      ></view>
      <view class="loading-line-x">
        <text :style="{background: mainColor}"></text>
        <text :style="{background: mainColor}"></text>
        <text :style="{background: mainColor}"></text>
        <text :style="{background: mainColor}"></text>
        <text :style="{background: mainColor}"></text>
      </view>
    </template>
  </view>
</template>

<script>
  import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
  import {mapState,  mapMutations} from 'vuex';

  export default {
    name: "XdLoading",
    components: {
      XdFontIcon
    },
    props:{
      getLayoutInfo: {
        type: Object|null,
        default: null
      }
    },
    computed: {
      ...mapState([
        'xdLoading',
        'currentStyle'
      ])
    },
    data(){
      return {
        show: false,

        mainColor: '#999',

        /**
         * @description 确认框
         * @property loading {Object}
         * @property loading.zIndex {Number} 样式层级关系 默认：1700
         * @property loading.radius {String} 边框圆角  默认：确认30rpx
         * @property loading.title {String} 文字显示  默认：''
         * @property loading.bgColor {String} 文字显示  默认：rgba(0,0,0,0)
         * @property loading.isMask {Boolean} 是否显示遮罩层  默认：true
         */
        loading: {},

        defaultLoading: {
          zIndex: 4000,
          title: '',
          radius: '30rpx',
          bgColor: 'rgba(0,0,0,0.05)',
          isMask: true,
          maskBackgroundColor:'rgba(255,255,255,0.1)'
        }
      }
    },
    watch:{
      xdLoading(value){
        this.init(value);
      },
    },
    created(){
      this.init(this.xdLoading);
    },
    methods: {
      ...mapMutations(['setXdLoading']),

      init(value) {
        //只有当前访问页面触发逻辑
        if (this.$root.$isShow === false) {
          return;
        }

        if (this.currentStyle !== null) this.mainColor = this.currentStyle.mainColor;
        if (value === null) {
          this.show = false;
          this.loading = {}
        } else {
          this.loading = Object.assign({},
            this.$xdUniHelper.cloneDeep(this.defaultLoading),
            value,
          );
          console.log('xdLoading', this.confirm);
          this.show = true;
        }
      },

      handleConfirm(status){
        if(typeof this.confirm.success === 'function') {
          let params = {};
          params[status] = true;
          this.confirm.success(params);
          this.close();
        }else {
          this.close();
        }
      },

      close(){
        this.setXdLoading(null);
      },
    }
  }
</script>

<style scoped lang="less">
  @-webkit-keyframes spin {
    0% {
      -webkit-transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(360deg);
    }
  }

  @keyframes spin {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }

  .xd-loading {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;

    &__mask {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background: rgba(255,255,255,0.1);
    }

    &__body {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: unit(300, rpx);
      background: rgba(0,0,0,.8);
      padding: unit(60,rpx) unit(30, rpx);
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      box-sizing: border-box;

      &-content {
        height: unit(90, rpx);
        width: unit(90, rpx);
        background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iMTIwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgxMDB2MTAwSDB6Ii8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTlFOUU5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTMwKSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iIzk4OTY5NyIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgzMCAxMDUuOTggNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjOUI5OTlBIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDYwIDc1Ljk4IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0EzQTFBMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSg5MCA2NSA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNBQkE5QUEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoMTIwIDU4LjY2IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0IyQjJCMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgxNTAgNTQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjQkFCOEI5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDMkMwQzEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTE1MCA0NS45OCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDQkNCQ0IiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTEyMCA0MS4zNCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNEMkQyRDIiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTkwIDM1IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0RBREFEQSIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgtNjAgMjQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTJFMkUyIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKC0zMCAtNS45OCA2NSkiLz48L3N2Zz4=') no-repeat;
        background-size: 100%;
        animation: spin 2s linear infinite;
        -webkit-animation: spin 2s linear infinite;
      }

      &-title {
        color: #eee;
        margin-top: unit(22,rpx)
      }

    }
  }
</style>
