<template>
  <div class="yo-form-page">
    <div class="yo-form-page-layout">
      <div class="yo-form-page--header pt-xl pb-xl">
        <container mode="container-sm">
          <a-steps :current="current">
            <a-step :key="item.title" :title="item.title" v-for="item in steps">
              <a-icon :type="item.icon" slot="icon" />
            </a-step>
          </a-steps>
        </container>
      </div>
      <container mode="container">
        <div class="steps-content">
          <component :is="`step-${current + 1}`" />
        </div>
        <div class="steps-action">
          <a-button @click="prev" class="mr-sm" v-if="current > 0">上一步</a-button>
          <a-button @click="next" type="primary" v-if="current < steps.length - 1">下一步</a-button>
          <a-button
            @click="$message.success('Processing complete!')"
            type="primary"
            v-if="current == steps.length - 1"
          >完成</a-button>
        </div>
      </container>
    </div>
  </div>
</template>
<script>
import Step1 from './steps/1';
import Step2 from './steps/2';
import Step3 from './steps/3';
import Step4 from './steps/4';
import Step5 from './steps/5';

export default {
  components: {
    Step1,
    Step2,
    Step3,
    Step4,
    Step5,
  },

  data() {
    return {
      current: 0,
      steps: [
        {
          title: '登记片区',
          icon: 'block',
        },
        {
          title: '登记项目',
          icon: 'exception',
        },
        {
          title: '登记人员',
          icon: 'user',
        },
        {
          title: '登记房屋',
          icon: 'home',
        },
        {
          title: '人员选房',
          icon: 'link',
        },
      ],
    };
  },
  methods: {
    next() {
      this.current++;
    },
    prev() {
      this.current--;
    },
  },
};
</script>