<template>
  <div class="demo-steps-change">
    <ui-steps :current="current">
      <ui-step
        v-for="(step, index) of stepsList"
        :key="index"
        :title="step.title"></ui-step>
    </ui-steps>
    <div class="steps-content">
      {{ stepsList[current].content }}
    </div>
    <div class="steps-action">
      <ui-button
        v-if="stepsLength > current + 1"
        type="primary"
        @click="nextStep">
        Next
      </ui-button>
      <ui-button
        v-else
        type="primary"
        @click="endStep">
        Done
      </ui-button>
      <ui-button
        v-if="current > 0"
        ghost
        @click="previousStep">
        Previous
      </ui-button>
    </div>
  </div>
</template>

<script>
import { Steps, Step, Button } from "amumu-ui"
import { message } from "amumu-ui/src/factory"

const STEPS_LIST = [
  {
    title: "First",
    content: "First-content",
  },
  {
    title: "Second",
    content: "Second-content",
  },
  {
    title: "Last",
    content: "Last-content",
  },
]

export default {
  components: {
    "ui-steps": Steps,
    "ui-step": Step,
    "ui-button": Button,
  },
  data() {
    return {
      current: 0,
      stepsList: STEPS_LIST,
      stepsLength: STEPS_LIST.length,
    }
  },
  methods: {
    nextStep() {
      this.current++
    },
    previousStep() {
      this.current--
    },
    endStep() {
      message["warning"]({
        message: "Processing complete!",
        closable: true,
      })
    },
  },
}
</script>

<style lang="scss">
.demo-steps-change {
  .steps-content {
    margin-top: 16px;
    border: 1px dashed #e9e9e9;
    border-radius: 6px;
    background-color: #fafafa;
    min-height: 200px;
    text-align: center;
    padding-top: 80px;
  }
  .steps-action {
    margin-top: 24px;
  }
  .mm-button {
    margin-right: 10px;
  }
}
</style>
