import { BasicColumn, FormSchema } from '@/components/Table';
import { h } from 'vue';
import { Tag, Switch } from 'ant-design-vue';
import { functionUpdateState } from '@/api/demo/formScheme';
import { useMessage } from '@/hooks/web/useMessage';

type CheckedType = boolean | string | number;

export const columns: BasicColumn[] = [
  {
    title: '名称',
    dataIndex: 'name',
    width: 120,
  },
  {
    title: '分类',
    dataIndex: 'category',
    width: 80,
  },
  {
    title: '类型',
    dataIndex: 'formType',
    width: 80,
    customRender: ({ record }) => {
      const formType = record.formType;
      const enable = ~~formType === 0;
      const color = enable ? 'green' : 'yellow';
      const text = enable ? '常规表单' : '视图表单';
      return h(Tag, { color: color }, () => text);
    },
  },
  {
    title: '状态',
    dataIndex: 'enabledMark',
    width: 80,
    customRender: ({ record }) => {
      if (!record.type || record.type === 2) {
        const color = 'blue';
        const text = '草稿';
        return h(Tag, { color: color }, () => text);
      } else {
        return h(Switch, {
          checked: record.enabledMark === 1,
          checkedChildren: '启用',
          unCheckedChildren: '停用',
          loading: record.pendingStatus,
          onChange(checked: CheckedType) {
            record.pendingStatus = true;
            const newStatus = checked ? 1 : 0;
            const { createMessage } = useMessage();
            functionUpdateState({ id: record.id, state: newStatus })
              // , state: newStatus
              .then(() => {
                record.enabledMark = newStatus;
                createMessage.success(`已成功修改表单状态`);
              })
              .catch(() => {
                createMessage.error('修改表单状态失败');
              })
              .finally(() => {
                record.pendingStatus = false;
              });
          },
        });
      }
    },
  },
  {
    title: '创建人',
    dataIndex: 'createUserName',
    width: 80,
  },
  {
    title: '创建时间',
    dataIndex: 'createDate',
    width: 120,
  },
];

const colProps = {
  span: 24,
};

export const searchFormSchema: FormSchema[] = [
  {
    field: 'keyWord',
    label: '名称',
    component: 'Input',
    colProps: { span: 8 },
  },
];

export const formSchema: FormSchema[] = [
  {
    field: 'itemDetailId',
    component: 'Input',
    ifShow: false,
  },
  {
    field: 'itemId',
    label: '项目ID',
    component: 'Input',
    ifShow: false,
  },
  {
    field: 'parentId',
    label: '上级',
    component: 'TreeSelect',
    componentProps: {
      fieldNames: {
        label: 'itemName',
        key: 'itemId',
        value: 'itemValue',
      },
      getPopupContainer: () => document.body,
    },
    colProps,
  },
  {
    field: 'itemCode',
    component: 'Input',
    ifShow: false,
  },
  {
    field: 'itemName',
    label: '项目名',
    component: 'Input',
    required: true,
    colProps,
  },
  {
    field: 'itemValue',
    label: '项目值',
    component: 'Input',
    required: true,
    colProps,
  },
  {
    field: 'quickQuery',
    component: 'Input',
    ifShow: false,
  },
  {
    field: 'simpleSpelling',
    component: 'Input',
    ifShow: false,
  },
  {
    field: 'isDefault',
    component: 'Input',
    ifShow: false,
  },
  {
    field: 'sortCode',
    label: '排序',
    component: 'InputNumber',
    required: true,
    colProps,
  },
  {
    field: 'deleteMark',
    component: 'Input',
    ifShow: false,
  },
  {
    field: 'enabledMark',
    label: '状态',
    component: 'Switch',
    colProps,
    ifShow: false,
    render: (scope) => {
      return h('Switch', {
        props: {
          value: scope.model?.enabledMark === 1,
        },
      });
    },
  },
  {
    field: 'description',
    label: '备注',
    component: 'InputTextArea',
    colProps,
  },
  {
    field: 'createDate',
    component: 'Input',
    ifShow: false,
  },
  {
    field: 'createUserId',
    component: 'Input',
    ifShow: false,
  },
  {
    field: 'createUserName',
    component: 'Input',
    ifShow: false,
  },
  {
    field: 'modifyDate',
    component: 'Input',
    ifShow: false,
  },
  {
    field: 'modifyUserId',
    component: 'Input',
    ifShow: false,
  },
  {
    field: 'modifyUserName',
    component: 'Input',
    ifShow: false,
  },
];
