<template>
  <transition name="uif-popup" @before-enter="beforeEnter" @after-leave="afterLeave">
    <div ref="container" class="uif-popup-container" v-show="visible">
      <div data-u class="uif-popup-header" :data-draggable="draggable" v-drag="'uif-popup-container'">
        <h2 class="title">{{title}}</h2>
        <u-icon scene="action" type="x" @click="handleClose"></u-icon>
      </div>
      <div ref="content" class="uif-popup-content" :class="'width-' + width">
        <slot></slot>
      </div>
      <div data-u class="uif-popup-footer">
        <slot name="footer">
          <u-button type="default" outline @click="handleClose">取消</u-button>
          <u-button type="primary" @click="confirm">确认</u-button>
        </slot>
      </div>
    </div>
  </transition>
</template>

<script>
import { oneOf } from '@uif/hq/src/utils/assist'
import { addScrollEffect, removeScrollEffect } from '@uif/hq/src/utils/scrollbar'
import drag from '@uif/hq/src/directives/drag'
import UIcon from '@uif/hq/src/components/icon'
import UButton from '@uif/hq/src/components/button'
import resize from './mixin-resize'
export default {
  mixins: [resize],
  name: 'u-popup',
  directives: {
    drag
  },
  components: {
    UIcon,
    UButton
  },
  props: {
    value: {
      type: Boolean,
      default: true
    },
    // 标题
    title: {
      type: String
    },
    // 能否拖拽
    draggable: {
      type: Boolean,
      default: true
    },
    loading: {
      type: Boolean,
      default: false
    },
    // 宽度
    width: {
      validator (value) {
        return oneOf(value, ['small', 'middle', 'large', 'auto'])
      },
      default: 'large'
    },
    // top === 0 居中
    // 0 < top < 1 百分比
    // top > 1 绝对距离
    top: {
      type: Number,
      default: 0
    },
    // 0 禁用
    // 优先 取top
    // 0 < maxHeight < 1 百分比
    // maxHeight > 1 绝对距离
    maxHeight: {
      type: Number,
      default: 0.8
    },
    // 最大高度
    sameHeight: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      visible: false
    }
  },
  watch: {
    value (value) {
      if (this.visible !== value) {
        this.visible = value
      }
    }
  },
  mounted () {
    if (this.value) {
      this.visible = true
    }
    this.addResizeEventListener()
  },
  beforeDestroy () {
    this.removeResizeEventListener()
  },
  methods: {
    // 确认事件
    confirm (event) {
      this.$emit('confirm', event)
    },
    // 关闭弹窗
    close () {
      this.visible = false
      this.$emit('input', false)
    },
    update () {
      const el = this.$el
      this.setContainerTop(el)
      this.setContentHeight(el)
    },
    /**
     * 内部事件
     * **/
    // 关闭弹窗
    handleClose () {
      if (!this.loading) {
        this.close()
      }
    },
    // 居中显示
    beforeEnter (el) {
      const display = el.style.display
      if (this.top <= 0) {
        el.style.display = 'inline-block'
      }
      this.setContainerTop(el)
      this.setContentHeight(el)
      if (this.top <= 0) {
        el.style.display = display
      }
      addScrollEffect()
    },
    // 销毁弹窗
    afterLeave () {
      removeScrollEffect()
      this.removeResizeEventListener()
      this.$root.destroy()
    }
  }
}
</script>
