import { useAjax } from "@/Hook/useAjax";
import { getFansDetailListApi, GetProps } from "@/pages/weComTask/API/heavyPowderMAS";
import { GetExternalUserRepeatByCorpListApiProps } from "@/pages/weComTask/API/home";
import SearchBox from "@/pages/weComTask/components/searchBox";
import { Card, Space, Table, Image, Typography, Button, Input, InputNumber } from "antd";
import React, { useEffect, useState } from "react";
import { SearchOutlined } from "@ant-design/icons";
import CorpDetails from "./corpDetails";
import CorpUserDetails from "./corpUserDetails";

const { Text } = Typography;

const UserDetails: React.FC<{ queryParmas: GetProps }> = ({ queryParmas: q }) => {

    /**************************************/
    const [queryParmas, setQueryParmas] = useState<GetExternalUserRepeatByCorpListApiProps>({ pageNum: 1, pageSize: 20 })
    const [queryParmasNew, setQueryParmasNew] = useState<GetExternalUserRepeatByCorpListApiProps>({ pageNum: 1, pageSize: 20 })
    const getFansDetailList = useAjax((params) => getFansDetailListApi(params))
    /**************************************/

    useEffect(() => {
        if (q?.aCorpIds.length > 0 && q?.bCorpIds.length > 0) {
            getFansDetailList.run({ ...q, ...queryParmas })
        }
    }, [queryParmas, q])

    return <Card
        variant="borderless"
        title={<strong>重复粉丝用户详情(同时添加查询组、对照组的企微用户详情)</strong>}
    >
        <SearchBox
            bodyPadding={`0 0 12px`}
            buttons={<>
                <Button onClick={() => {
                    setQueryParmas({ pageNum: 1, pageSize: queryParmas.pageSize })
                    setQueryParmasNew({ pageNum: 1, pageSize: queryParmas.pageSize })
                }}>重置</Button>
                <Button type="primary" onClick={() => {
                    setQueryParmas({ ...queryParmasNew, pageNum: 1, pageSize: queryParmas.pageSize })
                }} loading={getFansDetailList.loading} icon={<SearchOutlined />}>搜索</Button>
            </>}
        >
            <>
                <Input onChange={(e) => setQueryParmasNew({ ...queryParmasNew, name: e.target.value })} value={queryParmasNew?.name} placeholder="客户昵称" allowClear />
                <InputNumber placeholder="最小企业id个数" style={{ width: 125 }} value={queryParmasNew?.minCorpIdCount} onChange={(e) => setQueryParmasNew({ ...queryParmasNew, minCorpIdCount: e })} />
                <InputNumber placeholder="最大企业id个数" style={{ width: 125 }} value={queryParmasNew?.maxCorpIdCount} onChange={(e) => setQueryParmasNew({ ...queryParmasNew, maxCorpIdCount: e })} />
            </>
        </SearchBox>

        <Table
            columns={[
                {
                    title: '客户名称',
                    dataIndex: 'name',
                    key: 'name',
                    width: 260,
                    render: (text: any, record: any) => {
                        return <Space>
                            <Image src={record?.avatar} style={{ width: 20, borderRadius: 4 }} />
                            <Text>{text}</Text>
                        </Space>
                    }
                },
                {
                    title: '企业ID个数',
                    dataIndex: 'corpIdCount',
                    key: 'corpIdCount',
                    width: 120,
                    align: 'center',
                    sorter: true,
                    render: (text: number, record: any) => {
                        return <CorpDetails corpS={q} name={record?.name} avatar={record?.avatar} corpIdCount={text} qcUuid={record?.qcUuid} />
                    }
                },
                {
                    title: '客服号ID个数',
                    dataIndex: 'corpUserIdCount',
                    key: 'corpUserIdCount',
                    width: 120,
                    align: 'center',
                    sorter: true,
                    render: (text: number, record: any) => {
                        return <CorpUserDetails corpS={q} name={record?.name} avatar={record?.avatar} corpUserIdCount={text} qcUuid={record?.qcUuid} />
                    }
                },
                {
                    title: 'qcUUID',
                    dataIndex: 'qcUuid',
                    key: 'qcUuid',
                    ellipsis: true,
                    render: (text: string) => {
                        return <Text copyable>{text}</Text>
                    }
                }
            ]}
            scroll={{ y: 300, x: 1000 }}
            bordered
            dataSource={getFansDetailList.data?.data?.records}
            loading={getFansDetailList.loading}
            rowKey="qcUuid"
            pagination={{
                total: getFansDetailList.data?.data?.total,
                current: getFansDetailList?.data?.data?.current || 1,
                pageSize: getFansDetailList?.data?.data?.size || 20,
            }}
            onChange={(pagination: any, _: any, sortData: any) => {
                let { current, pageSize } = pagination
                let newQueryForm = JSON.parse(JSON.stringify(queryParmas))
                if (sortData && sortData?.order) {
                    newQueryForm['sortType'] = sortData?.order === 'ascend' ? 'ASC' : 'DESC'
                    newQueryForm['orderByField'] = sortData?.field
                } else {
                    delete newQueryForm['sortType']
                    delete newQueryForm['orderByField']
                }
                newQueryForm.pageNum = current || newQueryForm.pageNum
                newQueryForm.pageSize = pageSize || newQueryForm.pageSize
                setQueryParmas({ ...newQueryForm })
            }}
        />
    </Card>
};

export default React.memo(UserDetails);