<template>
  <DrawerPatched ref="ElDrawer" v-bind="getBindValues()" @close="handleClose" @closed="handleClosed" @open="handlerOpen"
             @opened="handlerOpened">
    <!-- 标题区 -->
    <template #title>
      <slot name="header"></slot>
    </template>


    <!-- 内容层 -->
    <div :style="{height: contentHeight}" class="ed-drawer__content">
      <slot></slot>
    </div>

    <!-- 操作区域 -->
    <DrawerFooter 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>
    </DrawerFooter>
  </DrawerPatched>
</template>

<script>
import props, {FooterProps} from './props'
import DrawerFooter         from './DrawerFooter'
import {getVarType}         from "../../../tools/utils";
import {DrawerPatched}      from "../../../plugin/model/ModelAutoClose";

/**
 * 统一的抽屉式弹出组件
 *
 * - 示例
 *
 * ```vue
 * <ed-drawer ref="elsDrawer" :title="title" :visible="visible" @close="handlerClose" @ok="handlerOk">
 * </ed-drawer>
 * ```
 *
 * [](./EdDrawerProps.md ':include')
 *
 * [](./EdDrawerFooterProps.md ':include')
 *
 */
export default {
  name: "EdDrawer",
  components: {DrawerFooter, DrawerPatched},
  props: props,
  // 双向绑定
  model: {
    prop: 'visible',
    event: 'change'
  },
  computed: {
    contentHeight() {
      let innerHeight = window.innerHeight;
      let height = getVarType(this.footerHeight) === 'number' ? this.footerHeight : this.footerHeight.slice(0, -2)
      return `${innerHeight - 58 - height}px`
    },
  },
  methods: {
    /**
     * @name getBindValues
     * @returns {Object}
     * @private
     */
    getBindValues() {
      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
    },
    /**
     * Drawer 点击关闭按钮时触发
     */
    handleClose() {
      /**
       * 关闭弹窗的回调 change 函数
       */
      this.$emit('change', false)
      /**
       * 关闭弹窗的回调 update 函数
       * @deprecated update
       * @private
       */
      this.$emit('update:visible', false)
      /**
       * 关闭弹窗的回调 close 函数
       */
      this.$emit('close')
    },

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

    /**
     * Drawer 点击确定按钮时触发
     */
    handleOk() {
      this.$emit('ok')
    },

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

    /**
     * @name handlerOpened
     * @description Drawer 打开动画结束时的回调
     */
    handlerOpened() {
      this.$emit('opened')
    },

    /**
     * @name closeDrawer
     * @description 用于关闭 Drawer, 该方法会调用传入的 before-close 方法
     */
    closeDrawer() {
      this.$refs.ElDrawer.closeDrawer()
    },
  }
}
</script>

<style lang="scss" scoped>
@import "../../../style/index";
</style>
