import HocError from '@/Hoc/HocError'
import TeamMembers from '@/pages/launchSystemNew/components/teamMembers'
import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons'
import { Select, Tabs } from 'antd'
import React, { useCallback, useEffect, useState } from 'react'
import style from './index.less'
import { getAdAccountAllOfMemberAll, getErpUserAll } from '@/services/launchAdq/adq'
import { useAjax } from '@/Hook/useAjax'
import TableData from '@/pages/launchSystemNew/components/TableData'
import { oceanengine_adAccount_listOfUser } from '@/services/toutiao/ttAccountManage'
import { columns } from './tableConfig'
import AppointPut from './appointPut'
function ttAccountManage() {
    const [puShow, setPuShow] = useState<boolean>(false)
    const [puData, setPuData] = useState<any[]>([])
    const [activeKey, setActiveKey] = useState<string>('1')
    const [showLeft, setShowLeft] = useState<boolean>(false)
    const [queryForm, setQueryForm] = useState<any>({ pageNum: 1, pageSize: 20 })

    const allOfMember = useAjax(() => getAdAccountAllOfMemberAll(), { formatResult: true })
    const erpUserALL = useAjax(() => getErpUserAll(), { formatResult: true })
    const getAdAccountList = useAjax((params) => oceanengine_adAccount_listOfUser(params), { formatResult: true })

    useEffect(() => {
        !erpUserALL.data && erpUserALL.run()
        getList()
    }, [queryForm])
    /** 获取账号列表 */
    const getList = useCallback(() => {
        // let params = JSON.parse(JSON.stringify(queryForm))
        // if (params.accountIds) {
        //     params.accountIds = params.accountIds.split(/[\,\，]/)
        // } else {
        //     delete params?.accountIds
        // }
        getAdAccountList.run(queryForm)
    }, [queryForm])


    /** 指派投手 */
    const putUserHandle = (data: any[]) => {
        setPuData(data)
        setPuShow(true)
    }
    return <div style={{ height: '100%' }}>
        <Tabs
            tabBarStyle={{ marginBottom: 1 }}
            activeKey={activeKey}
            type="card"
            onChange={(activeKey) => {
                if (activeKey !== 'contract') {
                    let newQueryForm = JSON.parse(JSON.stringify(queryForm))
                    delete newQueryForm?.groupId
                    delete newQueryForm?.userId
                    setQueryForm(newQueryForm)
                    setActiveKey(activeKey)
                } else {
                    setShowLeft(!showLeft)
                }
            }}
        >
            <Tabs.TabPane tab='我的' key='1' />
            <Tabs.TabPane tab='组员' key='2' />
            <Tabs.TabPane tab={showLeft ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />} key='contract' />
        </Tabs>
        <div className={style.manage}>
            {!showLeft && activeKey === '2' && <TeamMembers allOfMember={allOfMember} onChange={(userId) => setQueryForm({ ...queryForm, userId, pageNum: 1 })} value={queryForm?.userId} />}
            <div className={style.manage__left} style={showLeft || activeKey === '1' ? { width: '100%' } : { width: 'calc(100% - 200px)' }}>
                <TableData
                    ajax={getAdAccountList}
                    dataSource={getAdAccountList?.data?.data?.records}
                    loading={getAdAccountList?.loading}
                    columns={() => columns(putUserHandle)}
                    total={getAdAccountList?.data?.data?.total}
                    page={getAdAccountList?.data?.data?.current}
                    pageSize={getAdAccountList?.data?.data?.size}
                    size="small"
                    scroll={{ y: 600 }}
                    myKey="accountId"
                    leftChild={<>
                        <Select
                            mode="tags"
                            style={{ minWidth: 270 }}
                            placeholder="账号ID搜索每次输入按下回车分割账号"
                            onChange={(value)=>{
                                let arr:any =[]
                                value?.map((str: string)=>{
                                    if(str?.search(/[,，]/) !== -1){
                                        let newArr = str.split(/[,，]/)
                                        arr =[...arr,...newArr]
                                    }else{
                                        arr.push(str)
                                    }
                                })
                                setQueryForm({...queryForm,accountIds:arr})
                            }}
                        /></>}
                    onChange={(props: any) => {
                        let { pagination } = props
                        let { current, pageSize } = pagination
                        setQueryForm({ ...queryForm, pageNum: current, pageSize })
                    }}
                />
            </div>
        </div>
        {/* 指派 */}
        {puShow && <AppointPut value={puData} visible={puShow} onClose={() => { setPuShow(false) }} allOfMember={erpUserALL} onChange={() => { setPuShow(false); getAdAccountList.refresh(); }} />}
    </div>
}

export default HocError(ttAccountManage)