<template>
  <div class="erp-layout-container">
    <div class="erp-section erp-top-header">
      <div class="erp-card full-card">
        <ChartTop />
      </div>
    </div>

    <div class="erp-section erp-upper-section">
      <div 
        v-for="item in getComponentsBySortRange(1, 3)" 
        :key="item.sort"
        class="erp-col erp-col-1-3"
      >
        <div class="erp-card">
          <component
            :is="componentMap[item.vueName]"
            :formParams="FormValues"
            v-if="componentMap[item.vueName]"
          />
        </div>
      </div>
    </div>

    <div class="erp-section erp-middle-section">
      <div class="erp-col erp-col-1-2">
        <div class="erp-inner-layout">
          <div 
            v-for="item in getComponentsBySortRange(4, 5)" 
            :key="item.sort"
            class="erp-col erp-col-1-2"
          >
            <div class="erp-card">
              <component
                :is="componentMap[item.vueName]"
                :formParams="FormValues"
                v-if="componentMap[item.vueName]"
              />
            </div>
          </div>
        </div>
      </div>
      <div class="erp-col erp-col-1-2">
        <div class="erp-card">
          <component
            :is="componentMap[getComponentBySort(6)?.vueName]"
            :formParams="FormValues"
            v-if="getComponentBySort(6) && componentMap[getComponentBySort(6).vueName]"
          />
        </div>
      </div>
    </div>

    <div class="erp-section erp-lower-section">
      <div class="erp-col erp-col-1-2">
        <div class="erp-inner-layout">
          <div 
            v-for="item in getComponentsBySortRange(7, 8)" 
            :key="item.sort"
            class="erp-col erp-col-1-2"
          >
            <div class="erp-card">
              <component
                :is="componentMap[item.vueName]"
                :formParams="FormValues"
                v-if="componentMap[item.vueName]"
              />
            </div>
          </div>
        </div>
      </div>
      <div class="erp-col erp-col-1-2">
        <div class="erp-card">
          <component
            :is="componentMap[getComponentBySort(9)?.vueName]"
            :formParams="FormValues"
            v-if="getComponentBySort(9) && componentMap[getComponentBySort(9).vueName]"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch, onMounted, computed } from 'vue';
import { useRoute } from 'vue-router';
import ChartTop from './components/ChartTop.vue';

const route = useRoute();

const FormValues = ref({
  reqParam: route.query.year
});

watch(
  () => route.query.year,
  (newVal) => {
    FormValues.value.reqParam = newVal;
  },
  { 
    deep: true,
    immediate: true
  }
);

const componentMap = ref({});
const chartData = ref([]);

const getComponentBySort = (sort) => {
  return chartData.value.find(item => item.sort === sort);
};

const getComponentsBySortRange = (start, end) => {
  return chartData.value.filter(item => item.sort >= start && item.sort <= end);
};

const loadComponent = async (vueName) => {
  try {
    const module = await import(`./components/${vueName}.vue`);
    return module.default;
  } catch (error) {
    console.error('加载组件失败', error);
    return null;
  }
};

const fetchChartData = async () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      const apiData = [
        { sort: 1, vueName: 'ChartV01' },
        { sort: 2, vueName: 'ChartV02' },
        { sort: 3, vueName: 'ChartV03' },
        { sort: 4, vueName: 'ChartV04' },
        { sort: 5, vueName: 'ChartV05' },
        { sort: 6, vueName: 'ChartV06' },
        { sort: 7, vueName: 'ChartV07' },
        { sort: 8, vueName: 'ChartV08' },
        { sort: 9, vueName: 'ChartV09' },
      ];
      resolve(apiData);
    }, 300);
  });
};

onMounted(async () => {
  try {
    const data = await fetchChartData();
    chartData.value = data.sort((a, b) => a.sort - b.sort);
    const newComponentMap = {};
    const uniqueComponents = [...new Set(data.map(item => item.vueName))];
    for (const vueName of uniqueComponents) {
      const component = await loadComponent(vueName);
      if (component) {
        newComponentMap[vueName] = component;
      }
    }
    componentMap.value = newComponentMap;
  } catch (error) {
    console.error('加载图表数据失败：', error);
  }
});
</script>

<style scoped>
.erp-layout-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  margin: 0 !important;
  box-sizing: border-box;
  background-color: transparent;
  overflow: hidden;
}

.erp-section {
  width: 100%;
  display: flex;
  gap: 6px;
  box-sizing: border-box;
  overflow: hidden;
}

.erp-top-header {
  height: 10%;
}

.erp-upper-section,
.erp-middle-section,
.erp-lower-section {
  height: 30%;
}

.erp-col {
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.erp-col-1-3 {
  width: calc((100% - 12px) / 3);
}

.erp-col-1-2 {
  width: calc((100% - 6px) / 2);
}

.erp-inner-layout {
  width: 100%;
  height: 100%;
  display: flex;
  gap: 6px;
  box-sizing: border-box;
}

.erp-card {
  width: 100%;
  height: 100%;
  background-color: rgba(15, 52, 96, 0.1);
  border: 1px solid rgba(26, 80, 139, 0.3);
  border-radius: 8px;
  padding: 2px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #e0e6ff;
  backdrop-filter: blur(2px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  min-height: 0;
}

.full-card {
  width: 100%;
}

.erp-card:hover {
  box-shadow: 0 4px 12px rgba(60, 156, 255, 0.2);
  border-color: rgba(60, 156, 255, 0.6);
  transition: all 0.3s ease;
}

.erp-card h3 {
  font-size: 16px;
  margin-bottom: 8px;
  letter-spacing: 1px;
  background: #3c9cff;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 600;
}

.erp-card p {
  font-size: 13px;
  opacity: 0.75;
  color: #b4c7e7;
  text-align: center;
  line-height: 1.5;
}

.empty-card {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  color: #88a0c2;
  font-size: 14px;
}

@media (max-width: 1600px) {
  .erp-layout-container {
    padding: 6px;
    gap: 4px;
  }
  .erp-section {
    gap: 4px;
  }
  .erp-col-1-3 {
    width: calc((100% - 8px) / 3);
  }
  .erp-col-1-2 {
    width: calc((100% - 4px) / 2);
  }
  .erp-inner-layout {
    gap: 4px;
  }
  .erp-card {
    padding: 10px;
  }
  .erp-card h3 {
    font-size: 14px;
  }
  .erp-card p {
    font-size: 12px;
  }
}

@media (max-width: 768px) {
  .erp-layout-container {
    flex-direction: column;
    height: auto;
    min-height: 100%;
    padding: 6px;
    gap: 6px;
    overflow-y: auto;
  }
  .erp-section {
    flex-direction: column;
    height: auto !important;
    min-height: 120px;
    gap: 6px;
  }
  .erp-col-1-3,
  .erp-col-1-2 {
    width: 100%;
    height: calc((100% - 12px) / 3);
  }
  .erp-inner-layout {
    flex-direction: column;
    height: 100%;
  }
  .erp-card {
    padding: 8px;
  }
}

@media (max-height: 900px) {
  .erp-layout-container {
    padding: 6px;
    gap: 4px;
  }
  .erp-section {
    gap: 4px;
  }
  .erp-card {
    padding: 8px;
  }
  .erp-card h3 {
    font-size: 14px;
    margin-bottom: 6px;
  }
  .erp-card p {
    font-size: 12px;
  }
}
</style>