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

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 [position, setPosition] = useState<'top' | 'bottom' | 'hidden'>(
    'hidden',
  );
  const [payWayDetailBody, setPayWayDetailBody] = useState<
    readonly DataSourceType[]
  >([...defaultData]);
  const [isAccept] = useState(null);
  // const [isCurrtSave, setIsCurrtSave] = useState(false);

  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);
    }
  }

  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(() => {
  //     getOther(thisId)
  // }, [thisId])

  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) => {
        if (record.payDate) {
          return (
            <span>
              {new Intl.DateTimeFormat('zh-CN', {
                year: 'numeric',
                month: 'long',
                day: 'numeric',
              }).format(record.payDate)}
            </span>
          );
        } else {
          return <span></span>;
        }
      },
    },
    {
      title: '付款单回执',
      dataIndex: 'fileName',
      render: (_text, record) => {
        if (isAccept !== record.id) {
          if (
            typeof record.fileUrl === 'object' &&
            record.fileUrl instanceof File
          ) {
            return (
              <a onClick={() => message.error('请先保存')}>{record.fileName}</a>
            );
          } else {
            return <a href={record.fileUrl}>{record.fileName}</a>;
          }
        } else {
          return (
            <ProFormUploadButton
              name={record.id}
              onChange={(value) => {
                let remakeBody = [];
                let remakeBodyItem = {};
                payWayDetailBody.forEach((item) => {
                  if (item.id === record.id) {
                    remakeBodyItem = {
                      ...item,
                      fileUrl: value.file.originFileObj,
                      fileName: value.file.name,
                    };
                  } else {
                    remakeBodyItem = { ...item };
                  }
                  if (value.fileList.length === 0) {
                    remakeBodyItem = {
                      ...item,
                      fileUrl: undefined,
                      fileName: undefined,
                    };
                  }
                  remakeBody.push(remakeBodyItem);
                });
                setPayWayDetailBody(remakeBody);
                currtSave(remakeBody);
              }}
              width="md"
              max={1}
            />
          );
        }
      },
    },
  ];

  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,
        }}
      />
    </>
  );
};