<!--
 * @Author: liuyx 1517482303@qq.com
 * @Date: 2022-11-10 08:03:12
 * @LastEditTime: 2022-12-19 07:44:43
 * @Description: 主页
-->
<template>
  <div
    class="home-banner animate__animated animate__fadeIn animate__slow"
    :style="{ background: 'url(' + bannerUrl + ') center center / cover no-repeat' }"
  >
    <h1 class="site-name">{{ siteName }}</h1>
  </div>
  <div class="home-content">
    <div class="article-list">
      <el-card
        class="card-box animate__animated animate__zoomIn"
        v-for="item in blogList"
        :key="item"
      >
        <div class="article-item">
          <!-- 文章图片 -->
          <div class="cover-container">
            <router-link :to="'/articles/' + item._id">
              <img :src="item.cover" alt="" class="cover" />
            </router-link>
          </div>
          <!-- 文章标题和简述 -->
          <div class="article-content">
            <router-link :to="'/articles/' + item._id">
              <div class="title">{{ item.title }}</div>
            </router-link>
            <div class="article-info">
              <span><svg-icon name="calendar" class="icon"></svg-icon>{{ item.createTime }}</span>
              <span class="separator">|</span>
              <span><svg-icon name="category" class="icon"></svg-icon>{{ item.category }}</span>
              <span class="separator">|</span>
              <span v-for="tag in item.tagList" :key="tag._id"
                ><svg-icon name="tag" class="icon"></svg-icon>{{ tag.name }}</span
              >
            </div>
            <div class="description">{{ item.content }}</div>
          </div>
        </div>
      </el-card>
    </div>
    <div class="site-info">
      <div class="info-container">
        <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>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getSiteInfo } from '../../api/site'
import { getArticleList } from '../../api/article'
import { getPageByName } from '@/api/page.js'

const siteName = ref('')
const blogList = ref([])
const siteInfo = ref({})
const tagNum = ref(0)
const categoryNum = ref(0)
const archiveNum = ref(0)
const bannerUrl = ref('')

onMounted(async () => {
  const { data } = await getSiteInfo()
  siteName.value = data.siteName
  bannerUrl.value = (await getPageByName('首页')).data.bannerUrl
  getBlogList()
  getInfo()
})

const getBlogList = async () => {
  const { data } = await getArticleList()
  blogList.value = data.articleList
  console.log(data)
}

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

<style lang="scss" scoped>
.home-banner {
  // background: url('http://cdn.liuyx.cc/wallhaven-m3dm1k.png') center center / cover no-repeat;
  height: 100vh;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  .site-name {
    position: absolute;
    top: 35%;
    color: #eee;
    letter-spacing: 5px;
  }
}
.home-content {
  display: flex;
  margin: 20px auto;
}
@media screen and (min-width: 960px) {
  .home-content {
    width: 80%;
    .article-list {
      width: 75%;
      padding-right: 10px;
    }
    .site-info {
      width: 25%;
    }
  }
}
@media screen and (max-width: 768px) {
  .home-content {
    width: 100%;
    display: block;
    padding: 10px;
    box-sizing: border-box;
  }
}
.card-box {
  margin-top: 10px;
}
.article-item {
  display: flex;
  height: 256px;
  // justify-content: center;
  align-items: center;
  .cover-container {
    overflow: hidden;
    width: 70%;
    height: 100%;
  }
  .cover {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border-top-left-radius: 11px;
    border-bottom-left-radius: 11px;
    transform: scale(1);
    transition: transform 1s ease 0s;
    overflow: hidden;
  }
  &:hover .cover {
    transform: scale(1.1);
  }
  .article-content {
    padding: 0 40px;
    width: 100%;
    box-sizing: border-box;
    .title {
      font-size: 1.35em;
      &:hover {
        color: #8e8cd8;
      }
    }
    .article-info {
      font-size: 0.85em;
      margin: 0.85em 0;
    }
    .separator {
      margin: 0 8px;
      font-weight: bold;
      font-size: 16px;
    }
    .icon {
      vertical-align: -0.33em;
      font-size: 12px;
      margin-right: 5px;
    }
    .description {
      margin-top: 15px;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      display: -webkit-box;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}

@media screen and (max-width: 768px) {
  .article-item {
    display: block;
    height: inherit;
    .cover-container {
      width: 100vw;
      .cover {
        border-radius: 11px 11px 0 0 !important;
      }
    }
    .article-content {
      height: 202px;
      padding: 20px 30px;
      .description {
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        display: -webkit-box;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
}
.info-container {
  padding: 10px;
  text-align: center;
  position: sticky;
  top: 10px;
  .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>
