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

<script setup lang="ts">
import DynamicComponent from "~/components/dynamic-page/page-component/templates/index.vue";
import { COLLECTION_QUERY_DROP, getValueStringWithKeyAndColon, getInputValue } from "@/utils/parseSQL";
import { isEmpty } from "@/utils/lodash";
import { enumPageComponentTemplates } from "@/definitions/enum";
const emit = defineEmits(["dropComponent", "dropData", "selectComponent"]);

// const store = reactive({
//   page: useCmsPageStore(),
//   section: usePageSectionStore(),
// });
// const { currentScreenMode } = storeToRefs(useCmsPageStore());

const _props = defineProps<{
  dataResult?: any[];
  dataQuery?: string;
  layout?: string;
  label?: string;
  content?: any;
  component?: any;
}>();

const SETTING_OPTIONS = {
  MAX_ELEMENT: 9,
  TEMPLATE: "TYPE:Card",
  LAYOUT: "TYPE:Card_VideoHightLight",
};

const COMPONENT = {
  taxonomy: enumPageComponentTemplates.ARTICLE,
};

const LAYOUT_PARSE = computed(() => {
  return _props.label ? getInputValue(_props.label, "OBJECT") : {};
});

const _dataResult = computed(() => {
  let _components = Array(Number(LAYOUT_PARSE.value.MAX) || SETTING_OPTIONS.MAX_ELEMENT).fill(null);
  const result = getInputValue(_props.dataResult, "ARRAY");
  result &&
    result.length > 0 &&
    _components.map((_: any, index: any) => {
      _components[index] = result[index] || null;
    });
  return _components;
});

async function dropData(data: any) {
  if (data) {
    const { dataResult, dataType } = data;
    const checkDataResult = getInputValue(_props.dataResult, "ARRAY");
    const result = _props.dataResult ? [...checkDataResult, { ...dataResult }] : [{ ...dataResult }];
    const getDataQuery = _props.dataQuery ? COLLECTION_QUERY_DROP(dataType, getValueStringWithKeyAndColon(_props.dataQuery) + "," + dataResult.id) : COLLECTION_QUERY_DROP(dataType, dataResult.id);

    emit("dropData", {
      dataResult: result,
      dataType,
      dataQuery: getDataQuery,
    });
  }
}

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

const mapActivesToItems = (index: number) => {
  if (LAYOUT_PARSE.value && LAYOUT_PARSE.value.listCss) {
    return LAYOUT_PARSE.value.listCss[index] || {};
  }
  return {};
};
</script>

<template>
  <div
    :id="`cpn_${_props.component?.id}`"
    class="collection-video-container border-custom"
    :class="[LAYOUT_PARSE['div.collection-container_Class'], LAYOUT_PARSE['collection_Class']]"
    @click="selectComponent"
    :style="LAYOUT_PARSE['div.collection-container']"
  >
    <div v-for="(component, index) in _dataResult" :key="index">
      <div class="wrap">
        <!-- {{ index }} -->
        <DynamicComponent
          :settings="{
            template: SETTING_OPTIONS.TEMPLATE,
            layout: SETTING_OPTIONS.LAYOUT,
            label: mapActivesToItems(Number(index)),
            dataResult: !isEmpty(component) ? { ...component } : null,
          }"
          :component="COMPONENT"
          @drop-data="dropData"
        />
      </div>
    </div>
  </div>
  <div v-html="LAYOUT_PARSE.styleClasses" style="display: none" v-if="LAYOUT_PARSE.styles"></div>
</template>

<style lang="scss">
.collection-video-container {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 20px;
  & > div {
    background-color: #eee;
    position: relative;
    width: 100%;
    padding-top: calc((9 / 16) * 100%);

    & > .wrap {
      position: absolute;
      top: 0;
      width: 100%;
      height: 100%;

      & > .basic-article {
        height: 100%;

        & > .article_video {
          height: 100%;

          & > .article_video_thumb {
            height: 100%;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            overflow: hidden;

            & > .article_video_content {
              padding: 0 24px 8px 24px;
              display: flex;
              flex-direction: column;
              align-items: center;

              & > span {
                margin-bottom: 10px;
              }
              & > .article-title {
                text-align: center;
                font-size: 18px;
                font-weight: 700;
                line-height: 130%;
                margin: 0;
              }
              & > .article-intro {
                display: none;
              }
            }
          }

          & > .empty-box {
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            margin: 0px;
            & > div {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
    }
    &:nth-child(1) {
      grid-column: span 2 / span 2;
      grid-row: span 2 / span 2;
      order: 6;
      background-color: aqua;

      & > .wrap {
        & > .basic-article {
          & > .article_video {
            & > .article_video_thumb {
              & > .article_video_content {
                padding: 0 120px 24px 120px;
              }
            }
          }
        }
      }
    }

    &:nth-child(2) {
      order: 2;
      background-color: red;
    }
    &:nth-child(3) {
      order: 3;
      background-color: green;
    }
    &:nth-child(4) {
      order: 4;
      background-color: orange;
    }
    &:nth-child(5) {
      order: 5;
      background-color: orangered;
    }
    &:nth-child(6) {
      order: 6;
      background-color: brown;
    }
    &:nth-child(7) {
      order: 7;
      background-color: blueviolet;
    }
    &:nth-child(8) {
      order: 8;
      background-color: darkred;
    }
    &:nth-child(9) {
      order: 9;
      background-color: darkcyan;
    }
  }
  // &.column-phone {
  //   grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
  // }
  // &.column {
  //   grid-template-columns: repeat(1, minmax(0, 1fr));
  // }
  // &.row {
  //   grid-template-rows: auto;
  //   grid-auto-flow: column;
  // }
  // &.border-pri {
  //   gap: 5px;
  // }
  // &.border-custom {
  //   border-color: #e5e5e5 !important;
  // }
  // .empty {
  //   min-height: 100px;
  //   border-radius: 6px;
  //   background: #409eff;
  // }
  // &.noData {
  //   border-radius: 6px;
  // }
}
</style>