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

<template>
  <div>
    <!-- 143971 lc-overlay组件点击阴影层关闭H5下会点透 -->
    <div class="lc-overlay" @touchmove.prevent.stop
         ref="lc-overlay"
         v-if="show"
         :hack="shouldShow"
         @touchend.prevent="overlayClicked"
         :style="overlayStyle">
    </div>
  </div>
</template>

<style scoped>
  .lc-overlay {
    width: 750px;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
  }
</style>

<script>
  const animation = weex.requireModule('animation');
  export default {
    props: {
      show: {
        type: Boolean,
        default: true
      },
      hasAnimation: {
        type: Boolean,
        default: true
      },
      duration: {
        type: [Number, String],
        default: 300
      },
      timingFunction: {
        type: Array,
        default: () => (['ease-in', 'ease-out'])
      },
      opacity: {
        type: [Number, String],
        default: 0.6
      },
      canAutoClose: {
        type: Boolean,
        default: true
      }
    },
    data() {
      return {
        opacityNow: 0
      };
    },
    computed: {
      overlayStyle () {
        return {
          opacity: this.hasAnimation ? this.opacityNow : 1,
          backgroundColor: `rgba(0, 0, 0,${this.opacity})`
        }
      },
      shouldShow () {
        const { show, hasAnimation } = this;
        hasAnimation && setTimeout(() => {
          this.appearOverlay(show);
        }, 50);
        return show;
      }
    },
    watch: {
      show(val, oldVal) {
        if (val === false) {
          this.opacityNow = 0;
        }
      }
    },
    methods: {
      overlayClicked (e) {
        //115425 lc-mask组件设置can-auto-close无效
        if(this.canAutoClose==false){
            return
        }
        this.$emit('LcOverlayBodyClicked', {})
        
        // this.canAutoClose ? this.appearOverlay(true) : this.$emit('LcOverlayBodyClicked', {});
      },
      appearOverlay (bool, duration = this.duration) {
        const { hasAnimation, timingFunction, canAutoClose } = this;
        const needEmit = !bool && canAutoClose;
        needEmit && (this.$emit('LcOverlayBodyClicking', {}));
        const overlayEl = this.$refs['lc-overlay'];
        if (hasAnimation && overlayEl) {
          animation.transition(overlayEl, {
            styles: {
              opacity: bool ? 1 : 0
            },
            duration,
            timingFunction: timingFunction[bool ? 0 : 1],
            delay: 0
          }, () => {
            this.opacityNow = bool ? 1 : 0;
            needEmit && (this.$emit('LcOverlayBodyClicked', {}));
          });
        } else {
          needEmit && (this.$emit('LcOverlayBodyClicked', {}));
        }
      }
    }
  };
</script>
