<template>
<div>
  <transition name="popup-mark">
    <div
      v-show="currentValue"
      :class="b('mark')"></div>
  </transition>
  <transition
    :name="currentTransition">
    <div
      v-show="currentValue"
      :class="b([
        'popup',
        position ? 'popup-' + position : ''
      ])">
      <div
        :class="[
          b('picker-title'),
          isShowHeadBorder ? 'drip-popup__picker-title-border-bottom' : ''
        ]"
        v-if="isShowTitle">
        <div class="drip-popup__header">
          <slot name="header">
            <span
              :class="b('title')"
              v-text="title">
            </span>
            <span
              :class="b('sub-title')"
              v-text="subtitle">
            </span>
          </slot>
        </div>
        <div
          :class="b('cancel-button')"
          v-if="isCancelIcon"
          @click.stop="cancelFn">
          <img
            src="//alioss.sdbao.com/common/drip-close.png">
        </div>
      </div>
      <div
        :class="b([
          'content',
          submitBtn ? 'content-submit' : ''
        ])"
        :style="{'height': height}">
        <slot v-if="!submitBtn"></slot>
        <slot name="content" v-else></slot>
      </div>

      <div
        v-if="submitBtn"
        :class="b('submit-footer')">
        <slot name="button"></slot>
      </div>
    </div>
  </transition>
</div>
</template>
<script>
import create from '../utils/create'
import Popup from 'vue-popup'
export default create({
  name: 'popup',
  mixins: [Popup],
  props: {
    modal: {
      default: true
    },
    title: {
      default: ''
    },
    subtitle: {
      default: ''
    },
    height: {
      type: String
    },
    modalFade: {
      default: true
    },
    lockScroll: {
      default: true
    },
    closeOnClickModal: {
      default: false
    },
    popupTransition: {
      type: String,
      default: 'popup-slide'
    },
    position: {
      type: String,
      default: ''
    },
    isCancelIcon: {
      type: Boolean,
      default: true
    },
    isShowHeadBorder: {
      type: Boolean,
      default: true
    },
    cancel: {
      type: Function
    },
    isClose: {
      type: Boolean
    },
    submit: {
      type: Function
    },
    submitBtn: {
      type: Boolean,
      default: false
    },
    isShowTitle: {
      type: Boolean,
      default: true
    }
  },

  data() {
    return {
      currentValue: false,
      currentTransition: this.popupTransition,
      currentTop: 0
    }
  },

  watch: {
    currentValue(val) {
      this.$emit('input', val)
      if (val) {
        this.currentTop =
          document.documentElement.scrollTop || document.body.scrollTop
        // 禁用滚动条
        document.body.style.overflow = 'hidden'
        document.body.style.position = 'fixed'
        // 设置body的宽度，以防fixed定位影响布局
        document.body.style.width = '10rem'
      } else {
        // 启用滚动条
        document.body.style.width = ''
        document.body.style.overflow = 'auto'
        document.body.style.position = 'static'
        window.scrollTo(0, this.currentTop)
      }
    },

    value(val) {
      this.currentValue = val
    },

    isClose(val) {
      if (val) this.currentValue = false
    }
  },

  beforeMount() {
    if (this.popupTransition !== 'popup-fade') {
      this.currentTransition = `popup-slide-${this.position}`
    }
  },

  mounted() {
    if (this.value) {
      this.rendered = true
      this.currentValue = true
      this.open()
    }
  },

  destroyed() {
    // 启用滚动条
    document.body.style.overflow = 'auto'
    document.body.style.position = 'static'
    window.scrollTo(0, this.currentTop)
  },
  methods: {
    cancelFn() {
      typeof this.cancel === 'function'
        ? this.cancel()
        : (this.currentValue = false)
    }
  }
})
</script>
