import type {
  ProColumns,
  ProCoreActionType,
  ProFormColumnsType,
} from '@ant-design/pro-components';
import { Modal, message, Switch } from 'antd';
import dayjs from 'dayjs';
import TagEditor from '@/components/TagEditor';
import TinyMCEEditor from '@/components/Tinymce';
import UploadImages from '@/components/Upload/UploadImages';
import { dateFormatS } from '@/constants';
import {
  type Category,
  getProdCategoryPage,
  updateProdCategory,
} from '@/services/prod/category-manager';
export const baseTenantColumns: ProColumns<Category>[] = [
  {
    title: '类目名称',
    dataIndex: 'categoryName',
    width: 100,
  },
  {
    title: '类目ID',
    dataIndex: 'categoryId',
  },
  {
    title: '类目层级',
    dataIndex: 'grade',
    hideInSearch: true, // 在搜索表单中隐藏
  },
  {
    title: '父级类目',
    dataIndex: 'parentName',

    hideInSearch: true, // 在搜索表单中隐藏
  },
  {
    title: '排序权重',
    dataIndex: 'sort',
    hideInSearch: true, // 在搜索表单中隐藏
  },
  {
    title: '状态',
    dataIndex: 'status',
    valueType: 'switch',
    hideInSearch: true,
    render: (
      _,
      record: Category,
      _index: number,
      action: ProCoreActionType | undefined,
    ) => (
      <Switch
        checked={record.status === 1}
        checkedChildren="开启"
        unCheckedChildren="禁用"
        onChange={(checked) => {
          Modal.confirm({
            title: '确认操作',
            content: `确认要"${checked ? '启用' : '禁用'}${
              record.categoryName
            }"类目吗?`,
            onOk: async () => {
              console.log(checked);
              await updateProdCategory({
                status: checked ? 1 : 0,
                categoryId: record.categoryId,
              });
              message.success('修改成功');
              action?.reload();
            },
          });
        }}
      />
    ),
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    valueType: 'dateRange',
    hideInSearch: true, // 在搜索表单中隐藏
    render: (_, record: Category) =>
      dayjs(record.createTime).format('YYYY-MM-DD HH:mm:ss'),
  },
];

export const formColumns = (data: { type: string }): ProFormColumnsType[] => {
  console.log(data, 'data');
  return [
    {
      title: '类目',
      dataIndex: 'grade',
      valueType: 'radio',
      fieldProps: {
        options: [
          { label: '一级类目', value: 1 },
          { label: '二级类目', value: 2 },
          { label: '三级类目', value: 3 },
        ],
        disabled: data.type === 'update',
      },
    },
    {
      title: '类目名称',
      dataIndex: 'categoryName',
      formItemProps: {
        rules: [
          {
            required: true,
            message: '请输入用户名',
          },
        ],
      },
    },
    {
      title: '排序权重',
      dataIndex: 'sort',
      valueType: 'digit',
    },
    {
      title: '类目描述',
      dataIndex: 'description',
      valueType: 'textarea',
      renderFormItem: () => {
        return <TinyMCEEditor />;
      },
    },
    {
      title: '关联父级',
      dataIndex: 'parentId',
      valueType: 'select',
      fieldProps: {
        fieldNames: { label: 'categoryName', value: 'categoryId' },
      },
      dependencies: ['grade'],
      request: async (params) => {
        const res = await getProdCategoryPage({
          grade: Number(params.grade) - 1,
        });
        return res;
      },
      renderFormItem: (schema, config, form) => {
        const grade = form.getFieldValue('grade');
        if (Number(grade) === 1) {
          return null;
        }
        return config.defaultRender(schema);
      },
    },
    {
      title: '类目icon',
      dataIndex: 'icon',
      renderFormItem: () => {
        return <UploadImages multiple={true} />;
      },
    },
    {
      title: '类目标签',
      dataIndex: 'tag',
      renderFormItem: () => {
        return (
          <TagEditor
            placeholder="输入标签名称"
            maxCount={10}
            tagProps={{
              color: 'blue',
            }}
          />
        );
      },
    },
    {
      title: '类目状态',
      dataIndex: 'status',
      hideInForm: data.type === 'create',
      renderFormItem: (_schema, _config, form) => {
        const status = form.getFieldValue('status');
        return <span>{status ? '启用' : '禁用'}</span>;
      },
    },
    {
      title: '类目ID',
      dataIndex: 'categoryId',
      hideInForm: data.type === 'create',
      renderFormItem: (_schema, _config, form) => {
        const categoryId = form.getFieldValue('categoryId');
        return <span>{categoryId}</span>;
      },
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      valueType: 'dateTime',
      hideInForm: data.type === 'create',
      renderFormItem: (_schema, _config, form) => {
        const createTime = form.getFieldValue('createTime');
        return <span>{dayjs(createTime).format(dateFormatS)}</span>;
      },
    },
    {
      title: '创建人',
      dataIndex: 'creator',
      hideInForm: data.type === 'create',
      renderFormItem: (_schema, _config, form) => {
        const creator = form.getFieldValue('creator');
        return <span>{creator}</span>;
      },
    },
    {
      title: '更新时间',
      dataIndex: 'updateTime',
      valueType: 'dateTime',
      hideInForm: data.type === 'create',
      renderFormItem: (_schema, _config, form) => {
        const dateTime = form.getFieldValue('dateTime');
        return <span>{dayjs(dateTime).format(dateFormatS)}</span>;
      },
    },
    {
      title: '更新人',
      dataIndex: 'updator',
      hideInForm: data.type === 'create',
      renderFormItem: (_schema, _config, form) => {
        const updator = form.getFieldValue('updator');
        return <span>{updator}</span>;
      },
    },
  ];
};

// {
//   title: "模板内容",
//   dataIndex: "content",
//   valueType: "textarea",
// },
