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

<template>
  <div>
    <div @touchend="handleTouchEnd">
      <lc-overlay :show="haveOverlay && isOverShow"
                   v-if="show"
                   ref="overlay"
                   v-bind="overlayCfg"
                   @LcOverlayBodyClicked="LcOverlayBodyClicked"></lc-overlay>
    </div>
    <div ref="lc-popup" @scroll.prevent
         v-if="show"
         :height="_height"
         :hack="isNeedShow"
         @click="()=>{}"
         :class="['lc-popup', pos]"
         :style="padStyle">
      <slot></slot>
    </div>
  </div>
</template>

<style scoped>
  .lc-popup {
    position: fixed;
    width: 750px;
    overflow:auto;
  }

  .top {
    left: 0;
    right: 0;
  }

  .bottom {
    left: 0;
    right: 0;
  }

  .left {
    bottom: 0;
    top: 0;
  }

  .right {
    bottom: 0;
    top: 0;
  }

  /* 当前蒙层显示时生效 */
  .noScroll {
    overflow-y: hidden;
  }
</style>

<script>
  const animation = weex.requireModule('animation');
  const { platform } = weex.config.env;
  const isWeb = typeof (window) === 'object' && platform.toLowerCase() === 'web';
  import LcOverlay from '../lc-overlay';
  import Utils from "../utils";

  export default {
    components: { LcOverlay },
    props: {
      show: {
        type: Boolean,
        default: false
      },
      pos: {
        type: String,
        default: 'bottom'
      },
      popupColor: {
        type: String,
        default: '#FFFFFF'
      },
      overlayCfg: {
        type: Object,
        default: () => ({
          hasAnimation: true,
          timingFunction: ['ease-in', 'ease-out'],
          duration: 300,
          opacity: 0.6
        })
      },
      height: {
        type: [Number, String],
        default: 840
      },
      standOut: {
        type: [Number, String],
        default: 0
      },
      width: {
        type: [Number, String],
        default: 750
      },
      animation: {
        type: Object,
        default: () => ({
          timingFunction: 'ease-in'
        })
      }
    },
    data: () => ({
      transformStyle: {},
      haveOverlay: true,
      isOverShow: true,
      isWebPage:false
    }),
    watch: {
      show(val) {
        if(this.isWebPage==true){
            if (val == true) {
              document.getElementsByTagName('body')[0].setAttribute("style","overflow-y: hidden;")
            } else {
              document.getElementsByTagName('body')[0].setAttribute("style","overflow-y: auto;")
            }
            // 下面需要这两行代码，兼容不同浏览器
            document.body.scrollTop = this.pageScrollYoffset;
            window.scroll(0, this.pageScrollYoffset);
        }

      }
    },
    computed: {
      isNeedShow () {
        setTimeout(() => {
          this.appearPopup(this.show);
        }, 50)
        return this.show;
      },
      _height () {
        this.appearPopup(this.show, 150);
        return this.height;
      },
      transformValue () {
        return this.getTransform(this.pos, this.width, this.height, true);
      },
      padStyle () {
        const { pos, width, height, popupColor, transformStyle } = this;
        let style = {
          ...transformStyle,
          width: `${width}px`,
          backgroundColor: popupColor
        };
        pos === 'top' && (style = {
          ...style,
          top: `${-height}px`,
          height: `${height}px`
        });
        pos === 'bottom' && (style = {
          ...style,
          bottom: `${-height}px`,
          height: `${height}px`
        });
        pos === 'left' && (style = {
          ...style,
          left: `${-width}px`
        });
        pos === 'right' && (style = {
          ...style,
          right: `${-width}px`
        });
        return style;
      }
    },
    methods: {
      handleTouchEnd (e) {
        // 在支付宝上面有点击穿透问题
        const { platform } = weex.config.env;
        platform === 'Web' && e.preventDefault && e.preventDefault();
      },
      hide () {
        this.appearPopup(false);
        this.$refs.overlay.appearOverlay(false);
      },
      LcOverlayBodyClicked () {
        this.isShow && this.appearPopup(false);
      },
      appearPopup (bool, duration = 300) {
        this.isShow = bool;
        const popupEl = this.$refs['lc-popup'];
        if (!popupEl) {
          return;
        }
        const that = this;
        const transformStyle = this.getTransform(this.pos, this.width, this.height, !bool);
        animation.transition(popupEl, {
          styles: {
            transform: transformStyle
          },
          duration,
          delay: 0,
          ...this.animation
        }, () => {
          that.transformStyle = { transform: transformStyle };
          if (!bool) {
            this.$emit('LcPopupOverlayClicked', { pos: this.pos });
          }
        });
      },
      getTransform (pos, width, height, bool) {
        let _size = pos === 'top' || pos === 'bottom' ? height : width;
        let _transform;
        if (isWeb) {
          _size -= this.standOut;
        }
        bool && (_size = 0);
        switch (pos) {
          case 'top':
            _transform = `translateY(${_size}px)`;
            break;
          case 'bottom':
            _transform = `translateY(-${_size}px)`;
            break;
          case 'left':
            _transform = `translateX(${_size}px)`;
            break;
          case 'right':
            _transform = `translateX(-${_size}px)`;
            break;
        }
        return _transform;
      }
    },
    mounted(){
        if(Utils.env.isWeb()){
          this.isWebPage=true;
        }
    }
  }
</script>
