import ButtonConfirm from '@/components/ButtomConfirm';
import { RESPONSE_CODE } from '@/constants/enum';
import AddOrUpdate from '@/pages/productCollectBill/components/AddOrUpdate';
import Audit from '@/pages/productCollectBill/components/Audit';
import {
  postProductCollectBillDelete,
  postProductCollectBillPage,
  postServiceConstProductCollectBillStatus,
  postServiceConstStores,
} from '@/services';
import { enumToSelect } from '@/utils';
import type { ActionType, ProColumns } from '@ant-design/pro-components';
import { ProTable } from '@ant-design/pro-components';
import { message } from 'antd';
import { useRef } from 'react';

export default () => {
  const actionRef = useRef<ActionType>();
  const columns: ProColumns[] = [
    {
      dataIndex: 'index',
      valueType: 'indexBorder',
      width: 48,
    },
    {
      title: '商品名称',
      dataIndex: 'productName',
      ellipsis: true,
      width: 180,
      hideInSearch: true,
    },
    {
      title: '申领数量',
      dataIndex: 'productNumber',
      ellipsis: true,
      width: 180,
      hideInSearch: true,
    },
    {
      title: '申领人',
      dataIndex: 'createByName',
      ellipsis: true,
      width: 180,
      hideInSearch: true,
    },
    {
      title: '申请时间',
      dataIndex: 'createTime',
      ellipsis: true,
      width: 180,
      hideInSearch: true,
    },
    {
      title: '申领仓库',
      dataIndex: 'warehouseText',
      ellipsis: true,
      width: 180,
      hideInSearch: true,
    },
    {
      title: '审核状态',
      dataIndex: 'auditStatusText',
      ellipsis: true,
      width: 180,
      hideInSearch: true,
    },
    {
      title: '申领备注',
      dataIndex: 'applyRemarks',
      valueType: 'textarea',
      ellipsis: true,
      width: 180,
      hideInSearch: true,
    },
    {
      title: '审核备注',
      dataIndex: 'auditRemarks',
      valueType: 'textarea',
      ellipsis: true,
      width: 180,
      hideInSearch: true,
    },

    {
      title: '商品名称',
      dataIndex: 'productNameLike',
      hideInTable: true,
    },
    {
      title: '申领仓库',
      valueType: 'select',
      key: 'warehouse',
      dataIndex: 'warehouse',
      filters: true,
      onFilter: true,
      hideInTable: true,
      request: async () => {
        const res = await postServiceConstStores();
        console.log('Stores' + JSON.stringify(res));
        console.log('Stores' + JSON.stringify(res.data));
        return enumToSelect(res.data);
      },
    },
    {
      title: '申领人',
      dataIndex: 'createByNameLike',
      hideInTable: true,
    },
    {
      title: '申请时间',
      valueType: 'dateTimeRange',
      hideInTable: true,
      search: {
        transform: (value) => {
          if (value) {
            return {
              createTimeGe: value[0],
              createTimeLe: value[1],
            };
          }
        },
      },
    },
    {
      title: '审核状态',
      valueType: 'select',
      key: 'auditStatus',
      dataIndex: 'auditStatus',
      filters: true,
      onFilter: true,
      hideInTable: true,
      request: async () => {
        const res = await postServiceConstProductCollectBillStatus();
        console.log('auditStaus' + JSON.stringify(res));
        console.log('auditStaus' + JSON.stringify(res.data));
        return enumToSelect(res.data);
      },
    },
    {
      title: '操作',
      valueType: 'option',
      key: 'option',
      render: ({ record }) => [
        record.paths?.includes('UPDATE') && (
          <AddOrUpdate
            record={record}
            onFinish={() => {
              actionRef.current?.reload();
            }}
          />
        ),
        record.paths?.includes('UPDATE') && (
          <ButtonConfirm
            key="delete"
            className="p-0"
            title={'确认删除该记录？'}
            text="删除"
            onConfirm={async () => {
              let res = await postProductCollectBillDelete({
                query: { id: record.id },
              });
              if (res) {
                message.success(res.message);
                actionRef.current?.reload();
              }
            }}
          />
        ),
        record.paths?.includes('AUDIT') && (
          <Audit
            recordId={record.id}
            onClose={() => {
              actionRef.current?.reload();
            }}
          />
        ),
      ],
    },
  ];
  return (
    <ProTable
      columns={columns}
      actionRef={actionRef}
      cardBordered
      request={async (params) => {
        const res = await postProductCollectBillPage({
          data: {
            ...params,
          },
        });
        if (res.result === RESPONSE_CODE.SUCCESS) {
          return {
            data: res?.data?.data,
            total: res?.data?.total || 0,
          };
        }
        return {
          data: [],
          success: false,
        };
      }}
      editable={{
        type: 'multiple',
      }}
      columnsState={{
        persistenceKey: 'pro-table-singe-demos',
        persistenceType: 'localStorage',
        defaultValue: {
          option: { fixed: 'right', disable: true },
        },
        onChange(value) {
          console.log('value: ', value);
        },
      }}
      rowKey="id"
      search={{
        labelWidth: 'auto',
      }}
      options={{
        setting: {
          listsHeight: 400,
        },
      }}
      form={{
        // 由于配置了 transform，提交的参数与定义的不同这里需要转化一下
        syncToUrl: (values, type) => {
          if (type === 'get') {
            return {
              ...values,
              created_at: [values.startTime, values.endTime],
            };
          }
          return values;
        },
      }}
      pagination={{
        pageSize: 5,
        onChange: (page) => console.log(page),
      }}
      dateFormatter="string"
      headerTitle="高级表格"
      scroll={{ x: 'max-content' }}
      toolBarRender={() => [
        <AddOrUpdate
          key="AddOrUpdate"
          record={null}
          onFinish={() => {
            actionRef.current?.reload();
          }}
        />,
      ]}
    />
  );
};