import { useAjax } from "@/Hook/useAjax"
import useNewToken from "@/Hook/useNewToken"
import { useUpdateEffect } from "ahooks"
import { App, Badge, Button, DatePicker, Input, Select, Space, Table, Tag } from "antd"
import React, { useEffect, useState } from "react"
import { SearchOutlined } from '@ant-design/icons';
import { highGroupMsgCorpUserListConfig } from "./highGroupTableConfig"
import { getMessageSendTaskuserListApi, GetSendTaskGroupuserListProps, putMessageUpdateApi } from "@/pages/weComTask/API/businessPlan/create"


interface Props {
    corpId: string
    taskId: number
}
/**
 * 群发下发企微号列表
 * @param param0 
 * @returns 
 */
const HighGroupXfCorpTabls: React.FC<Props> = ({ corpId, taskId }) => {

    /******************************/
    const { message } = App.useApp()
    const { token } = useNewToken()
    const [queryForms, setQueryForms] = useState<GetSendTaskGroupuserListProps>({ pageNum: 1, pageSize: 20, corpId, taskId })

    const getMessageSendTaskuserList = useAjax((params) => getMessageSendTaskuserListApi(params))
    const putMessageUpdate = useAjax((params) => putMessageUpdateApi(params))
    /******************************/

    useEffect(() => {
        setQueryForms({ ...queryForms, corpId, taskId })
    }, [corpId, taskId])

    useUpdateEffect(() => {
        if (queryForms.corpId && queryForms.taskId) {
            getMessageSendTaskuserList.run(queryForms)
        }
    }, [queryForms])

    const reload=(id)=>{
        putMessageUpdate.run(id).then(res=>{
            console.log(res);
            getMessageSendTaskuserList.refresh()

        })
    }

    return <div>
        <Space style={{ width: '100%' }} wrap>
            <Input placeholder="消息ID" style={{ width: 120 }} allowClear onChange={(e) => setQueryForms({ ...queryForms, msgId: e.target.value })} />
            <Select
                showSearch
                style={{ minWidth: 100 }}
                allowClear
                onChange={(value) => {
                    setQueryForms({ ...queryForms, status: value })
                }}
                value={queryForms?.status}
                placeholder="发送状态"
                filterOption={(input, option) =>
                    ((option?.label ?? '') as string).toLowerCase().includes(input.toLowerCase())
                }
                options={[{ label: <Badge status="error" text='未发送' />, value: 0 }, { label: <Badge status="success" text='已发送' />, value: 2 }]}
            />
            <DatePicker placeholder="发送开始时间" onChange={(e, date) => { setQueryForms({ ...queryForms, sendTimeStartTime: date as string }) }} />
            <DatePicker placeholder="发送结束时间" onChange={(e, date) => { setQueryForms({ ...queryForms, sendTimeEndTime: date as string }) }} />
            <DatePicker.RangePicker placeholder={['预计送达时间(起始)', '预计送达时间(结束)']} onChange={(e, date) => { setQueryForms({ ...queryForms, createStartDate: date[0], createEndDate: date[1] }) }} />
            <Button onClick={() => getMessageSendTaskuserList.refresh()} loading={getMessageSendTaskuserList.loading} icon={<SearchOutlined />}>搜索</Button>
        </Space>

        {/* 表 */}
        <Table
            style={{ marginTop: 10 }}
            dataSource={getMessageSendTaskuserList?.data?.data?.records}
            loading={getMessageSendTaskuserList?.loading}
            columns={highGroupMsgCorpUserListConfig(reload)}
            scroll={{ x: 400, y: 350 }}
            rowKey={(s) => {
                return s.id
            }}
            size='small'
            onRow={(row) => {
                return !row.status ? {
                    style: { background: token.colorPrimaryBgHover }
                } : {}
            }}
            pagination={{
                total: getMessageSendTaskuserList?.data?.data?.total,
                showTotal: (total) => <Tag color="cyan">总共{total}数据</Tag>,
                showSizeChanger: true,
                showLessItems: true,
                defaultCurrent: 1,
                defaultPageSize: 200,//默认初始的每页条数
                current: getMessageSendTaskuserList?.data?.data?.current || 1,
                pageSize: getMessageSendTaskuserList?.data?.data?.size || 20,
                onChange: (page, pageSize) => {
                    setQueryForms({ ...queryForms, pageNum: page, pageSize })
                }
            }}
        />
    </div>
}

export default React.memo(HighGroupXfCorpTabls)