<template>
  <div :class="['action_bar', { 't-center': center, 't-right': right }]">
    <el-button v-if="!noCencel" round @click="handleClick('onCancel')">
      {{ cencelTxt }}
    </el-button>
    <el-button
      v-if="!noConfirm"
      type="primary"
      :loading="confirmLoading"
      round
      @click="handleClick('onConfirm')"
    >
      {{ confirmTxt }}
    </el-button>
  </div>
</template>

<script>
export default {
  props: {
    noConfirm: { type: Boolean },
    noCencel: { type: Boolean },
    center: { type: Boolean },
    right: { type: Boolean },
    cencelTxt: { type: String, default: '取消' },
    confirmTxt: { type: String, default: '确定' },
    confirmLoading: { type: Boolean }
  },

  methods: {
    handleClick (name) {
      this.$emit(name)
    }
  }
}
</script>

<style lang="scss" scoped>
.action_bar {
  position: relative;
  z-index: 1;

  .el-button + .el-button {
    margin-left: 16px;
  }
}
</style>
