import ClientModal from '@/pages/Client/FollowRecord/Components/ClientModal';
import {
  postAdminClientQueryClientComunicationInfo,
  postAdminClientRemoveClientComunicationInfo,
} from '@/services/request';
import { ModalForm } from '@ant-design/pro-components';
import { Button, Descriptions, Space } from 'antd';
import { useEffect, useRef, useState } from 'react';

export default ({ data, reloadTable }) => {
  console.log(data, '5656datafirstshowgenjin');

  // const [isModalVisible, setIsModalVisible] = useState(false); // 控制 ClientModal 的显示
  const actionRef = useRef(); // 引用 actionRef，方便调用 reload 方法

  const [datetime, setDatetime] = useState(); // 跟进日期
  const [createByName, setCreateByName] = useState(''); // 跟进人员
  const [clientName, setClientName] = useState(''); // 客户名称
  // const [clientAddress, setClientAddress] = useState(''); // 客户地址
  const [way, setWay] = useState(); // 类型
  // const [clientNameLike, setClientNameLike] = useState(''); // 客户名称模糊查询
  // const [clientAddressLike, setClientAddressLike] = useState(''); // 客户地址模糊查询
  // const [tradeStatus, setTradeStatus] = useState(''); // 客户状态
  // const [tradeStatusLike, setTradeStatusLike] = useState(''); // 客户状态模糊查询
  const [content, setContent] = useState(''); // 跟进详情
  const [createTime, setCreateTime] = useState(null); // 创建时间
  const [attachments, setAttachments] = useState(); //附件
  const [attachmentsName, setAttachmentsName] = useState(''); // 附件名称

  useEffect(() => {
    const request = async () => {
      console.log(data, '5656datasearch');
      const res = await postAdminClientQueryClientComunicationInfo({
        data: {
          id: data.id,
        },
      });
      console.log(res, '5656res');
      const dataSearch = res.data.data[0];
      if (dataSearch) {
        if (dataSearch.attachments) {
          const url = dataSearch.attachments;
          const match = url.match(/aliyuncs\.com\/(.*?)\?/);
          let decodedStr = '';

          if (match) {
            // 获取匹配的字符串并进行解码
            const encodedStr = match[1];
            decodedStr = decodeURIComponent(encodedStr);
            setAttachmentsName(decodedStr); // 设置跟进日期
          }
        }
        setDatetime(dataSearch.datetime); // 设置跟进日期
        // setDateRange(data.dateRange || []); // 设置跟进时间范围
        setCreateByName(dataSearch.createByName); // 设置跟进人员
        setClientName(dataSearch.clientName); // 设置客户名称
        // setClientAddress(data.clientAddress || ''); // 设置客户地址
        // setClientNameLike(data.clientNameLike || ''); // 设置客户名称模糊查询
        // setClientAddressLike(data.clientAddressLike || ''); // 设置客户地址模糊查询
        // setTradeStatus(data.tradeStatus || ''); // 设置客户状态
        // setTradeStatusLike(data.tradeStatusLike || ''); // 设置客户状态模糊查询
        setContent(dataSearch.content); // 设置跟进详情
        setCreateTime(dataSearch.createTime); // 设置创建时间
        setWay(dataSearch.wayText);
        setAttachments(dataSearch.attachments);
      }
      console.log(attachments, '5656attachments');
    };
    request();
  }, []);
  const items = [
    {
      key: '1',
      label: '跟进日期',
      children: datetime, // 跟进日期
    },
    {
      key: '2',
      label: '跟进人员',
      children: createByName, // 跟进人员
    },
    {
      key: '3',
      label: '客户名称',
      children: clientName, // 客户名称
    },
    {
      key: '4',
      label: '跟进详情',
      children: content, // 跟进详情
    },
    {
      key: '5',
      label: '创建时间',
      children: createTime, // 创建时间
    },
    {
      key: '6',
      label: '跟进类型',
      children: way, // 跟进类型
    },
  ];
  const handleDelete = async () => {
    console.log(JSON.stringify(data), '5656record');
    // 调用删除接口
    const success = await postAdminClientRemoveClientComunicationInfo({
      query: {
        id: data.id,
      },
    });
    // setIsModalVisible(false);
    if (success) {
      actionRef?.current?.reload(); // 重新加载表格数据
    }
  };
  return (
    <Space>
      <ModalForm
        title="跟进记录"
        trigger={<Button type="link">查看</Button>}
        submitter={{
          resetButtonProps: {
            style: {
              display: 'none',
            },
          },
          submitButtonProps: {
            style: {
              display: 'none',
            },
          },
          render: (props, defaultDoms) => {
            return [
              ...defaultDoms,
              <>
                <ClientModal
                  key={'modify'}
                  data={data} // 将表单数据传递给 ClientModal
                  reloadTable={() => {
                    actionRef?.current?.reload(); // 重新加载表格数据
                    props.submit();
                    reloadTable();
                    console.log('5656close');
                  }}
                  type={'modify'}
                  onFinish={() => {
                    // setIsModalVisible(false);
                  }} // 关闭 Modal
                  style={{ marginRight: '10px' }}
                />
                <Button
                  key={'delete'}
                  onClick={() => {
                    handleDelete();
                    props.submit();
                    reloadTable();
                  }}
                  type="primary"
                  size="middle"
                  danger // 使用 danger 属性来将按钮颜色设置为红色
                  style={{ marginLeft: '10px' }}
                  onFinish={() => {
                    actionRef.current.reload();
                  }}
                >
                  删除
                </Button>
              </>,
            ];
          },
        }}
        onFinish={async () => {
          // 提交成功后，显示 ClientDrawer
          // setIsModalVisible(true);
          return true;
        }}
      >
        <Descriptions items={items} column={1} />
        {attachmentsName && (
          <a href={attachments} download>
            附件：{attachmentsName}
          </a>
        )}
      </ModalForm>
    </Space>
  );
};