<template>
  <div class="step-actions">
    <el-button 
      v-if="showPrevBtn"
      @click="$emit('prevStep')" 
      :disabled="disabled" 
      :icon="ArrowLeft" 
      class="step-btn" 
      style="background: white; border-color: #d9d9d9; color: #000;">
      上一步
    </el-button>
    
    <el-button 
      @click="$emit('resetAll')" 
      :disabled="disabled" 
      :icon="Refresh" 
      class="step-btn" 
      style="background: white; border-color: #d9d9d9; color: #000;">
      重置
    </el-button>
    
    <el-button 
      v-if="showNextBtn"
      type="primary" 
      :icon="ArrowRight" 
      :disabled="nextBtnDisabled || disabled" 
      @click="$emit('nextStep')" 
      class="step-btn" 
      style="background: #0F172A; border-color: #0F172A;">
      下一步
    </el-button>
    
    <el-button 
      v-if="showSubmitBtn"
      type="primary" 
      :disabled="submitBtnDisabled || disabled" 
      :icon="Upload" 
      @click="$emit('startSubmit')" 
      class="step-btn" 
      style="background: #0F172A; border-color: #0F172A;">
      提交
    </el-button>
  </div>
</template>

<script setup>
import { ArrowLeft, ArrowRight, Refresh, Upload } from '@element-plus/icons-vue'

defineProps({
  currentStep: {
    type: Number,
    required: true
  },
  showPrevBtn: {
    type: Boolean,
    default: true
  },
  showNextBtn: {
    type: Boolean,
    default: true
  },
  showSubmitBtn: {
    type: Boolean,
    default: false
  },
  nextBtnDisabled: {
    type: Boolean,
    default: false
  },
  submitBtnDisabled: {
    type: Boolean,
    default: false
  },
  disabled: {
    type: Boolean,
    default: false
  }
})

defineEmits(['prevStep', 'nextStep', 'resetAll', 'startSubmit'])
</script>

<style scoped>
/* 步骤操作按钮 */
.step-actions { 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  margin-top: 24px; 
  gap: 20px;
}

.step-btn {
  flex: 0 0 120px;
  height: 40px;
  font-size: 14px;
}
</style>
