<template>
  <transition name="mask-bg-fade">
    <el-dialog
      :visible.sync="show"
      width="400px"
      top="25vh"
      class="dialog_action"
      :class="this.confirmModalOptions.className ? this.confirmModalOptions.className : 'user-dialog'"
    >
      <span slot="title">
        <b class="iconLeft"></b>
        <span
          style=" display: inline-block;vertical-align: middle;"
        >{{confirmModalOptions.title || '提示'}}</span>
      </span>
      <span>{{confirmModalOptions.message || ""}}</span>
      <span slot="footer" class="dialog-footer">
        <el-button
          @click="confirmCancel"
          class="form_c"
          icon="el-icon-close"
          size="mini"
          round
        >{{confirmModalOptions.btnCancelText || "取消"}}</el-button>
        <el-button
          type="primary"
          icon="el-icon-check"
          size="mini"
          round
          class="form_t"
          @click="confirmSubmit"
        >{{confirmModalOptions.btnSubmitText || "确定"}}</el-button>
      </span>
    </el-dialog>
  </transition>
</template>
<script>
import services from "@/services";
export default {
  props: ["confirmModalOptions", "delSelect"],
  data() {
    return {
      show: false, // 是否显示模态框
      all_url: "",
      getData: null
    };
  },
  watch: {
    delSelect: {
      handler() {
        this.getData = this.delSelect;
      },
      deep: true
    }
  },
  methods: {
    showModel: function() {
      this.show = true;
      var className = this.confirmModalOptions.className
        ? this.confirmModalOptions.className
        : "user-dialog";
      setTimeout(() => {
        document
          .getElementsByClassName("v-modal")[0]
          .setAttribute("class", "v-modal " + className);
      }, 10);
    },
    confirmCancel: function() {
      this.show = false;
    },
    getDataFromApi() {
      return new Promise((resolve, reject) => {
        this.all_url = `${this.getData.id}`;
        this.$http
          .delete(this.all_url)
          .then(response => {
            resolve(response);
          })
          .catch(function(response) {
            reject(response);
          });
      });
    },
    confirmSubmit: function() {
      // if(typeof (this.confirmModalOptions.btnSubmitFunction)==='function'){
      //   this.confirmModalOptions.btnSubmitFunction()
      // }
      let time;
      if (this.confirmModalOptions.time) {
        time = this.confirmModalOptions.time;
      } else {
        time = 1000;
      }
      this.getDataFromApi().then(data => {
        if (data.status == 200) {
          setTimeout(() => {
            this.$emit("refreshuseList");
          }, time);
        } else {
          this.$message({
            showClose: true,
            message: this.delSelect.label + "失败",
            type: "error"
          });
        }
        this.show = false;
      });
    }
  }
};
</script>
<style>
.dialog_action .el-dialog__header {
  border-bottom: 1px solid #edf0ff;
  padding: 20px 20px 16px !important;
  font-family: "MicrosoftYaHei";
  font-size: 16px;
  color: #1d1e20;
  font-weight: 800;
}
.dialog_action .el-dialog__header .iconLeft {
  width: 4px;
  height: 16px;
  background-color: #0367f6;
  border-radius: 2px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 3px;
}
.dialog_action .el-icon-close:before {
  font-weight: 800 !important;
}
.dialog_action .el-dialog__body {
  padding: 49px 20px !important;
}
</style>
<style scoped>
.dialog_action .group-dialog.el-dialog__wrapper {
  width: 100% !important;
  left: 0 !important;
  overflow: hidden;
}
.dialog_action .user-dialog {
  overflow: hidden;
}
</style>