<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 mb-5 category">
    <span></span>
    <p v-show="data.category" class="me-5">
      {{ data.category }}
    </p>
    <p>
      {{ 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" v-if="type === 'article'">
        <router-link :to="`/article-detail/${data.article_id}`">
          <v-img
            cover
            class="mx-auto cover-img"
            :lazy-src="`${store.imgUrl}/${data.cover_img}`"
            :src="`${store.imgUrl}/${data.cover_img}`"
            alt="臺灣工藝學習平台"
          >
            <template v-slot:placeholder>
              <div class="d-flex align-center justify-center fill-height">
                <v-progress-circular
                  color="grey-lighten-4"
                  indeterminate
                ></v-progress-circular>
              </div>
            </template>
          </v-img>
        </router-link>
      </v-col>
      <v-col cols="12" :sm="type === 'article' ? 8 : 12">
        <router-link
          :to="
            type === 'article'
              ? `/article-detail/${data.article_id}`
              : `/news/${data.news_id}`
          "
          class="title-link"
        >
          <h3>{{ data.title }}</h3>
        </router-link>

        <router-link
          :to="
            type === 'article'
              ? `/article-detail/${data.article_id}`
              : `/news/${data.news_id}`
          "
          class="d-block pa-3"
        >
          <section v-html="store.removeHtmlImages(data.content)"></section>
        </router-link>
      </v-col>
    </v-row>
  </v-card>
</template>

<style lang="scss">
.v-card {
  padding: 0.9375em;
  border-radius: 0.625em;
  border-color: var(--purple);

  .title-link {
    display: block;
    padding-bottom: 0.9375em;
    border-bottom: 0.0625em solid #e0e0e0;
  }

  h3 {
    font-size: 1.375em;
    font-weight: 500;
    line-height: 2em;
    letter-spacing: 0.0625em;
  }

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

    &:hover {
      opacity: 0.7;
    }
  }

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

  section {
    -webkit-line-clamp: 4;
    line-height: 1.75em;
    letter-spacing: 0.0625em;
  }

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

.category {
  display: flex;
  align-items: center;
  color: var(--purple);
  font-size: 1.1em;
  text-shadow: 0.0625em 0.0625em 0.3125em #fff;

  span {
    display: block;
    width: 0.5em;
    height: 0.5em;
    margin-right: 0.625em;
    border-radius: 0.625em;
    background-color: var(--purple);
  }
}
</style>
