<template>
  <div class="sv-popup" :class="[popupClass, {'is-full': full}]" v-show="visible" :style="[popupStyles]" @touchmove.stop="">
    <slot></slot>
    <div class="sv-popup-close" @click="close" v-if="position === 'right' || position === 'left'">
      <slot name="close">
        <i class="close-icon sv-icon-close"></i>
      </slot>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import v from '../../scripts/var'
  export default {
    name: 'svPopup',
    data () {
      return {
        visible: false,
        closing: false
      }
    },
    props: {
      value: {
        type: Boolean,
        default: false
      },
      position: {
        type: String,
        default: 'center'
      },
      top: {
        type: [String, Number],
        default: 0
      },
      maxHeight: [String, Number],
      full: {
        type: Boolean,
        default: false
      }
    },
    computed: {
      popupClass () {
        let className = `sv-popup-${this.position}`

        if (this.closing) {
          className += ' closing'
        }
        return className
      },
      popupStyles () {
        let styles = {}
        if (this.top) {
          styles['top'] = this.top + 'px'
        }

        if (this.maxHeight) {
          let maxHeight = ''
          if (typeof this.maxHeight === 'string') {
            if (this.maxHeight.match('%')) {
              maxHeight = this.maxHeight
            } else {
              maxHeight = `${window.parseFloat(this.maxHeight) / v.getDesignDraftHtmlFontSize()}rem`
            }
          } else if (typeof this.maxHeight === 'number') {
            maxHeight = `${window.parseFloat(this.maxHeight) / v.getDesignDraftHtmlFontSize()}rem`
          }

          if (maxHeight) {
            styles['maxHeight'] = maxHeight
          }
        }

        return styles
      }
    },
    watch: {
      value (val) {
        this.visible = val
      },
      visible (val) {
        this.$emit('input', val)

        if (val) {
          this.closing = false
          this.$mask.open()
          this.$mask.getZIndex().then(maskZIndex => {
            this.$el.style.zIndex = maskZIndex + 1
          })
        } else {
          this.close()
        }
      }
    },
    methods: {
      close () {
        this.closing = true
        this.$emit('close')
        this.$mask.close()
        window.setTimeout(() => {
          this.visible = false
        }, 200)
      }
    },
    mounted () {
      if (this.value) {
        this.visible = true
      }
      this.$mask.$on('click', () => {
        this.close()
      })
    }
  }
</script>

<style lang="scss" rel="stylesheet/scss">
  @import "../../styles/base";
  .sv-popup{
    position: fixed;
    z-index: 3;
    background: $color-light;
    overflow-y: auto;
    overflow-x: hidden;
    &.is-full{
      top: 0;
      left:0;
      right:0;
      bottom: 0;
    }
    &.sv-popup-center{
      top: 50%;
      left: 50%;
      transform: translate3d(-50%, -50%, 0);
      border-radius: pxToRem(20);
    }
    &.sv-popup-right{
      top:0;
      right:0;
      bottom: 0;
      width: 100%;
      height: 100%;
      animation: slideInRight-enter .2s ease-in;
      @keyframes slideInRight-enter {
        from {
          width: 0;
        }
        to {
          width: 100%;
        }
      }
    }
    &.sv-popup-bottom{
      left:0;
      right:0;
      bottom:0;
      animation: slow-open .2s ease-in;
      &.closing{
        animation: slow-close .2s ease-in;
      }
      @keyframes slow-open {
        0%{
          transform: scaleY(0);
          transform-origin: left bottom;
        }
        100%{
          transform: scaleY(1);
          transform-origin: left bottom;
        }
      }
      @keyframes slow-close {
        0%{
          transform: scaleY(1);
          transform-origin: left bottom;
        }
        100%{
          transform: scaleY(0);
          transform-origin: left bottom;
        }
      }
    }
    .sv-popup-close{
      position: absolute;
      top: pxToRem(40);
      left: 0;
      width: auto;
      .close-icon{
        margin-left: pxToRem(30);
        font-size: pxToRem(50);
        color:#333;
      }
    }
  }
</style>
