<template>
  <div class="DialongBox">
    <el-dialog
      title=""
      :visible.sync="dialogVisible2"
      width="346px"
      >
      <div class="err_title"><slot name="show-errtitle"></slot></div>
      <span><slot name="show-text">未定义</slot></span>
      <span slot="footer" class="dialog-footer">
        <slot>
          <el-button type="primary" @click="CertainEvents">确 定</el-button>
        </slot>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'DialongBox',
  data(){
    return{
       dialogVisible2: false  //是否显示弹框
    }
  },
  props:{
    dialogVisible:{ //数据
      type :Boolean,
      default: false
    },
  },
  watch: {
     dialogVisible:{
      handler(val){
        // console.log(val);
      this.dialogVisible2= val
      },  
      deep: true
    },
    dialogVisible2:{
      handler(val){
      this.$emit("update:dialogVisible",val)
      },  
      deep: true
    }
  },
  methods :{
    CertainEvents(){
      this.dialogVisible2 = false
      this.$emit("determine")
    }
  }
  // computed:{
  //   dialogVisible2:{
  //     get(){
  //       return this.dialogVisible2
  //     },
  //     set(val){
  //        this.$emit("update:dialogVisible",val)
  //     }
  //   }
  // }
}
</script>

<style scoped>
/* 弹框上部分 也就是右上角x的样式 */
.DialongBox >>> .el-dialog .el-dialog__header{
  width: 100%;
  height: 22px;
  background: #375AC7;
  border-radius: 0px 2px 0px 0px ;
  padding: 0;
}
.DialongBox >>> .el-dialog .el-dialog__header .el-dialog__headerbtn{
  top: 6px;
  right: 6px;
  font-size: 10px;
  columns: #fff;
}
.DialongBox >>> .el-dialog .el-dialog__header .el-dialog__headerbtn .el-icon-close:before{
  color: #fff;
}
/* 取消 确认 按钮居中 */
.el-dialog__wrapper >>> .el-dialog .el-dialog__footer {
  text-align: center ;
}
/* 取消 确认 样式 */
.dialog-footer .el-button{
  width: 118px;
  height: 32px;
  border: 1px solid #979797;
  border-radius: 2px;
  box-sizing: border-box;
  padding: 0;
  font-family: SourceHanSansCN-Medium;
  font-size: 14px;
  letter-spacing: 0;
  font-weight: 500;
  }
/* 取消和确认边距 */
.el-button+.el-button {
    margin-left: 16px;
}
/* 弹框内容居中 */
.el-dialog__wrapper >>> .el-dialog .el-dialog__body{
  text-align: center;
  font-family: PingFangSC-Regular;
  font-size: 16px;
  color: #000000;
  letter-spacing: 0;
  text-align: center;
  font-weight: 400;
  margin-top: 30px;
}
.err_title{
  position: relative; 
  bottom: 14px;
}
</style>>