import { formatToDate } from '/@/utils/dateUtil';
import { BasicColumn } from '/@/components/Table';
import { FormSchema } from '/@/components/Table';
import { DeviceRecord } from '/@/api/device/model/deviceModel';
// import { deviceProfile } from '/@/api/device/deviceManager';
import { h } from 'vue';
import { Tag, Tooltip } from 'ant-design-vue';
import { handeleCopy } from '../../../device/profiles/step/topic';
import { useI18n } from '/@/hooks/web/useI18n';
import { DeviceStatusEnum, DeviceTypeEnum } from '/@/enums/deviceEnum';

const { t } = useI18n();
import edgefornt from '/@/assets/icons/edgefornt.svg';

export enum DeviceListAuthEnum {
  /**
   * @description 新增
   */
  CREATE = 'api:yt:device:post',

  /**
   * @description 删除
   */
  DELETE = 'api:yt:device:delete',

  /**
   * @description 编辑
   */
  UPDATE = 'api:yt:device:update',

  /**
   * @description 详情
   */
  DETAIL = 'api:yt:device:get',

  /**
   * @description 导入
   */
  IMPORT = 'api:yt:device:import',

  /**
   * @description 公开
   */
  PUBLIC = 'api:yt:device:public',

  /**
   * @description 上下线
   */
  ONLINE = 'api:yt:device:online:record',

  /**
   * @description 管理设备凭证
   */
  EQUIPMENT = 'api:yt:device:equipment',

  /**
   * @description 分配客户
   */
  ASSIGN = 'api:yt:device:assign',

  /**
   * @description 命令下发
   */
  RPC = 'api:yt:device:rpc',

  /**
   * @description 更新产品
   */
  UPDATE_PRODUCT = 'api:yt:device:update:product',
}

// 表格列数据
export const columns: BasicColumn[] = [
  {
    title: t('business.deviceStatusText'),
    dataIndex: 'deviceState',
    width: 110,
    className: 'device-status',
    slots: { customRender: 'deviceState' },
  },
  {
    title: t('business.deviceImageText'),
    dataIndex: 'deviceInfo.avatar',
    width: 70,
    slots: { customRender: 'img' },
  },
  {
    dataIndex: 'name',
    title: t('deviceManagement.device.aliasNameText'),
    width: 210,
    slots: { customRender: 'name', title: 'deviceTitle' },
    className: 'device-name-edge',
    customRender: ({ record }) => {
      return h('div', { class: 'py-3 px-3.5' }, [
        record.alias &&
          h(
            'div',
            {
              class: 'cursor-pointer truncate',
            },
            h(
              Tooltip,
              {
                placement: 'topLeft',
                title: `${record.alias}`,
              },
              () => `${record.alias}`
            )
          ),
        h(
          'div',
          {
            class: 'cursor-pointer text-blue-500 truncate',
            onClick: () => {
              handeleCopy(`${record.name}`);
            },
          },
          h(
            Tooltip,
            {
              placement: 'topLeft',
              title: `${record.name}`,
            },
            () => `${record.name}`
          )
        ),
        record.isEdge
          ? h('div', { class: 'absolute top-0 left-0', fill: '#1890ff' }, [
              h('img', { src: edgefornt, class: 'w-12.5 h-12.5' }),
              h(
                'span',
                {
                  class:
                    'absolute top-0.5 left-0.5 text-light-50 transform -rotate-45 translate-y-0 !text-10px',
                },
                t('common.edgeFlag')
              ),
            ])
          : '',
      ]);
    },
  },
  {
    title: t('business.deviceTypeText'),
    dataIndex: 'deviceType',
    width: 130,
    customRender({ text }) {
      return h(Tag, { color: 'success' }, () => t(`enum.deviceType.${text}`));
    },
  },
  {
    title: t('business.affiliatedProductText'),
    dataIndex: 'deviceProfile.name',
    width: 180,
    slots: { customRender: 'deviceProfile' },
    ellipsis: true,
  },
  {
    title: t('business.affiliatedOrganizationText'),
    dataIndex: 'organizationDTO.name',
    width: 100,
  },
  // {
  //   title: '客户',
  //   dataIndex: 'customerName',
  //   width: 100,
  // },
  {
    title: t('business.publicText'),
    dataIndex: 'public',
    width: 100,
    customRender({ record }: { record: DeviceRecord }) {
      const flag = record?.customerAdditionalInfo?.isPublic;
      return h(Tag, { color: flag ? 'blue' : 'orange' }, () =>
        flag ? t('business.publicText') : t('business.privateText')
      );
    },
  },
  {
    title: t('deviceManagement.device.lastOnlineTimeText'),
    dataIndex: 'lastOnlineTime',
    format: (text) => text && formatToDate(text, 'YYYY-MM-DD HH:mm:ss'),
    width: 160,
  },
  {
    title: t('deviceManagement.device.lastOfflineTimeText'),
    dataIndex: 'lastOfflineTime',
    format: (text) => {
      return text ? formatToDate(text, 'YYYY-MM-DD HH:mm:ss') : '';
    },
    width: 160,
  },
];

// 查询字段
export const searchFormSchema: FormSchema[] = [
  {
    field: 'code',
    label: t('equipment.ledger.deviceCode'),
    component: 'Input',
    colProps: { span: 6 },
    componentProps: {
      maxLength: 255,
    },
  },
  {
    field: 'deviceType',
    label: t('equipment.ledger.deviceType'),
    component: 'Select',
    componentProps: {
      options: Object.values(DeviceTypeEnum).map((value) => ({
        label: t(`enum.deviceType.${value}`),
        value,
      })),
    },
    colProps: { span: 6 },
  },
  {
    field: 'deviceState',
    label: t('business.deviceStatusText'),
    component: 'Select',
    componentProps: {
      options: Object.values(DeviceStatusEnum).map((value) => ({
        label: t(`enum.deviceStatus.${value}`),
        value,
      })),
    },
    colProps: { span: 6 },
  }
];