<template>
  <el-row id="home-page-body">
    <el-col :span="4">
      <el-card style="position: fixed;">
        <el-menu default-active="1" @select="handleSelect">
          <el-menu-item index="0">
            <el-icon>
              <Back/>
            </el-icon>
            <span style="padding-left: 20px">返回首页</span>
          </el-menu-item>
          <el-menu-item index="1">
            <el-icon>
              <User/>
            </el-icon>
            <span style="padding-left: 20px">基本信息</span>
          </el-menu-item>
          <el-menu-item index="2">
            <el-icon>
              <Medal/>
            </el-icon>
            <span style="padding-left: 20px">身份认证</span>
          </el-menu-item>
        </el-menu>
      </el-card>
    </el-col>
    <el-col :span="2"/>
    <el-col :span="18">
      <InformationCard v-if="activeIndex==='1'"/>
      <CertificationCard v-else/>
    </el-col>
  </el-row>
</template>

<script>
import { Back, Medal, User } from "@element-plus/icons-vue";
import InformationCard from "@/views/HomePage/components/InformationCard";
import CertificationCard from "@/views/HomePage/components/CertificationCard";

export default {
  name: "HomePage",
  components: { Back, CertificationCard, InformationCard, Medal, User, },
  data() {
    return {
      activeIndex: "1",
    };
  },
  methods: {
    handleSelect(index) {
      this.activeIndex = index;
      if (index === "0") {
        this.$router.push("portal");
      }
    },
  }
};
</script>

<style scoped>
#home-page-body {
  margin: 40px 160px 80px 0;
  min-height: calc(100vh - 160px);
}
</style>