import HocError from '@/Hoc/HocError'
import { Form, InputNumber, message, Modal } from 'antd'
import React, { useMemo, useRef, useState } from 'react'
import { useModel } from 'umi'
import TableData from '../../components/TableData'
import { fcolumns } from './tableConfig'
function Page() {
    const { state: { dataSource }, getChannelOrderTrendPay, setPay } = useModel('useData.useTableData')
    const [show, setShow] = useState<boolean>(false)
    const [queryForm, setQueryForm] = useState<{ date: string, channel: string, pay: number, cost: number }>({ date: '', channel: '', pay: 0, cost: 0 })
    const { currentUser }: any = useModel('@@initialState', model => ({ currentUser: model.initialState?.currentUser }))
    const cRef: any = useRef(null)

    const data = useMemo(() => {
        let arr: any[] = []
        if (dataSource) {
            dataSource?.forEach((item: any, index: number) => {
                item['id'] = index
                arr.push(item)
            })
        }
        return arr
    }, [dataSource])
    //获取排序列表
    const sortArr = useMemo(() => {
        let arr: any[] = []
        fcolumns()().map((item: any) => {
            if (typeof item.title === 'string') {
                arr.push({ title: item.title, value: item.dataIndex, key: item.dataIndex })
            }
            if (typeof item.title === 'object' && typeof item.title.props.children[0] === 'string') {
                arr.push({ title: item.title, value: item.dataIndex, key: item.dataIndex })
            }
        })
        return arr
    }, [fcolumns])

    // 设置赔付金
    const editPay = (date: string, channel: string, pay: number, cost: number) => {
        console.log(channel, pay)
        setQueryForm({ date, channel, pay: pay || 0, cost: cost || 0 })
        setShow(true)
    }
    const handleOk = () => {
        setPay.run({ ...queryForm, pay: queryForm.pay.toString(), cost: queryForm.cost.toString(), user_id: currentUser.userId }).then((res: any) => {
            if (res?.data) {
                setQueryForm({ date: '', channel: '', pay: 0, cost: 0 });
                setShow(false)
                if(cRef.current) {
                    cRef.current?.tableSubmut({})
                }
                message.success('设置成功')
            }
        })
    }

    return <>
        <Modal title={`设置 ${queryForm.channel} 赔付金`} width={400} confirmLoading={setPay.loading} visible={show} onOk={handleOk} onCancel={() => { setQueryForm({ date: '', channel: '', pay: 0, cost: 0 }); setShow(false) }}>
            <Form>
                <Form.Item label="赔付金">
                    <InputNumber value={queryForm.pay} style={{ width: "100%" }} onChange={(e) => { setQueryForm({ ...queryForm, pay: e }) }} />
                </Form.Item>
            </Form>
        </Modal>
        <TableData
            ref={cRef}
            isGroupTab={false}
            isAdmin
            isDownload
            isSelctAcc
            isUserId
            isDataSelectPitcher
            isDataSelectPitcher_isDisabled
            isTableDateArr
            isZj
            sortArr={sortArr}
            ajax={getChannelOrderTrendPay}
            columns={fcolumns(editPay)}
            dataSource={data}
            title='公众号付费趋势（含赔付金）'
            // tableTotal={tableTotal}
            scroll={{ x: 1000, y: 600 }}
        // isTdColor
        />
    </>
}

export default HocError(Page)