<template>
  <div>
    <!-- 用户实名信息 -->
    <a-card :bordered="false" style="margin-top: 24px" title="流程进度">
      <a-steps :direction="isMobile && 'vertical' || 'horizontal'" :current="stepsCount" progressDot>
        <a-step v-for="item in steps" :key="item.key">
          <template v-slot:title>
            <span>{{ item.name }}</span>
          </template>
          <template v-slot:description>
            <div class="antd-pro-pages-profile-advanced-style-stepDescription">
              {{ item.user }}<br/>
              <div style="display:inline;font-size: 12px;">{{ item.created_at }}</div>
            </div>
          </template>
        </a-step>
      </a-steps>
    </a-card>
  </div>
</template>
<script>
import { baseMixin } from '@/store/app-mixin'
export default {
  name: 'Steps',
  mixins: [baseMixin],
  props: {
    stepsCount: {
      type: Number,
      default: 0
    },
    steps: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data () {
    return {

    }
  },
  activated () {
  },
  deactivated () {
  },
  methods: {
  }
}
</script>
<style lang="less" scoped>
.row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.column {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ai_start {
  align-items: flex-start;
}
.jc_start {
  justify-content: flex-start;
}
.jc_sb {
  justify-content: space-between;
}
.js_start {
  justify-content: start;
}

</style>
