import InvoiceDetailImportModal from '@/pages/Invoice/InvoiceVerification/components/InvoiceDetailImportModal';
import { InvoiceProjectSelect } from '@/pages/Invoice/InvoiceVerification/components/InvoiceProjectSelect';
import {
  ActionType,
  EditableProTable,
  ProCard,
  ProColumns,
  ProFormField,
} from '@ant-design/pro-components';
import { useEffect, useRef, useState } from 'react';

export default ({ recordId, details, updateDetails, readOnly }) => {
  const [editableKeys, setEditableRowKeys] = useState([]);
  const ref = useRef<ActionType>();
  useEffect(() => {
    updateDetails(details);
  }, []);

  useEffect(() => {
    setEditableRowKeys(details?.map((item) => item.tid));
  }, [details]);
  const columns: ProColumns[] = [
    {
      title: '项目名称',
      dataIndex: 'projectName',
      width: 200,
      ellipsis: true,
      readonly: readOnly,
      renderFormItem: () => {
        return <InvoiceProjectSelect readOnly={readOnly} />;
      },
    },
    {
      title: '规格型号',
      readonly: readOnly,
      dataIndex: 'specification',
      valueType: 'text',
      ellipsis: true,
    },
    {
      title: '单位',
      readonly: readOnly,
      dataIndex: 'unit',
      valueType: 'text',
      ellipsis: true,
    },
    {
      title: '数量',
      readonly: readOnly,
      dataIndex: 'quantity',
      valueType: 'digit',
      ellipsis: true,
    },
    {
      title: '单价',
      readonly: readOnly,
      dataIndex: 'price',
      valueType: 'digit',
      ellipsis: true,
    },
    {
      title: '金额',
      readonly: readOnly,
      dataIndex: 'totalPrice',
      valueType: 'digit',
      ellipsis: true,
    },
    {
      title: '税率/征收率',
      readonly: true,
      dataIndex: 'taxRate',
      valueType: () => ({
        type: 'percent',
      }),
      ellipsis: true,
    },
    {
      title: '税额',
      readonly: true,
      dataIndex: 'taxPrice',
      valueType: 'digit',
      ellipsis: true,
    },
    {
      title: '操作',
      valueType: 'option',
      width: 100,
      render: () => {
        return null;
      },
    },
  ];

  return (
    <>
      <EditableProTable
        columns={columns}
        actionRef={ref}
        rowKey="tid"
        scroll={{
          x: 960,
        }}
        value={details}
        controlled={true}
        recordCreatorProps={
          readOnly
            ? false
            : {
                newRecordType: 'dataSource',
                record: () => ({
                  tid: Date.now(),
                }),
              }
        }
        toolBarRender={() => {
          return [
            <InvoiceDetailImportModal key={'import'} recordId={recordId} />,
          ];
        }}
        editable={{
          type: 'multiple',
          editableKeys,
          actionRender: (row, config, defaultDoms) => {
            return [defaultDoms.delete];
          },

          onValuesChange: (record, recordList) => {
            //修改recordList中tid为record.tid的元素,将它的specification属性设置为invoiceProject的specification属性
            const records = recordList.map((item) => {
              return item;
            });
            updateDetails(records);
          },
        }}
      />
      {
        <ProCard title="表格数据" headerBordered collapsible defaultCollapsed>
          <ProFormField
            ignoreFormItem
            fieldProps={{
              style: {
                width: '100%',
              },
            }}
            mode="read"
            valueType="jsonCode"
            text={JSON.stringify(details)}
          />
        </ProCard>
      }
    </>
  );
};