<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 { defHttp } from '/@/utils/http/axios';

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

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

  const alarmLevel = (type: string): IList => {
    if (type === 'CRITICAL') {
      return { text: '紧急', color: 'red' };
    } else if (type === 'MAJOR') {
      return { text: '重要', color: 'pink' };
    } else if (type === 'MINOR') {
      return { text: '次要', color: 'warning' };
    } else if (type === 'WARNING') {
      return { text: '警告', color: 'warning' };
    } else {
      return { text: '不确定', color: 'default' };
    }
  };

  const statusType = (type: string): string => {
    if (type === 'CLEARED_UNACK') {
      return '清除未确认';
    } else if (type === 'CLEARED_ACK') {
      return '清除已确认';
    } else if (type === 'ACTIVE_ACK') {
      return '激活已确认';
    } else {
      return '激活未确认';
    }
  };

  const { send } = useDataBoardContext();

  const currentCmdId = ref();

  const alarmColumns: BasicColumn[] = [
    {
      title: '告警等级',
      dataIndex: 'status',
      ellipsis: true,
      width: 80,
      format: (text) => statusType(text),
    },
    { title: '设备', dataIndex: 'device', ellipsis: true, width: 120 },
    { title: '告警场景', dataIndex: 'type', ellipsis: true, width: 80 },
    {
      title: '告警级别',
      dataIndex: 'severity',
      ellipsis: true,
      width: 80,
      customRender: ({ record }) => {
        const { severity } = record;
        const { text, color } = alarmLevel(severity);
        return h(Tag, { color }, () => text);
      },
    },
    {
      title: '时间',
      dataIndex: 'time',
      ellipsis: true,
      width: 110,
      format(text) {
        return formatToDateTime(text, 'YYYY-MM-DD HH:mm:ss');
      },
    },
  ];
  const devicealarmList = ref([
    { severity: 0, device: '温湿度', type: '规则', status: 50, time: 1688974276000 },
    { severity: 1, device: '温湿度1', type: '规则1', status: 350, time: 1688994276000 },
    { severity: 0, device: '温湿度2', type: '规则2', status: 150, time: 1688174276000 },
    { severity: 0, device: '温湿度3', type: '规则2', status: 150, time: 1688174276000 },
    { severity: 0, device: '温湿度4', type: '规则2', status: 150, time: 1688174276000 },
    { severity: 0, device: '温湿度5', type: '规则2', 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>