import { BasicColumn, FormSchema } from '@/components/Table';
import { getFormsTypeList, getDataBaseCodeList } from '@/api/formdesign/index';
import { h } from 'vue';
import { Tag } from 'ant-design-vue';

export const connectColumns: BasicColumn[] = [
  {
    title: '名称',
    dataIndex: 'fname',
    width: 100,
    key: 'fname',
  },
  {
    title: '表名',
    dataIndex: 'name',
    width: 120,
  },
  {
    title: '比较字段',
    width: 150,
    key: 'cfield',
    dataIndex: 'cfield',
  },
  {
    title: '外键',
    width: 150,
    key: 'field',
    dataIndex: 'field',
  },
  {
    title: '关联表',
    width: 150,
    key: 'relationName',
    dataIndex: 'relationName',
  },
  {
    title: '关联主键',
    width: 150,
    key: 'relationField',
    dataIndex: 'relationField',
  },
];

export const viewsColumns: BasicColumn[] = [
  {
    title: '类别',
    dataIndex: 'type',
    width: 50,
    customRender: ({ record }) => {
      const status = record.type;
      let enable;
      if (status == 'main') {
        enable = true;
      } else {
        enable = false;
      }
      const color = enable ? '#67c23a' : '#e6a23c';
      const text = enable ? '主' : '子';
      return h(Tag, { color: color }, () => text);
    },
  },
  {
    title: '名称',
    dataIndex: 'name',
    width: 150,
  },
  {
    title: '关联字段',
    width: 150,
    key: 'relationFieldConnect',
    dataIndex: 'relationFieldConnect',
  },
];

export const columns: BasicColumn[] = [
  {
    title: '类别',
    dataIndex: 'type',
    width: 50,
    customRender: ({ record }) => {
      const status = record.type;
      let enable;
      if (status == 'main') {
        enable = true;
      } else {
        enable = false;
      }
      const color = enable ? '#67c23a' : '#e6a23c';
      const text = enable ? '主表' : '子表';
      return h(Tag, { color: color }, () => text);
    },
  },
  {
    title: '表名',
    dataIndex: 'name',
    width: 140,
  },
  {
    title: '外键',
    width: 130,
    key: 'fieldAction',
    dataIndex: 'fieldAction',
  },
  {
    title: '关联表',
    width: 130,
    key: 'relationTabAction',
    dataIndex: 'relationTabAction',
  },
  {
    title: '关联主键',
    width: 130,
    key: 'relationFieldAction',
    dataIndex: 'relationFieldAction',
  },
];
const isButton = (formType: number) => formType === 0;
const isButton2 = (formType: number) => formType === 1;
export const formSchema: FormSchema[] = [
  {
    field: 'id',
    component: 'Input',
    label: 'id',
    ifShow: false,
  },
  {
    field: 'schemeId',
    component: 'Input',
    label: 'schemeId',
    ifShow: false,
  },
  {
    field: 'name',
    component: 'Input',
    label: '名称',
    colProps: {
      span: 24,
    },
    defaultValue: '',
    required: true,
    componentProps: {
      placeholder: '请输入',
    },
  },
  {
    field: 'category',
    component: 'ApiSelect',
    label: '分类',
    required: true,
    colProps: {
      span: 24,
    },
    componentProps: () => {
      return {
        api: getFormsTypeList,
        params: {
          code: 'FormSort',
        },
        resultField: '',
        labelField: 'itemName',
        valueField: 'itemValue',
      };
    },
  },
  {
    field: 'DbCode',
    component: 'ApiTreeSelect',
    label: '数据库',
    required: true,
    colProps: {
      span: 24,
    },
    componentProps: {
      api: () =>
        getDataBaseCodeList({}).then((data: Recordable) => {
          return new Promise((resolve) => {
            resolve(data);
          });
        }),
      labelField: 'text',
      valueField: 'value',
      async: true,
      // onChange: (e, v) => {
      //   console.log('ApiTreeSelect====>:', e, v);
      // },
      onLoadData: ({ treeData, resolve, treeNode }) => {
        setTimeout(() => {
          const children: Recordable[] = [];
          treeData.value.forEach((item) => {
            if (item.id == treeNode.id) {
              if (item.childNodes) {
                item.childNodes.forEach((val) => {
                  children.push({
                    text: val.text,
                    value: val.value,
                  });
                });
              }
            }
          });
          children.forEach((item) => {
            item.isLeaf = false;
            item.children = [];
          });
          treeNode.dataRef.children = children;
          treeData.value = [...treeData.value];
          resolve();
          return;
        }, 300);
      },
    },
  },
  {
    field: 'enabledMark',
    label: '状态',
    component: 'RadioButtonGroup',
    defaultValue: 1,
    componentProps: {
      options: [
        { label: '是', value: 1 },
        { label: '否', value: 0 },
      ],
    },
  },
  {
    field: 'formType',
    label: '类型',
    component: 'ApiRadioGroup',
    defaultValue: 0,
    componentProps: {
      options: [
        { label: '常规表单', value: 0 },
        { label: '视图表单', value: 1 },
        { label: '自动建表', value: 2 },
      ],
    },
    colProps: { lg: 24, md: 24 },
    dynamicDisabled: ({ values }) => {
      return values.id;
    },
  },
  {
    field: 'description',
    component: 'InputTextArea',
    label: '描述',
    colProps: {
      span: 24,
    },
    defaultValue: '',
    componentProps: {
      placeholder: '请输入',
    },
  },
  {
    field: 'createUserName',
    component: 'Input',
    label: '创建人',
    ifShow: false,
  },
  {
    field: 'createDate',
    component: 'Input',
    label: '创建时间',
    ifShow: false,
  },
  {
    field: 'field1',
    label: '',
    colProps: {
      span: 24,
    },
    slot: 'addDatabaseTableSlot',
    ifShow: ({ values }) => isButton(values.formType),
  },
  {
    field: 'field1',
    label: '',
    colProps: {
      span: 24,
    },
    slot: 'addDatabaseContantSlot',
    ifShow: ({ values }) => isButton(values.formType),
  },
  {
    field: 'field1',
    label: '',
    colProps: {
      span: 24,
    },
    slot: 'addViewsDatabaseTableSlot',
    ifShow: ({ values }) => isButton2(values.formType),
  },
];

export const formSqlSchema: FormSchema[] = [
  {
    field: 'name',
    component: 'Input',
    label: '名称',
    colProps: {
      span: 24,
    },
    defaultValue: '',
    required: true,
    componentProps: {
      placeholder: '请输入',
    },
  },
  {
    field: 'sql',
    component: 'InputTextArea',
    label: 'SQL',
    colProps: {
      span: 24,
    },
    defaultValue: '',
    required: true,
    componentProps: {
      placeholder: '@param 与主表关联参数值，比如 where id = @param;',
    },
  },
];
