import { Button, Card, Input, Select, Table, Tag } from "antd"
import SearchBox from "../../components/searchBox"
import { SearchOutlined } from '@ant-design/icons';
import { useEffect, useState } from "react";
import { useAjax } from "@/Hook/useAjax";
import { CorpListProps, getCorpListApi } from "../../API/corpUserAssign";
import { TableConfig } from "./tableConfig";
import MailList from "./mailList";
import ModifyCorp from "./modifyCorp";

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

    /**********************************/
    const [queryForm, setQueryForm] = useState<CorpListProps>({ pageNum: 1, pageSize: 20 })
    const [visible, setVisible] = useState<boolean>(false)
    const [defindConfig, setDefindConfig] = useState<{
        title: string,
        corpId: string
    }>({ title: '', corpId: '' })

    const [corpVisible, setCorpVisible] = useState<boolean>(false)
    const [corpData, setCorpData] = useState<any>({})

    const getCorpList = useAjax((params) => getCorpListApi(params))
    /**********************************/

    useEffect(() => {
        getList()
    }, [queryForm])

    const getList = () => {
        getCorpList.run(queryForm)
    }

    const handle = (data: any, type: string) => {
        switch (type) {
            case 'sx':
                setCorpData(data)
                setCorpVisible(true)
                break
            case 'txl':
                setDefindConfig({
                    title: data.corpName,
                    corpId: data.corpId
                })
                setVisible(true)
                break
        }
    }

    return <Card
        styles={{
            body: { paddingTop: 0, paddingBottom: 0 }
        }}
    >
        {visible && <MailList
            defindConfig={defindConfig}
            visible={visible}
            onClose={() => {
                setDefindConfig({ title: '', corpId: '' })
                setVisible(false)
            }}
            onChange={() => {

            }}
        />}

        {/* 修改企业 */}
        {corpVisible && <ModifyCorp
            initialValues={corpData}
            onClose={() => {
                setCorpData({})
                setCorpVisible(false)
            }}
            onChange={() => {
                setCorpData({})
                setCorpVisible(false)
                getCorpList.refresh()
            }}
            visible={corpVisible}
        />}

        <SearchBox
            bodyPadding={`16px 0 12px`}
            buttons={<>
                <Button type="primary" onClick={() => getList()} loading={getCorpList.loading} icon={<SearchOutlined />}>搜索</Button>
            </>}
        >
            <>
                <Input onChange={(e) => setQueryForm({ ...queryForm, corpName: e.target.value, pageNum: 1 })} value={queryForm?.corpName} placeholder="企微名称" allowClear />
                <Input onChange={(e) => setQueryForm({ ...queryForm, originCorpId: e.target.value, pageNum: 1 })} value={queryForm?.originCorpId} placeholder="企微ID" allowClear />
                <Select
                    value={queryForm?.authStatus}
                    onChange={(e) => setQueryForm({ ...queryForm, authStatus: e, pageNum: 1 })}
                    showSearch
                    allowClear
                    style={{ minWidth: 150 }}
                    placeholder="授权状态"
                    filterOption={(input, option) =>
                        ((option?.label ?? '') as string).toLowerCase().includes(input.toLowerCase())
                    }
                    options={[{ label: '成功授权', value: 1 }, { label: '取消授权', value: -1 }]}
                />
                <Select
                    value={queryForm?.configStatus}
                    onChange={(e) => setQueryForm({ ...queryForm, configStatus: e, pageNum: 1 })}
                    showSearch
                    allowClear
                    style={{ minWidth: 150 }}
                    placeholder="配置状态"
                    filterOption={(input, option) =>
                        ((option?.label ?? '') as string).toLowerCase().includes(input.toLowerCase())
                    }
                    options={[{ label: '未配置', value: 'ING' }, { label: '配置成功', value: 'SUCCESS' }, { label: '配置失败', value: 'ERROR' }]}
                />
            </>
        </SearchBox>

        <Table
            style={{ marginBottom: 1 }}
            dataSource={getCorpList.data?.data?.records}
            columns={TableConfig(handle)}
            scroll={{ x: 1900, y: 'calc(100vh - 265px)' }}
            rowKey={(s: { corpId: any; }) => {
                return s.corpId
            }}
            loading={getCorpList.loading}
            bordered
            pagination={{
                total: getCorpList.data?.data?.total,
                showTotal: (total) => <Tag color="cyan">总共{total}数据</Tag>,
                showSizeChanger: true,
                showLessItems: true,
                defaultCurrent: 1,
                defaultPageSize: 20,//默认初始的每页条数
                current: getCorpList?.data?.data?.current || 1,
                pageSize: getCorpList?.data?.data?.size || 20,
                onChange: (page, pageSize) => {
                    setQueryForm({ ...queryForm, pageNum: page, pageSize })
                }
            }}
        />
    </Card>
}

export default CorpUserAssign