<template>
  <n-card :title="title" class="notice-box" @click="handleDetail">
    {{ content }}
    <template #footer>
      {{ time }}
    </template>
  </n-card>
</template>
<script setup>
import { useRouter } from "vue-router";
const router = useRouter();
defineOptions({
  name: "notice-box",
});

const props = defineProps({
  id: {
    type: [String, Number],
    default: () => "",
  },
  title: {
    type: String,
    default: () => "",
  },
  content: {
    type: String,
    default: () => "",
  },
  time: {
    type: String,
    default: () => "",
  },
});

const handleDetail = () => {
  if (props.id) {
    router.push("/info-detail/" + props.id);
  } else {
    console.warn("missing id");
  }
};
</script>

<style lang="scss" scoped>
.n-card.notice-box {
  --n-title-font-weight: 600 !important;
  --n-title-font-size: 1.75rem !important;
  --n-padding-top: 1.875rem !important;
  border-radius: 1.875rem;
  background-size: contain;
  background-repeat: no-repeat;
  cursor: pointer;
  background-color: transparent;
  background-image: var(--main-sub-list-bg);
  background-position: top center;
  background-size: cover;
  background-repeat: no-repeat;
  height: 15.75rem;
  border: none;
  overflow: hidden;
}
</style>
