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

// 表格配置
export const columns: BasicColumn[] = [
  {
    title: '接口名称',
    dataIndex: 'interfaceName',
    width: 80,
  },
  {
    title: '请求方式',
    dataIndex: 'requestContentType',
    width: 120,
    format(text) {
      return text === '0' ? '普通请求' : text === '1' ? 'SQL请求' : 'websocket请求';
    },
  },
  {
    title: '接口内容',
    dataIndex: 'content',
    width: 120,
  },
  {
    title: '状态',
    dataIndex: 'status',
    width: 120,
    customRender: ({ record }) => {
      const status = record.status;
      const color = status == 0 ? 'green' : 'red';
      const text = status == 0 ? '发布' : '未发布';
      return h(Tag, { color: color }, () => text);
    },
  },
];

//模拟数据
export const list = [
  {
    interfaceName: '传感器趋势图',
    requestContentType: '0',
    content: '/api/sensor',
    status: 0,
  },
  {
    interfaceName: '2co趋势图',
    requestContentType: '2',
    content: '/api/2co',
    status: 1,
  },
  {
    interfaceName: 'temp趋势图',
    requestContentType: '1',
    content: '/api/temp',
    status: 1,
  },
];

//表单配置
export const schemas: FormSchema[] = [
  {
    field: 'interfaceName',
    label: '接口名称',
    colProps: { span: 24 },
    required: true,
    component: 'Input',
    componentProps: {
      maxLength: 64,
      placeholder: '请输入接口名称',
    },
  },
  {
    field: 'requestContentType',
    label: '请求方式',
    component: 'ApiSelect',
    required: true,
    colProps: { span: 24 },
    defaultValue: '0',
    componentProps: ({ formActionType }) => {
      const { setFieldsValue, updateSchema } = formActionType;
      return {
        api: findDictItemByCode,
        params: {
          dictCode: 'dataview_select_methods',
        },
        placeholder: '请选择请求方式',
        labelField: 'itemText',
        valueField: 'itemValue',
        getPopupContainer: () => document.body,
        async onChange(e) {
          setFieldsValue({ requestHttpType: e === '1' ? 'POST' : 'GET' });
          const res = await findDictItemByCode({
            dictCode: e === '1' ? 'dataview_select_sql_request' : 'dataview_select_request',
          });
          const options = res.map((m) => ({ label: m.itemText, value: m.itemValue }));
          updateSchema({
            field: 'requestHttpType',
            componentProps: {
              options,
            },
          });
        },
      };
    },
  },
  {
    field: 'requestOriginUrl',
    label: '源地址',
    colProps: { span: 24 },
    required: true,
    component: 'Input',
    componentProps: {
      maxLength: 64,
      placeholder: '请输入源地址',
    },
  },
  {
    field: 'requestHttpType',
    label: '请求类型',
    component: 'ApiSelect',
    required: true,
    colProps: { span: 6 },
    defaultValue: 'GET',
    componentProps: {
      placeholder: '请选择请求类型',
      api: findDictItemByCode,
      params: {
        dictCode: 'dataview_select_request',
      },
      labelField: 'itemText',
      valueField: 'itemValue',
    },
    ifShow: ({ values }) =>
      values['requestContentType'] === '0' || values['requestContentType'] === '1',
  },
  {
    field: 'requestUrl',
    label: '',
    component: 'Input',
    required: true,
    colProps: { span: 18 },
    componentProps: {
      maxLength: 64,
      placeholder: '请输入接口地址',
    },
    ifShow: ({ values }) =>
      values['requestContentType'] === '0' || values['requestContentType'] === '1',
  },
  {
    field: 'sqlKey',
    label: '键名',
    colProps: { span: 12 },
    component: 'Input',
    defaultValue: 'sql',
    componentProps: {
      disabled: true,
    },
    ifShow: ({ values }) => values['requestContentType'] === '1',
  },
  {
    field: 'sqlValue',
    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',
  },
];