<!--
 * @Author: liuyx 1517482303@qq.com
 * @Date: 2022-11-11 09:30:01
 * @LastEditTime: 2022-12-19 07:42:44
 * @Description: 主页右侧组件，用于展示网站信息
-->
<template>
  <div class="user-info">
    <el-card class="animate__animated animate__zoomIn">
      <!-- 头像 -->
      <div class="avatar">
        <el-avatar :size="100" :src="siteInfo.avatar" />
      </div>
      <!-- 名称 -->
      <h2>{{ siteInfo.author }}</h2>
      <!-- 简述 -->
      <p>{{ siteInfo.intro }}</p>
      <!-- 分类统计 -->
      <div class="classification">
        <div class="class-item">
          <router-link to="/tags">
            <div>标签</div>
            <div class="class-item-nums">{{ tagNum }}</div>
          </router-link>
        </div>
        <div class="class-item">
          <router-link to="/categories">
            <div>分类</div>
            <div class="class-item-nums">{{ categoryNum }}</div>
          </router-link>
        </div>
        <div class="class-item">
          <router-link to="/archives">
            <div>归档</div>
            <div class="class-item-nums">{{ archiveNum }}</div>
          </router-link>
        </div>
      </div>
      <!-- 一些图标 -->
      <div class="icons">
        <a :href="siteInfo.github"><svg-icon name="github"></svg-icon></a>&nbsp;
        <a :href="siteInfo.gitee"><svg-icon name="gitee"></svg-icon></a>
      </div>
    </el-card>
    <el-card class="notice animate__animated animate__zoomIn">
      <h3 style="margin-bottom: 10px"><svg-icon name="notice" /> 公告</h3>
      {{ siteInfo.notice }}
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getSiteInfo } from '../api/site'

const siteInfo = ref({})
const tagNum = ref(0)
const categoryNum = ref(0)
const archiveNum = ref(0)

onMounted(() => {
  getInfo()
})

const getInfo = async () => {
  const { data } = await getSiteInfo()
  console.log(data)
  siteInfo.value = data
}
</script>

<style lang="scss" scoped>
.user-info {
  padding: 10px;
  text-align: center;
  position: sticky;
  top: 0px;
  .avatar {
  }
  .classification {
    display: flex;
    padding: 20px 10px;
    box-sizing: border-box;
    .class-item {
      width: 33.3%;
      .class-item-nums {
        line-height: 40px;
        height: 40px;
      }
    }
  }
  .icons {
    margin-top: 10px;
  }
  .notice {
    text-align: left;
  }
}
</style>
