<template>
  <div>
    <div class="ipub-model"
         :ref="title+'wrap'"
         v-show="visable">
      <div class="ipub-model__wrap"
           @click.self="()=>{maskClose&&cancel()}">
        <transition name="ipub-fade">
          <div v-show="visable">
            <div class="ipub-model__content"
                 :style="`width:${width};${height?'height:'+height+';':''}${isScroll?'overflow-y: scroll;overflow-x:hidden':''}`">
              <div class="ipub-model__close"
                   @click="cancel">
                <ipub-icon type="iconClose" />
              </div>
              <div class="ipub-model__header"
                   v-show="showHeader">
                <slot name="header">
                  <div class="ipub-h1 line-h-40">{{title}}</div>
                </slot>
              </div>
              <div class="ipub-model__body"
                   :ref="title">
                <slot></slot>
              </div>
              <div class="ipub-model__footer"
                   v-show="showFooter">
                <slot name="footer">
                  <div :class="['ipub-model__btns', 'ipub-p1']">
                    <ipub-button plain
                                 :type="cancelType"
                                 v-if="showConcel"
                                 :style="Object.assign(cancelStyle,{minWidth: '150px'})"
                                 @click="cancel">{{cancelText}}</ipub-button>
                    <ipub-button :type="confirmType"
                                 v-if="showConfirm"
                                 :style="Object.assign(confirmStyle,{minWidth: '150px'})"
                                 @click="confirm">{{confirmText}}</ipub-button>
                  </div>
                </slot>
              </div>
            </div>
          </div>
        </transition>
      </div>
    </div>
  </div>
</template>

<script>
import IpubIcon from '../../icon'
import IpubButton from '../../button'
import { getScrollTop } from '../../../src/utils/utils'
export default {
  name: 'IpubModel',
  components: {
    IpubIcon, IpubButton
  },
  props: {
    visable: Boolean,
    maskClose: Boolean,
    title: {
      type: String,
      default: 'Model Title'
    },
    width: {
      type: String,
      default: '600px'
    },
    height: {
      type: String,
      default: ''
    },
    confirmText: {
      type: String,
      default: 'Save',
    },
    cancelText: {
      type: String,
      default: 'Cancel',
    },
    showConfirm: {
      type: Boolean,
      default: true
    },
    showConcel: {
      type: Boolean,
      default: true
    },
    confirmType: {
      type: String,
      default: 'primary',
    },
    cancelType: {
      type: String,
      default: 'primary',
    },
    confirmStyle: {
      type: Object,
      default () {
        return {}
      }
    },
    cancelStyle: {
      type: Object,
      default () {
        return {}
      }
    },
    showHeader: {
      type: Boolean,
      default: true
    },
    showFooter: {
      type: Boolean,
      default: true
    },
  },
  data () {
    return {
      scrollTop: '',
      autoCloseTime: 0,
      timer: '',
      isScroll: true
    }
  },
  watch: {
    visable (val) {
      val ? this.stopMove() : this.Move()
      // if (val) {
      //   setTimeout(() => {
      //     this.isScroll = this.$refs[this.title].offsetHeight + 160 > this.$refs[this.title + 'wrap'].offsetHeight
      //   })
      // }
    }
  },
  methods: {
    //停止页面滚动
    stopMove () {
      let m = function (e) { e.preventDefault() }
      this.scrollTop = getScrollTop()
      document.body.style.marginTop = '-' + this.scrollTop + 'px'
      document.body.style.position = 'fixed'
      document.addEventListener("touchmove", m, { passive: false })
    },
    //开启页面滚动
    Move () {
      let m = function (e) { e.preventDefault() }
      document.body.style.marginTop = '0px'
      document.body.style.position = ''
      document.documentElement.scrollTop = document.body.scrollTop = this.scrollTop
      document.removeEventListener("touchmove", m, { passive: true })
    },
    // 确定,将promise断定为resolve状态
    confirm () {
      this.$emit('confirm')
    },
    // 取消,将promise断定为reject状态
    cancel () {
      this.$emit('cancel')
    },
  },
  beforeDestroy () {
    this.Move()
  }
}
</script>

<style lang="scss" scoped>
.ipub-model {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  z-index: 999;
  &__wrap {
    background: $model_wrap_color;
    min-width: $sm_screen;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  &__content {
    position: relative;
    min-width: 600px;
    max-height: 100vh;
    padding: 40px;
    // top: calc(50% - 150px);
    // left: calc(50% - 300px);
    // transform: translateY(-50%);
    box-sizing: border-box;
    background: #fff;
    @include ipub-shadow;
  }
  &__header {
    max-width: calc(100% - 100px);
  }
  &__header,
  &__footer {
    min-height: 40px;
  }
  &__body {
    margin: 20px 0;
    box-sizing: border-box;
    // max-height: calc(100vh - 200px);
  }
  &__close {
    position: absolute;
    right: 40px;
    top: 40px;
    font-size: 20px;
    cursor: pointer;
  }
}
</style>
