<template>
  <div>
    <BasicModal
      style="min-height: auto"
      v-bind="$attrs"
      width="55rem"
      @register="register"
      :title="t('report.config.modalTitle')"
      :showOkBtn="false"
    >
      <div>
        <BasicTable @register="registerTable" :dataSource="tableData" />
      </div>
    </BasicModal>
  </div>
</template>
<script setup lang="ts">
  import { ref, nextTick } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { BasicTable, useTable } from '/@/components/Table';
  import { viewDeviceColumn } from '../config';
  import { reportEditDetailPage } from '/@/api/report/reportManager';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { getDeviceDetail } from '/@/api/device/deviceManager';
  import { getAttribute } from '/@/api/ruleengine/ruleengineApi';

  const tableData = ref([]);
  const { t } = useI18n();

  const [registerTable, { setLoading }] = useTable({
    columns: viewDeviceColumn,
    showIndexColumn: false,
    clickToRowSelect: false,
    showTableSetting: false,
    bordered: true,
  });

  const [register] = useModalInner((data) => {
    setLoading(true);
    tableData.value = [];
    const getTableData = async () => {
      const res = (await reportEditDetailPage(data.record?.id)) as any;
      const deviceInfo = res?.data?.executeAttributes || [];
      let attributesList: Recordable[] = [];
      // 处理为物模型里的标识符名
      const reflectDeviceList = deviceInfo.map(async (item) => {
        const { device, attributes } = item as Recordable;
        if (!device) return;
        const thingsModel = (await handleDeviceProfileAttributes(item.device)) as Recordable;
        const { tbDeviceId, attribute } = thingsModel as Recordable;
        if (!tbDeviceId) return;
        if (device === tbDeviceId) {
          attributesList = attributes.reduce((acc, curr) => {
            attribute.forEach((item: Recordable) => {
              if (item.identifier === curr) {
                acc.push({
                  label: item.name,
                  value: item.identifier,
                });
              }
            });
            return [...acc];
          }, []);
        }
        return {
          device: item.name,
          attribute: attributesList.map((item: Recordable) => item.label).join(','),
        };
      });
      tableData.value = (await Promise.all(reflectDeviceList)) as any;
      if (tableData.value) {
        setLoading(false);
      }
    };
    nextTick(() => {
      getTableData();
    });
  });

  const handleDeviceProfileAttributes = async (entityId: string) => {
    const deviceDetailRes = await getDeviceDetail(entityId);
    const { deviceProfileId } = deviceDetailRes;
    if (!deviceProfileId) return;
    const attributeRes = await getAttribute(deviceProfileId);
    return handleDataFormat(deviceDetailRes, attributeRes);
  };

  const handleDataFormat = (deviceDetail: any, attributes: any) => {
    const { name, tbDeviceId } = deviceDetail;
    const attribute = attributes.map((item: any) => ({
      identifier: item.identifier,
      name: item.name,
      detail: item.detail,
    }));
    return {
      name,
      tbDeviceId,
      attribute,
    };
  };
</script>
<style lang="less" scoped>
  :deep(.ant-table-body) {
    height: 470px !important;
  }
</style>