import { useAjax } from "@/Hook/useAjax";
import { Card, DatePicker, Table, Tag, Input, Button, Select } from "antd"
import { useCallback, useEffect, useState } from "react";
import { SearchOutlined } from '@ant-design/icons';
import SearchBox from "@/pages/weComTask/components/searchBox";
import { UserTableConfig } from "./userTableConfig";
import React from "react";
import { getGroupChatUserListApi } from "@/pages/weComTask/API/global";
const { RangePicker } = DatePicker;

const UserContent: React.FC<{ userData: any }> = ({ userData }) => {

    const [listData, setListData] = useState<any>({
        pageNum: 1,
        pageSize: 20,
    })
    const getGroupChatUserList = useAjax((params: any) => getGroupChatUserListApi(params))
    //搜索事件
    const getList = useCallback((props?: any) => {
        getGroupChatUserList.run({ ...listData, ...props, corpId: userData?.corpId, chatId: userData?.chatId })
    }, [listData, userData])

    useEffect(() => {
        if (userData?.corpId && userData?.chatId) {
            getList()
        }
        return () => {
            setListData({
                pageNum: 1,
                pageSize: 20,
            })
        }
    }, [userData])

    return <>
        {/* 搜索 */}
        <SearchBox
            buttons={<>
                <Button type="primary" onClick={() => getList()}><SearchOutlined />搜索</Button>
            </>}
        >
            <>
                <Input placeholder="成员ID"
                    allowClear
                    value={listData?.userId}
                    onChange={(e) => {
                        let v = e.target.value
                        setListData({ ...listData, userId: v })
                    }}
                />

                <Input placeholder="昵称/群昵称"
                    allowClear
                    value={listData?.userName}
                    onChange={(e) => {
                        let v = e.target.value
                        setListData({ ...listData, userName: v })
                    }}
                />

                <Select
                    showSearch
                    style={{ minWidth: 200 }}
                    value={listData.userType}
                    allowClear
                    onChange={(valuse) => {
                        setListData({ ...listData, userType: valuse })
                    }}
                    placeholder="成员类型"
                    filterOption={(input, option) =>
                        ((option?.label ?? '') as string).toLowerCase().includes(input.toLowerCase())
                    }
                    options={[
                        {
                            "value": "1",
                            "label": "企业成员"
                        },
                        {
                            "value": "2",
                            "label": "外部联系人"
                        }
                    ]}
                />

                <Select
                    showSearch
                    style={{ minWidth: 200 }}
                    value={listData.joinScene}
                    allowClear
                    onChange={(valuse) => {
                        setListData({ ...listData, joinScene: valuse })
                    }}
                    placeholder="入群方式"
                    filterOption={(input, option) =>
                        ((option?.label ?? '') as string).toLowerCase().includes(input.toLowerCase())
                    }
                    options={[
                        {
                            "value": "1",
                            "label": "直接邀请入群"
                        },
                        {
                            "value": "2",
                            "label": "通过邀请链接入群"
                        },
                        {
                            "value": "3",
                            "label": "扫描群二维码入群"
                        }
                    ]}
                />

                <RangePicker placeholder={['入群开始日期', '入群结束日期']} allowClear onChange={(dates, dateStrings) => {
                    setListData({ ...listData, joinTimeStart: dateStrings[0], joinTimeEnd: dateStrings[1] })
                }} />
            </>
        </SearchBox>
        {/* 表 */}
        <Table
            style={{ marginBottom: 1 }}
            dataSource={getGroupChatUserList?.data?.data?.records}
            loading={getGroupChatUserList?.loading}
            columns={UserTableConfig()}
            scroll={{ x: 400, y: 500 }}
            rowKey={(s) => {
                return s.id
            }}
            size='small'
            pagination={{
                total: getGroupChatUserList?.data?.data?.total,
                showTotal: (total) => <Tag color="cyan">总共{total}数据</Tag>,
                showSizeChanger: true,
                showLessItems: true,
                defaultCurrent: 1,
                defaultPageSize: 20,//默认初始的每页条数
                current: getGroupChatUserList?.data?.data?.current || 1,
                pageSize: getGroupChatUserList?.data?.data?.size || 20,
                onChange: (page, pageSize) => {
                    getList({ ...listData, pageNum: page, pageSize })
                }
            }}
        />
    </>
}
export default React.memo(UserContent)