<template>
  <transition
    name="dialog"
    mode="in-out">
    <div
      :class="b('overlay')"
      @touchmove="dialogTouchmove"
      v-show="visible"
      transition="fade">
      <div :class="b('dialog')" v-if="!isSlot">
        <div
          :class="b('title')"
          v-if="title">
          <h1
            :class="b('title-text')"
            v-text="title">
          </h1>
        </div>
        <div
          v-if="content"
          :class="b('title-content')"
          v-html="content">
        </div>
        <slot></slot>
        <a
          v-if="showClose"
          href="javascript:;"
          :class="b('close-dialog')"
          @click="onHide">
        </a>
      </div>

      <slot
        v-else
        :class="b('dialog-free')"
        name="free">
      </slot>
    </div>
  </transition>
</template>
<script>
import create from '../utils/create'
export default create({
  name: 'dialog',

  props: {
    visible: {
      type: Boolean
    },
    title: {
      type: String,
      default: ''
    },
    content: {
      type: String,
      default: '',
    },
    showClose: {
      type: Boolean,
      default: true
    },
    isSlot: {
      type: Boolean,
      default: false
    },
    touchmoveClose: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    visible(val) {
      if (val) {
        // 弹框出现的时候禁止body滚动
        document.body.style.overflow = 'hidden'
        setTimeout(() => {
          this.$el.style.opacity = 1
        })
      } else {
        document.body.style.overflow = 'auto'
        this.$el.style.opacity = 0
      }
    }
  },
  methods: {
    onHide () {
      this.$emit('onHide')
    },
    dialogTouchmove() {
      if (this.touchmoveClose) this.onHide()
    }
  }
})
</script>
