import { useAjax } from "@/Hook/useAjax"
import { Badge, DatePicker, Modal, Select, Space, Table, Tag } from "antd"
import React, { useEffect, useState } from "react"
import { TableConfigLog } from "./tableConfig"
import { inheritLogCount, inheritLogList } from "@/pages/weComTask/API/businessPlan/create"
import SearchBox from "@/pages/weComTask/components/searchBox"

interface Props {
    taskName: string,
    taskId: number,
    visible?: boolean
    onClose?: () => void
}
const LogStatus = { "ERROR": <Badge status="error" text="继承失败" />, "REFUSED": <Badge status="default" text="客户拒绝" />, "WAITING": <Badge status="processing" text='等待接待' />, "COMPLETE": <Badge status="success" text="接替完成" />, "LIMIT": <Badge status="warning" text="接替成员客户达到上限" /> }
const Log: React.FC<Props> = ({ taskId, taskName, visible, onClose }) => {

    /*********************************/
    const [queryForm, setQueryForm] = useState<{ pageNum: number, pageSize: number, taskId: number, customerStatus?: any, endTime?: any, beginTime?: any }>({ pageNum: 1, pageSize: 20, taskId })
    const getLogListOfPage = useAjax((params) => inheritLogList(params))
    const getLogCount = useAjax((params) => inheritLogCount(params))
    /*********************************/

    useEffect(() => {
        getLogListOfPage.run(queryForm)
        getLogCount.run(queryForm)
    }, [queryForm])


    return <Modal
        title={(taskName ? taskName : "") + `任务日志`}
        open={visible}
        onCancel={onClose}
        footer={null}
        width={1000}
    >
        <SearchBox bodyPadding={'0 0 5px 0'}>
            <>
                <Space>
                    <Select
                        style={{ width: 150 }}
                        placeholder="接替状态"
                        value={queryForm?.customerStatus}
                        showSearch
                        allowClear
                        onChange={(e) => {
                            setQueryForm({ ...queryForm, customerStatus: e, pageNum: 1 })
                        }}
                        filterOption={(input: string, option?: { label: string; value: string }) => (option?.label ?? '').toLowerCase().includes(input.toLowerCase())}
                        options={Object.keys(LogStatus).map(key => ({ label: (LogStatus as any)[key], value: key }))}
                    />
                    <DatePicker allowClear onChange={(date, dateString) => {
                        setQueryForm({ ...queryForm, beginTime: dateString, pageNum: 1 })

                    }} placeholder="接替开始时间" />
                    <DatePicker allowClear onChange={(date, dateString) => {
                        setQueryForm({ ...queryForm, endTime: dateString, pageNum: 1 })
                    }} placeholder="接替结束时间" />
                </Space>
                <div >
                    <Tag color="default">总计人数:{getLogCount?.data?.data?.transferCount || 0}</Tag>
                    <Tag color="success">成功人数:{getLogCount?.data?.data?.transferSuccessCount || 0}</Tag>
                </div>
            </>
        </SearchBox>
        <Table
            style={{ marginBottom: 1 }}
            dataSource={getLogListOfPage?.data?.data?.records}
            loading={getLogListOfPage?.loading}
            columns={TableConfigLog()}
            scroll={{ y: 600 }}
            rowKey={(s) => {
                return s.id
            }}
            bordered
            size='small'
            pagination={{
                total: getLogListOfPage?.data?.data?.total,
                showTotal: (total) => <Tag color="cyan">总共{total}数据</Tag>,
                showSizeChanger: true,
                showLessItems: true,
                defaultCurrent: 1,
                defaultPageSize: 20,//默认初始的每页条数
                current: getLogListOfPage?.data?.data?.current || 1,
                pageSize: getLogListOfPage?.data?.data?.size || 20,
                onChange: (page, pageSize) => {
                    setQueryForm({ ...queryForm, pageNum: page, pageSize })
                }
            }}
        />
    </Modal>
}

export default React.memo(Log)