<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="company-home">
    <!-- 渲染所有模块 -->
    <ModulePrimary
      v-for="cfg in cfgs"
      :key="cfg.deviceType + cfg.moduleName"
      :show-style="cfg.showStyle"
      :module-data="cfg.moduleData"
      :module-name="cfg.moduleName"
      :device-type="cfg.deviceType"
      :data="data"
      :visible="true"
    />
  </div>
</template>
<script lang="ts" setup>
  import { computed, onMounted, onUnmounted, ref } from 'vue';
  import { useInitConfigs, useInitPage } from '@/components/Configurable/hooks/useInit';
  import { testConfigSealedGoaf } from './configurable.data.sealedGoaf';
  import { getCoalSeamFireNum, getMineProductionStatusNum, getOverLimitNum, getGoafAlarmNum, getGoafAlarmLevel } from './sealedGoaf.api'
  import ModulePrimary from '/@/components/Configurable/ModulePrimary.vue';
  import { useGlobSetting } from '/@/hooks/setting';

  const { title = '省局采空区密闭监测与分析系统' } = useGlobSetting();
  const { data, updateData } = useInitPage(title);

  const cfgs = computed(() => configs.value);
  const { configs, fetchConfigs } = useInitConfigs();
  const mineData = ref({}); // 所有数据汇总

  onMounted(async () => {
    try {
      // 1. 先获取基础配置（若有接口获取配置则保留，否则直接用本地testConfigSealedGoaf）
      await fetchConfigs('sealed_goaf');
      
      // 2. 异步获取所有接口数据（并行请求提升性能）
      const [coalSeamFireData, productionStatusData, overLimitData, goafAlarmData, goafAlarmLevel] = await Promise.all([
        getCoalSeamFireNum(), // 煤层自燃倾向数据
        getMineProductionStatusNum(), // 当日生产状态数据
        getOverLimitNum(), // 超限数据（可按需处理）
        getGoafAlarmNum({mineCode:'100008'}), // 执法处风险统计
        getGoafAlarmLevel({mineCode:'100008'}),
      ]);

      // 3. 把接口数据赋值给响应式变量（备用）
      mineData.value = { coalSeamFireData, productionStatusData, overLimitData, goafAlarmData, goafAlarmLevel };
      console.log(mineData.value)


      // 7. 赋值更新后的配置到configs（触发组件重新渲染）
      configs.value = [...testConfigSealedGoaf]; // 解构触发响应式更新
      
      // 8. 更新页面数据
      updateData(mineData.value);

    } catch (error) {
      console.error('数据获取/配置更新失败：', error);
    }
  });

  // 数据处理函数
  onUnmounted(() => {});
</script>
<style lang="less" scoped>
  @import '/@/design/theme.less';

  @font-face {
    font-family: 'douyuFont';
    src: url('/@/assets/font/douyuFont.otf');
  }
  .company-home {
    position: absolute;
    width: 100%;
    height: 100%;
    color: @white;
    background-image: linear-gradient(90deg, @map-bg 0%, @map-bg 14%, transparent 50%, @map-bg 86%, @map-bg 100%);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    z-index: @layout-basic-z-index;
    // 允许点击穿透以支持下面的地图进行交互
    pointer-events: none;
  }
  :deep(.ant-select-selection-item){
    display: flex;
    align-items: center;
  }
</style>
