import { BasicColumn, FormSchema } from '/@/components/Table';
import { findDictItemByCode } from '/@/api/system/dict';
import { h, unref } from 'vue';
import { Tooltip } from 'ant-design-vue';

import { FunctionType } from '/@/views/device/profiles/step/cpns/physical/cpns/config';
import { useMessage } from '/@/hooks/web/useMessage';
import { useClipboard } from '@vueuse/core';
import { DictEnum } from '/@/enums/dictEnum';

// import {
//   EventType,
//   EventTypeColor,
//   EventTypeName,
// } from '/@/views/device/list/cpns/tabs/EventManage/config';

export const columns: BasicColumn[] = [
  {
    title: '品类名称',
    dataIndex: 'name',
    slots: { customRender: 'name' },
  },
  {
    title: '领域',
    dataIndex: 'dictItemName',
  },
];

export const formatFunctionType: Record<FunctionType, string> = {
  [FunctionType.PROPERTIES]: '属性',
  [FunctionType.EVENTS]: '事件',
  [FunctionType.SERVICE]: '服务',
};

const handleCopy = async (value: string) => {
  const { createMessage } = useMessage();
  const { copied, copy } = useClipboard({ legacy: true });
  await copy(value);
  if (unref(copied)) createMessage.success('复制成功~');
  else createMessage.error('复制失败～');
};

export const columnsDrawer: BasicColumn[] = [
  {
    title: '功能类型',
    dataIndex: 'functionType',
    width: 90,
    format: (text: FunctionType) => {
      return formatFunctionType[text];
    },
  },
  {
    title: '功能名称',
    dataIndex: 'functionName',
    width: 90,
    ellipsis: true,
  },
  {
    title: '标识符',
    dataIndex: 'identifier',
    width: 90,
    ellipsis: true,
    customRender: ({ text }: Record<'text', string>) => {
      return h(Tooltip, { title: text }, () =>
        h('span', { class: 'cursor-pointer', onClick: () => handleCopy(text) }, text)
      );
    },
  },
  {
    title: '数据类型',
    dataIndex: 'functionJson.dataType.type',
    width: 100,
    format: (text: string) => {
      return text || '--';
    },
    ellipsis: true,
  },
];

export const searchFormSchema: FormSchema[] = [
  {
    field: 'dictItemId',
    label: '',
    component: 'ApiSelect',
    colProps: { span: 7 },
    componentProps() {
      return {
        api: findDictItemByCode,
        params: {
          dictCode: DictEnum.CATEGORY_FIELD,
        },
        labelField: 'itemText',
        valueField: 'itemValue',
        placeholder: '请选择领域',
      };
    },
  },
  {
    field: 'name',
    label: '',
    component: 'Input',
    colProps: { span: 9 },
    componentProps: {
      placeholder: '请输入品类名称',
    },
  },
];