import { BasicColumn, FormSchema } from '/@/components/Table';
import moment from 'moment';
import { h } from 'vue';
import { Tag } from 'ant-design-vue';
import { DescItem } from '/@/components/Description';
import { useI18n } from '/@/hooks/web/useI18n';

const { t } = useI18n();

// 表格数据
export const columns: BasicColumn[] = [
  {
    title: t('monitor.online.deviceName'),
    dataIndex: 'deviceName',
    width: 120,
  },
  {
    title: t('business.productText'),
    dataIndex: 'deviceProfileName',
    width: 120,
  },
  {
    title: t('monitor.online.deviceType'),
    dataIndex: 'deviceType',
    width: 180,
    format: (_text: string, record: Recordable) => {
      return record.deviceType == 'DIRECT_CONNECTION'
        ? t('enum.deviceType.DIRECT_CONNECTION')
        : record.deviceType == 'GATEWAY'
        ? t('enum.deviceType.GATEWAY')
        : t('enum.deviceType.SENSOR');
    },
  },
  {
    title: t('business.organizationText'),
    dataIndex: 'organizationName',
    width: 120,
  },
  {
    title: t('monitor.online.state'),
    dataIndex: 'status',
    width: 180,
    customRender: ({ record }) => {
      const status = record.status;
      const enable = status === 1 ? t('enum.deviceStatus.ONLINE') : t('enum.deviceStatus.OFFLINE');
      const color = enable === t('enum.deviceStatus.ONLINE') ? 'green' : 'red';
      const text =
        enable === t('enum.deviceStatus.ONLINE')
          ? t('enum.deviceStatus.ONLINE')
          : t('enum.deviceStatus.OFFLINE');
      return h(Tag, { color }, () => text);
    },
  },
  {
    title: t('monitor.online.time'),
    dataIndex: 'createTime',
    width: 180,
  },
];

// 分页查询
export const searchFormSchema: FormSchema[] = [
  {
    field: 'deviceName',
    label: t('monitor.online.deviceName'),
    component: 'Input',
    componentProps: {
      maxLength: 255,
    },
    dynamicRules: () => {
      return [
        {
          required: false,
          validator: (_, value) => {
            if (String(value).length > 255) {
              return Promise.reject(t('monitor.online.textRule'));
            }
            return Promise.resolve();
          },
        },
      ];
    },
    colProps: { span: 6 },
  },
  {
    field: 'deviceProfileName',
    label: t('business.productText'),
    component: 'Input',
    componentProps: {
      maxLength: 255,
    },
    dynamicRules: () => {
      return [
        {
          required: false,
          validator: (_, value) => {
            if (String(value).length > 255) {
              return Promise.reject(t('monitor.online.textRule'));
            }
            return Promise.resolve();
          },
        },
      ];
    },
    colProps: { span: 6 },
  },
  {
    field: 'organizationName',
    label: t('business.organizationText'),
    component: 'Input',
    componentProps: {
      maxLength: 255,
    },
    dynamicRules: () => {
      return [
        {
          required: false,
          validator: (_, value) => {
            if (String(value).length > 255) {
              return Promise.reject(t('monitor.online.textRule'));
            }
            return Promise.resolve();
          },
        },
      ];
    },
    colProps: { span: 6 },
  },
  {
    field: 'status',
    label: t('monitor.online.state'),
    colProps: { span: 6 },
    component: 'Select',
    componentProps: {
      options: [
        {
          label: t('enum.deviceStatus.ONLINE'),
          value: 1,
        },
        {
          label: t('enum.deviceStatus.OFFLINE'),
          value: 0,
        },
      ],
    },
  },
  {
    field: 'queryTime',
    label: t('monitor.online.searchTime'),
    component: 'RangePicker',
    componentProps: {
      showTime: {
        defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')],
      },
    },
    colProps: { span: 6 },
  },
];

export const formSchema: DescItem[] = [
  {
    field: 'deviceName',
    label: t('monitor.online.deviceName'),
  },
  {
    field: 'deviceProfileName',
    label: t('business.productText'),
  },
  {
    field: 'deviceType',
    label: t('monitor.online.deviceType'),
    render: (_, data) => {
      return data.deviceType == 'DIRECT_CONNECTION'
        ? t('enum.deviceType.DIRECT_CONNECTION')
        : data.deviceType == 'GATEWAY'
        ? t('enum.deviceType.GATEWAY')
        : t('enum.deviceType.SENSOR');
    },
  },
  {
    field: 'organizationName',
    label: t('business.organizationText'),
  },
  {
    field: 'status',
    label: t('monitor.online.state'),
    render: (_, data) => {
      const status = data.status;
      const enable = status === 1 ? t('enum.deviceStatus.ONLINE') : t('enum.deviceStatus.OFFLINE');
      const color = enable === t('enum.deviceStatus.ONLINE') ? 'green' : 'red';
      const text =
        enable === t('enum.deviceStatus.ONLINE')
          ? t('enum.deviceStatus.ONLINE')
          : t('enum.deviceStatus.OFFLINE');
      return h(Tag, { color }, () => text);
    },
  },
  {
    field: 'createTime',
    label: t('monitor.online.time'),
  },
  {
    field: 'remark',
    label: t('monitor.online.remark'),
  },
];

export const formDetailSchema: DescItem[] = [
  {
    field: 'deviceName',
    label: t('monitor.online.deviceName'),
  },
  {
    field: 'status',
    label: t('monitor.online.state'),
    render: (_, data) => {
      const status = data.status;
      const enable = status === 1 ? t('enum.deviceStatus.ONLINE') : t('enum.deviceStatus.OFFLINE');
      const color = enable === t('enum.deviceStatus.ONLINE') ? 'green' : 'red';
      const text =
        enable === t('enum.deviceStatus.ONLINE')
          ? t('enum.deviceStatus.ONLINE')
          : t('enum.deviceStatus.OFFLINE');
      return h(Tag, { color }, () => text);
    },
  },
  {
    field: 'createTime',
    label: t('monitor.online.time'),
  },
];

//处理表单
export const formHandleSchema: FormSchema[] = [
  {
    field: 'remark',
    label: t('monitor.online.remark'),
    colProps: { span: 24 },
    component: 'InputTextArea',
    componentProps: {
      maxLength: 255,
    },
  },
];