
import HocError from '@/Hoc/HocError'
import { Card, Col, Modal, Row, Table, Tag, Input, message, Space, Button } from 'antd'
import React, { useCallback, useEffect, useState } from 'react'
import { columnsMp } from './tableConfig'
import { useModel } from 'umi'
import { useAjax } from '@/Hook/useAjax'
import { putAdAccountApi } from '@/services/launchAdq/adAuthorize'
import style from './index.less'
import TableData from '../../components/TableData'

/** 投放管理 */
const AdAuthorize: React.FC = () => {
    const { getAdAccount } = useModel('useLaunchAdq.useAdAuthorize')
    const [tableData, setTableData] = useState<any[]>([])
    const [remarkData, set_remarkData] = useState<{
        visible: boolean,
        remark: string,
        data: any
    }>({
        visible: false,
        remark: '',
        data: null
    })
    const putRemark = useAjax((adAccountId: any, remark: any) => putAdAccountApi(adAccountId, remark))
    useEffect(() => {
        getList()
    }, [])
    const getList = () => {
        // 获取账号列表
        getAdAccount.run().then(res => {
            if (res) {
                setTableData(() => res?.data || [])
            }
        })
    }
    const remark = useCallback(() => {
        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('请输入备注！')
        }

    }, [getAdAccount, remarkData])
    const edit = useCallback((data) => {
        set_remarkData({ ...remarkData, visible: true, data, remark: data.remark })
    }, [remarkData])
    
    return <Card>
        <TableData
            // ajax={getAdAccount}
            dataSource={tableData}
            loading={getAdAccount?.loading}
            columns={() => columnsMp(edit)}
            size="small"
            scroll={{ x: 2000, 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>}
        />
        {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>}
    </Card>
}

export default HocError(AdAuthorize)