import { BasicColumn, FormSchema } from '/@/components/Table';
import { h } from 'vue';
import { Tag } from 'ant-design-vue';
import { findDictItemByCode } from '/@/api/system/dict';
import { USER_INFO_KEY } from '/@/enums/cacheEnum';
import { getAuthCache } from '/@/utils/auth';
import { isAdmin } from '/@/enums/roleEnum';
import { defaultField } from './constants';
import { useUtils } from '../hooks/useUtils';

// 表格配置
export const columns: BasicColumn[] = [
  {
    title: '接口名称',
    dataIndex: 'interfaceName',
    width: 150,
  },
  {
    title: '接口类型',
    dataIndex: 'interfaceType',
    width: 80,
    format(text) {
      return text === 'SYSTEM' ? '系统默认' : '自定义';
    },
  },
  {
    title: '请求方式',
    dataIndex: 'requestContentType',
    width: 90,
    format(text) {
      return Number(text) === 0 ? '普通请求' : Number(text) === 1 ? 'SQL请求' : 'websocket请求';
    },
  },
  {
    title: '接口内容',
    dataIndex: 'content',
    width: 80,
    slots: { customRender: 'content' },
  },
  {
    title: '状态',
    dataIndex: 'state',
    width: 80,
    customRender: ({ record }) => {
      const color = record.state == 1 ? 'green' : 'red';
      const text = record.state == 1 ? '发布' : '未发布';
      return h(Tag, { color: color }, () => text);
    },
  },
];

// 查询配置
export const searchFormSchema: FormSchema[] = [
  {
    field: 'name',
    label: '接口名称',
    component: 'Input',
    componentProps: {
      maxLength: 36,
      placeholder: '请输入接口名称',
    },
  },
  {
    field: 'state',
    label: '发布状态',
    component: 'Select',
    componentProps: {
      options: [
        {
          label: '发布',
          value: 1,
        },
        {
          label: '未发布',
          value: 0,
        },
      ],
      placeholder: '请选择发布状态',
    },
  },
  {
    field: 'interfaceType',
    label: '接口类型',
    component: 'Select',
    colProps: { span: 7 },
    componentProps: {
      options: [
        {
          label: '系统默认',
          value: 'SYSTEM',
        },
        {
          label: '自定义',
          value: 'CUSTOM',
        },
      ],
      placeholder: '请选择接口类型',
    },
    ifShow: ({}) => {
      const userInfo: any = getAuthCache(USER_INFO_KEY);
      const role: string = userInfo?.roles[0];
      if (isAdmin(role)) return true;
      else return false;
    },
  },
];

//表单配置
export const schemas: FormSchema[] = [
  {
    field: 'interfaceName',
    label: '接口名称',
    colProps: { span: 24 },
    required: true,
    component: 'Input',
    componentProps: {
      maxLength: 255,
      placeholder: '请输入接口名称',
    },
  },
  {
    field: 'interfaceType',
    component: 'ApiRadioGroup',
    label: '接口类型',
    required: true,
    colProps: {
      span: 8,
    },
    defaultValue: 'CUSTOM',
    componentProps: {
      api: findDictItemByCode,
      params: {
        dictCode: 'interface_Type',
      },
      labelField: 'itemText',
      valueField: 'itemValue',
    },
    ifShow: ({}) => {
      const userInfo = getAuthCache(USER_INFO_KEY) as any;
      const role: string = userInfo?.roles[0];
      if (isAdmin(role)) return true;
      else return false;
    },
  },
  {
    field: 'requestContentType',
    label: '请求方式',
    component: 'ApiSelect',
    required: true,
    colProps: { span: 24 },
    defaultValue: '0',
    componentProps: ({ formActionType }) => {
      const { updateSchema, setFieldsValue } = formActionType;
      return {
        api: findDictItemByCode,
        params: {
          dictCode: 'dataview_select_methods',
        },
        placeholder: '请选择请求方式',
        labelField: 'itemText',
        valueField: 'itemValue',
        getPopupContainer: () => document.body,
        onChange(e) {
          if (!e) return;
          const { usePlaceholder } = useUtils();
          const setDefaultPlaceholder = usePlaceholder(e);
          setFieldsValue(defaultField);
          updateSchema({
            field: 'requestHttpTypeAndUrl',
            componentProps: {
              type: e,
            },
          });
          updateSchema({
            field: 'requestOriginUrl',
            componentProps: {
              placeholder: setDefaultPlaceholder,
            },
          });
        },
      };
    },
  },
  {
    field: 'originUrlType',
    label: '地址类型',
    component: 'ApiSelect',
    required: true,
    colProps: { span: 24 },
    defaultValue: 'server_url',
    componentProps: ({ formActionType }) => {
      const { setFieldsValue } = formActionType;
      return {
        placeholder: '请选择地址类型',
        api: findDictItemByCode,
        params: {
          dictCode: 'dataview_select_origin_type',
        },
        labelField: 'itemText',
        valueField: 'itemValue',
        onChange: (e) => {
          if (!e) return;
          setFieldsValue({
            requestOriginUrl: '',
          });
        },
      };
    },
  },
  {
    field: 'requestOriginUrl',
    label: '源地址',
    colProps: { span: 24 },
    required: true,
    component: 'Input',
    componentProps: ({ formActionType }) => {
      const { getFieldsValue } = formActionType;
      const type = getFieldsValue()?.requestContentType;
      const { usePlaceholder } = useUtils();
      return {
        placeholder: usePlaceholder(type),
      };
    },
    ifShow: ({ values }) => values['originUrlType'] === 'custom_url',
  },
  {
    field: 'requestHttpTypeAndUrl',
    label: '请求类型&地址',
    component: 'InputGroup',
    required: true,
    colProps: { span: 24 },
    componentProps: ({ formActionType }) => {
      const { getFieldsValue } = formActionType;
      return {
        type: getFieldsValue().requestContentType,
      };
    },
  },
  {
    field: 'fillAddress',
    label: '完整地址',
    component: 'Input',
    slot: 'slotFillAddress',
    colProps: { span: 24 },
    ifShow: ({ values }) => {
      return values['originUrlType'] === 'custom_url' && values['requestOriginUrl'];
    },
  },
  {
    field: 'slotServerAddress',
    label: '完整地址',
    component: 'Input',
    slot: 'slotServerAddress',
    colProps: { span: 24 },
    ifShow: ({ values }) => {
      return values['originUrlType'] === 'server_url';
    },
  },
  {
    field: 'requestSQLKey',
    label: '键名',
    colProps: { span: 6 },
    component: 'Input',
    defaultValue: 'sql',
    componentProps: {
      disabled: true,
    },
    ifShow: ({ values }) => values['requestContentType'] === '1',
  },
  {
    field: 'requestSQLContent',
    label: '键值',
    colProps: { span: 24 },
    component: 'InputTextArea',
    defaultValue: 'select * from  where',
    componentProps: {
      maxLength: 255,
      placeholder: '请输入键值',
      rows: 6,
    },
    ifShow: ({ values }) => values['requestContentType'] === '1',
  },
  {
    field: 'slot',
    label: '参数设置',
    component: 'Input',
    slot: 'selectMethods',
    colProps: { span: 24 },
    ifShow: ({ values }) => values['requestContentType'] !== '1',
  },
  {
    field: 'testSlot',
    label: '',
    component: 'Input',
    slot: 'testSql',
    colProps: { span: 24 },
    ifShow: ({ values }) => values['requestContentType'] === '1',
  },
];

//表格表头配置
export const editCellTableTHeadConfig = ['序号', '内置参数', '参数名', '是否必须', '操作'];
export const editTestCellTableTHeadConfig = ['内置参数', '参数名', '参数值'];
export const editTestCellTableTHeaderConfig = ['序号', '参数名', '参数值', '是否必须', '操作'];