import { RESPONSE_CODE } from '@/constants/enum';
import { postServiceOrderSendProduct } from '@/services';
import { enumToSelect } from '@/utils';
import {
  ProColumns,
  ProForm,
  ProFormSelect,
  ProFormText,
  ProTable,
} from '@ant-design/pro-components';
import { Button, Input, InputNumber, Modal, Select, message } from 'antd';
import { cloneDeep } from 'lodash';
import { useEffect, useRef, useState } from 'react';
import { LOGISTICS_STATUS_OPTIONS } from '../constant';

const DeliverModal = ({
  data: propsData,
  isSendProduct,
  setVisible,
  onClose,
}) => {
  const [data, setData] = useState(propsData || {});
  const form = useRef();

  useEffect(() => {
    setData(propsData);
  }, [propsData]);

  const handleChange = (key: string, index: number, obj: any) => {
    const newData = cloneDeep(data);
    if (typeof obj !== 'object') {
      newData[index][key] = obj;
    } else {
      newData[index][key] = obj.target?.value;
    }
    setData(newData);
  };
  const columns: ProColumns<any>[] = [
    {
      title: 'ID',
      width: 80,
      dataIndex: 'id',
      render: (_, record) => <Input value={record.id} disabled />,
    },
    {
      title: '商品编号',
      width: 80,
      dataIndex: 'productCode',
      render: (_, record) => <Input value={record.productCode} disabled />,
    },
    {
      title: '商品名称',
      dataIndex: 'productName',
      align: 'right',
      width: 80,
      render: (_, record) => <Input value={record.productName} disabled />,
    },
    {
      title: '商品参数',
      dataIndex: 'parameters',
      align: 'right',
      width: 80,
      render: (_, record) => <Input value={record.parameters} disabled />,
    },
    {
      title: '商品数量',
      width: 80,
      dataIndex: 'status',
      render: (_, record) => <InputNumber value={record.quantity} disabled />,
    },
    {
      title: '包裹数量',
      width: 80,
      dataIndex: 'packageNumber',
      render: (_, record, index) => (
        <InputNumber
          min={1}
          value={record.packageNumber}
          defaultValue={1}
          onChange={(value) => handleChange('packageNumber', index, value)}
        />
      ),
    },
    {
      title: '物流方式',
      width: 150,
      key: 'logisticsMethod',
      render: (_, record, index) => (
        <Select
          style={{ minWidth: 150 }}
          placeholder="请输入物流方式"
          value={record.logisticsMethod}
          options={enumToSelect(LOGISTICS_STATUS_OPTIONS)}
          onChange={(value) => {
            handleChange('logisticsMethod', index, value);
          }} //修改时更改record数据
        />
      ),
    },
    {
      title: '物流单号',
      width: 150,
      key: 'serialNumber',
      render: (_, record, index) => (
        <Input
          placeholder="请输入物流单号"
          value={record.serialNumber}
          onChange={(value) => {
            handleChange('serialNumber', index, value);
          }}
        />
      ),
    },
  ];

  return (
    <Modal
      open
      width={900}
      title={isSendProduct ? '发货' : '修改发货信息'}
      onOk={async () => {
        //请求体封装
        let list = data.map((item) => {
          return {
            id: item.id,
            logisticsMethod: item.logisticsMethod,
            serialNumber: item.serialNumber,
            packageNumber:
              item.packageNumber === null || item.packageNumber === undefined
                ? 1
                : item.packageNumber,
          };
        });
        let body = { id: data[0].mainOrderId, list: list, flag: false };
        if (isSendProduct) {
          body.flag = true;
        }
        //发货请求
        const res = await postServiceOrderSendProduct({ data: body });
        if (res.result === RESPONSE_CODE.SUCCESS) {
          message.success(res.message);
          onClose();
        }
      }}
      onCancel={() => {
        setVisible(false);
      }}
    >
      <strong>将物流方式和物流单号更新到下方所有订单</strong>
      <ProForm
        layout="inline"
        submitter={false}
        className="mb-8"
        formRef={form}
      >
        <ProFormSelect
          placeholder="请输入物流方式"
          name="logisticsMethod"
          width="sm"
          label="物流方式"
          options={enumToSelect(LOGISTICS_STATUS_OPTIONS)}
        />
        <ProFormText name="serialNumber" label="物流单号"></ProFormText>
        <Button
          type="primary"
          onClick={() => {
            const values = form.current.getFieldsValue();
            let newData = cloneDeep(data);
            newData = newData.map((item) => ({
              ...item,
              logisticsMethod: values.logisticsMethod,
              serialNumber: values.serialNumber, // 物流单号？
            }));
            setData(newData);
          }}
        >
          批量更新
        </Button>
      </ProForm>
      <ProTable<any>
        className="px-0"
        dataSource={data}
        rowKey="id"
        pagination={false}
        columns={columns}
        search={false}
        dateFormatter="string"
        options={false}
      />
    </Modal>
  );
};

export default DeliverModal;