<script setup lang="ts">
import type { TopPostItem } from '../types'
import { getTopPostList } from '../api'

interface Props {
  courseId?: string
  semesterId?: string
}

const props = defineProps<Props>()

let list = $ref<TopPostItem[]>([])
function fetchList() {
  getTopPostList({ course_id: props.courseId, semester_id: props.semesterId }).then(res => {
    list = res.data.list
  })
}
onMounted(fetchList)
</script>

<template>
  <section class="pined-post" v-if="list.length">
    <section class="pined-post-item" v-for="item in list" :key="item.id">
      <router-link :to="`/bbs/${item.id}`" target="_blank" class="pined-post-item__inner">
        <p class="t1">置顶</p>
        <p class="t2">{{ item.title }}</p>
        <p class="t3">
          <span>{{ item.course.name }}</span>
        </p>
        <p class="t4">{{ item.updated_time }}</p>
      </router-link>
    </section>
  </section>
</template>

<style lang="scss">
.pined-post {
  padding-bottom: 16px;
}
.pined-post-item__inner {
  display: flex;
  align-items: center;
}
.pined-post-item {
  padding: 14px 0;
  &:hover {
    .t2 {
      color: var(--main-color);
    }
  }
  .t1 {
    padding: 0 4px;
    height: 20px;
    color: #fff;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    background: #d38846;
    border-radius: 2px;
  }
  .t2 {
    flex: 1;
    margin: 0 14px;
    font-size: 16px;
    color: #666;
    line-height: 30px;
  }
  .t3 {
    min-width: 30%;
    text-align: center;
    span {
      display: inline-block;
      padding: 0 20px;
      min-width: 90px;
      height: 30px;
      line-height: 30px;
      color: #ba143e;
      background: rgba(253, 235, 240, 0.39);
      border: 1px solid #f296ac;
      border-radius: 18px;
    }
  }
  .t4 {
    flex: 0 0 150px;
    font-size: 14px;
    color: #bcbcbc;
    text-align: right;
  }
}
</style>
