<template>
  <div :class="['loading-container',showLoading && needMask && 'loading-need-mask']"
       @click="maskClicked"
       :style="maskStyle">
    <div class="dof-loading" :style="{ top: topPosition +'px'}" v-if="showLoading">
      <div :class="['loading-box', loading.class, loadingText&&loadingText.length>5&&'loadingMoreTextBox', loadingText&&loadingText.length<=5&&'loadingTextBox']"  :aria-hidden="true">
        <image :src="loading.url"
               class="loading-image"
               resize="contain"
               quality="original"></image>
        <text v-if="loadingText" :class="['loading-text', loading.class=='white-loading'?'blackText':'' ]">{{ (loadingText.length<=15)?loadingText:loadingText.substr(0,15)}}</text>
      </div>
    </div>
  </div>
</template>

<style scoped>
	.loading-container{
		position: relative;
    justify-content: center;
    align-items: center;
	}

  .loading-need-mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* background-color: rgba(0, 0, 0, 0.2); */
    background-color: transparent;
  }

  .dof-loading {
    z-index: 9999;
  }

  .loading-box {
    align-items: center;
    justify-content: center;
    border-radius: 26px;
    /* width: 160px; */
    padding-left: 50px;
    padding-right: 50px;
    height: 160px;
    background-color: rgba(0, 0, 0, 0.8);
    box-shadow: 0 0 4px 2px rgba(0, 0, 0, .1);
  }

  .white-loading {
    /* background-color: rgba(207, 207, 207, 1); */
    background-color: rgba(255,255,255, 0.9);
    /* box-shadow: 0 0 0 1px rgba(255, 255, 255, .9) !important;  拿掉阴影，android下有黑边 */
    box-shadow: none;
  }

  .loading-image {
    height: 60px;
    width: 60px;
  }

  .loadingTextBox{
    /* width: 200px; */
    height: 176px;
    margin: 40px auto;
  }

  .loadingMoreTextBox{
     height: 176px;
     padding: 40px;
     flex-wrap: nowrap;
     lines:1;
     width: auto !important;
  }

  .loading-text {
    font-family: PingFangSC-Regular;
    color: #E8E8E8;
    font-size: 24px;
    line-height: 24px;
    margin-top: 16px;
    text-overflow: ellipsis;
    /* width: 140px; */
    text-align: center;
  }

  .blackText{
    color: #1E2E37;
  }
</style>

<script>
  import { GIF, BLACK_GIF, BLACK_Loading } from './type';
  import Utils from '../utils';

  export default {
    props: {
      show: {
        type: Boolean,
        default: false
      },
      loadingText: {
        type: String,
        default: ''
      },
      type: {
        type: String,
        default: 'default'
      },
      interval: {
        type: [Number, String],
        default: 0
      },
      needMask: {
        type: Boolean,
        default: true
      },
      maskStyle: {
        type: Object,
        default: () => ({})
      }
    },

    data: () => ({
      showLoading: false,
      tid: 0
    }),
    watch: {
      show () {
        this.setShow();
      }
    },
    computed: {
      loading () {
        let loading = {};
        switch (this.type) {
          case 'white':
            loading = {
              url: GIF,
              class: 'white-loading'
            };
            break;
          default:
            loading = {
              url: BLACK_Loading,
              class: 'default-loading',
            }
        }
        return loading;
      },
      topPosition () {
        // return (Utils.env.getPageHeight() - 200) / 2;
        return 0
      }
    },
    created () {
      this.setShow();
    },
    methods: {
      maskClicked () {
        this.needMask && (this.$emit('dofLoadingMaskClicked', {}));
      },
      setShow () {
        const { interval, show, showLoading } = this;
        const stInterval = parseInt(interval);
        clearTimeout(this.tid);
        if (show) {
          if (showLoading) {
            return;
          }
          if (stInterval === 0) {
            this.showLoading = true;
          } else {
            this.tid = setTimeout(() => {
              this.showLoading = true;
            }, stInterval);
          }
        } else {
          this.showLoading = false;
        }
      }
    }
  };
</script>
