<script setup lang="ts">
import SlideItem from '@/components/slide/SlideItem.vue'
import { followFeed, formatCount } from '@/mock/homeData'

defineProps({ active: { type: Boolean, default: false } })
</script>

<template>
  <SlideItem>
    <div class="follow-feed">
      <div v-for="item in followFeed" :key="item.aweme_id" class="item">
        <img :src="item.video.cover.url_list[0]" class="cover" alt="" />
        <div class="info">
          <p class="desc">{{ item.desc }}</p>
          <p class="meta">@{{ item.author.nickname }} · {{ formatCount(item.statistics.digg_count) }}赞</p>
        </div>
      </div>
    </div>
  </SlideItem>
</template>

<style scoped lang="less">
.follow-feed {
  height: 100%;
  overflow-y: auto;
  background: #000;
  padding: 10rem;

  .item {
    margin-bottom: 12rem;
    border-radius: 8rem;
    overflow: hidden;
    background: rgb(29, 29, 29);

    .cover {
      width: 100%;
      height: 140rem;
      object-fit: cover;
    }

    .info {
      padding: 10rem 12rem;
      color: white;

      .desc {
        margin: 0 0 6rem;
        font-size: 14rem;
      }

      .meta {
        margin: 0;
        font-size: 12rem;
        opacity: 0.6;
      }
    }
  }
}
</style>
