<script lang="ts" setup>
  import { computed, unref } from 'vue';
  import { ComponentPropsConfigType } from '../../../index.type';
  import { option } from './config';
  import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
  import { BasicTable, useTable, BasicColumn } from '/@/components/Table';
  import { useReceiveMessage } from '../../../hook/useReceiveMessage';
  import { useReceiveValue } from '../../../hook/useReceiveValue';
  import { formatToDateTime } from '/@/utils/dateUtil';
  import { nextTick } from 'vue';
  import { onMounted } from 'vue';
  import { toRaw } from 'vue';
  import { useComponentScale } from '../../../hook/useComponentScale';
  import { useMultipleDataFetch } from '../../../hook/socket/useSocket';
  import { MultipleDataFetchUpdateFn } from '../../../hook/socket/useSocket.type';

  interface IList {
    [key: string]: string | number | object;
  }

  const props = defineProps<{
    config: ComponentPropsConfigType<typeof option>;
  }>();

  const columns: BasicColumn[] = [
    {
      title: '设备属性',
      dataIndex: 'attribute',
      width: 80,
      ellipsis: true,
      format(text) {
        if (props.config.option.mode == 'SELECT_PREVIEW') return text;
        const { uniqueArr } = unref(getDesign);
        const values = uniqueArr.filter((item) => item[text])[0][text];
        return values;
      },
    },
    {
      title: '值',
      dataIndex: 'value',
      width: 80,
      ellipsis: true,
      format(text, record) {
        const value = text ? text + (record.unit || '') : '';
        return value;
      },
    },
    {
      title: '时间',
      dataIndex: 'time',
      width: 110,
      ellipsis: true,
      format(text) {
        return formatToDateTime(text, 'YYYY-MM-DD HH:mm:ss');
      },
    },
  ];

  const [registerTable, { setTableData, getDataSource, redoHeight, setProps }] = useTable({
    showIndexColumn: false,
    showTableSetting: false,
    canResize: true,
    size: 'small',
    maxHeight: 144,
    columns,
  });

  const getDesign = computed(() => {
    const { persetOption, option } = props.config;
    const { dataSource = [] } = option || {};
    const { unit: presetUnit, showDeviceName: presetShowDeviceName } = persetOption || {};
    const convert = dataSource.map((item) => {
      return {
        [item.attribute + '-' + item.deviceId]: item.deviceName + '-' + item.attributeName,
        id: item.deviceId,
      };
    });

    const uniqueSet = new Set();
    const uniqueArr = convert.filter((obj) => {
      const jsonString = JSON.stringify(obj);
      const isUnique = !uniqueSet.has(jsonString);
      uniqueSet.add(jsonString);
      return isUnique;
    });
    return {
      uniqueArr,
      dataSource: dataSource?.map((item) => {
        const { unit, showDeviceName } = item.componentInfo || {};
        const { attribute, attributeName, attributeRename, deviceName, deviceRename, deviceId } =
          item;
        return {
          unit: unit ?? presetUnit,
          attribute,
          attributeName: attributeRename || attributeName,
          showDeviceName: showDeviceName ?? presetShowDeviceName,
          deviceName: deviceRename || deviceName,
          id: deviceId,
        };
      }),
    };
  });

  const { forEachGroupMessage } = useReceiveMessage();
  const { getNumberValue } = useReceiveValue();

  const updateFn: MultipleDataFetchUpdateFn = async (message, deviceId, attribute) => {
    const list: IList = {};
    const list1: IList = {};
    forEachGroupMessage(message, deviceId, attribute, (attribute, value, timespan) => {
      list[deviceId + attribute] = getNumberValue(value);
      list.time = timespan || list.time;

      if (timespan && value) {
        list1[attribute + '-' + deviceId] = {
          attribute: attribute + '-' + deviceId,
          value: value ? getNumberValue(value) : value,
          time: timespan,
        };
      }
    });
    await nextTick();
    setTableData([...Object.values(list1), ...toRaw(unref(getDataSource()))]);
  };

  useMultipleDataFetch(props, updateFn);
  onMounted(async () => {
    !props.config.option.dataSource &&
      setTableData([
        { attribute: '温度', value: 1, time: '2023-06-29' },
        { attribute: '湿度', value: 1, time: '2023-06-29' },
        { attribute: '湿度', value: 1, time: '2023-06-29' },
      ]);

    await nextTick();
    resize();
  });
  const resize = async () => {
    const { height } = unref(getContainerSize);
    height && setProps({ maxHeight: height - 110, scroll: { x: 470, y: height - 110 } });

    await nextTick();
    redoHeight();
  };

  const { getContainerSize } = useComponentScale(props, resize);
</script>

<template>
  <main class="flex flex-col justify-center items-center w-full h-full">
    <DeviceName :config="config" />
    <div class="w-full h-full">
      <!-- <PageWrapper> -->
      <BasicTable autoCreateKey style="flex: auto" @register="registerTable" />
      <!-- </PageWrapper> -->
    </div>
  </main>
</template>