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';

// 表格数据
export const columns: BasicColumn[] = [
  {
    title: '设备名称',
    dataIndex: 'deviceName',
    width: 120,
  },
  {
    title: '产品',
    dataIndex: 'deviceProfileName',
    width: 120,
  },
  {
    title: '设备类型',
    dataIndex: 'deviceType',
    width: 180,
    format: (_text: string, record: Recordable) => {
      return record.deviceType == 'DIRECT_CONNECTION'
        ? '直连设备'
        : record.deviceType == 'GATEWAY'
        ? '网关设备'
        : '网关子设备';
    },
  },
  {
    title: '所属组织',
    dataIndex: 'organizationName',
    width: 120,
  },
  {
    title: '状态',
    dataIndex: 'status',
    width: 180,
    customRender: ({ record }) => {
      const status = record.status;
      const enable = status === 1 ? '在线' : '离线';
      const color = enable === '在线' ? 'green' : 'red';
      const text = enable === '在线' ? '在线' : '离线';
      return h(Tag, { color }, () => text);
    },
  },
  {
    title: '时间',
    dataIndex: 'createTime',
    width: 180,
  },
];

// 分页查询
export const searchFormSchema: FormSchema[] = [
  {
    field: 'deviceName',
    label: '设备名称',
    component: 'Input',
    componentProps: {
      maxLength: 255,
      placeholder: '请输入设备名称',
    },
    dynamicRules: () => {
      return [
        {
          required: false,
          validator: (_, value) => {
            if (String(value).length > 255) {
              return Promise.reject('字数不超过255个字');
            }
            return Promise.resolve();
          },
        },
      ];
    },
    colProps: { span: 6 },
  },
  {
    field: 'deviceProfileName',
    label: '产品',
    component: 'Input',
    componentProps: {
      maxLength: 255,
      placeholder: '请输入产品',
    },
    dynamicRules: () => {
      return [
        {
          required: false,
          validator: (_, value) => {
            if (String(value).length > 255) {
              return Promise.reject('字数不超过255个字');
            }
            return Promise.resolve();
          },
        },
      ];
    },
    colProps: { span: 6 },
  },
  {
    field: 'organizationName',
    label: '所属组织',
    component: 'Input',
    componentProps: {
      maxLength: 255,
      placeholder: '请输入所属组织',
    },
    dynamicRules: () => {
      return [
        {
          required: false,
          validator: (_, value) => {
            if (String(value).length > 255) {
              return Promise.reject('字数不超过255个字');
            }
            return Promise.resolve();
          },
        },
      ];
    },
    colProps: { span: 6 },
  },
  {
    field: 'status',
    label: '状态',
    colProps: { span: 6 },
    component: 'Select',
    componentProps: {
      placeholder: '请选择状态',
      options: [
        {
          label: '在线',
          value: 1,
        },
        {
          label: '离线',
          value: 0,
        },
      ],
    },
  },
  {
    field: 'queryTime',
    label: '查询时间',
    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: '设备名称',
  },
  {
    field: 'deviceProfileName',
    label: '产品',
  },
  {
    field: 'deviceType',
    label: '设备类型',
    render: (_, data) => {
      return data.deviceType == 'DIRECT_CONNECTION'
        ? '直连设备'
        : data.deviceType == 'GATEWAY'
        ? '网关设备'
        : '网关子设备';
    },
  },
  {
    field: 'organizationName',
    label: '所属组织',
  },
  {
    field: 'status',
    label: '状态',
    render: (_, data) => {
      const status = data.status;
      const enable = status === 1 ? '在线' : '离线';
      const color = enable === '在线' ? 'green' : 'red';
      const text = enable === '在线' ? '在线' : '离线';
      return h(Tag, { color }, () => text);
    },
  },
  {
    field: 'createTime',
    label: '时间',
  },
  {
    field: 'remark',
    label: '备注',
  },
];

export const formDetailSchema: DescItem[] = [
  {
    field: 'deviceName',
    label: '设备名称',
  },
  {
    field: 'status',
    label: '状态',
    render: (_, data) => {
      const status = data.status;
      const enable = status === 1 ? '在线' : '离线';
      const color = enable === '在线' ? 'green' : 'red';
      const text = enable === '在线' ? '在线' : '离线';
      return h(Tag, { color }, () => text);
    },
  },
  {
    field: 'createTime',
    label: '时间',
  },
];

//处理表单
export const formHandleSchema: FormSchema[] = [
  {
    field: 'remark',
    label: '备注',
    colProps: { span: 24 },
    component: 'InputTextArea',
    componentProps: {
      maxLength: 255,
      placeholder: '请输入备注',
    },
  },
];