NSG_PORTAL_V2/components/dynamic-page/page-component/templates/articles/cards/Video.vue

<script lang="ts" setup>
import { enumPageComponentTemplates } from "@/definitions/enum";
import { DEFAULT_QUERY_DROP, getInputValue } from "@/utils/parseSQL";

const props = defineProps<{
  dataResult?: any;
  dataType?: any;
  dataQuery?: any;
  layout?: string;
  label?: string;
}>();

const LAYOUT_PARSE = computed(() => {
  const designObject = props.label ? getInputValue(props.label, "OBJECT") : {};
  return Object.assign({}, designObject);
});

const parseData = computed(() => {
  if (!props.dataResult) return;
  const result = getInputValue(props.dataResult, "OBJECT");
  return result;
});
</script>

<template>
  <article
    class="basic-article border-custom"
    :class="LAYOUT_PARSE['article_Class']"
    @click="selectComponent"
    @dragover.prevent
    @drop.stop.prevent="drop"
    :style="LAYOUT_PARSE['article']"
  >
    <!-- <div class="basic-article_thumbnail" :class="LAYOUT_PARSE['thumbnail_Class']" :style="LAYOUT_PARSE['div.basic-article_thumbnail']">
      <template v-if="parseData">
        <img class="object-fit-cover" :src="parseData.thumbnail ? parseData.thumbnail : '/images/default-thumbnail.jpg'" :alt="parseData.title?.replace(/<[^>]+>/g, '')" />
      </template>
      <span v-else class="empty-block" style="width: 100%; height: 100%; min-height: 50px"></span>
    </div>
    <div class="basic-article_content" :class="[!parseData && 'no-data']">
      <template v-if="parseData?.topics && parseData?.topics.length > 0">
        <nuxt-link class="article-card-default__topic" :to="`/${parseData?.topics[0].code}`" :style="LAYOUT_PARSE['topic']">
          <h5>{{ parseData?.topics[0].title }}</h5>
        </nuxt-link>
      </template>
      <h3 class="line-clamp" :class="LAYOUT_PARSE['title_Class']" :style="LAYOUT_PARSE['h3.title']">
        <template v-if="parseData">
          {{ parseData.title?.replace(/<[^>]+>/g, "") }}
        </template>
        <span v-else class="empty-block" style="height: 8px"></span>
      </h3>
      <div class="article-card-default__bottom" v-if="LAYOUT_PARSE.layout === 'row'">
        <span :style="LAYOUT_PARSE['time']" style="margin-right: 5px" :class="LAYOUT_PARSE['time_Class']">{{
          formatDate(String(parseData?.createdOn), "DD/MM/YYYY | HH:mm")
        }}</span>
        <nuxt-link :style="LAYOUT_PARSE['category-article']" :class="LAYOUT_PARSE['category-article_Class']">{{ parseData?.category?.title }}</nuxt-link>
      </div>
      <p class="mb-0 line-clamp" :class="LAYOUT_PARSE['paragraph_Class']" :style="LAYOUT_PARSE['p.paragraph']">
        <template v-if="parseData">
          {{ parseData.intro?.replace(/<[^>]+>/g, "") }}
        </template>
        <span v-else class="empty-block" style="height: 5px"></span>
      </p>
      <div class="article-card-default__bottom" v-if="LAYOUT_PARSE?.layout !== 'row'" :style="LAYOUT_PARSE['metadata']">
        <span :style="LAYOUT_PARSE['time']" style="margin-right: 5px" :class="LAYOUT_PARSE['time_Class']">{{
          formatDate(String(parseData?.createdOn), "DD/MM/YYYY | HH:mm")
        }}</span>
        <nuxt-link :style="LAYOUT_PARSE['category-article']" :class="LAYOUT_PARSE['category-article_Class']">{{ parseData?.category?.title }}</nuxt-link>
      </div>
    </div>
     -->

    <div class="article_video">
        <template v-if="parseData">
            <div class="article_video_container">
                <div 
                    class="article_video_thumb" 
                    :style="{ backgroundImage: `url('${parseData.thumbnail ? parseData.thumbnail : '/images/default-thumbnail.jpg'}')` }"
                >
                    <i class="ri-play-circle-line"></i>
                </div>
                <div class="article_video_content">
                    <div>
                        <h3 class="line-clamp" :class="LAYOUT_PARSE['title_Class']" :style="LAYOUT_PARSE['h3.title']">
                            {{ parseData.title?.replace(/<[^>]+>/g, "") }}
                        </h3>
                    </div>
                </div>
            </div>
        </template>
        <div v-else>
            <div class="empty-box">
                <div class="d-flex justify-content-center align-items-center flex-column empty-block" style="background-color: #409eff;">
                    <i class="ri-play-circle-line text-white"></i>
                </div>
                <div class="empty-block">
                    <div style="height: 8px"></div>
                    <div style="height: 8px"></div>
                </div>
            </div>
        </div>
    </div>

    <div v-html="LAYOUT_PARSE.styleClasses"></div>
  </article>
</template>

<style lang="scss" scoped>
    .article_video {
        .article_video_container {
            display: flex;
            align-items: center;
            .article_video_thumb {
                background-size: cover;
                background-repeat: no-repeat;
                background-position: center;
                position: relative;
                z-index: 0;
                width: 250px;
                height: 140px;
                border-radius: 2px;
                margin: 10px;
                text-align: center;
                &::after {
                    content: '';
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    background-color: rgba(0, 0, 0, 0.4);
                    z-index: 1;
                    top: 0px;
                    left: 0px;
                }
                i {
                    font-size: 40px;
                    color: white;
                    position: relative;
                    z-index: 2;
                }
            }
            .article_video_content {
                position: relative;
                z-index: 2;
                margin: 10px 0px;
                > div {
                    background: #ffffff;
                }
                h3 {
                    font-size: 16px;
                    font-weight: 500;
                    line-height: 24px;
                    text-align: left;
                    margin-bottom: 12px;
                }
            }
        }
    }
    .empty-box {
        margin: 10px;
        display: flex;
        align-items: center;
        gap: 10px;
        .empty-block {
            width: 50%;
            > div {
                background-color: #409eff;
                margin-bottom: 5px;
            }
        }
        i {
            font-size: 60px;
        }
    }
</style>