<script setup>
import { useMainStore } from "@/stores/store";
import moment from "moment";

const store = useMainStore();
const props = defineProps({
  type: {
    type: String,
  },
  data: {
    type: Object,
  },
});
</script>

<template>
  <section class="d-flex">
    <p class="category mb-5">
      <span></span>
      {{ data.category }}
    </p>
    <p class="ms-5">
      {{ moment(`${data.create_time}`).format("YYYY-MM-DD") }}
    </p>
  </section>
  <v-card
    variant="outlined"
    class="d-flex flex-md-row flex-column align-center pa-5"
  >
    <v-row class="align-center">
      <!-- <v-col cols="12" sm="4">
        <router-link :to="`/news/${data.news_id}`" class="cover-img">
          <img src="@/assets/img/img-01.jpg" alt="臺灣工藝學習平台" />
        </router-link>
      </v-col> -->

      <!-- 新聞 -->
      <v-col v-if="data.category !== '展覽'" cols="12">
        <router-link :to="`/news/${data.news_id}`" class="cover-img">
          <section class="d-flex flex-column pa-3">
            <h3>{{ data.title }}</h3>
            <hr>
            <p v-html="data.content"></p>
          </section>
        </router-link>
      </v-col>

      <!-- 展覽 -->
      <v-col v-else cols="12">
        <router-link
          :to="`/course-detail/${data.class_name_id}`"
          class="cover-img"
        >
          <section class="d-flex flex-column pa-3">
            <h3>{{ data.name }}</h3>
            <hr>
            <p v-html="data.introduction"></p>
          </section>
        </router-link>
      </v-col>
    </v-row>
  </v-card>
</template>

<style lang="scss" scoped>
.v-card {
  border-color: var(--gray);
  border-radius: 1.25em;
  background-image: url("@/assets/img/home/news-bg.png");
  h3 {
    // margin-bottom: 1.25em;
    // padding-bottom: 1.25em;
    font-size: 1.375em !important;
    font-weight: 500;
    line-height: 2em;
    letter-spacing: 0.0625em;
    // border-bottom: 0.0625em solid #ccc;
  }

  h3,
  p {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    line-break: after-white-space;
    transition: all 0.3s;

    &:hover {
      opacity: 0.7;
    }
  }

  h3 {
    -webkit-line-clamp: 2;
  }

  p {
    -webkit-line-clamp: 3;
    line-height: 1.75em;
    letter-spacing: 0.0625em;
  }

  .cover-img {
    height: 14.6875em;
    border-radius: 0.3125em;
  }
}

.category {
  display: flex;
  align-items: center;
  color: #000;

  span {
    display: block;
    width: 0.5em;
    height: 0.5em;
    margin-right: 0.625em;
    border-radius: 0.625em;
    background-color: #000;
  }
}
</style>
