<template>
  <!-- 封装弹框 -->
  <div class="popup">
      <el-dialog :title="dialogTitle" appendToBody custom-class="syswin-dialog-center-footer" :visible.sync="dialogVisible" :width="width" :before-close="handleClose" :close-on-click-modal="closeOnClickModal">
          <slot>
              <p>弹框自定义的内容</p>
          </slot>
          <span v-if="!$slots.footer" slot="footer" class="dialog-footer">
              <el-button class="syswin-button-default" type="primary" @click="Save" size="small" :loading="loading">确 定</el-button>
              <el-button class="syswin-button-default" @click="Cancel" size="small">取 消</el-button>
          </span>
          <div v-else class="my-footer">
              <slot name="footer" />
          </div>
      </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'SyBaseDialog',
  props: {
      dialogTitle: {
          type: String,
          default: '标题'
      },
      visible: {
          type: Boolean,
          default: false
      },
      width: {
          type: String,
          default: '550px'
      },
      closeOnClickModal: {
          type: Boolean,
          default: false
      },
      loading: {
          type: Boolean,
          default: false
      }
  },
  computed: {
      dialogVisible: {
          get() {
              return this.visible
          },
          set(val) {
              // 当visible改变的时候，触发父组件的 updateVisible方法，在该方法中更改传入子组件的 centerDialogVisible的值
              this.$emit('update:visible', val)
          }
      }
  },
  methods: {
      Cancel() {
          this.$emit('update:visible', false)
      },
      Save() {
          this.$emit('confirm')
      },
      handleClose() {
          this.$emit('update:visible', false)
      }
  }
}
</script>

<style lang="scss" scoped>
.popup {
  .el-dialog {
      background-color: #ffffff;
      box-shadow: 0px 0px 10px 0px rgba(17, 130, 251, 0.5);
      border-radius: 5px;
      margin-top: 10% !important;
  }
  .el-dialog__header {
      width: 100%;
      height: 40px;
      line-height: 38px;
      border-bottom: 1px solid #f6f7f9;
      box-sizing: border-box;
      padding: 0 20px;
      font-size: 16px;
  }
  .el-dialog__close.el-icon.el-icon-close {
      font-size: 20px;
      width: 17px;
      height: 17px;
  }
  .el-button.el-button--default {
      // width: 88px;
      color: var(--primary-color);
      border: 1px solid var(--primary-color);
  }

  .el-dialog__headerbtn {
      top: 4px;
  }
  .el-dialog__title {
      color: #3c4354;
      font-family: PingFangSC-Regular;
      font-size: 16px;
      line-height: 16px;
  }
}
</style>
