<template>
  <div class="dashboard-container">
    <template v-if="!$route.params.id">
      <div v-if="authenticated === 'not_certification'" class="company-box">
        <div class="index-header">
          <p class="index-header-title">
            尊敬的用户， 欢迎您！
          </p>
          <div class="step-underline">
            <div v-for="item in [1, 2, 3, 4]" :key="item" />
          </div>
          <p class="index-title-tip">在您开始体验我们系统的全部功能之前，请您首先补充完善您的企业信息进行认证，随后您可在用户中心查看认证状态，了解业务处理进度。</p>
        </div>
        <business-info :source="'noAuth'" />
      </div>
      <div v-else class="index-page">
        <head-sculpture :deatils-info="deatilsInfo" :auth-status="authenticated" />
        <personal-information :deatils-info="deatilsInfo" @phoneChange="getBaseInfo" />
      </div>
      <router-view />
    </template>
  </div>
</template>

<script>
import { getInfo, getCertificationStatus } from '@/api/user'
export default {
  name: 'HomePage',
  components: {
    HeadSculpture: () => import('./components/HeadSculpture.vue'),
    PersonalInformation: () => import('./components/PersonalInformation.vue'),
    BusinessInfo: () => import('../businessManage/myBusiness/components/BusinessBasic.vue')
  },
  data() {
    return {
      authenticated: '',
      deatilsInfo: {}
    }
  },
  created() {
    this.getBaseInfo()
    this.getStatus()
  },
  methods: {
    getBaseInfo() {
      getInfo().then(response => {
        this.deatilsInfo = response.data
      })
    },
    getStatus() {
      getCertificationStatus().then(res => {
        this.authenticated = res.data.certificationStatus
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-container {
  .index-header {
    margin-bottom: 30px;
    .index-header-title {
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 20px;
    }
    .index-title-tip {
      font-size: 14px;
    }
  }
}
</style>
