import EllipsisDiv from '@/components/Div/EllipsisDiv';
import { postCanrdApiUserCenterInfo } from '@/services';
import { ModalForm, ProTable } from '@ant-design/pro-components';
import { Form } from 'antd';
import { BALANCE_CHANGE_COLUMNS } from '../constant';
import '../index.less';

// import { cloneDeep } from 'lodash';
export default ({ setVisible, userInfoObj, onClose }) => {
  const [form] = Form.useForm<{ name: string; company: string }>();
  const uid = userInfoObj?.uid;

  const balanceColumnsInit = () => {
    let columns = BALANCE_CHANGE_COLUMNS.map((item) => {
      let newItem = { ...item };
      let dataIndex = item.dataIndex;

      newItem.render = (text, record) => {
        let textValue = record[dataIndex];
        return <EllipsisDiv text={textValue} />;
      };

      return newItem;
    });
    return columns;
  };

  return (
    <div className="prepaid-index">
      <ModalForm<{
        name: string;
        company: string;
      }>
        width={1000}
        open
        title="余额变动记录"
        form={form}
        autoFocusFirstInput
        submitter={{
          submitButtonProps: {
            style: {
              display: 'none',
            },
          },
        }}
        modalProps={{
          okText: '通过',
          cancelText: '关闭',
          destroyOnClose: true,
          onCancel: () => {
            setVisible(false);
          },
        }}
        onFinish={async (values) => {
          console.log(values);
          onClose();
        }}
        onOpenChange={setVisible}
      >
        <ProTable
          columns={balanceColumnsInit()}
          cardBordered
          pagination={{
            pageSize: 10,
          }}
          request={async (params) => {
            const res = await postCanrdApiUserCenterInfo({
              data: { ...params, uid: uid, type: 4 },
            });
            return {
              data: res?.data?.data || [],
              total: res?.data?.total || 0,
            };
          }}
          columnsState={{
            persistenceKey: 'pro-table-singe-balance',
            persistenceType: 'localStorage',
            defaultValue: {
              option: { fixed: 'right', disable: true },
            },
            onChange(value) {
              console.log('value: ', value);
            },
          }}
          rowKey="id"
          search={false}
          options={{
            setting: {
              listsHeight: 400,
            },
          }}
          form={{}}
          dateFormatter="string"
          headerTitle="余额变动记录"
          scroll={{ x: 1400 }}
          toolBarRender={() => []}
        />
      </ModalForm>
    </div>
  );
};