<template>
  <a-card :bordered="false">
    <!-- 用户姓名 -->
    <div class="home-avatarHolder">
      <img class="avatar" src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
      <div class="username">{{ base.name }}({{ base.type }})</div>
      <div class="bio">登录账号：{{ base.username }}</div>
    </div>

    <a-divider :dashed="true" />
    <!-- 角色 -->
    <div class="home-detail">
      <p><a-icon class="icon" type="contacts" />实名姓名：{{ real.name }}</p>
      <p><a-icon class="icon" type="contacts" />身份证号：{{ real.idcard }}</p>
      <p><a-icon class="icon" type="deployment-unit" />{{ depart }}</p>
      <p><a-icon class="icon" type="environment" />{{ address }}</p>
    </div>

    <a-divider :dashed="true" />
    <!-- 标签 -->
    <div class="home-team">
      <div class="teamTitle">标签</div>
      <a-spin :spinning="teamSpinning">
        <div class="members">
          <a-row>
            <a-col :span="8" v-for="(item, index) in signs" :key="index">
              <a-tag class="atags" color="blue">
                {{ item }}
              </a-tag>
            </a-col>
          </a-row>
        </div>
      </a-spin>
    </div>

    <a-divider :dashed="true" />
    <!-- 团队 -->
    <div class="home-team">
      <div class="teamTitle">其他团队</div>
      <a-spin :spinning="teamSpinning">
        <div class="members">
          <a-row>
            <a-col :span="12" v-for="(item, index) in 5" :key="index">
              <a>
                <a-avatar size="small" :src="avatarHead1" />
                <!-- <a-avatar v-else size="small" style="color: #fff; backgroundColor: #1890ff" >U</a-avatar> -->
                <span class="member">
                  {{
                    index == 1
                      ? '科学搬砖组'
                      : index == 2
                        ? '法律老师组'
                        : index == 3
                          ? '法律顾问组'
                          : index == 4
                            ? '中二少女团'
                            : index == 0
                              ? '设计天团组'
                              : '其他组'
                  }}
                </span>
              </a>
            </a-col>
          </a-row>
        </div>
      </a-spin>
    </div>
  </a-card>
</template>

<script>
import avatarHead1 from '@/assets/images/team-1.png'
import avatarHead2 from '@/assets/images/team-2.png'
import avatarHead3 from '@/assets/images/team-3.png'
import avatarHead4 from '@/assets/images/team-4.png'
import avatarHead5 from '@/assets/images/team-5.png'
import { getHomeUserInfo } from '@/api/statistical.js'
export default {
  name: 'UserInfo',
  data: () => ({
    teamSpinning: false,
    avatarHead1,
    avatarHead2,
    avatarHead3,
    avatarHead4,
    avatarHead5,
    base: '',
    real: '',
    signs: '',
    address: '',
    depart: ''
  }),
  beforeCreate () { },
  activated () {
    getHomeUserInfo().then(res => {
      this.base = res.base
      this.signs = res.signs
      this.real = res.real
      this.depart = res.depart
      this.address = res.address
    }).catch(err => {
      console.log(err)
    })
  },
  methods: {}
}
</script>

<style lang='less' scoped>
@import '../Index.less';

.home-avatarHolder{
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  .avatar{
    width: 104px;
    height: 104px;
  }
  .username{
    margin-top: 20px;
    font-size: 18px;
    color: #111;
    font-weight: bold;
  }
  .bio{
    padding-top: 10px;
  }
}
.home-detail{
  p{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    box-sizing: border-box;
    font-size: 14px;
  }
  .icon{
    margin-right: 10px;
    font-size: 15px;
  }
}

.home-team{
  .teamTitle{
    font-size: 16px;
    font-weight: bold;
  }
  .members{
    margin-top: 10px;
    a{
      padding: 12px 0;
      color: #666;
      display: inline-block;
      span{
        margin-right: 10px;
      }
    }
    .atags{
      margin-top: 12px;
    }
  }
}
</style>
