import React, { useEffect, useRef, useState } from "react";
import style from '../corpUserManage/index.less'
import { Button, Card, Input, Select, Table } from "antd";
import { SearchOutlined } from '@ant-design/icons';
import { getAdAccountAllOfMember, getCorpAllListApi } from "@/API/global";
import { useAjax } from "@/Hook/useAjax";
import { getAllOfUserListApi, GetAllOfUserListProps } from "../../API/device";
import { useSize } from "ahooks";
import { WeTableConfig } from "./tableConfig";
import SearchBox from "../../components/searchBox";


const DevicePage: React.FC = () => {

    /**************************************/
    const ref = useRef<HTMLDivElement>(null)
    const size = useSize(ref)
    const [queryForm, setQueryForm] = useState<GetAllOfUserListProps>({ pageNum: 1, pageSize: 20, stopUse: false, online: false })
    const [queryFormNew, setQueryFormNew] = useState<GetAllOfUserListProps>({ pageNum: 1, pageSize: 20, stopUse: false, online: false })

    const allOfMember = useAjax(() => getAdAccountAllOfMember())
    const getAllOfUserList = useAjax((params) => getAllOfUserListApi(params))
    const getCorpAllList = useAjax((params) => getCorpAllListApi(params))
    /**************************************/

    useEffect(() => {
        allOfMember.run()
        getCorpAllList.run({})
    }, [])

    useEffect(() => {
        getAllOfUserList.run(queryForm)
    }, [queryForm])

    return <div className={style.corpUserManage}>

        <div className={style.corpUserManage_bottom} style={{ height: '100%' }}>

            <Card className={style.corpUserList} styles={{ body: { padding: 0, display: 'flex', flexDirection: 'column', height: '100%' } }}>
                <SearchBox
                    bodyPadding={`16px 16px 12px`}
                    buttons={<>
                        <Button type="primary" onClick={() => {
                            setQueryForm({ ...queryFormNew })
                        }} loading={getAllOfUserList.loading} icon={<SearchOutlined />}>搜索</Button>
                    </>}
                >
                    <>
                        <Select
                            value={queryFormNew?.corpIdList}
                            onChange={(e) => setQueryFormNew({ ...queryFormNew, corpIdList: e })}
                            showSearch
                            style={{ width: 150 }}
                            maxTagCount={1}
                            mode='multiple'
                            placeholder="选择企业"
                            filterOption={(input, option) =>
                                ((option?.label ?? '') as string).toLowerCase().includes(input.toLowerCase())
                            }
                            allowClear
                            options={getCorpAllList?.data?.data?.map((item: any) => ({ label: item.corpName, value: item.corpId }))}
                        />
                        <Input onChange={(e) => setQueryFormNew({ ...queryFormNew, corpUserName: e.target.value as any })} value={queryFormNew?.corpUserName} placeholder="企微号名称" allowClear />
                        <Input onChange={(e) => setQueryFormNew({ ...queryFormNew, note: e.target.value as any })} value={queryFormNew?.note} placeholder="地域备注" allowClear />
                        <Select
                            value={queryFormNew?.stopUse}
                            onChange={(e) => setQueryFormNew({ ...queryFormNew, stopUse: e })}
                            showSearch
                            style={{ width: 100 }}
                            placeholder="是否停用？"
                            allowClear
                            options={[{ label: '是', value: true }, { label: '否', value: false }]}
                        />
                        <Select
                            value={queryFormNew?.online}
                            onChange={(e) => setQueryFormNew({ ...queryFormNew, online: e })}
                            showSearch
                            style={{ width: 100 }}
                            placeholder="手机在线？"
                            allowClear
                            options={[{ label: '是', value: true }, { label: '否', value: false }]}
                        />
                    </>
                </SearchBox>
                <div className={style.corpUserList_table} ref={ref}>
                    <Table
                        dataSource={getAllOfUserList?.data?.data?.records}
                        columns={WeTableConfig()}
                        bordered
                        pagination={{
                            current: getAllOfUserList?.data?.data?.current,
                            pageSize: getAllOfUserList?.data?.data?.size,
                            total: getAllOfUserList?.data?.data?.total,
                            showSizeChanger: true,
                            onChange: (page, pageSize) => {
                                setQueryFormNew({ ...queryFormNew, pageNum: page, pageSize })
                                setQueryForm({ ...queryForm, pageNum: page, pageSize })
                            }
                        }}
                        rowClassName={(record) => record?.phoneInfo?.online && record?.phoneInfo?.accessibility != false ? '' : style.notOnline}
                        rowKey={(row) => row.corpUserId + '_' + row.corpId}
                        loading={getAllOfUserList?.loading}
                        scroll={{ y: size?.height && ref.current ? size?.height - ref.current.querySelector('.ant-table-thead').clientHeight - 42 : 300 }}
                    />
                </div>
            </Card>
        </div>
    </div>
}

export default DevicePage