<!--  -->
<template>
  <div class="">
    <el-dialog
      :visible.sync="dialogShow"
      width="30%"
      :show-close="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <div slot="title" style="display: flex">
        <img
          style="width: 24px; height: 24px; margin-right: 10px"
          src="~assets/images/Tips.png"
          alt=""
        />
        <div class="tipsTexe">
          {{ tipsText }}
        </div>
      </div>
      <div style="margin: 0px auto; width: 330px; height: 100%">
        {{ contentText }}
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button v-if="cancleBtnShow" size="small" type="info"  @click="clickCancel">{{
          cancelText
        }}</el-button>
        <el-button v-if="confirmBtnShow" size="small" type="primary" @click="clickConfirm">{{
          confirmText
        }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  props: {
    tipsText: {
      type: String,
      default: () => "提示",
    },
    contentText: {
      type: String,
      default: () => "",
    },
    cancelText: {
      type: String,
      default: () => "取消",
    },
    confirmText: {
      type: String,
      default: () => "确认",
    },
    cancleBtnShow:{
      type: Boolean,
      default: () => true,
    },
    confirmBtnShow:{
      type: Boolean,
      default: () => true,
    },
   
  },
  data() {
    //这里存放数据
    return {
      dialogShow: false,
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //方法集合
  methods: {
    // 确认
    clickConfirm() {
      this.dialogShow = false;
      this.$emit("clickConfirm");
    },
    // 取消
    clickCancel() {
      this.dialogShow = false;
      this.$emit("clickCancel");
    },
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
};
</script>
<style lang="scss" scoped>
::v-deep {
  .el-dialog{
    
border-radius: 4px;
  }.el-button--info{
    
background: #F6F6F6;
border-color: #F6F6F6;
color: #999;
  }
  .el-dialog__footer {
    padding: 10px 30px 20px 20px;
  }
}
.tipsTexe{

            height: 24px;
            line-height: 24px;
            font-size: 16px;
            font-weight: 500;
        
}
</style>
