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

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

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;
});

const playVideo = ref<boolean>(false)

onMounted(() => {
  getResource(JSON.parse(props.dataResult).detail)
  console.log()
})
</script>

<template>
  <article
    class="basic-article border-custom"
    :class="LAYOUT_PARSE['article_Class']"
    :style="LAYOUT_PARSE['article']"
  >
    <div class="article_video">
      <template v-if="parseData">
          <div 
            v-if="!playVideo"
            class="article_video_thumb h-full" 
            :style="{ backgroundImage: `url('${parseData.thumbnail ? parseData.thumbnail : '/images/default-thumbnail.jpg'}')` }"
          >
              <div></div>
              <div class="article_video_content">
                  <span><Icon name="ri:play-circle-line" class="text-white" /></span>
                  <h3 class="line-clamp text-white" :class="LAYOUT_PARSE['title_Class']" :style="LAYOUT_PARSE['h3.title']">
                      {{ parseData.title?.replace(/<[^>]+>/g, "") }}
                  </h3>
                  <p class="mb-0 line-clamp text-white" :class="LAYOUT_PARSE['paragraph_Class']" :style="LAYOUT_PARSE['p.paragraph']">
                      {{ parseData.intro?.replace(/<[^>]+>/g, "") }}
                  </p>
              </div>
          </div>
          <video src=""></video>
      </template>
    </div>

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

<style lang="scss" scoped>
    .article_video {
      @apply min-h-465px;
      .article_video_thumb {
            @apply flex flex-col justify-end min-h-465px;
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
            position: relative;
            z-index: 0;
            padding: 120px 85px 60px 85px;
            border-radius: 2px;
            overflow: hidden;
            cursor: pointer;
            &::after {
                content: '';
                position: absolute;
                width: 100%;
                height: 100%;
                background-color: rgba(0, 0, 0, 0.4);
                z-index: 1;
                top: 0px;
                left: 0px;
            }
            .article_video_content {
                position: relative;
                z-index: 2;

                h3 {
                    font-size: 44px;
                    font-weight: 700;
                    line-height: 57.2px;
                    text-align: left;
                    margin-bottom: 12px;
                }

                p {
                    font-size: 14px;
                    font-weight: 400;
                }

                svg {
                    font-size: 80px;
                    color: #ed1c24;
                }
            }
        }
    }
</style>