<template>
  <div class="app-container">
    <el-row justify="center" style="background-color: #fff;padding:10px">
      <el-steps :active="active" align-center style="width: 800px;">
        <el-step title="完善信息" />
        <el-step title="会员认证" />
      </el-steps>
    </el-row>
    <el-row justify="center" class="titleHight">
      <div class="title">
        <span class="icon"><el-icon style="vertical-align:middle"><Warning /></el-icon></span> <span class="titleFirst">提示</span>  请完善以下信息，填写完点击提交按钮进行会员认证 !
      </div>
    </el-row>
    <el-row justify="center " class=" lr-bg">
      <div class="box">
        <group v-if="active==1" @nextFn="active=2" />
        <member v-if="active==2" @retreatFn="active=1" />
      </div>
    </el-row>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import _ from 'lodash'
import useTagsViewStore from '@/store/modules/tagsView'
import usePermissionStore from '@/store/modules/permission'
import Group from '@/views/perfect/group.vue'
import Member from '@/views/perfect/member.vue'
const tagsStore = useTagsViewStore()
const permissionStore = usePermissionStore()
const active = ref(1)

onMounted(() => {
  if (tagsStore.visitedViews[0].name == 'Index') {
    tagsStore.delView(tagsStore.visitedViews[0])
  }
  const perfectRoute = _.find(permissionStore.sidebarRouters, (r) => {
    return r.path == '/perfect'
  })
  perfectRoute.hidden = false
  permissionStore.setSidebarRouters([perfectRoute])
})
</script>

<style lang="scss" scoped>
.box{
  min-width: 1000px;
  display: flex;
  justify-content: center;
  //min-height: 1290px;
  min-height: 1000px;
}
.titleHight{
  height: 50px;
  background: #E5F3FE;
  line-height: 50px;
}
.title{
  color:#4C5359 ;
  font-size: 14px;
}
.titleFirst{
  color: #000;
  font-size: 16px;
  font-weight: 500;
  margin-right: 10px;
  // vertical-align:middle
}
.icon{
  color:#145DC5 ;
  // background: #145DC5;
  font-size: 16px;
  // vertical-align:middle;
}

</style>