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

export const connectColumns: BasicColumn[] = [
  {
    title: '名称',
    dataIndex: 'fname',
    width: 100,
    
  },
  {
    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: 150,
  },
  {
    title: '外键',
    width: 150,
    key: 'fieldAction',
    dataIndex: 'fieldAction',
    // slots: { customRender: 'fieldAction' },
  },
  {
    title: '关联表',
    width: 150,
    key: 'relationTabAction',
    dataIndex: 'relationTabAction',
    // slots: { customRender: 'relationTabAction' },
  },
  {
    title: '关联主键',
    width: 150,
    key: 'relationFieldAction',
    dataIndex: 'relationFieldAction',
    // slots: { customRender: 'relationFieldAction' },
  },
  // {
  //   title: '外键',
  //   editComponent: 'ApiSelect',
  //   width: 180,
  //   dataIndex: 'field',
  //   editable: true, 
  //   edit: true,
  //   editComponentProps: ({ record }) => {
  //     return {
  //       api: () => getOutKeyList({tableNames: record.f_TableName}).then((data: AreaRespVO[]) => {
  //         return data[0].lr_db_codecolumnsList
  //       }),
  //       params: {},
  //       // 接口参数
  //       resultField: 'data',
  //       labelField: 'f_DbColumnName',
  //       valueField: 'f_DbColumnName',
  //     };
  //   }
  // },
  
  // {
  //   title: '关联表',
  //   dataIndex: 'relationName',
  //   editComponent: 'Select',
  //   width: 180,
  //   editable: true, 
  //   edit: true,
  //   editComponentProps: ({ record }) => {
  //     console.log('record123',record)
  //     record.forEach(item =>{
  //       if(item.name !== record.f_TableName){
  //         arr.push({
  //           label: item.f_TableName,
  //           value: item.f_TableName,
  //         })
  //       }
  //     })
  //     return {
  //       options: arr,
  //       onChange: (e: any) => {
           
  //       }
  //     }
  //   },
  //   },
  // },
  // {
  //   title: '关联主键',
  //   editComponent: 'ApiSelect',
  //   width: 180,
  //   dataIndex: 'relationField',
  //   editable: true, 
  //   edit: true,
  //   editComponentProps: ({ record }) => {
  //     return {
  //       api: () => getOutKeyList({tableNames: record.f_TableName}).then((data: AreaRespVO[]) => {
  //         return data[0].lr_db_codecolumnsList
  //       }),
  //       params: {},
  //       // 接口参数
  //       resultField: 'data',
  //       labelField: 'f_DbColumnName',
  //       valueField: 'f_DbColumnName',
  //     };
      
  //   },
  // },
  
];
const isButton = (formType: string) => formType === 0;
export const formSchema: FormSchema[] = [ 
  {
    field: 'name',
    component: 'Input',
    label: '名称',
    colProps: {
      span: 24,
    },
    defaultValue: '',
    required: true,
    componentProps: {
      placeholder: '请输入',
    },
  },
  {
    field: 'category',
    component: 'ApiSelect',
    label: '分类',
    required: true,
    colProps: {
      span: 24,
    },
    componentProps: ({ formActionType, formModel }) => {
      return {
        api: getFormsTypeList, 
        params:{
          code :'FormSort'
        }, 
        resultField: '',
        labelField: 'itemName',
        valueField: 'itemValue',
      };
    },
  },
  {
    field: 'DbCode',
    component: 'ApiSelect',
    label: '数据库',
    required: true,
    colProps: {
      span: 24,
    },
    componentProps: {
      options: [
        { label: '系统数据库', value: 'lrsystemdb' },
      ],
    },
  },
  {
    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 },
      ]
    },
    colProps: { lg: 24, md: 24 },
  },
  {
    field: 'description',
    component: 'InputTextArea',
    label: '描述',
    colProps: {
      span: 24,
    },
    defaultValue: '',
    componentProps: {
      placeholder: '请输入',
    },
  },
  {
    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 }) => !isButton(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;',
    },
  }
]
 