<template>
  <div class="baseDialog">
    <el-dialog
      v-el-drag-dialog
      :visible.sync="dialogShow"
      v-bind="$attrs"
      v-on="$listeners"
    >
      <template #title>
        <slot name="title">
          <div class="titleStyle">{{ dialogTitle }}</div>
        </slot>
      </template>
      <slot />
      <template #footer>
        <!--对外继续暴露footer插槽，有个别弹框按钮需要自定义-->
        <slot name="footer">
          <!--将取消与确定按钮集成到内部-->
          <el-row slot="footer" type="flex" justify="end">
            <el-col :span="24">
              <el-button size="small" class="btnTextStyle" @click="$_handleCancel">取消</el-button>
              <el-button type="primary" class="btnTextStyle" size="small" @click="$_handleConfirm">
                确定
              </el-button>
            </el-col>
          </el-row>
        </slot>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import elDragDialog from './js/drag'
export default {
  inheritAttrs: false,
  name: 'BaseDialog',
  directives: { elDragDialog },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    dialogTitle: {
      type: String,
      required: true,
      default: '请填入标题'
    }
  },
  computed: {
    dialogShow: {
      get() {
        return this.dialogVisible
      },
      set(val) {
        this.$emit('update:dialogVisible', val)
      }
    }
  },
  methods: {
    $_handleConfirm() {
      this.$emit('confirm')
    },
    $_handleCancel() {
      this.$emit('cancel')
    }
  }
}
</script>
<style>
.baseDialog .el-dialog__header {
  font-size: 16px;
  color: rgba(0, 0, 0, 0.85);
  font-weight: 500;
  padding: 13px 24px;
  border-bottom: 1px solid #e9e9e9;
}
.baseDialog .el-dialog__header .titleStyle::before{
  content: '';
  display: inline-block;
  width: 4px;
  height: 16px;
  background-color: #0B58FF;
  border-radius: 1px;
  margin-right: 8px;
  position: relative;
  top: 2px;
}
.baseDialog .el-dialog__body {
  padding-left: 24px;
  padding-right: 24px;
}
.baseDialog .btnTextStyle {
  letter-spacing:6px;
  padding: 9px 10px 9px 16px;
  font-size: 14px;
}
</style>
