<script lang="ts" setup>
  import { computed, unref, ref, watch } 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 { formatToDateTime } from '/@/utils/dateUtil';
  import { onMounted } from 'vue';
  import { nextTick } from 'vue';
  import { useComponentScale } from '../../../hook/useComponentScale';
  import { h } from 'vue';
  import { Tag } from 'ant-design-vue';
  import { useDataBoardContext } from '/@/views/visual/palette/hooks/useDataBoardContext';
  import { useCustomDataFetch } from '../../../hook/socket/useSocket';
  import { ReceiveAlarmDataCmdsMessageType } from '../../../hook/socket/useSocket.type';
  import { useAlarmContext } from '/@/views/visual/palette/hooks/useAlarmTime';

  import { getMessage } from '../config';
  import { useI18n } from '/@/hooks/web/useI18n';
  // import { defHttp } from '/@/utils/http/axios';

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

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

  const { t } = useI18n();

  const alarmLevel = (type: string): IList => {
    if (type === 'CRITICAL') {
      return { text: t('enum.alarmLevel.CRITICAL'), color: 'red' };
    } else if (type === 'MAJOR') {
      return { text: t('enum.alarmLevel.MAJOR'), color: 'pink' };
    } else if (type === 'MINOR') {
      return { text: t('enum.alarmLevel.MINOR'), color: 'warning' };
    } else if (type === 'WARNING') {
      return { text: t('enum.alarmLevel.WARNING'), color: 'warning' };
    } else {
      return { text: t('enum.alarmLevel.INDETERMINATE'), color: 'default' };
    }
  };

  const statusType = (type: string): string => {
    if (type === 'CLEARED_UNACK') {
      return t('enum.alarmStaus.CLEARED_UNACK');
    } else if (type === 'CLEARED_ACK') {
      return t('enum.alarmStaus.CLEARED_ACK');
    } else if (type === 'ACTIVE_ACK') {
      return t('enum.alarmStaus.ACTIVE_ACK');
    } else {
      return t('enum.alarmStaus.ACTIVE_UNACK');
    }
  };

  const { send } = useDataBoardContext();

  const currentCmdId = ref();

  const alarmColumns: BasicColumn[] = [
    {
      title: t('common.alarmLevelText'),
      dataIndex: 'status',
      ellipsis: true,
      width: 80,
      format: (text) => statusType(text),
    },
    { title: t('business.deviceText'), dataIndex: 'device', ellipsis: true, width: 120 },
    { title: t('common.alarmScenarioText'), dataIndex: 'type', ellipsis: true, width: 80 },
    {
      title: t('common.alarmLevel1Text'),
      dataIndex: 'severity',
      ellipsis: true,
      width: 80,
      customRender: ({ record }) => {
        const { severity } = record;
        const { text, color } = alarmLevel(severity);
        return h(Tag, { color }, () => text);
      },
    },
    {
      title: t('common.timeText'),
      dataIndex: 'time',
      ellipsis: true,
      width: 110,
      format(text) {
        return formatToDateTime(text, 'YYYY-MM-DD HH:mm:ss');
      },
    },
  ];
  const devicealarmList = ref([
    {
      severity: 0,
      device: t('visual.board.temAndHum'),
      type: t('visual.board.ruleText'),
      status: 50,
      time: 1688974276000,
    },
    {
      severity: 1,
      device: t('visual.board.temAndHum') + 1,
      type: t('visual.board.ruleText') + 1,
      status: 350,
      time: 1688994276000,
    },
    {
      severity: 0,
      device: t('visual.board.temAndHum') + 2,
      type: t('visual.board.ruleText') + 2,
      status: 150,
      time: 1688174276000,
    },
    {
      severity: 0,
      device: t('visual.board.temAndHum') + 3,
      type: t('visual.board.ruleText') + 3,
      status: 150,
      time: 1688174276000,
    },
    {
      severity: 0,
      device: t('visual.board.temAndHum') + 4,
      type: t('visual.board.ruleText') + 4,
      status: 150,
      time: 1688174276000,
    },
    {
      severity: 0,
      device: t('visual.board.temAndHum') + 5,
      type: t('visual.board.ruleText') + 5,
      status: 150,
      time: 1688174276000,
    },
  ]);

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

  // const getAlarmList = (params) => {
  //   return defHttp.post({
  //     url: '/alarm/configuration/page',
  //     params,
  //   });
  // };

  const getDesign = computed(() => {
    const { persetOption, option } = props.config;
    const { dataSource = [] } = option || {};
    const { unit: presetUnit, presetShowDeviceName } = persetOption || {};
    return {
      dataSource: dataSource?.map((item) => {
        const { unit, showDeviceName } = item.componentInfo || {};
        const {
          attribute,
          attributeName,
          attributeRename,
          deviceName,
          deviceRename,
          deviceId,
          // deviceIds,
        } = item;
        return {
          unit: unit ?? presetUnit,
          attribute,
          attributeRename,
          attributeName,
          showDeviceName: showDeviceName ?? presetShowDeviceName,
          deviceName,
          deviceRename,
          id: deviceId,
          // deviceIds,
        };
      }),
    };
  });

  const { alarmForm } = useAlarmContext();

  watch(
    () => alarmForm?.value,
    () => {
      if (props.config.option.mode == 'SELECT_PREVIEW') return;
      send?.(JSON.stringify(getMessage(unref(currentCmdId), unref(getDesign), unref(alarmForm))));
    },
    { immediate: false }
  );

  const transformMessage = (cmdId: number) => {
    if (props.config.option.mode == 'SELECT_PREVIEW') return;
    currentCmdId.value = cmdId;
    send?.(JSON.stringify(getMessage(cmdId, unref(getDesign), unref(alarmForm))));
  };

  const updateFn = (message: ReceiveAlarmDataCmdsMessageType) => {
    const { data } = message || {};
    if (!data?.data) return;
    const tableList = ref<any>(
      data?.data?.map((item) => {
        const values =
          unref(getDesign).dataSource.filter((item1) => item1.id === item.entityId.id) || [];
        return {
          time: item.createdTime,
          device: values[0].deviceName || item.originatorName,
          severity: item.severity,
          type: item.type,
          status: item.status,
        };
      })
    );
    setTableData(unref(tableList));
  };

  useCustomDataFetch(props, transformMessage, updateFn);

  onMounted(async () => {
    // const deviceIds = unref(getDesign).dataSource.map((item) => item.deviceIds);
    // let { startTs, endTs, time, pageSize }: any = unref(alarmForm) || {};
    // if (!startTs || !endTs) {
    //   startTs = Date.now() - time;
    //   endTs = Date.now();
    // }
    // const values = {
    //   deviceIds,
    //   page: 1,
    //   pageSize,
    //   startTime: Number(startTs),
    //   endTime: Number(endTs),
    // };

    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">
      <BasicTable autoCreateKey style="flex: auto" @register="registerTable" />
    </div>
  </main>
</template>