<template>
  <div class="wh100" ref="mainRef">
    <a-spin :spinning="loading" style="position: absolute; z-index: 2; left: 50%; top: 50%" />

    <div class="grid-stack">
      <div v-for="w in layout" class="grid-stack-item" :gs-x="w.x" :gs-y="w.y" :gs-w="w.w" :gs-h="w.h" :gs-id="w.id" :id="w.id" :key="w.id">
        <div class="grid-stack-item-content">
          <!--轮播图组件-->
          <RotationWidget
            v-if="w.widget.componentCode === 'CAROUSEL'"
            :designId="props.designId"
            :widget="w.widget"
            :widget-id="w.widget.id"
          ></RotationWidget>

          <!--新闻公告-->
          <NewsWidget
            v-if="w.widget.componentCode === 'NEWS'"
            :designId="props.designId"
            :widget="w.widget"
            :widget-id="w.widget.id"
          ></NewsWidget>

          <!--流程中心-->
          <FlowTaskNewWidget
            v-if="w.widget.componentCode === 'FLOW_CENTER'"
            :designId="props.designId"
            :widget="w.widget"
          ></FlowTaskNewWidget>

          <!--应用入口-->
          <AppEnterWidget
            v-if="w.widget.componentCode === 'APPLICATION_ENTRANCE'"
            :widget-id="w.widget.id"
            :designId="props.designId"
            :widget="w.widget"
          ></AppEnterWidget>

          <!--日历-->
          <CalendarWidget v-if="w.widget.componentCode === 'CALENDAR'" :widget="w.widget" :designId="props.designId"></CalendarWidget>

          <!--本月工作-->
          <MonthWorkWidget v-if="w.widget.componentCode === 'MONTH_WORK'" :widget="w.widget" :designId="props.designId"></MonthWorkWidget>

          <!--快捷入口-->
          <QuickEnterWidget
            v-if="w.widget.componentCode === 'QUICK_ENTRANCE'"
            :widget-id="w.widget.id"
            :designId="props.designId"
            :widget="w.widget"
          ></QuickEnterWidget>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref, defineAsyncComponent } from 'vue';
import { PortalDesignApi } from '../backend/design/api/PortalDesignApi';
import { GridStack } from 'gridstack';

// 轮播图
const RotationWidget = defineAsyncComponent(() => import('@/views/portal/components/widget/rotation_widget.vue'));
// 新闻通知
const NewsWidget = defineAsyncComponent(() => import('@/views/portal/components/widget/news_widget.vue'));
// 流程中心
const FlowTaskNewWidget = defineAsyncComponent(() => import('@/views/portal/components/widget/flow_task_widget.vue'));
// 应用入口
const AppEnterWidget = defineAsyncComponent(() => import('@/views/portal/components/widget/app_enter_widget.vue'));
// 日历
const CalendarWidget = defineAsyncComponent(() => import('@/views/portal/components/widget/calendar_widget.vue'));
// 本月工作
const MonthWorkWidget = defineAsyncComponent(() => import('@/views/portal/components/widget/month_work_widget.vue'));
// 快捷入口
const QuickEnterWidget = defineAsyncComponent(() => import('@/views/portal/components/widget/quick_enter_widget.vue'));

const props = defineProps({
  // 门户设计id
  designId: {
    type: String,
    required: true
  }
});

// dom
const mainRef = ref(null);

// 页面设计详情
const portalDesignDetail = ref({});

// 布局
const layout = ref([]);

// 加载状态
const loading = ref(false);

// grid
let grid = null;

let gridOptions = {
  auto: false,
  float: true,
  margin: '5px',
  column: 12,
  minRow: 12,
  cellHeight: '70px',
  alwaysShowResizeHandle: true,
  acceptWidgets: function (el) {
    return false;
  },
  children: []
};

onMounted(async () => {
  if (props.designId) {
    loading.value = true;
    let res = null;
    try {
      res = await PortalDesignApi.getDesignConfig({ designId: props.designId });
    } catch (e) {
      loading.value = false;
    }
    portalDesignDetail.value = res.data;
    loading.value = false;

    // 布局json
    layout.value = portalDesignDetail.value.designLayoutJson?.widgets;

    // 获取widget最大的y值
    let arr = layout.value.map(item => item.y);
    let max = Math.max(...arr);

    // 获取widget最大y值组件的h
    let h_array = layout.value.filter(item => item.y === max).map(item => item.h);
    if (h_array.length > 0) {
      max = max + Math.max(...h_array);
    } else {
      max = max + 6;
    }

    gridOptions.minRow = max;
    grid = GridStack.init(gridOptions);
  }
});
</script>

<style scoped lang="less"></style>
