<template>
  <div class="pcdiys-pages" :style="{ backgroundColor: componentList.backgroundColor }">
    <div v-for="(item, index) in componentList" :key="index">
      <component :is="item.components" :key="item.itemKey" :index="index" :row="item"></component>
    </div>
  </div>
</template>

<script setup name="Index" lang="ts">
import { getBigCustomerPlatformIndexDiyPcPage } from '@/api/home/diy';
import { loadDiyComponents, getComponentGroups } from '@/views/home/pccomponents/index';
import { stationStore } from '@/store/modules/station';
const station = stationStore();
const componentList = ref<any>([]);
const collapse = ref<any>([]);
const route = useRoute();
const query = route.query;
const formData = ref<any>({});

onMounted(() => {
  loadComponents();
});

// 加载组件
const loadComponents = async () => {
  const components = await loadDiyComponents();
  collapse.value = getComponentGroups(components);
  getBigCustomerPlatformIndexDiyPcPage({ siteId: station.stationData.id }).then((res) => {
    if (res.code == 200) {
      formData.value = res.data;
      document.documentElement.style.setProperty('--hover-color', res.data.hoverColor ? res.data.hoverColor : '#E7000B');
      const datas = JSON.parse(res.data.property);
      collapse.value.forEach((item1: any) => {
        datas.forEach((item2: any) => {
          if (item1.id == item2.fid) {
            item1.list.forEach((item3: any) => {
              if (item2.id == item3.id) {
                item2.components = item3.components;
              }
            });
          }
        });
      });
      componentList.value = datas;
    }
  });
};
</script>

<style lang="scss" scoped>
.pcdiys-pages {
  min-height: calc(100vh);
  background-color: #f2f2f2;
  width: 100%;
  :deep(.hover-color) {
    cursor: pointer;
    &:hover {
      color: var(--hover-color) !important;
      .zi-hover {
        color: var(--hover-color) !important;
      }
    }
  }
}
</style>
