import { postServiceOrderUpdateHirePurchase } from '@/services';
import {
  EditableProTable,
  ModalForm,
  ProColumns,
  ProForm,
} from '@ant-design/pro-components';
import { Form } from 'antd';
import { useState } from 'react';

// import { cloneDeep } from 'lodash';
export default ({ setVisible, datas, onClose }) => {
  const [form] = Form.useForm<{ name: string; company: string }>();
  type DataSourceType = {
    id: React.Key;
    hirePurchaseMethod?: string;
    hirePurchaseMethodName?: string;
    money?: number;
    updateTime?: string;
    notes?: string;
  };
  const defaultData: DataSourceType[] = [
    {
      id: 1,
      hirePurchaseMethod: 'ADVANCE_CHARGE',
      hirePurchaseMethodName: '预付款',
      money: undefined,
      updateTime: undefined,
      notes: undefined,
    },
    {
      id: 2,
      hirePurchaseMethod: 'PAYMENT_FOR_SHIPMENT',
      hirePurchaseMethodName: '发货款',
      money: undefined,
      updateTime: undefined,
      notes: undefined,
    },
    {
      id: 3,
      hirePurchaseMethod: 'ACCEPTANCE_PAYMENT',
      hirePurchaseMethodName: '验收款',
      money: undefined,
      updateTime: undefined,
      notes: undefined,
    },
    {
      id: 4,
      hirePurchaseMethod: 'BALANCE_PAYMENT',
      hirePurchaseMethodName: '尾款',
      money: undefined,
      updateTime: undefined,
      notes: undefined,
    },
  ];
  const [editableKeys, setEditableRowKeys] = useState<React.Key[]>(() =>
    // defaultData.map((item) => item.id),
    [1, 2, 3, 4],
  );
  const columns: ProColumns<DataSourceType>[] = [
    {
      title: '款项',
      dataIndex: 'hirePurchaseMethodName',
      editable: false,
      width: '10%',
    },
    {
      title: '已收金额',
      dataIndex: 'money',
      valueType: 'digit',
      width: '15%',
    },
    {
      title: '收款时间',
      dataIndex: 'updateTime',
      valueType: 'dateTime',
      width: '25%',
    },
    {
      title: '备注',
      dataIndex: 'receiptsNotes',
    },
  ];
  return (
    <>
      <ModalForm<{
        name: string;
        company: string;
      }>
        width={1100}
        open
        title="收款记录"
        form={form}
        autoFocusFirstInput
        modalProps={{
          okText: '保存',
          cancelText: '取消',
          destroyOnClose: true,
          onCancel: () => {
            setVisible(false);
          },
        }}
        onFinish={async (values) => {
          let res = await postServiceOrderUpdateHirePurchase({
            data: {
              mainOrderId: datas[0].id,
              list: values.dataSource,
            },
          });
          console.log(res);
          onClose();
        }}
        onOpenChange={setVisible}
      >
        <ProForm.Item
          label=""
          name="dataSource"
          initialValue={defaultData}
          trigger="onValuesChange"
        >
          <EditableProTable<DataSourceType>
            rowKey="id"
            toolBarRender={false}
            columns={columns}
            recordCreatorProps={{
              newRecordType: 'dataSource',
              position: 'top',
              record: () => ({
                id: Date.now(),
                addonBefore: 'ccccccc',
                decs: 'testdesc',
              }),
              style: {
                display: 'none',
              },
            }}
            editable={{
              type: 'multiple',
              editableKeys,
              onChange: setEditableRowKeys,
              actionRender: (row, _, dom) => {
                return [dom.delete];
              },
            }}
          />
        </ProForm.Item>

        {/* <ProForm.Group>
          <ProFormText
            width="sm"
            name="name1"
            label="款项"
            tooltip="最长为 24 位"
            initialValue={"预付款"}
            disabled
            placeholder="请输入名称"
          />

          <ProFormText
            width="sm"
            name="company"
            label="收款时间"
            placeholder="请输入名称"
          />

          <ProFormText
            width="sm"
            name="price"
            label="收款金额"
            placeholder="请输入名称"
          />

          <ProFormText
            width="sm"
            name="notes"
            label="备注"
            placeholder="请输入名称"
          />
        </ProForm.Group>

        <ProForm.Group>
          <ProFormText
            width="sm"
            name="name2"
            initialValue={"发货款"}
            disabled
            tooltip="最长为 24 位"
            placeholder="请输入名称"
          />

          <ProFormText
            width="sm"
            name="company"
            placeholder="请输入名称"
          />

          <ProFormText
            width="sm"
            name="price"
            placeholder="请输入名称"
          />

          <ProFormText
            width="sm"
            name="notes"
            placeholder="请输入名称"
          />
        </ProForm.Group>

        <ProForm.Group>
          <ProFormText
            width="sm"
            name="name3"
            initialValue={"验收款"}
            disabled
            tooltip="最长为 24 位"
            placeholder="请输入名称"
          />

          <ProFormText
            width="sm"
            name="company"
            placeholder="请输入名称"
          />

          <ProFormText
            width="sm"
            name="price"
            placeholder="请输入名称"
          />

          <ProFormText
            width="sm"
            name="notes"
            placeholder="请输入名称"
          />
        </ProForm.Group>

        <ProForm.Group>
          <ProFormText
            width="sm"
            name="name4"
            disabled
            initialValue={"尾款"}
            tooltip="最长为 24 位"
            placeholder="请输入名称"
          />

          <ProFormText
            width="sm"
            name="company"
            placeholder="请输入名称"
          />

          <ProFormText
            width="sm"
            name="price"
            placeholder="请输入名称"
          />

          <ProFormText
            width="sm"
            name="notes"
            placeholder="请输入名称"
          />
        </ProForm.Group> */}
      </ModalForm>
    </>
  );
};