<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 v-if="$slots.content" class="dialog_content appas_table">
        <slot name="content"></slot>
      </div>
      <p v-else class="dialog_msg" v-text="msg"></p>

      <div
        v-if="$slots.action"
        slot="footer"
        class="dialog_action apass_button"
      >
        <slot name="action"></slot>
      </div>
      <div v-else slot="footer" class="dialog_action apass_button">
        <el-button type="defalut" size="mini" @click="hide">
          取消
        </el-button>
        <el-button type="primary" size="mini" @click="dialogSubmit">
          确定
        </el-button>
      </div>
    </el-dialog>
  </transition>
</template>

<script>
export default {
  name: "dialog-action",
  props: {
    width: {
      type: String,
      default: () => "400px",
    },
    title: {
      type: String,
      default: () => "提示",
    },
    msg: {
      type: String,
      default: () => "",
    },
  },
  data: () => ({
    showDialog: false,
  }),
  methods: {
    show() {
      this.showDialog = true;
    },
    hide() {
      this.showDialog = false;
    },
    dialogSubmit() {
      this.$emit("submit");
      this.hide();
    },
  },
};
</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;
}
.dialog_msg {
  font-size: 18px;
  line-height: 34px;
  color: #58617a;
  margin: 30px 0 10px;
}
</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>
