<template>
  <transition name="mask-bg-fade">
    <el-dialog
      :visible.sync="show"
      width="400px"
      top="25vh"
      :class="{'user-dialog':true,'out':confirmOptions.position}"
    >
      <span slot="title">
        <b class="iconLeft"></b>
        <span style=" display: inline-block;vertical-align: middle;">
          {{ confirmOptions.title || "提示" }}
        </span>
      </span>
      <span>{{ confirmOptions.message || "" }}</span>
      <span slot="footer" class="dialog-footer">
        <el-button
          class="form_c"
          type="defalut"
          size="mini"
          @click="hideModel"
          >{{ confirmOptions.btnCancelText || "取消" }}</el-button
        >
        <el-button
          class="form_t"
          type="primary"
          size="mini"
          @click="confirmSubmit"
          >{{ confirmOptions.btnSubmitText || "确定" }}</el-button
        >
      </span>
    </el-dialog>
  </transition>
</template>

<script>
export default {
  name: "dialog-action",
  props: {
    confirmOptions: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      show: false,
    };
  },
  methods: {
    showModel() {
      this.show = true;
    },
    hideModel() {
      this.show = false;
    },
    confirmSubmit() {
      typeof this.confirmOptions.confirmSubmit === "function" &&
        this.confirmOptions.confirmSubmit();
    },
  },
};
</script>
<style>
.el-dialog__header {
  border-bottom: 1px solid #edf0ff;
  padding: 20px 20px 16px !important;
  font-family: "MicrosoftYaHei";
  font-size: 16px;
  color: #1d1e20;
  font-weight: 800;
}
.el-dialog__header .iconLeft {
  width: 4px;
  height: 16px;
  background-color: #0367f6;
  border-radius: 2px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 3px;
}
.el-icon-close:before {
  font-weight: 800 !important;
}
.el-dialog__body {
  padding: 49px 20px !important;
}
.out .el-dialog__body{
  text-align: left;
}
</style>
<style scoped>
.group-dialog.el-dialog__wrapper {
  width: 100% !important;
  left: 0 !important;
  overflow: hidden;
}
.user-dialog {
  overflow: hidden;
}
</style>
