<template>
  <div class="ed-drawer__footer" :style="{height: height}">
    <slot name="footer">
      <slot name="insertFooter"></slot>
      <el-button v-if="showCancelBtn" v-bind="cancelButtonProps" @click="handleClose">
        {{ cancelText }}
      </el-button>
      <slot name="centerFooter"></slot>
      <el-button v-if="showOkBtn" :loading="loading" v-bind="okButtonProps" @click="handleOk">
        {{ loading ? '提交中 ...' : okText }}
      </el-button>
      <slot name="appendFooter"></slot>
    </slot>
  </div>
</template>

<script>
import { FooterProps } from './props'
import {getVarType}    from "../../../tools/utils";
export default {
  name: "DrawerFooter",
  props: FooterProps,
  computed:{
    height(){
      return getVarType(this.footerHeight) === "string" ? this.footerHeight : `${this.footerHeight}px`;
    }
  },
  methods: {
    handleClose() {
      this.$emit('close')
    },
    handleOk() {
      this.$emit('ok')
    }
  }
}
</script>

<style scoped>

</style>
