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;
  component?: any;
}>();

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

const emit = defineEmits(["selectComponent", "dropData"]);

const selectComponent = () => {
  emit("selectComponent");
};

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

const drop = (e: any) => {
  if (e.dataTransfer.getData(`${enumPageComponentTemplates.ARTICLE}`)) {
    const data = e.dataTransfer.getData(`${enumPageComponentTemplates.ARTICLE}`);
    const { dataType, dataResult } = JSON.parse(data);
    const dataQuery = DEFAULT_QUERY_DROP(dataType, dataResult.id);
    emit("dropData", {
      dataType,
      dataResult,
      dataQuery: dataQuery,
    });
  }
};
</script>


<template>
  <article :id="`cpn_${props.component?.id}`" class="basic-article border-custom" :class="LAYOUT_PARSE['article_Class']" @click="selectComponent" @dragover.prevent @drop.stop.prevent="drop" :style="LAYOUT_PARSE['article']">
    <div class="article_video">
      <template v-if="parseData">
        <div class="article_video_thumb article-thumbnail" :style="{ backgroundImage: `url('${parseData.thumbnail ? parseData.thumbnail : '/images/default-thumbnail.jpg'}')` }">
          <div></div>
          <div class="article_video_content">
            <span>
              <svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path
                  d="M23.5 18.5C24.375 17.875 25.625 17.875 26.5 18.5L44.5 29.5C45.375 30 46 31 46 32C46 33.125 45.375 34.125 44.5 34.625L26.5 45.625C25.625 46.125 24.375 46.25 23.5 45.625C22.5 45.125 22 44.125 22 43V21C22 20 22.5 19 23.5 18.5ZM64 32C64 49.75 49.625 64 32 64C14.25 64 0 49.75 0 32C0 14.375 14.25 0 32 0C49.625 0 64 14.375 64 32ZM32 6C17.625 6 6 17.75 6 32C6 46.375 17.625 58 32 58C46.25 58 58 46.375 58 32C58 17.75 46.25 6 32 6Z"
                  fill="#ED1C24"
                />
              </svg>
            </span>
            <h3 class="line-clamp article-title" :class="LAYOUT_PARSE['title_Class']" :style="LAYOUT_PARSE['h3.title']">
              {{ parseData.title?.replace(/<[^>]+>/g, "") }}
            </h3>
            <p class="mb-0 line-clamp article-intro" :class="LAYOUT_PARSE['paragraph_Class']" :style="LAYOUT_PARSE['p.paragraph']">
              {{ parseData.intro?.replace(/<[^>]+>/g, "") }}
            </p>
          </div>
        </div>
      </template>
      <div v-else class="empty-box">
        <div class="d-flex justify-content-center align-items-center flex-column">
          <i class="ri-play-circle-line"></i>
        </div>
      </div>
    </div>

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

<style lang="scss" scoped>
.article_video {
  .article_video_thumb {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    z-index: 0;
    padding: 120px 85px 60px 85px;
    border-radius: 2px;
    margin: 10px;
    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;
        color: white;
      }

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

      i {
        font-size: 80px;
        color: #ed1c24;
      }
    }
  }
  .empty-box {
    background-color: #409eff;
    margin: 10px;
    min-height: 60px;
    i {
      font-size: 60px;
    }
  }
}
</style>