<script setup lang="ts">
import type { PostItem } from '../types'
import FileList from './FileList.vue'
import { useMapStore } from '@/stores/map'

interface Props {
  data: PostItem
  onClick?: (data: PostItem, e: Event) => boolean
}
const props = defineProps<Props>()

const types = useMapStore().getMapValuesByKey('learning_discussion_type')
const typeText = $computed(() => {
  return types.find(item => parseInt(item.value) === props.data.type)?.label || props.data.type
})
const typeColor = $computed(() => {
  const map: Record<number, string> = { 1: '#396DD1', 2: '#6B9357', 3: '#E5A237' }
  return map[props.data.type] || '#396DD1'
})
const username = $computed(() => {
  const user = props.data.sso_user
  return user.realname || user.nickname || user.username
})

function handleClick(data: PostItem, event: Event) {
  if (props.onClick && !props.onClick(data, event)) {
    event.preventDefault()
  }
}
</script>

<template>
  <section class="post-item">
    <router-link :to="`/bbs/${data.id}`" target="_blank" @click="handleClick(data, $event)">
      <div class="post-item-hd">
        <p class="post-item__type" :class="`type-${data.type}`">{{ typeText }}</p>
        <h2 class="post-item__title">{{ data.title }}<span class="is-hot" v-if="data.is_hot">热</span></h2>
        <p class="post-item__reply_count">{{ data.reply_count }}回帖</p>
      </div>
      <div class="post-item-bd">
        <FileList :data="data.reply?.files" />
      </div>
      <div class="post-item-ft">
        <p class="post-item__username">{{ username }}</p>
        <p class="post-item__time">{{ data.last_post_time }}</p>
      </div>
    </router-link>
  </section>
</template>

<style lang="scss">
.post-item {
  padding: 30px 0;
  border-bottom: 1px solid #e6e6e6;
  border-top: 1px solid #e6e6e6;
  &:hover {
    .post-item__title {
      color: var(--main-color);
    }
  }
}
.post-item + .post-item {
  border-top: none;
}

.post-item-hd {
  display: flex;
}
.post-item__type {
  --type-color: v-bind(typeColor);
  display: inline-block;
  padding: 0 4px;
  color: var(--type-color);
  border: 1px solid var(--type-color);
  height: 20px;
  font-size: 14px;
  line-height: 20px;
  border-radius: 2px;
}
.post-item__title {
  flex: 1;
  margin: 0 14px;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  color: #666;
  .is-hot {
    display: inline-block;
    margin-left: 14px;
    width: 20px;
    height: 20px;
    font-size: 14px;
    line-height: 20px;
    color: #fff;
    background-color: #ff8923;
    text-align: center;
    border-radius: 2px;
  }
}
.post-item__reply_count {
  font-size: 14px;
  line-height: 20px;
  color: #bcbcbc;
}
.post-item-bd {
  margin-top: 16px;
}
.post-item-ft {
  margin-top: 16px;
  display: flex;
}
.post-item__username {
  min-width: 130px;
  font-size: 14px;
  line-height: 1;
  color: #bcbcbc;
}
.post-item__time {
  font-size: 14px;
  line-height: 1;
  color: #bcbcbc;
}
.post-item__files {
  display: flex;
}
</style>
