<template>
  <div>
    <div class="stepbox">
      <a-steps id="purchase-request-steps" :current="stepActive">
        <a-step v-for="step in steps" :key="step.status" :title="step.title">
          <template slot="icon">
            {{ step.status }}
          </template>
        </a-step>
      </a-steps>
    </div>
    <div class="bottom-button-container" v-show="stepActive !== steps.length - 1 || lastShowNext">
      <div class="buttons">
        <div class="steps-action">
          <a-button v-if="stepActive > 0" style="margin-left: 8px" @click="stepPrev">
            {{ labels.previousStep }}
          </a-button>
          <a-button
            v-if="
              stepActive < steps.length - 2 || (lastShowNext && stepActive === steps.length - 2)
            "
            @click="stepNext"
            type="primary"
            >{{ labels.nextStep }}
          </a-button>
          <a-button
            v-for="button in buttons"
            :key="button.key"
            :type="button.type"
            @click="doAction(button.action)"
            :disabled="buttonDisabled"
          >
            {{ button.label }}
          </a-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { ft } from '../../../lib/utils';

const LABELS = {
  previousStep: ft('i18n_common_previous_step', '上一步'),
  nextStep: ft('i18n_common_next_step', '下一步')
};

export default {
  name: 'PageSteps',
  props: {
    buttonDisabled: {
      type: Boolean,
      default: false
    },
    // 倒数第二步是否显示下一步
    lastShowNext: {
      type: Boolean,
      default: false
    },
    // 当前步骤
    stepActive: {
      type: Number,
      default: 0
    },
    // 步骤条
    steps: Array,
    // 底部按钮
    buttons: Array
  },
  components: {},
  data() {
    return { labels: LABELS };
  },
  created() {},
  methods: {
    doAction(action) {
      this.$emit('do-action', action);
    },
    stepPrev() {
      this.$emit('step-prev');
    },
    stepNext(done) {
      this.$emit('step-next');
    }
  }
};
</script>

<style lang="scss">
@import './steps.scss';
</style>
