import { useAjax } from "@/Hook/useAjax";
import { getCorpWechatAllApi, getCorpWechatApi, getCorpWechatDetailApi } from "@/services/adqV3/global";
import { PlusOutlined, SearchOutlined } from "@ant-design/icons";
import { Button, Card, Divider, Input, Select, Table, Typography } from "antd";
import React, { useEffect, useState } from "react"
import '../../../tencentAdPutIn/index.less'
import Modify from "./modify";
import columns from "./tableConfig";
const { Text, Paragraph } = Typography;

/**
 * 企业微信
 * @returns 
 */
const CorpWechat: React.FC = () => {

    /**********************************/
    const [queryForm, setQueryForm] = useState<{ pageNum: number, pageSize: number, wechatName?: string, wechatIdList?: string[] }>({ pageNum: 1, pageSize: 20 })
    const [queryFormNew, setQueryFormNew] = useState<{ pageNum: number, pageSize: number, wechatName?: string, wechatIdList?: string[] }>({ pageNum: 1, pageSize: 20 })
    const [visible, setVisible] = useState<boolean>(false)
    const [editData, setEditData] = useState<any>()

    const getCorpWechat = useAjax((params) => getCorpWechatApi(params))
    /**********************************/

    useEffect(() => {
        getCorpWechat.run(queryFormNew)
    }, [queryFormNew])

    const edit = (data: any) => {
        setEditData({ corp: data.corpName + '&&' + data.localCorpId, tencentCorpId: data.tencentCorpId, agentId: data.agentId })
        setVisible(true)
    }

    return <Card
        className="cardResetCss"
        title={<div className="flexStart" style={{ gap: 8 }}>
            <Input style={{ width: 200 }} placeholder="请输入企业微信名称" value={queryForm?.wechatName} allowClear onChange={(e) => setQueryForm({ ...queryForm, wechatName: e.target.value, pageNum: 1 })} />
            <Button type="primary" icon={<SearchOutlined />} onClick={() => setQueryFormNew({ ...queryForm })}>搜索</Button>
            <Button type="primary" icon={<PlusOutlined />} onClick={() => { setVisible(true) }}>新增企业微信</Button>
        </div>}
    >
        <Table
            columns={columns(edit)}
            dataSource={getCorpWechat.data?.records}
            size="small"
            loading={getCorpWechat?.loading}
            scroll={{ y: 600 }}
            bordered
            rowKey={'tencentCorpId'}
            pagination={{
                defaultPageSize: 20,
                current: getCorpWechat.data?.current || 1,
                pageSize: getCorpWechat.data?.size || 10,
                total: getCorpWechat.data?.total || 0
            }}
            onChange={(pagination) => {
                const { current, pageSize } = pagination
                setQueryForm({ ...queryForm, pageNum: current || 1, pageSize: pageSize || 10 })
                setQueryFormNew({ ...queryForm, pageNum: current || 1, pageSize: pageSize || 10 })
            }}
        />

        {/* 新增修改 */}
        {visible && <Modify
            visible={visible}
            value={editData}
            onClose={() => {
                setVisible(false)
                setEditData(undefined)
            }}
            onChange={() => {
                setVisible(false)
                getCorpWechat.refresh()
                setEditData(undefined)
            }}
        />}
    </Card>
}


/**
 * 选择企微
 * @param param0 
 * @returns 
 */
export const SelectCorpWechat: React.FC<{ value?: number, onChange?: (value?: number) => void }> = ({ value, onChange }) => {

    /*******************************/
    const [visible, setVisible] = useState<boolean>(false)
    const getCorpWechatAll = useAjax((params) => getCorpWechatAllApi(params))
    /*******************************/

    // 获取列表
    useEffect(() => {
        getCorpWechatAll.run({})
    }, [])

    return <>
        <Select
            showSearch
            allowClear
            placeholder="请选择企微"
            filterOption={(input: any, option: any) => {
                return option!.name?.toString().toLowerCase().includes(input.toLowerCase())
            }}
            style={{ width: 480 }}
            dropdownRender={menu => <>
                {menu}
                <Divider style={{ margin: '8px 0' }} />
                <div>
                    <Button type="link" onClick={() => {
                        window.location.href = '/#/launchSystemV3/tencenTasset/corpWechat'
                    }}>前往管理</Button>
                    <Button type="link" style={{ paddingLeft: 0, paddingRight: 0 }} onClick={() => {
                        setVisible(true)
                    }}>新增</Button>
                    {/* <Link href="/#/launchSystemV3/tencenTasset/miniProgramWechat" target="_blank">
                    前往管理
                </Link> */}
                </div>
            </>}
            value={value}
            onChange={(e) => onChange?.(e)}
        >
            {getCorpWechatAll?.data?.map((item: { tencentCorpId: string, corpName: string }) => {
                return <Select.Option value={item.tencentCorpId} key={item.tencentCorpId} name={item.corpName + `(${item.tencentCorpId})`}><Text strong>{item.corpName}</Text><Text type="secondary">{`(${item.tencentCorpId})`}</Text></Select.Option>
            })}
        </Select>
        {/* 新增修改 */}
        {visible && <Modify
            visible={visible}
            onClose={() => {
                setVisible(false)
            }}
            onChange={() => {
                setVisible(false)
                getCorpWechatAll.refresh()
            }}
        />}
    </>
}

/**
 * 选择企微
 * @param param0 
 * @returns 
 */
export const SelectCorpWechatCorpId: React.FC<{ value?: string[], onChange?: (value?: string[]) => void }> = ({ value, onChange }) => {

    /*******************************/
    const [visible, setVisible] = useState<boolean>(false)
    const getCorpWechatAll = useAjax((params) => getCorpWechatAllApi(params))
    /*******************************/

    // 获取列表
    useEffect(() => {
        getCorpWechatAll.run({})
    }, [])

    return <>
        <Select
            showSearch
            allowClear
            placeholder="请选择企微"
            filterOption={(input: any, option: any) => {
                return option!.name?.toString().toLowerCase().includes(input.toLowerCase())
            }}
            mode="multiple"
            style={{ width: 480 }}
            dropdownRender={menu => <>
                {menu}
                <Divider style={{ margin: '8px 0' }} />
                <div>
                    <Button type="link" onClick={() => {
                        window.location.href = '/#/launchSystemV3/tencenTasset/corpWechat'
                    }}>前往管理</Button>
                    <Button type="link" style={{ paddingLeft: 0, paddingRight: 0 }} onClick={() => {
                        setVisible(true)
                    }}>新增</Button>
                    {/* <Link href="/#/launchSystemV3/tencenTasset/miniProgramWechat" target="_blank">
                    前往管理
                </Link> */}
                </div>
            </>}
            value={value}
            onChange={(e) => onChange?.(e)}
        >
            {getCorpWechatAll?.data?.map((item: { tencentCorpId: string, corpName: string }) => {
                return <Select.Option value={item.tencentCorpId} disabled={value && value?.length > 0 && !value.includes(item.tencentCorpId)} key={item.tencentCorpId} name={item.corpName + `(${item.tencentCorpId})`}><Text strong>{item.corpName}</Text><Text type="secondary">{`(${item.tencentCorpId})`}</Text></Select.Option>
            })}
        </Select>
        {/* 新增修改 */}
        {visible && <Modify
            visible={visible}
            onClose={() => {
                setVisible(false)
            }}
            onChange={() => {
                setVisible(false)
                getCorpWechatAll.refresh()
            }}
        />}
    </>
}


/**
 * 展示企微
 * @param param0 
 * @returns 
 */
export const ShowCorpWechatDetail: React.FC<{ tencentCorpId: string }> = ({ tencentCorpId }) => {

    /*******************************/
    const getCorpWechatDetail = useAjax((params) => getCorpWechatDetailApi(params))
    /*******************************/

    // 获取列表
    useEffect(() => {
        if (tencentCorpId) {
            getCorpWechatDetail.run({tencentCorpId})
        }
    }, [tencentCorpId])

    return <Paragraph style={{ fontSize: 12, wordBreak: 'break-all', marginBottom: 0 }} ellipsis={{ rows: 2 }}>
        {getCorpWechatDetail.data ? <>
            <Text strong>企业微信：{getCorpWechatDetail.data?.wechatName}</Text><Text type="secondary">{`(${getCorpWechatDetail.data?.wechatId}})`}</Text>
        </> : tencentCorpId}
    </Paragraph>
}

export default CorpWechat