<template>
  <div class="fbg-dialog">
    <fbg-dialog v-bind="$attrs" :title="title" v-on="$listeners">
      <div class="fbg-dialog-header" v-if="$scopedSlots.title" slot="title">
        <slot name="title"/>
      </div>
      <slot></slot>
      <div v-if="$scopedSlots.footer" class="fbg-dialog-footer" slot="footer">
        <slot name="footer"/>
      </div>
    </fbg-dialog>
  </div>
</template>
<script>
import {Dialog} from 'element-ui';
export default {
  components: {
    'fbg-dialog': Dialog
  },
  props: {
    title: {
      type: String,
      default: ''
    }
  }
}
</script>
<style lang="scss">
.fbg {
  &-dialog {
    .el-dialog__body {
      padding: 0px!important;
    }
    &-footer {
      height: 62px;
      line-height: 62px;
      background-color: rgba(242, 242, 242, 1);
      text-align: center;
    }
    &-body {
      padding: 20px;
    }
    div.el-dialog__header {
      &::before {
        content: '';
        display: block;
        position: absolute;
        left: 0px;
        top: 20px;
        width: 3px;
        background-color: $themeColor;
        height: 22px;
      } 
    }
    div.el-dialog__footer {
      padding: 0px;
    }
  }
}
</style>