<template>
  <el-dialog :title="title" :visible.sync="dialogFormVisible" :close-on-click-modal="false"
    :close-on-press-escape="false" :custom-class="myclass ? 'custom-my-class' : ''" @close="resetCancel" :width="width"
    append-to-body>
    <slot></slot>
    <div slot="footer" class="dialog-footer" v-if="footer">
      <el-form size="small">
        <el-form-item class="dialog-from-item">
          <el-button size="mini" @click="resetCancel">{{ closeText }}</el-button>
          <el-button type="primary" size="mini" @click="resetConfirm">确定</el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-dialog>
</template>
<script>
export default {
  data() {
    return {
      dialogFormVisible: false,
    }
  },
  props: {
    title: {
      type: String,
      default: ''
    },
    myclass: {
      type: Boolean,
      default: false,
    },
    closeText: {
      type: String,
      default: '取消'
    },
    width: {
      type: String,
      default: "50%"
    },
    footer: {
      type: Boolean,
      default: false,
    }
  },
  methods: {
    open() {
      this.dialogFormVisible = true
    },
    close() {
      this.dialogFormVisible = false;
    },
    // 取消按钮
    resetCancel() {
      this.$emit('close')
    },
    // 确定按钮
    resetConfirm() {
      this.$emit('confirm')
    },
  },
}
</script>
<style lang="scss" scoped>
::v-deep .el-dialog {
  border-radius: 10px;

  .el-dialog__header {
    border-bottom: 1px solid #DDDDDD;
    padding: 10px 20px;
    background: #F2F4F6;
    border-top-left-radius: 10px;  /* 上左角圆角 */
    border-top-right-radius: 10px; /* 上右角圆角 */


    span {
      // font-family: PingFang-SC, PingFang-SC;
      font-weight: 800;
      font-size: 16px;
      color: #000000;
      position: relative;

      &::after {
        content: "";
        position: absolute;
        top: 0;
        left: -20px;
        width: 5px;
        border-radius: 5px;
        height: 100%;
        background-color: #1485EF;
      }
    }
  }

  .el-dialog__headerbtn {
    top: 15px;
  }

  .el-dialog__footer {
    border-top: 1px solid #DDDDDD;

    .dialog-footer {
      .el-form {
        .dialog-from-item {
          margin-bottom: 0;

          .el-form-item__content {
            .el-button {
              padding: 10px 17px;
            }
          }
        }
      }
    }
  }
}

::v-deep .custom-my-class {
  margin-top: 15vh !important;
}
::v-deep .el-dialog__body{
  padding-top: 10px !important;
}
</style>
