<!-- CopyRight (C) 2017-2022 Alibaba Group Holding Limited. -->
<!-- Created by Tw93 on 16/10/26. -->
<!--A loading indicator. Custom text supported. -->

<template>
<!-- 150649 【TS:201907040684-经纪业委会（云纪）_宋志兴-【需求类型】	需求【需求描述】	lc】 -->
  <div :class="['loading-container',showLoading && needMask && 'loading-need-mask']"
       @click="maskClicked"
       :style="maskStyle">
    <div class="lc-loading" :style="{ top: topPosition +'px'}" v-if="showLoading">
      <div :class="['loading-box',loading.class]" :aria-hidden="true">
        <image :src="loading.url"
               class="loading-trip-image"
               resize="contain"
               quality="original"></image>
        <text v-if="loadingText"
              class="loading-text">{{loadingText}}</text>
      </div>
    </div>
  </div>
</template>

<style scoped>
	.loading-container{
		position: relative;
	}
  .loading-need-mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.2);
  }
  .lc-loading {
    position: fixed;
    left: 287px;
    top: 500px;
    z-index: 9999;
  }
  .loading-box {
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    width: 175px;
    height: 175px;
    background-color: rgba(0, 0, 0, 0.8);
  }
  .trip-loading {
    background-color: rgba(0, 0, 0, .2);
  }
  .loading-trip-image {
    height: 75px;
    width: 75px;
  }
  .loading-text {
    color: #ffffff;
    font-size: 24px;
    line-height: 30px;
    height: 30px;
    margin-top: 8px;
    text-overflow: ellipsis;
    width: 140px;
    text-align: center;
  }
</style>

<script>
  import { BLACK_GIF } from './type';
  import Utils from '../utils';
  import Light from 'light';

  export default {
    props: {
      show: {
        type: Boolean,
        default: false
      },
      loadingText: {
        type: String,
        default: ''
      },
      type: {
        type: String,
        default: 'default'
      },
      interval: {
        type: [Number, String],
        default: 0
      },
      // 150649 【TS:201907040684-经纪业委会（云纪）_宋志兴-【需求类型】	需求【需求描述】	lc】
      needMask: {
        type: Boolean,
        default: false
      },
      maskStyle: {
        type: Object,
        default: () => ({})
      },
      // 205633	【lighting-ui】loading新增src配置自定义图标
      src: {
        type: String,
        default: BLACK_GIF
      }
    },
    data: () => ({
      loadTop: (Utils.env.getPageHeight() - 200) / 2,
      showLoading: false,
      tid: 0
    }),
    watch: {
      show () {
        this.setShow();
      }
    },
    computed: {
      loading () {
        let loading = {};
        switch (this.type) {
          case 'trip':
            loading = {
              // 205633	【lighting-ui】loading新增src配置自定义图标
              url: this.src,
              class: 'default-loading'
            };
            break;
          default:
            loading = {
              url: BLACK_GIF,
              class: 'default-loading'
            }
        }
        return loading;
      },
      topPosition () {
        return this.loadTop;
      }
    },
    created () {
      this.setShow();
    },
    mounted () {
      const meta = Light.requireModule('meta');
      if (meta && meta.getViewport) {
        let devWidth = meta.getViewport().width;
        let deviceWidth = weex.config.env.deviceWidth;
        Light.on('screenWidthChange', () => {
          // weex.config.env.deviceWidth在折叠屏不会变，故目前采用这个缩放比计算，可能有其他更好方案
          this.$nextTick(() => {
            const newWidth = meta.getViewport().width;
            const scale = newWidth / devWidth;
            devWidth = newWidth;
            deviceWidth = deviceWidth * scale;
            this.loadTop = (this.getPageHeight(deviceWidth) - 200) / 2;
          });
        });
      }
    },
    methods: {
      getPageHeight (deviceWidth) {
        const { env } = weex.config;
        const navHeight = Utils.env.isWeb() ? 0 : (Utils.env.isIPhoneX() ? 176 : 132);
        return env.deviceHeight / (deviceWidth) * 750 - navHeight;
      },
      maskClicked () {
        this.needMask && (this.$emit('LcLoadingMaskClicked', {}));
      },
      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>