import InvoiceDetailImportModal from '@/pages/Invoice/components/InvoiceDetailImportModal';
import { InvoiceProjectSelect } from '@/pages/Invoice/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 [invoiceProject, setInvoiceProject] = 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
            setInvoiceProject={setInvoiceProject}
            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: 250,
      render: () => {
        return null;
      },
    },
  ];

  return (
    <>
      <EditableProTable
        headerTitle="可编辑表格"
        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) => {
            console.log('reList' + JSON.stringify(recordList));
            console.log(record);
            console.log('ip' + JSON.stringify(invoiceProject));
            //修改recordList中tid为record.tid的元素,将它的specification属性设置为invoiceProject的specification属性
            const records = recordList.map((item) => {
              if (item.tid === record.tid) {
                item.projectName =
                  '*' +
                  invoiceProject.productAndServiceCatagoryAbbreviation +
                  '*' +
                  invoiceProject?.name;
                item.specification = invoiceProject?.specification;
                item.unit = invoiceProject?.unit;
                item.taxRate = invoiceProject?.taxRate * 100;
              }
              return item;
            });
            console.log('res' + JSON.stringify(records));
            updateDetails(records);
          },
        }}
      />
      <ProCard title="表格数据" headerBordered collapsible defaultCollapsed>
        <ProFormField
          ignoreFormItem
          fieldProps={{
            style: {
              width: '100%',
            },
          }}
          mode="read"
          valueType="jsonCode"
          text={JSON.stringify(details)}
        />
      </ProCard>
    </>
  );
};