import { RESPONSE_CODE } from '@/constants/enum';
import {
  postAdminClientAddOrModifyClientComunicationInfo,
  postAdminClientQueryClientComunicationInfo,
  postAdminClientRemoveClientComunicationInfo,
} from '@/services';
import {
  ActionType,
  EditableProTable,
  ModalForm,
  ProFormInstance,
} from '@ant-design/pro-components';
import { Popconfirm, message } from 'antd';
import { useEffect, useRef, useState } from 'react';
export default ({ clientId }) => {
  const [editableKeys, setEditableRowKeys] = useState<React.Key[]>([]);
  const [dataSource, setDataSource] = useState();
  const ref = useRef<ProFormInstance>();
  const actionRef = useRef<ActionType>();
  const columns = [
    {
      title: '跟进时间',
      dataIndex: 'datetime',
      width: 50,
      valueType: 'dateTime',
      rules: [{ required: true, message: '请选择时间' }],
    },
    {
      title: '方式',
      width: 50,
      dataIndex: 'way',
      rules: [{ required: true, message: '请选择方式' }],
    },
    {
      title: '内容',
      width: 100,
      valueType: 'textarea',
      rules: [{ required: true, message: '请输入内容' }],
      dataIndex: 'content',
    },
    {
      title: '操作',
      valueType: 'option',
      width: 50,
      render: (text, record, _, action) => [
        <a
          key="editable"
          onClick={() => {
            action?.startEditable?.(record.tid);
          }}
        >
          编辑
        </a>,
        <Popconfirm
          key={'delete'}
          title="删除记录"
          description="确认删除记录?"
          onConfirm={async () => {
            setDataSource(dataSource.filter((item) => item.tid !== record.tid));
            const res = await postAdminClientRemoveClientComunicationInfo({
              query: {
                id: record.id,
              },
            });
            if (res.result === RESPONSE_CODE.SUCCESS) {
              message.success(res.message);
              action?.reload();
            } else {
              message.error('删除失败');
            }
          }}
          okText="是"
          cancelText="否"
        >
          <a type={'danger'}>删除</a>
        </Popconfirm>,
      ],
    },
  ];

  useEffect(() => {
    console.log('clientId', clientId);
  }, []);
  return (
    <ModalForm
      title="跟进记录"
      trigger={<a type="primary">跟进记录</a>}
      modalProps={{
        destroyOnClose: true,
      }}
    >
      <EditableProTable
        rowKey="tid"
        formRef={ref}
        actionRef={actionRef}
        recordCreatorProps={{
          record: () => ({ tid: (Math.random() * 1000000).toFixed(0) }),
        }}
        loading={false}
        columns={columns}
        request={async () => {
          const res = await postAdminClientQueryClientComunicationInfo({
            data: {
              clientId: clientId,
            },
          });
          if (res.result === RESPONSE_CODE.SUCCESS) {
            console.log(JSON.stringify(res.data));
            return {
              ...res.data,
              data: res.data.data.map((item) => {
                return {
                  ...item,
                  tid: (Math.random() * 1000000).toFixed(0),
                };
              }),
            };
          } else {
            message.error('获取失败');
          }
        }}
        value={dataSource}
        onChange={setDataSource}
        editable={{
          type: 'multiple',
          editableKeys,
          onSave: async (rowKey, data, row) => {
            console.log(rowKey, data, row);
            const res = await postAdminClientAddOrModifyClientComunicationInfo({
              data: {
                ...data,
                clientId: clientId,
              },
            });
            if (res.result === RESPONSE_CODE.SUCCESS) {
              message.success(res.message);
            } else {
              message.error('修改失败');
            }
            actionRef.current?.reload();
          },
          onChange: setEditableRowKeys,
        }}
      />
      {/*<ProCard title="表格数据" headerBordered collapsible defaultCollapsed>
                <ProFormField
                    ignoreFormItem
                    fieldProps={{
                        style: {
                            width: '100%',
                        },
                    }}
                    mode="read"
                    valueType="jsonCode"
                    text={JSON.stringify(dataSource)}
                />
            </ProCard>*/}
    </ModalForm>
  );
};