<template>
  <div class="dialog-footer">
    <Button
      class="cancel footer-btn"
      @click="handleCancel"
    >
      {{ cancelText }}
    </Button>
    <Button
      class="confirm footer-btn"
      type="primary"
      @click="handleConfirm"
    >
      {{ confirmText }}
    </Button>
  </div>
</template>

<script>
  export default {
    name: 'DialogFooter',

    props: {
      onCancel: {
        type: Function,
        default: () => {},
      },
      onConfirm: {
        type: Function,
        default: () => {},
      },
      cancelText: {
        type: String,
        default: '取消'
      },
      confirmText: {
        type: String,
        default: '确定'
      }
    },

    data() {
      return {};
    },

    mounted() {},

    methods: {
      handleCancel() {
        this.onCancel();
      },

      handleConfirm() {
        this.onConfirm();
      },
    },
  };
</script>

<style lang="less" scoped>
.dialog-footer {
  text-align: right;
  margin-top: 20px;
  .footer-btn {
    margin-right: 10px;
  }
  &:last-child {
    margin-right: 0;
  }
}
</style>
