gasInjection-project/src/views/vent/home/configurable/hooks/useInit.ts

import { computed, ref } from 'vue';
import { list as cfgList } from '@/views/vent/deviceManager/configurationTable/configuration.api';
// import { list } from '@/views/vent/deviceManager/deviceTable/device.api';
import { Config } from '@/views/vent/deviceManager/configurationTable/types';
import { getData, getFormattedText } from './helper';
import { get, isNil } from 'lodash-es';

interface EnhancedConfig extends Config {
  visible: boolean;
}

// import mapComponent from './components/3Dmap/index.vue';

// export function useInitConfig(deviceType: string) {
//   function fetchConfig() {
//     cfgList({
//       deviceType,
//     }).then(({ records }) => {
//       config.value = records[0];
//     });
//   }
//   const config = ref<Partial<Config>>({});

//   return {
//     fetchConfig,
//     config,
//   };
// }

/** 初始化配置以及根据配置获取数据 */
export function useInitConfigs() {
  const configs = ref<Config[]>([]);
  const isOriginal = computed(() => {
    return configs.value.some((c) => {
      return c.showStyle.version === '原版';
    });
  });
  const isCommon = computed(() => {
    return configs.value.some((c) => {
      return c.showStyle.version === '普通版';
    });
  });
  const isBD = computed(() => {
    return configs.value.some((c) => {
      return c.showStyle.version === '保德';
    });
  });
  const devicesTypes = computed(() => {
    return configs.value
      .map((e) => e.deviceType)
      .filter((e) => {
        return !isNil(e);
      });
  });

  function fetchConfigs(pageType?: string) {
    return cfgList({ pageType }).then(({ records }) => {
      configs.value = records;
      return records;
    });
  }

  return {
    fetchConfigs,
    configs,
    devicesTypes,
    isOriginal,
    isCommon,
    isBD,
  };
}

/** 初始化设备信息，包含了适配了 header config 的下拉框选项、已选择设备的各个详细子项等，如果模块不需要展示 header 那么会将全部信息提供给已选择设备以供消费 */
// export function useInitDevices(devicekind: string, config: Config['moduleData']) {
//   const { header, mock } = config;
//   const devices = ref<Record<string, any>[]>([]);
//   const options = ref<{ label: string; value: string }[]>([]);
//   const selectedDeviceID = ref<string>('');

//   const selectedDevice = computed(() => {
//     return (
//       devices.value.find((e) => {
//         return e.id === selectedDeviceID.value;
//       }) || {}
//     );
//   });
//   const selectedDeviceLabel = computed(() => {
//     const res = options.value.find((e) => {
//       return e.value === selectedDeviceID.value;
//     });
//     return res ? res.label : '';
//   });
//   const selectedDeviceSlot = computed(() => {
//     return getFormattedText(selectedDevice.value, header.slot.value);
//   });

//   // 获取设备数据，赋值并以选项格式返回给 Header 消费
//   function fetchDevices({ init = false } = {}) {
//     const { value } = header.selector;
//     const promise = mock ? Promise.resolve(mock) : getHomeData({});
//     return promise.then((result) => {
//       if (header.show && header.showSelector) {
//         // 如果配置里指明需要 header，检验后初始化设备信息
//         const records: Record<string, any>[] = get(result, devicekind, []);
//         devices.value = records.map((e, i) => {
//           return {
//             id: i,
//             ...e,
//           };
//         });
//         options.value = devices.value.map((e) => {
//           return {
//             label: getFormattedText(e, value),
//             value: e.id,
//           };
//         });
//         if (init) {
//           selectedDeviceID.value = options.value[0]?.value;
//         }
//       } else {
//         // 没有的话按默认的，将返回结果直接作为一整个设备信息供模块使用
//         const record = {
//           ...result,
//           id: '00000000',
//         };
//         devices.value = [record];
//         selectedDeviceID.value = record.id;
//       }
//     });
//   }

//   return {
//     fetchDevices,
//     selectedDevice,
//     selectedDeviceID,
//     selectedDeviceSlot,
//     selectedDeviceLabel,
//     options,
//   };
// }

/** 保德专用-初始化设备信息，包含了适配了 header config 的下拉框选项、已选择设备的各个详细子项等，如果模块不需要展示 header 那么会将全部信息提供给已选择设备以供消费 */
// export function useInitDevicesBD(devicekind: string, config: Config['moduleData']) {
//   const { header, mock } = config;
//   const devices = ref<Record<string, any>[]>([]);
//   const options = ref<{ label: string; value: string }[]>([]);
//   const selectedDeviceID = ref<string>('');

//   const selectedDevice = computed(() => {
//     return (
//       devices.value.find((e) => {
//         return e.id === selectedDeviceID.value;
//       }) || {}
//     );
//   });
//   const selectedDeviceLabel = computed(() => {
//     const res = options.value.find((e) => {
//       return e.value === selectedDeviceID.value;
//     });
//     return res ? res.label : '';
//   });
//   const selectedDeviceSlot = computed(() => {
//     return getFormattedText(selectedDevice.value, header.slot.value);
//   });

//   // 获取设备数据，赋值并以选项格式返回给 Header 消费
//   function fetchDevices({ init = false } = {}) {
//     const { value } = header.selector;
//     const promise = mock ? Promise.resolve(mock) : getDisHome({ dataList: devicekind.split('.')[0] });
//     return promise.then((result) => {
//       if (header.show && header.showSelector) {
//         // 如果配置里指明需要 header，检验后初始化设备信息
//         const records: Record<string, any>[] = get(result, devicekind, []);
//         devices.value = records.map((e, i) => {
//           return {
//             id: i,
//             ...e,
//           };
//         });
//         options.value = devices.value.map((e) => {
//           return {
//             label: getFormattedText(e, value),
//             value: e.id,
//           };
//         });
//         if (init) {
//           selectedDeviceID.value = options.value[0]?.value;
//         }
//       } else {
//         // 没有的话按默认的，将返回结果直接作为一整个设备信息供模块使用
//         const record = {
//           ...result,
//           id: '00000000',
//         };
//         devices.value = [record];
//         selectedDeviceID.value = record.id;
//       }
//     });
//   }

//   return {
//     fetchDevices,
//     selectedDevice,
//     selectedDeviceID,
//     selectedDeviceSlot,
//     selectedDeviceLabel,
//     options,
//   };
// }

/**
 * 根据模块的配置初始化基准 Module 组件需要的数据，包括选择框、设备等信息
 * @param data api 返回的数据
 * @param config 本模块的配置
 */
export function useInitModule(deviceType: string, moduleData: Config['moduleData']) {
  const { header, mock } = moduleData;
  const devices = ref<Record<string, any>[]>([]);
  const options = ref<{ label: string; value: string }[]>([]);
  const selectedDeviceID = ref<string>('');

  const selectedDevice = computed(() => {
    return (
      devices.value.find((e) => {
        return e.id === selectedDeviceID.value;
      }) || {}
    );
  });
  const selectedDeviceLabel = computed(() => {
    const res = options.value.find((e) => {
      return e.value === selectedDeviceID.value;
    });
    return res ? res.label : '';
  });
  const selectedDeviceSlot = computed(() => {
    return getFormattedText(selectedDevice.value, header.slot.value, header.slot.trans);
  });

  function init(data) {
    const result = mock || data;
    if (header.show && header.selector.show) {
      // 如果配置里指明需要 header，检验后初始化设备信息
      const records: Record<string, any>[] = getData(get(result, deviceType, []), header.readFrom) || [];
      devices.value = records.map((e, i) => {
        return {
          id: i,
          ...e,
        };
      });
      options.value = devices.value.map((e) => {
        return {
          label: getFormattedText(e, header.selector.value),
          value: e.id,
        };
      });
    } else {
      // 没有的话按默认的，将返回结果直接作为一整个设备信息供模块使用
      const record = {
        id: '00000000',
        ...result,
      };
      devices.value = [record];
      options.value = [
        {
          value: record.id,
          label: '--',
        },
      ];
    }
  }

  return {
    init,
    selectedDevice,
    selectedDeviceID,
    selectedDeviceSlot,
    selectedDeviceLabel,
    options,
  };
}

// 初始化各个基准首页的辅助字段
export function useInitPage(title: string) {
  const mainTitle = ref(title);
  const enhancedConfigs = ref<EnhancedConfig[]>([]);
  const data = ref<any>({});

  const hiddenList = computed(() => {
    return enhancedConfigs.value.filter((e) => e.visible === false);
  });

  function updateEnhancedConfigs(configs: Config[]) {
    enhancedConfigs.value = configs.map((c) => {
      return {
        visible: true,
        ...c,
      };
    });
  }

  function updateData(d: any) {
    data.value = d;
  }

  return {
    mainTitle,
    data,
    enhancedConfigs,
    hiddenList,
    updateEnhancedConfigs,
    updateData,
  };
}