import { BasicColumn, FormSchema } from '/@/components/Table';
import { h } from 'vue';
import { Tag } from 'ant-design-vue';
import moment from 'moment';
// import {
//   ClearAlarmFieldsEnum,
//   ClearAlarmFieldsNameEnum,
// } from '../../designer/enum/formField/action';
import { useComponentRegister } from '/@/components/Form';
import { JavascriptEditorWithTestModal } from '../../designer/src/components/JavaScriptFilterModal';
import { ScriptLanguageEnum } from '/@/enums/scriptEnum';

useComponentRegister('JavascriptEditorWithTestModal', JavascriptEditorWithTestModal);

export enum StatusEnum {
  ENABLE = 1,
  DISABLE = 0,
}

export enum ScriptMessageTypeEnum {
  'Post attributes' = 'POST_ATTRIBUTES',
  'Post telemetry' = 'POST_TELEMETRY',
  'RPC Request from Device' = 'RPC_REQUEST_FROM_DEVICE',
  'RPC Request to Device' = 'RPC_REQUEST_TO_DEVICE',
  'Activity Event' = 'ACTIVITY_EVENT',
  'Inactivity Event' = 'INACTIVITY_EVENT',
  'Connect Event' = 'CONNECT_EVENT',
  'Disconnect Event' = 'DISCONNECT_EVENT',
  'Entity Created' = 'ENTITY_CREATED',
  'Entity Updated' = 'ENTITY_UPDATED',
  'Entity Deleted' = 'ENTITY_DELETED',
  'Entity Assigned' = 'ENTITY_ASSIGNED',
  'Entity Unassigned' = 'ENTITY_UNASSIGNED',
  'Attributes Updated' = 'ATTRIBUTES_UPDATED',
  'Attributes Deleted' = 'ATTRIBUTES_DELETED',
  'Timeseries Updated' = 'TIMESERIES_UPDATED',
  'Timeseries Deleted' = 'TIMESERIES_DELETED',
  'RPC Queued' = 'RPC_QUEUED',
  'RPC Delivered' = 'RPC_DELIVERED',
  'RPC Successful' = 'RPC_SUCCESSFUL',
  'RPC Timeout' = 'RPC_TIMEOUT',
  'RPC Failed' = 'RPC_FAILED',
}

export const columns: BasicColumn[] = [
  {
    title: '名称',
    dataIndex: 'name',
    width: 100,
  },
  {
    title: '用途',
    dataIndex: 'type',
    width: 200,
    customRender: () => h(Tag, { color: 'blue' }, () => '消息格式化'),
  },
  {
    title: '状态',
    dataIndex: 'status',
    width: 120,
    slots: { customRender: 'status' },
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    width: 180,
  },
];

export const searchFormSchema = (syncValue: Fn): FormSchema[] => {
  return [
    {
      field: 'name',
      label: '名称',
      component: 'Input',
      colProps: { span: 6 },
      componentProps: {
        maxLength: 36,
        placeholder: '请输入名称',
        onChange(event: Event) {
          const value = (event.target as HTMLInputElement).value;
          syncValue({ name: value });
        },
      },
    },
    {
      field: 'status',
      label: '状态',
      component: 'Select',
      componentProps: {
        placeholder: '请选择状态',
        options: [
          { label: '已启用', value: StatusEnum.ENABLE },
          { label: '未启用', value: StatusEnum.DISABLE },
        ],
      },
      colProps: { span: 6 },
      onChange(value: number) {
        syncValue({ status: value });
      },
    },
    {
      field: 'createTime',
      label: '创建时间',
      component: 'RangePicker',
      colProps: { span: 8 },
      componentProps: {
        showTime: {
          defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')],
        },
        onChange(value: [moment.Moment, moment.Moment]) {
          if (value.length && value.length === 2)
            syncValue({ startTime: value[0].format('x'), endTime: value[1].format('x') });
        },
      },
    },
  ];
};

export const formSchema: FormSchema[] = [
  {
    field: 'name',
    label: '名称',
    required: true,
    component: 'Input',
    componentProps: {
      maxLength: 32,
      placeholder: '请输入名称',
    },
  },
  {
    field: 'remark',
    label: '说明',
    component: 'InputTextArea',
    componentProps: {
      maxLength: 255,
      autoSize: { minRows: 5, maxRows: 8 },
      placeholder: '请输入说明',
    },
  },
  // {
  //   field: 'function',
  //   label: '',
  //   component: 'Input',
  //   slot: 'function',
  // },
  {
    field: 'function',
    component: 'JavascriptEditorWithTestModal',
    label: '转换函数',
    changeEvent: 'update:value',
    defaultValue: {
      jsScript: 'return {msg: msg, metadata: metadata, msgType: msgType};',
      scriptLang: ScriptLanguageEnum.JavaScript,
      tbelScript: 'return {msg: msg, metadata: metadata, msgType: msgType};',
    },
    componentProps: {
      javaScriptEditorProps: {
        functionName: 'Details',
        paramsName: ['msg', 'metadata', 'msgType'],
        scriptType: 'json',
      },
      buttonName: '测试转换功能',
    },
  },
  {
    field: 'id',
    label: 'id',
    component: 'Input',
    ifShow: false,
  },
];