ad-manage/src/pages/launchSystemNew/account/index.tsx

import HocError from '@/Hoc/HocError'
import { Col, Modal, Row, Input, message, Space, Tabs } from 'antd'
import React, { useCallback, useEffect, useState } from 'react'
import { columnsMp } from './tableConfig'
import { useAjax } from '@/Hook/useAjax'
import { getAdAccountListApi, GetAdAccountParams, putAdAccountApi } from '@/services/launchAdq/adAuthorize'
import style from './index.less'
import TableData from '../components/TableData'
import GroupLeft from './groupLeft'
import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons'

/** 投放管理 */
const AdAuthorize: React.FC = () => {

    /*************************/
    const [queryForm, setQueryForm] = useState<GetAdAccountParams>({ pageNum: 1, pageSize: 20 })
    const [remarkData, set_remarkData] = useState<{ visible: boolean, remark: string, data: any }>({
        visible: false,
        remark: '',
        data: null
    })
    const [activeKey, setActiveKey] = useState<string>('1')
    const [showLeft, setShowLeft] = useState<boolean>(false)
    const putRemark = useAjax((adAccountId: any, remark: any) => putAdAccountApi(adAccountId, remark))
    const getAdAccountList = useAjax((params) => getAdAccountListApi(params), { formatResult: true })
    /*************************/

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

    /** 获取账号列表 */ 
    const getList = () => {
        getAdAccountList.run(queryForm)
    }

    const remark = () => {
        if (remarkData.remark && remarkData.data) {
            putRemark.run(remarkData.data.id, remarkData.remark).then(res => {
                set_remarkData({ ...remarkData, visible: false, remark: '', data: null })
                getList()
            })
        } else {
            message.error('请输入备注！')
        }

    }
    const edit = useCallback((data) => {
        set_remarkData({ ...remarkData, visible: true, data, remark: data.remark })
    }, [remarkData])

    return <div style={{ height: '100%' }}>

        <Tabs
            tabBarStyle={{ marginBottom: 1 }}
            activeKey={activeKey}
            type="card"
            onChange={(activeKey) => {
                if (activeKey !== 'contract') {
                    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 === '1' && <GroupLeft onChange={(groupId) => setQueryForm({ ...queryForm, groupId })}/>}
            
            <div className={style.manage__left} style={showLeft ? { width: '100%' } : { width: 'calc(100% - 200px)' }}>
                <TableData
                    ajax={getAdAccountList}
                    dataSource={getAdAccountList?.data?.data?.records}
                    loading={getAdAccountList?.loading}
                    columns={() => columnsMp(edit)}
                    total={getAdAccountList?.data?.data?.total}
                    page={getAdAccountList?.data?.data?.current}
                    pageSize={getAdAccountList?.data?.data?.size}
                    size="small"
                    scroll={{ y: 600 }}
                    leftChild={<Space>
                        {/* <Input placeholder="广告主ID" style={{ width: 150 }} allowClear onChange={(e) => {
                            let value = e.target.value
                            if (value) {
                                let newArr = tableData?.filter(item => String(item.accountId).includes(value))
                                setTableData(newArr)
                            } else {
                                setTableData(getAdAccount?.data?.data)
                            }
                        }} /> */}
                        {/* <Button onClick={getList} type='primary'>搜索</Button> */}
                    </Space>}
                />
            </div>
        </div>

        {remarkData.visible && <Modal
            visible={remarkData.visible}
            title='编辑账户'
            onCancel={() => { set_remarkData({ ...remarkData, visible: false, data: null }) }}
            onOk={remark}
        >
            <Row gutter={[20, 20]}>
                <Col span={24} className={style.boxCol}><strong>广告主ID：</strong><span>{remarkData?.data.accountId}</span></Col>
                <Col span={24} className={style.boxCol}><strong>类型：</strong><span>{remarkData?.data.sourceType === 0 ? '微信' : 'QQ'}</span></Col>
                <Col span={24} className={style.boxCol}><strong>公众号信息：</strong><span>{remarkData?.data.wechatAccountName || '无'}</span></Col>
                <Col span={24} className={style.boxCol}><strong>企业名称：</strong><span>{remarkData?.data.corporationName || '无'}</span></Col>
                <Col span={24} className={style.boxCol}><strong>服务商ID列表：</strong><span>{remarkData?.data.agencyIdList ? remarkData.data.agencyIdList?.join() : '无'}</span></Col>
                <Col span={24} className={style.boxCol}><strong>行业ID：</strong><span>{remarkData?.data.systemIndustryId || '无'}</span></Col>
                <Col span={24} className={style.boxCol}><strong>授权状态：</strong><span>{remarkData?.data.authStatus || '无'}</span></Col>
                <Col span={24} className={style.boxCol}><strong>日限额(分)：</strong><span>{remarkData?.data.dailyBudget || '无'}</span></Col>
                <Col span={24} className={style.boxCol}><strong>授权时间：</strong><span>{remarkData?.data.createTime || '无'}</span></Col>
                <Col span={24} className={style.boxCol}><strong>备注：</strong><span><Input.TextArea rows={5} maxLength={200} value={remarkData.remark} onChange={(e) => {
                    let value = e.target.value
                    set_remarkData({ ...remarkData, remark: value })
                }} /></span></Col>
            </Row>
        </Modal>}
    </div>
}

export default HocError(AdAuthorize)