<template>
  <div>
    <a-button type="primary" @click="handleClick">{{ currentLabel }}</a-button>
  </div>
</template>

<script>
export default {
  name: 'StateButton',
  props: {
    // 定义状态和对应的显示文本与事件
    states: {
      type: Array,
      required: true,
      default: () => [
        { label: '状态1', event: 'state1Event' },
        { label: '状态2', event: 'state2Event' },
        { label: '状态3', event: 'state3Event' },
      ],
    },
    initialIndex: {
      type: Number,
      default: 0,
    },
  },
  data () {
    return {
      currentIndex: this.initialIndex,
    }
  },
  computed: {
    // 当前显示的按钮文本
    currentLabel () {
      return this.states[this.currentIndex]?.label || '按钮'
    },
  },
  methods: {
    handleClick () {
      // 触发当前状态的事件
      const currentState = this.states[this.currentIndex]
      if (currentState && currentState.event) {
        this.$emit(currentState.event)
      }

      // 切换到下一个状态
      this.currentIndex = (this.currentIndex + 1) % this.states.length
    },
  },
}
</script>

<style scoped>
/* 添加样式以适应项目需求 */
</style>
