import type { ProColumns } from '@ant-design/pro-components';
import { EditableProTable, ProFormRadio } from '@ant-design/pro-components';
import { Form } from 'antd';
import React, { useEffect, useState } from 'react';

const waitTime = (time: number = 100) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(true);
    }, time);
  });
};

// type DataSourceType = {
//     count?: number;
//     id: React.Key;
//     deviceModel?: string;
//     deviceName?: string;
//     price?: number;
//     unitPrice?: number;
// };

export default ({ productBody, EditProductBody }) => {
  const [editableKeys, setEditableRowKeys] = useState<React.Key[]>([]);
  const [dataSource, setDataSource] = useState<readonly DataSourceType[]>([]);
  const [form] = Form.useForm<{ name: string; company: string }>();
  const [position, setPosition] = useState<'top' | 'bottom' | 'hidden'>(
    'hidden',
  );
  function getDataSourece() {
    if (productBody.length !== 0) {
      setDataSource(productBody);
    }
  }
  function setEditProductBody(value) {
    const modifiedArray = value.map((obj) => {
      if (obj.dId && Number(obj.dId) <= 1000) {
        return {
          ...obj,
          count: obj.count,
          dId: null,
          deviceModel: obj.deviceModel,
          deviceName: obj.deviceName,
          price: obj.price,
          unitPrice: obj.unitPrice,
        };
      } else {
        return obj;
      }
    });

    EditProductBody(modifiedArray);
    setDataSource(value);
  }

  useEffect(() => {
    getDataSourece();
  }, [productBody]);

  type DataSourceType = {
    id: React.Key;
    count: number;
    dId?: number;
    deviceModel: string;
    deviceName: string;
    price: number;
    unitPrice: number;
  };

  const columns: ProColumns<DataSourceType>[] = [
    {
      title: '设备编号',
      dataIndex: 'dId',
      hideInTable: true,
    },
    {
      title: '设备名称',
      dataIndex: 'deviceName',
      formItemProps: () => {
        return {
          rules: [{ required: true, message: '此项为必填项' }],
        };
      },
    },
    {
      title: '设备型号',
      dataIndex: 'deviceModel',
      width: '20%',
      formItemProps: () => {
        return {
          rules: [{ required: true, message: '此项为必填项' }],
        };
      },
    },
    {
      title: '数量',
      dataIndex: 'count',
      onChange: (e) => {
        const unitPrice = form.getFieldValue(`data[${rowIndex}].unitPrice`);
        form.setFieldsValue({
          [`data[${rowIndex}].price`]: e * unitPrice,
        });
      },
      formItemProps: () => {
        return {
          rules: [{ required: true, message: '此项为必填项' }],
        };
      },
    },
    {
      title: '单价',
      dataIndex: 'unitPrice',
      formItemProps: () => {
        return {
          rules: [{ required: true, message: '此项为必填项' }],
        };
      },
    },
    {
      title: '总价',
      dataIndex: 'price',
      formItemProps: () => {
        return {
          rules: [{ required: true, message: '此项为必填项' }],
        };
      },
    },
  ];

  return (
    <>
      <EditableProTable<DataSourceType>
        className="product-detail-index"
        rowKey="dId"
        toolbar={{ style: { display: 'none' } }}
        ghost={true}
        scroll={{
          x: 960,
        }}
        recordCreatorProps={
          position !== 'hidden'
            ? {
                position: position as 'top',
                record: () => ({ dId: (Math.random() * 1000).toFixed(0) }),
              }
            : false
        }
        loading={false}
        toolBarRender={() => [
          <ProFormRadio.Group
            key="render"
            fieldProps={{
              value: position,
              onChange: (e) => setPosition(e.target.value),
            }}
          />,
        ]}
        columns={columns}
        request={dataSource}
        value={dataSource}
        onChange={setEditProductBody}
        editable={{
          type: 'multiple',
          editableKeys,
          onSave: async () => {
            await waitTime(500);
          },
          onChange: setEditableRowKeys,
        }}
      />
    </>
  );
};