import { postOrderErpOrderStagesPayWaySelect } from '@/services';
import type { ProColumns } from '@ant-design/pro-components';
import {
  EditableProTable,
  ProFormDatePicker,
  ProFormRadio,
} from '@ant-design/pro-components';
import React, { useEffect, useState } from 'react';
import PayWayUpload from '../upload/payWayUpload';
import './payWayDetail.less';

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

type DataSourceType = {
  id: number;
  payStep?: string;
  proportion?: string;
  ossId?: number;
  payPrice?: number;
  payDate?: Date;
  fileName?: string;
  fileUrl?: string;
};

export default ({ payBody, thisId, currtSave }) => {
  const defaultData: DataSourceType[] = [
    {
      id: 1,
      payStep: '预付款',
      proportion: undefined,
      payPrice: undefined,
      ossId: undefined,
      payDate: undefined,
      fileName: undefined,
      fileUrl: undefined,
    },
    {
      id: 2,
      payStep: '发贷款',
      proportion: undefined,
      payPrice: undefined,
      ossId: undefined,
      payDate: undefined,
      fileName: undefined,
      fileUrl: undefined,
    },
    {
      id: 3,
      payStep: '验收款',
      proportion: undefined,
      payPrice: undefined,
      ossId: undefined,
      payDate: undefined,
      fileName: undefined,
      fileUrl: undefined,
    },
    {
      id: 4,
      payStep: '质保金',
      proportion: undefined,
      payPrice: undefined,
      ossId: undefined,
      payDate: undefined,
      fileName: undefined,
      fileUrl: undefined,
    },
  ];

  const [editableKeys, setEditableRowKeys] = useState<React.Key[]>([]);
  const [isRetrun, setIsRetrun] = useState(false);
  const [position, setPosition] = useState<'top' | 'bottom' | 'hidden'>(
    'hidden',
  );
  const [payWayDetailBody, setPayWayDetailBody] = useState<
    readonly DataSourceType[]
  >([...defaultData]);
  // const [body, setBody] = useState([])
  // const [isAccept, setIsAccept] = useState(null);
  // const [isCurrtSave, setIsCurrtSave] = useState(false);

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

  async function getOther(value, arr) {
    const res = await postOrderErpOrderStagesPayWaySelect({
      data: { ossId: value },
    });
    if (res.data) {
      const context = res.data;
      const remake = arr.map((obj) => {
        let currt = obj;
        context.forEach((object) => {
          if (object.number === obj.id) {
            currt = {
              ...obj,
              ossId: value,
              payDate: object.dateRange,
              fileName: object.fileName,
              fileUrl: object.fileUrl,
            };
            return currt;
          }
        });
        return currt;
      });
      setPayWayDetailBody(remake);
      setIsRetrun(true);
    }
  }

  function getUploadFile(value) {
    let remakeBody = [];
    let remakeBodyItem = {};
    payWayDetailBody.forEach((item) => {
      if (item.id === value.id) {
        remakeBodyItem = {
          ...item,
          fileUrl: value.url,
          fileName: value.name,
        };
      } else {
        remakeBodyItem = { ...item };
      }
      remakeBody.push(remakeBodyItem);
    });
    setPayWayDetailBody(remakeBody);
    currtSave(remakeBody);
  }

  async function setPayWay(value) {
    const remakeData = payWayDetailBody.map((obj) => {
      return {
        ...obj,
        proportion: value[obj.id - 1]?.proportion,
        payPrice: value[obj.id - 1]?.payPrice,
      };
    });

    setPayWayDetailBody(remakeData);

    if (thisId !== null) {
      getOther(thisId, remakeData);
    }
  }

  useEffect(() => {
    setPayWay(payBody);
  }, [payBody]);

  // function setCurrtSave(value) {
  //     setIsCurrtSave(payWayDetailBody)
  // }

  const columns: ProColumns<DataSourceType>[] = [
    {
      title: '编号',
      dataIndex: 'id',
      hideInTable: true,
      editable: false,
    },
    {
      title: '付款信息',
      dataIndex: 'payStep',
      editable: false,
    },
    {
      title: '付款比例',
      dataIndex: 'proportion',
      editable: false,
    },
    {
      title: '付款金额',
      dataIndex: 'payPrice',
      editable: false,
    },
    {
      title: '对应的订单',
      dataIndex: 'ossId',
      editable: false,
      hideInTable: true,
    },
    {
      title: '付款时间',
      dataIndex: 'payDate',
      editable: false,
      render: (text, record) => {
        const handleChange = (value) => {
          const updatedDataSource = payWayDetailBody.map((item) => {
            if (item.id === record.id) {
              return {
                ...item,
                payDate: value,
              };
            }
            return item;
          });

          setPayWayDetailBody(updatedDataSource);
          currtSave(updatedDataSource);
        };

        return (
          <ProFormDatePicker
            className="payWaydataChoose"
            initialValue={record.payDate}
            value={record.payDate}
            placeholder={'请填写时间'}
            fieldProps={{
              format: (value) => value.format('YYYY-MM-DD'),
              onChange: handleChange,
            }}
          />
        );
      },
    },
    {
      title: '付款单回执',
      dataIndex: 'fileName',
      render: (text, record) => {
        if (record.fileUrl !== undefined) {
          return (
            <PayWayUpload
              natureModel={{
                id: record.id,
                fileName: record.fileName,
                fileUrl: record.fileUrl,
              }}
              setCurryFile={getUploadFile}
              key={isRetrun}
            ></PayWayUpload>
          );
        } else {
          return (
            <PayWayUpload
              natureModel={{
                id: record.id,
                fileName: undefined,
                fileUrl: undefined,
              }}
              setCurryFile={getUploadFile}
              key={isRetrun}
            ></PayWayUpload>
          );
        }
      },
    },
  ];

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