<template>
  <transition name="uif-popup">
    <div class="uif-popup-container" v-show="value" :class="classes" @state-change="onStateChange">
      <u-drag class="uif-popup-header" :draggable="!isMaximize && draggable" target="uif-popup-container">
        <slot name="popup-header">
          <h2 class="title">{{title}}</h2>
          <slot name="header"></slot>
          <u-icon v-if="maximize && isMaximize" type="minimize" scene="action" @click="isMaximize = false"></u-icon>
          <u-icon v-if="maximize && !isMaximize" type="maximize" scene="action" @click="isMaximize = true"></u-icon>
          <u-icon scene="action" type="xx" @click="handleClose"></u-icon>
        </slot>
      </u-drag>
      <u-slide-navigation v-if="navigation" class="uif-popup-navigation" mode="dark"></u-slide-navigation>
      <div class="uif-popup-content" :class="classes">
        <slot></slot>
      </div>
      <div class="uif-popup-footer">
        <slot name="popup-footer">
          <slot name="footer"></slot>
          <u-button type="normal" outline size="large" @click="handleClose">取消</u-button>
          <u-button type="primary" size="large" :disabled="confirmDisabled" :loading="loading" @click="confirm">确认</u-button>
        </slot>
      </div>
    </div>
  </transition>
</template>

<script>
import USlideNavigation from '@uif/core/lib/components/slide-navigation'
import UDrag from '@uif/core/lib/components/drag'
import UIcon from '@uif/core/lib/components/icon'
import UButton from '@uif/core/lib/components/button'
import { oneOf } from '@uif/core/lib/utils/assist'
import {addAttr} from '@uif/core/lib/utils/object'
import {fireEvent} from '@uif/core/lib/utils/dom'

export default {
  name: 'u-popup',
  components: {
    UDrag,
    UIcon,
    UButton,
    USlideNavigation
  },
  props: {
    value: {
      type: Boolean,
      default: false
    },
    // 标题
    title: {
      type: String
    },
    // 高度
    height: {
      validator (value) {
        return oneOf(value, ['middle', 'large'])
      },
      default: 'middle'
    },
    // 宽度
    width: {
      validator (value) {
        return oneOf(value, ['small', 'middle', 'large', 'auto'])
      },
      default: 'large'
    },
    // 弹性布局
    flex: {
      type: Boolean,
      default: false
    },
    // 最大化
    maximize: {
      type: Boolean,
      default: false
    },
    // 能否拖拽
    draggable: {
      type: Boolean,
      default: true
    },
    navigation: {
      type: Boolean,
      default: false
    },
    // 禁用确认按钮
    confirmDisabled: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      loading: false,
      isMaximize: false
    }
  },
  computed: {
    // 窗口类名
    classes () {
      const classes = {flex: this.flex, maximize: this.isMaximize}
      addAttr(classes, 'height-' + this.height + '-flex', this.flex)
      return [
        'width-' + this.width,
        'height-' + this.height,
        classes
      ]
    }
  },
  watch: {
    value: {
      immediate: true,
      handler (value, oldValue) {
        if (value) {
          fireEvent('popup-change', this.$el, true)
        } else if (oldValue) {
          fireEvent('popup-change', this.$el, false)
        }
      }
    }
  },
  mounted () {
    fireEvent('register-closer', this.$el, () => this.close())
  },
  methods: {
    // 确认事件
    confirm (event) {
      this.$emit('confirm', event)
    },
    // 关闭弹窗
    close () {
      if (this.value) {
        this.$emit('input', false)
      }
    },

    handleClose () {
      if (!this.loading) {
        this.close()
      }
    },
    onStateChange (event) {
      switch (event.detail) {
        case 'pending':
          this.loading = true
          break
        case 'fulfilled':
        case 'rejected':
          this.loading = false
          break
      }
    }
  }
}
</script>
