import React, { useRef, useState } from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import Constants from '@/constants';
import { ActionType, ProColumns, ProTable } from '@ant-design/pro-components';
import { handlePageQuery } from '@/utils/utils';
import { getMessageDetailUsingGet, pbcUserMessagePageUsingPost } from '@/services/pop-b2b2c/pbcUserMessageController';
import { Avatar, Button, Col, Drawer, Row, Image, Divider } from 'antd';
import { UserOutlined } from '@ant-design/icons';

/**
 * 查询表格
 * @param param0
 */
const fetchData = async (params: API.PageVO) => {
  const msg = await pbcUserMessagePageUsingPost(params);
  return {
    data: msg.data?.records,
    total: msg.data?.total,
    success: msg.retcode,
  } as any;
};

// eslint-disable-next-line @typescript-eslint/ban-types
const TableList: React.FC<{}> = () => {
  const actionRef = useRef<ActionType>();

  const [currentRow, setCurrentRow] = useState<API.PbcUserMessage>();

  const [openDrawer, handleOpenDrawer] = useState<boolean>(false);

  const [loading, handleLoading] = useState<boolean>(false);

  const columns: ProColumns<API.PbcUserMessage>[] = [
    {
      title: '会员昵称',
      dataIndex: 'pbcUserNickName',
    },
    {
      title: '手机号',
      dataIndex: 'pbcUserMobile',
    },
    {
      title: '商户名称',
      dataIndex: 'pbcBusinessName'
    },
    {
      title: '留言内容',
      dataIndex: 'pbcMessage',
      ellipsis: true,
      search: false
    },
    {
      title: '留言时间',
      dataIndex: 'pbcCreateAt',
      valueType: 'dateTime',
      search: false
    },
    {
      title: '回复状态',
      dataIndex: 'pbcReplyState',
      valueEnum: Constants.pbcReplyState
    },
    {
      title: '操作',
      fixed: 'right',
      valueType: 'option',
      render: (text, record) => (
        <Button type="link" loading={loading} onClick={() => {
          if (record.pbcId) {
            handleLoading(true);
            getMessageDetailUsingGet({id: record.pbcId}).then(res => {
              handleLoading(false);
              if (res.retcode) {
                handleOpenDrawer(true);
                setCurrentRow(res.data);
              }
            }).catch(() => {
              handleLoading(false);
            })
          }
        }}>
          查看详情
        </Button>
      ),
    },
  ];
  return (
    <PageContainer
      header={{
        title: '',
        breadcrumb: {},
      }}
    >
      <ProTable<API.PbcUserMessage>
        columns={columns}
        actionRef={actionRef}
        request={(param: any) => {
          const queryParam = handlePageQuery(param);
          if (queryParam.filters) {
            queryParam.filters.push({
              key: 'pbcReplyToId'.replace(/([A-Z])/g, '_$1').toLowerCase(),
              value: "",
              action: 'isnull',
            })
          }
          return fetchData(queryParam);
        }}
        rowKey="pbcId"
        size="small"
        bordered
        search={{
          labelWidth: 'auto',
          span: 6
        }}
        pagination={{
          pageSize: 20,
          showSizeChanger: true,
        }}
        scroll={{
          y: 'calc(100vh - 320px)',
        }}
        dateFormatter="string"
        options={false}
        toolBarRender={() => []}
      />
      <Drawer
        title={null} 
        onClose={() => {
          setCurrentRow({})
          handleOpenDrawer(false)
        }} 
        width={600}
        closeIcon={null}
        footer={null}
        destroyOnClose={true}
        open={openDrawer}
      >
        <div>
          <Row gutter={20} align="middle">
            <Col flex="none">
              <Avatar size={40} icon={<UserOutlined />} src={currentRow?.pbcUserImage} />
            </Col>
            <Col flex="auto">
              <div style={{ marginBottom: 5, fontWeight: 'bold' }}>{currentRow?.pbcUserNickName}</div>
              <div style={{ fontSize: 12, color: '#999' }}>{currentRow?.pbcCreateAt}</div>
            </Col>
          </Row>
          <p style={{ margin: '20px 0', fontSize: 16, color: '#999' }}>{currentRow?.pbcMessage}</p>
          <Image.PreviewGroup>
            {currentRow?.pbcMessageImages?.split(',').map(e => <Image key={e} height={140} src={e} />)}
          </Image.PreviewGroup>
          <Row style={{ marginTop: 20, padding: 8, backgroundColor: 'rgb(242, 242, 242)' }} align='stretch'>
            <Col flex="none">
              <div style={{ marginRight: 10, width: 80, height: 80, backgroundImage: `url(${currentRow?.pbcProduct?.pbcProductImages?.split(',')[0]})`, backgroundRepeat: 'no-repeat', backgroundSize: 'cover' }}></div>
            </Col>
            <Col style={{ display: 'flex', justifyContent: 'space-between', flexDirection: 'column' }} flex="auto">
              <div>{currentRow?.pbcProduct?.pbcProductTitle}</div>
              <div style={{ fontSize: 18, color: 'goldenrod' }}>¥{currentRow?.pbcProduct?.pbcProductPrice}</div>
            </Col>
          </Row>
          <Divider style={{ borderBlockStart: '10px solid rgba(5, 5, 5, 0.06)' }} />
          <div>
            {currentRow?.children?.map(e => (
              <div key={e.pbcId}>
                <Row gutter={20} align="middle">
                  <Col flex="none">
                    <Avatar size={40} icon={<UserOutlined />} src={e.pbcUserImage} />
                  </Col>
                  <Col flex="auto">
                    <div style={{ marginBottom: 5, fontWeight: 'bold' }}>{e.pbcUserNickName}</div>
                    <div style={{ fontSize: 12, color: '#999' }}>{e.pbcCreateAt}</div>
                  </Col>
                </Row>
                <p style={{ margin: '20px 0', fontSize: 16, color: '#999' }}>{e.pbcMessage}</p>
                <Image.PreviewGroup>
                  {e.pbcMessageImages?.split(',').map(item => <Image key={item} height={140} src={item} />)}
                </Image.PreviewGroup>
                <Divider />
              </div>
            ))}
          </div>
        </div>
      </Drawer>
    </PageContainer>
  );
};

export default TableList;
