<template>
  <div class="form-block" :style="{'width':direction == 'row'?'100%':'','height':direction != 'row'?'100%':''}">
    <div class="form-block-title">
      {{title}}
      <slot name="tool-bar"></slot>
      <!-- <Button class="push-role-button ivu-btn-hr" size="small" icon="plus-round"  >{{$t('common.creat')}}</Button> -->
    </div>
    <div :style="{'height':height,'overflow-y':'auto','overflow-x':'hidden'}">
      <slot></slot>
    </div>
  </div>
</template>
<script>
export default {
  name: 'FormBlock',
  components: {

  },
  props: {
    title: {
      type: String,
      default() {
        return ''
      }
    },
    height: {
      type: String,
      default() {
        return 'calc(100% - 40px)'
      }
    },
    direction: {
      type: String,
      default() {
        return 'row'
      }
    }
  },
  data() {
    return {

    }
  },
  computed: {

  },
  created: function () {

  },
  beforeMount: function () {

  },
  mounted: function () {

  },
  beforeDestroy: function () {

  },
  destroyed: function () {

  },
  methods: {

  },
  watch: {

  },
  directives: {

  }
}
</script>
<style lang="less">
@import "./index.less";
</style>
