<template>
  <transition name="mask-bg-fade">
    <el-dialog
      class="apass_dialog"
      :visible.sync="showDialog"
      :width="width"
      top="25vh"
    >
      <h3 class="dialog_title" slot="title">
        <span v-text="title"></span>
      </h3>
      <div class="dialog_content appas_table">
        <slot name="content"></slot>
      </div>
      <div slot="footer" class="dialog_action apass_button">
        <slot name="action"></slot>
      </div>
    </el-dialog>
  </transition>
</template>

<script>
export default {
  name: "dialog-action",
  props: {
    width: {
      type: String,
      default: () => "400px",
    },
    title: {
      type: String,
      default: () => "",
    },
  },
  data: () => ({
    showDialog: false,
  }),
  methods: {
    show() {
      this.showDialog = true;
    },
    hide() {
      this.showDialog = false;
    },
  },
};
</script>

<style scoped>
.dialog_title::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 4px;
  height: 16px;
  border-radius: 2px;
  background-color: #515fe7;
  margin-right: 10px;
}
.dialog_title > span {
  display: inline-block;
  vertical-align: middle;
  font-size: 16px;
  font-weight: bold;
  color: #1d1e20;
}
</style>

<style>
.apass_dialog .el-dialog__header {
  padding: 20px;
  border-bottom: 1px solid #edf0ff;
}
.apass_dialog .el-dialog__body {
  padding: 10px 30px;
}
.apass_dialog .el-dialog__footer {
  padding: 20px;
}
</style>
