<template>
  <el-row :style="{'margin-right':marginRight} ">
    <el-col :style="{'text-align': 'center'}">
      <div class="button">
        <slot name="leftButton"></slot>
        <el-button v-if="showCancel" @click="cancel" class="cancel-button">返回</el-button>
        <el-button v-if="showSaveDraft" type="primary" :loading="loading && showLoading" @click="saveDraft" class="save">保存</el-button>
        <el-button v-if="showSubmit" type="primary" :loading="loading && showLoading" @click="submit" class="submit">提交</el-button>
        <el-button v-if="showConfirm" type="primary" :loading="loading && showLoading" @click="confirm" class="ok-button">确定</el-button>
        <slot name="rightButton"></slot>
      </div>
    </el-col>
  </el-row>
</template>

<script>

export default {
  props:{
    showLoading:{
      type:Boolean,
      default:false
    },
    //展示保存草稿
    showSaveDraft:{
      type:Boolean,
      default:false,
    },
    //展示提交
    showSubmit:{
      type:Boolean,
      default:false,
    },
    //展示确定
    showConfirm:{
      type:Boolean,
      default: true
    },
    //展示取消
    showCancel:{
      type:Boolean,
      default: true
    },
    marginRight:{
      type: String,
    }
  },
  components: {},
  data() {
    return {
      loading:false,
    };
  },
  computed: {},
  watch: {},
  methods: {
    //取消
    cancel(){
      this.$emit('cancel',)
    },
    //确定
    confirm(){
      if(this.showLoading){
        this.loading=true;
      }
      this.$emit('confirm')
    },
    //保存草稿
    saveDraft(){
      if(this.showLoading){
        this.loading=true;
      }
      this.$emit('saveDraft')
    },
    //提交
    submit(){
      if(this.showLoading){
        this.loading=true;
      }
      this.$emit('submit')
    }
  },


  created() {

  },
  mounted() {

  },


}


</script>

<style scoped>
.button{
  text-align: center;
  background-color: #D4DAE7;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center
}
.cancel-button{
  border-color: #FFFFFF ;
  background: #FFFFFF;
  border-radius: 2px;
}

.save{
  border-color: #3EB678 ;
  background: #3EB678;
  border-radius: 2px;
}
.submit{
  border-color: #1790FF ;
  background: #1790FF;
  border-radius: 2px;
}
</style>

