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

      <div
        slot="footer"
        class="dialog_action apaas_button"
        v-if="$slots.action"
      >
        <slot name="action"></slot>
      </div>
      <div slot="footer" class="dialog_action apaas_button" v-else>
        <el-button
          v-if="!cancelHide"
          :type="cancelType"
          size="mini"
          v-text="cancelText || '取消'"
          @click="dialogCancel"
        >
        </el-button>
        <el-button
          :type="sunbmitType"
          size="mini"
          v-text="sunbmitText || '确定'"
          :disabled="submitDisable"
          @click="dialogSubmit"
        >
        </el-button>
      </div>
    </el-dialog>
  </transition>
</template>

<script>
export default {
  name: "dialog-action",
  props: {
    width: {
      type: String,
      default: () => "420px",
    },
    title: {
      type: String,
      default: () => "",
    },
    msg: {
      type: String,
      default: () => "",
    },
    cancelText: {
      type: String,
      default: () => "",
    },
    cancelType: {
      type: String,
      default: () => "defalut",
    },
    cancelHide: {
      type: Boolean,
      default: () => false,
    },
    cancel: {
      type: Function,
      default: () => null,
    },
    sunbmitText: {
      type: String,
      default: () => "",
    },
    sunbmitType: {
      type: String,
      default: () => "primary",
    },
    submitDisable: {
      type: Boolean,
      default: () => false,
    },
    submit: {
      type: Function,
      default: () => null,
    },
  },
  data: () => ({
    showDialog: false,
  }),
  methods: {
    show() {
      this.showDialog = true;
    },
    hide() {
      this.showDialog = false;
    },
    dialogCancel() {
      if (typeof this.cancel === "function") {
        this.cancel();
      }
      this.$emit("cancel");
      this.hide();
    },
    dialogSubmit() {
      if (typeof this.submit === "function") {
        this.submit();
      }
      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>
