import React, {useRef, useState} from 'react';
import {PageContainer} from "@ant-design/pro-layout";
import ProTable, {ActionType, ProColumns} from "@ant-design/pro-table";
import {Card, message} from "antd";
import {ModalForm, ProFormInstance, ProFormSelect, ProFormText, ProFormTextArea} from '@ant-design/pro-components';
import {contactList, updateContact} from "@/services/contact";

const ContactList: React.FC = (props) => {
  const ref = useRef<ActionType>();
  const [currentId, setCurrentId] = useState(-1);
  const [showEditDialog, setShowEditDialog] = useState(false);
  const editContactFromRef = useRef<ProFormInstance>();


  const clickEditContact = (id: number) => {
    setCurrentId(id)
    setShowEditDialog(true)
  }

  const columns: ProColumns<API.Contact>[] = [
    {
      dataIndex: 'index',
      valueType: 'indexBorder',
      width: 48,
    },
    {
      title: '名称',
      dataIndex: 'name',
    },
    {
      title: '联系方式',
      hideInSearch: true,
      render: (roles, record) => (
        <>
          <div>手机号:{record.phone}</div>
          <div>Email:{record.email}</div>
          <div>微信:{record.wechat}</div>
          <div>QQ:{record.qq}</div>
        </>
      ),
    },
    {
      title: '行业',
      dataIndex: 'inviteCode',
    },
    {
      title: '用户留言',
      dataIndex: 'userRemark',
      hideInSearch: true,
      width: 200,
      ellipsis: true,
    },
    {
      title: '备注',
      dataIndex: 'remark',
      hideInSearch: true,
      width: 200,
      ellipsis: true,
    },
    {
      title: '状态',
      dataIndex: 'status',
      valueEnum: {
        1: {
          text: '未跟进',
          status: 'Default'
        },
        2: {
          text: '已跟进',
          status: 'Success'
        }
      }
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      hideInSearch: true,
    },
    {
      title: '操作',
      valueType: 'option',
      render: (text, record, _, action) => {
        return (
          [(
            <a onClick={() => {
              clickEditContact(record.id!)
              setTimeout(() => {
                editContactFromRef?.current?.setFieldsValue({
                  contactId: record.id,
                  remark: record.remark,
                  status: record.status,
                })
              })
            }}>修改</a>
          ),
          ]
        );
      }
    },
  ]
  return (
    <div>
      <PageContainer>
        <ModalForm<API.Contact>
          formRef={editContactFromRef}
          title={"备注"}
          visible={showEditDialog}
          modalProps={{
            onCancel: () => setShowEditDialog(false),
          }}
          onFinish={async (values) => {
            updateContact({
              ...values
            }).then(data => {
              if (data.code == 200) {
                message.success("备注成功");
                ref.current?.reload();
                setShowEditDialog(false)
              } else {
                message.error(data.message)
              }
            }).catch(data => {
              console.log(data)
            })
          }}
        >
          <ProFormText name="contactId" hidden={true}/>
          <ProFormSelect
            name="status"
            label="状态"
            options={[
              {
                value: 1,
                label: '未跟进',
              },
              {
                value: 2,
                label: '已跟进',
              },
            ]}
            rules={[{required: true,}]}
          />
          <ProFormTextArea name="remark" label="备注" rules={[{max: 200},]}/>
        </ModalForm>

        <Card>
          <ProTable<API.Contact>
            actionRef={ref}
            columns={columns}
            request={async (params = {}, sort, filter) => {
              const response = await contactList({
                name: params.name,
                page: params.current,
                size: params.pageSize,
                remark: params.remark,
                status: params.status,
              });
              if (response.code === 200) {
                return {
                  data: response.data!.records,
                  success: true,
                  total: response.data!.total,
                };
              } else {
                message.error(response.message)
                return {}
              }
            }}
            editable={{
              type: 'multiple',
            }}
            rowKey="id"
            search={{
              labelWidth: 'auto',
            }}
            pagination={{
              pageSize: 5,
            }}
            dateFormatter="string"
            headerTitle="联系人列表"
            toolBarRender={() => []}
          />
        </Card>
      </PageContainer>
    </div>
  );
}

export default ContactList
