<template>
  <DialogPatched v-bind="getBindValue()" @close="handleClose" @closed="handleClosed" @open="handlerOpen"
             @opened="handlerOpened">

    <template #title>
      <slot name="title"></slot>
    </template>

    <!-- 内容层: 关闭时销毁 -->
    <template v-if="destroyOnClose">
      <DialogWrapper v-if="visible" :footerHeight="footerHeight" :fullscreen="fullscreen" :height="height"
                     :showFooter="showFooter">
        <slot></slot>
      </DialogWrapper>
    </template>

    <!-- 内容层 -->
    <template v-else>
      <DialogWrapper :footerHeight="footerHeight" :fullscreen="fullscreen" :height="height" :showFooter="showFooter">
        <slot></slot>
      </DialogWrapper>
    </template>

    <!-- 底部按钮区与 -->
    <template v-if="showFooter" #footer>
      <DialogFooter ref="element" v-bind="getFooterProps()" @close="handleClose" @ok="handleOk">
        <template v-for="item in Object.keys($slots)" #[item]="data">
          <slot :name="item" v-bind="data || {}"></slot>
        </template>
      </DialogFooter>
    </template>
  </DialogPatched>
</template>

<script>
import props, {FooterProps} from './Props'
import DialogFooter         from "./components/DialogFooter.vue";
import DialogWrapper        from "./components/DialogWrapper.vue";
import {DialogPatched}      from "../../../plugin/model/ModelAutoClose";

export default {
  name: "EdDialog",
  props: props,
  components: {DialogFooter, DialogWrapper, DialogPatched},
  // 双向绑定
  model: {
    prop: 'visible',
    event: 'change'
  },
  data() {
    return {
      defHeight: ""
    }
  },
  methods: {
    /**
     * @name getBindValue
     * @return {Object}
     * @private
     */
    getBindValue() {
      let props = Object.assign({}, this.$attrs, this.$props)
      for (const key in FooterProps) {
        if (props[key]) delete props[key]
      }
      return props
    },

    /**
     * @name getFooterProps
     * @returns {Object}
     * @private
     */
    getFooterProps() {
      let props = Object.assign({}, this.$props)
      for (const key in props) {
        if (!FooterProps[key]) delete props[key]
      }
      return props
    },

    /**
     * Dialog 关闭按钮的回调
     * @name handleClose
     */
    handleClose() {
      /**
       * 关闭弹窗的回调 change 函数
       */
      this.$emit('change', false)
      /**
       * 关闭弹窗的回调 update 函数
       * @deprecated update
       * @private
       */
      this.$emit('update:visible', false)
      /**
       * 关闭弹窗的回调 close 函数
       */
      this.$emit('close')
    },

    /**
     * Dialog 关闭动画结束时的回调
     * @name handleClose
     */
    handleClosed() {
      this.$emit('closed')
    },

    /**
     * Dialog 确定按钮的回调
     * @name handleClose
     */
    handleOk() {
      this.$emit('ok')
    },

    /**
     * @name handlerOpen
     * @description Dialog 打开的回调
     */
    handlerOpen() {
      this.$emit('open')
    },

    /**
     * @name handlerOpened
     * @description Dialog 打开动画结束时的回调
     */
    handlerOpened() {
      this.$emit('opened')
    }
  }
}
</script>
<style lang="scss" scoped>
@import "../../../style/index";
</style>
