<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 class="s" title="完善信息" @click="handelActive(1)" />
        <el-step class="s" title="会员认证" @click="handelActive(2)" />
        <el-step class="s" title="审核详情" @click="handelActive(3)" />
      </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">
        <component :is="appComponent" ref="appComponentRef" @handel-next="handelActive" />
      </div>
    </el-row>
  </div>
</template>

<script setup>
import { onMounted, ref, computed, defineAsyncComponent } from 'vue'
import _ from 'lodash'
import useTagsViewStore from '@/store/modules/tagsView'
import usePermissionStore from '@/store/modules/permission'
import { getMyOwnMemberInfo } from '@/api/system/userInfo'
const tagsStore = useTagsViewStore()
const permissionStore = usePermissionStore()
const active = ref(1)
const form = ref({
  authenticationStatus: 0
})

onMounted(() => {
  initData()
  
  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])
})

async function initData() {
  const res = await getMyOwnMemberInfo()
  form.value = res.data
  
  switch (res.data.authenticationStatus) {
    case '0' :
      active.value = 2
      break
    case '1':
      active.value = 3
      break
    case '2':
      active.value = 3
      break
    case '3':
      active.value = 2
      break
    default:
      active.value = 1
      break
  }
}

const appComponent = computed(() => {
  let component
  if (active.value == 1) {
    component = defineAsyncComponent(() => import('@/views/perfect/group.vue'))
  }
  if (active.value == 2) {
    component = defineAsyncComponent(() => import('@/views/perfect/member.vue'))
  }
  if (active.value == 3) {
    component = defineAsyncComponent(() => import('@/views/perfect/auditView.vue'))
  }
  
  return component
})


function handelActive(v) {
  if (!form.value.authenticationStatus) return
  active.value = v
}

</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>