<!-- CopyRight (C) 2017-2022 Alibaba Group Holding Limited. -->
<!-- Created by Tw93 on 16/10/25. -->
<!--A Mask.-->

<template>
  <div class="container">
    <lc-overlay :show="show && hasOverlay"
                 v-if="show"
                 v-bind="mergeOverlayCfg"
                 :can-auto-close="overlayCanClose" 
                 @LcOverlayBodyClicking="LcOverlayBodyClicking"
                 @LcOverlayBodyClicked="LcOverlayBodyClicked"></lc-overlay>
    <div ref="lc-mask"
         class="lc-mask"
         v-if="show"
         :hack="shouldShow"
         :style="maskStyle">
      <div :style="contentStyle">
        <slot></slot>
      </div>
      <div class="mask-bottom"
           :style="{ width: width + 'px' }"
           @click="closeIconClicked"
           v-if="showClose">
        <image :src="closeIcon"
               aria-label="关闭"
               class="mask-close-icon"></image>
      </div>
    </div>
  </div>
</template>

<style scoped>
  .container {
    position: fixed;
    width: 750px;
    /*兼容H5异常*/
    z-index: 99999;
  }

/* 215749 【TS:202006170966-信托行业事业部_彭泉善-【Light】light-ui lcMack组件问题。 */
  .lc-mask {
    position: fixed;
    /* top: 300px;
    left: 60px; */
    width: 702px;
    height: 800px;
  }

  .mask-bottom {
    width: 100px;
    height: 100px;
    background-color: transparent;
    justify-content: center;
    align-items: center;
  }

  .mask-close-icon {
    width: 64px;
    height: 64px;
  }
</style>

<script>
// 去除lighting-ui组件内在小程序运行环境中所有引入的weex环境变量
  import Light from 'light';
  const animation = Light.requireModule('animation');
  import LcOverlay from '../lc-overlay';
  import Utils from "../utils";

  export default {
    components: { LcOverlay },
    props: {
      height: {
        type: [String, Number],
        default: 800
      },
      width: {
        type: [String, Number],
        default: 702
      },
      top: {
        type: [String, Number],
        default: ''
      },
      show: {
        type: Boolean,
        default: false
      },
      showClose: {
        type: Boolean,
        default: false
      },
      duration: {
        type: [String, Number],
        default: 300
      },
      hasOverlay: {
        type: Boolean,
        default: true
      },
      hasAnimation: {
        type: Boolean,
        default: true
      },
      timingFunction: {
        type: Array,
        default: () => (['ease-in', 'ease-out'])
      },
      overlayCfg: {
        type: Object,
        default: () => ({
          hasAnimation: true,
          timingFunction: ['ease-in', 'ease-out'],
          canAutoClose: true,
          duration: 300,
          opacity: 0.6
        })
      },
      borderRadius: {
        type: [String, Number],
        default: 0
      },
      // 115425 lc-mask组件设置can-auto-close无效
      overlayCanClose: {
        type: Boolean,
        default: true
      },
      maskBgColor: {
        type: String,
        default: '#ffffff'
      }
    },
    data: () => ({
      closeIcon: 'https://gw.alicdn.com/tfs/TB1qDJUpwMPMeJjy1XdXXasrXXa-64-64.png',
      maskTop: 264,
      opacity: 0
    }),
    computed: {
      mergeOverlayCfg () {
        return {
          ...this.overlayCfg,
          hasAnimation: this.hasAnimation
        }
      },
      maskStyle () {
        // 103517 lc-mask的top值设为0或者不设置时，jsn上弹框没有居中
        const { width, height, showClose, hasAnimation, opacity, top } = this;
        const { deviceHeight, deviceWidth, platform } = weex.config.env;
        const pHeight = Utils.env.getPageHeight();
        const navHeight = isWeb ? 0 : 130;
        const newHeight = showClose ? height - 0 + 100 : height;
        const _deviceHeight = deviceHeight || 1334;
        const pageHeight = _deviceHeight / deviceWidth * 750 - navHeight; 
        //107991 lc-mask组件，当设置top为0时弹框置顶，不设置top时默认居中
        var newTop = !/^[0-9]+$/.test(Math.abs(top))||top.trim()=='' ? (pHeight - height) / 2 : top;
        const isWeb = typeof (window) === 'object' && platform.toLowerCase() === 'web';
        return {
          width: width + 'px',
          height: newHeight + 'px',
          left: (750 - width) / 2 + 'px',
          top: newTop + 'px',
          opacity: hasAnimation ? opacity : 1
        }
      },
      contentStyle () {
        return {
          width: this.width + 'px',
          backgroundColor: this.maskBgColor,
          height: this.height + 'px',
          borderRadius: this.borderRadius + 'px'
        }
      },
      shouldShow () {
        const { show, hasAnimation } = this;
        hasAnimation && setTimeout(() => {
          this.appearMask(show);
        }, 50);
        return show;
      }
    },
    methods: {
      closeIconClicked () {
        this.appearMask(false);
      },
      LcOverlayBodyClicking () {
        if (this.hasAnimation) {
          this.appearMask(false);
          this.$emit('LcOverlayBodyClicking', {});
        }
      },
      LcOverlayBodyClicked () {
        // if (!this.hasAnimation) {
        //   this.appearMask(false);
        //   this.$emit('LcOverlayBodyClicked', {});
        // }
        //115425 【lc-mask组件】lc-mask组件设置can-auto-close无效
        if(this.overlayCanClose==false){
            return
        }
        this.appearMask(false);
        this.$emit('LcOverlayBodyClicked', {});
      },
      needEmit (bool = false) {
        !bool && (this.$emit('LcMaskSetHidden', {}));
      },
      appearMask (bool, duration = this.duration) {
        const that = this;
        const { hasAnimation, timingFunction } = this;
        const maskEl = this.$refs['lc-mask'];
        if (hasAnimation && maskEl) {
          animation.transition(maskEl, {
            styles: {
              opacity: bool ? 1 : 0
            },
            duration,
            timingFunction: timingFunction[bool ? 0 : 1],
            delay: 0
          }, () => {
            that.opacity = bool ? 1 : 0;
            this.needEmit(bool);
          });
        } else {
          this.needEmit(bool);
        }
      }
    }
  };
</script>
