<template>
  <transition>
    <div class="ipub-confirm"
         v-show="isShowMessageBox">
      <div class="ipub-confirm__wrap">
        <transition name="ipub-fade">
          <div class="ipub-confirm__content"
               :style="width?`width:${width}`:''"
               v-show="isShowMessageBox">
            <div class="ipub-confirm__close"
                 @click="cancel">
              <ipub-icon type="iconClose" />
            </div>
            <div :class="['ipub-confirm__content__icon', 'ipub-confirm__content__icon__'+type]">
              <ipub-icon :type="icon?icon:((type==='success'?'iconAble':'')||(type==='danger'?'iconDetails':''))" />
            </div>
            <div class="ipub-h1 mar-b-10"
                 v-if="showTitle">{{title}}</div>
            <div class="ipub-p2 mar-b-30"
                 v-html="content"></div>
            <div :class="['ipub-confirm__btns', 'ipub-p1']">
              <ipub-button plain
                           :type="cancelType"
                           v-if="showConcel"
                           :style="Object.assign(cancelStyle,{minWidth: '120px'})"
                           @click="cancel">{{cancelText}}</ipub-button>
              <ipub-button :type="type?type:confirmType"
                           v-if="showConfirm"
                           :style="Object.assign(confirmStyle,{minWidth: '120px'})"
                           @click="confirm">{{confirmText}}</ipub-button>
            </div>
            <div v-if="autoClose"
                 class="ipub-p3 font-color"
                 style="margin-top:10px">This page will automatically jump back in <font class="main-color">{{autoCloseTime}}</font> seconds</div>
          </div>
        </transition>
      </div>
    </div>
  </transition>
</template>

<script>
import IpubIcon from '../../icon'
import IpubButton from '../../button'
import { getScrollTop } from '../../../src/utils/utils'
export default {
  name: 'IpubConfirm',
  components: {
    IpubIcon, IpubButton
  },
  props: {
    content: {
      type: String,
      default: '这是弹框内容'
    },
    title: {
      type: String,
      default: '提示',
    },
    showTitle: {
      type: Boolean,
      default: true
    },
    width: {
      type: String,
      default: '',
    },
    icon: {
      type: String,
      default: '',
    },
    type: {
      type: String,
      default: 'theme',
      validator (val) {
        return ['theme', 'success', 'warning', 'danger'].indexOf(val) !== -1
      }
    },
    confirmText: {
      type: String,
      default: 'Confirm',
    },
    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 {}
      }
    },
    autoClose: {
      type: [Number, Boolean],
      default: false
    }
  },
  data () {
    return {
      isShowMessageBox: false,
      resolve: '',
      reject: '',
      promise: '', // 保存promise对象
      scrollTop: '',
      autoCloseTime: 0,
      timer: ''
    }
  },
  mounted () {
    this.stopMove()
  },
  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.isShowMessageBox = false
      this.resolve('confirm')
      this.remove()
    },
    // 取消,将promise断定为reject状态
    cancel () {
      this.isShowMessageBox = false
      this.reject('cancel')
      this.remove()
    },
    // 弹出messageBox,并创建promise对象
    createConfirm () {
      this.isShowMessageBox = true
      this.promise = new Promise((resolve, reject) => {
        this.resolve = resolve
        this.reject = reject
      })
      this.handelAutoClose()
      // 返回promise对象
      return this.promise;
    },
    remove () {
      setTimeout(() => {
        this.Move()
        if (this.timer) {
          clearInterval(this.timer)
        }
        this.destroy()
      }, 100);
    },
    destroy () {
      this.$destroy()
      document.body.removeChild(this.$el)
    },
    handelAutoClose () {
      if (this.autoClose) {
        if (this.autoClose === true) {
          this.autoCloseTime = 5
        } else {
          this.autoCloseTime = this.autoClose
        }
        this.timer = setInterval(() => {
          if (this.autoCloseTime > 0) {
            this.autoCloseTime--
          } else {
            clearInterval(this.timer)
            this.confirm()
          }
        }, 1000)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.ipub-confirm {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  z-index: 9999;
  &__wrap {
    background: $model_wrap_color;
    min-width: $sm_screen;
    width: 100vw;
    height: 100vh;
  }
  &__content {
    position: absolute;
    width: 480px;
    padding: 40px 40px;
    top: calc(50vh - 150px);
    // transform: translateY(-50%);
    left: calc(50vw - 240px);
    box-sizing: border-box;
    background: #fff;
    @include ipub-shadow;
    text-align: center;
    &__icon {
      font-size: 50px;
      margin-bottom: 10px;
      border-radius: 50%;
      height: 100px;
      width: 100px;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      &__theme {
        color: $theme_color;
        background: $theme_opcity_color;
      }
      &__success {
        color: $success_color;
        background: $success_color_bg;
      }
      &__warning {
        color: $warning_color;
        background: $warning_color_bg;
      }
      &__danger {
        color: $key_color;
        background: $key_color_bg;
      }
    }
  }
  &__close {
    position: absolute;
    right: 25px;
    top: 20px;
    font-size: 20px;
    cursor: pointer;
  }
}
</style>
