import { PlusOutlined, QuestionCircleFilled, SearchOutlined } from '@ant-design/icons';
import { Button, Card, Input, Table, Tooltip } from 'antd';
import React, { useEffect, useState } from 'react';
import AddUserRotatePolicy from './addUserPotatePolicy';
import { useAjax } from '@/Hook/useAjax';
import { getUserRotatePolicyListApi } from '@/services/adqV3/global';
import '../../../tencentAdPutIn/index.less'

/**
 * 客服号轮换策略
 * @returns 
 */
const UserRotatePolicy: React.FC = () => {

    /*********************************************/
    const [queryParamsNew, setQueryParamsNew] = useState<{ pageNum: number, pageSize: number, policyName?: string }>({ pageNum: 1, pageSize: 20 })
    const [queryParams, setQueryParams] = useState<{ pageNum: number, pageSize: number, policyName?: string }>({ pageNum: 1, pageSize: 20 })
    const [visible, setVisible] = useState<boolean>(false);
    const [editData, setEditData] = useState<any>();

    const getUserRotatePolicyList = useAjax((params) => getUserRotatePolicyListApi(params))
    /*********************************************/

    useEffect(() => {
        getUserRotatePolicyList.run(queryParamsNew)
    }, [queryParamsNew]);


    const editUR = (data: any) => {
        setEditData(data)
        setVisible(true)
    }

    return <Card
        className="cardResetCss"
    >
        <div className="flexStart" style={{ gap: 8, marginBottom: 16 }}>
            <Input placeholder='策略名称' style={{ width: 200 }} allowClear value={queryParams?.policyName} onChange={(e) => setQueryParams({ ...queryParams, policyName: e.target.value })} />
            <Button type="primary" icon={<SearchOutlined />} loading={false} onClick={() => setQueryParamsNew({ ...queryParams, pageNum: 1 })}>搜索</Button>
            <Button
                type="primary"
                icon={<PlusOutlined />}
                onClick={() => {
                    setVisible(true)
                }}
            >新增</Button>
        </div>

        <Table
            columns={[
                {
                    title: '操作',
                    dataIndex: 'cz',
                    key: 'cz',
                    width: 60,
                    align: 'center',
                    render(_, record) {
                        return <a style={{ fontSize: 12 }} onClick={() => editUR(record)}>修改</a>
                    },
                },
                {
                    title: '策略名称',
                    dataIndex: 'policyName',
                    key: 'policyName',
                    width: 110,
                    ellipsis: true,
                    align: 'center'
                },
                {
                    title: <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                        <span>加粉成本的计算周期</span>
                        <Tooltip title="/分钟，必须 >= 20，且必须是 10 的整数倍数">
                            <QuestionCircleFilled />
                        </Tooltip>
                    </div>,
                    dataIndex: 'addCostCalculationCycle',
                    key: 'addCostCalculationCycle',
                    width: 90,
                    align: 'center',
                    render(value) {
                        if (value || value === 0) return value
                        return '--'
                    },
                },
                {
                    title: <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                        <span>加粉成本异常值</span>
                        <Tooltip title="单位：/分">
                            <QuestionCircleFilled />
                        </Tooltip>
                    </div>,
                    dataIndex: 'addCostException',
                    key: 'addCostException',
                    width: 90,
                    align: 'center',
                    render(value) {
                        if (value || value === 0) return value
                        return '--'
                    },
                },
                {
                    title: <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                        <span>有消耗无加粉异常</span>
                        <Tooltip title="单位：/分">
                            <QuestionCircleFilled />
                        </Tooltip>
                    </div>,
                    dataIndex: 'noFansCostValue',
                    key: 'noFansCostValue',
                    width: 90,
                    align: 'center',
                    render(value) {
                        if (value || value === 0) return value
                        return '--'
                    },
                },
                {
                    title: <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                        <span>单号单日最小加粉数量</span>
                        <Tooltip title="默认20，加粉数少于该值永远不触发风控">
                            <QuestionCircleFilled />
                        </Tooltip>
                    </div>,
                    dataIndex: 'minAddFansCount',
                    key: 'minAddFansCount',
                    width: 90,
                    align: 'center',
                    render(value) {
                        if (value || value === 0) return value
                        return '--'
                    },
                },
                {
                    title: '单号单日最大加粉数量',
                    dataIndex: 'maxAddFansCount',
                    key: 'maxAddFansCount',
                    width: 90,
                    align: 'center',
                    render(value) {
                        if (value || value === 0) return value
                        return '--'
                    },
                },
                {
                    title: '组内客服号在线数量',
                    dataIndex: 'onlineCount',
                    key: 'onlineCount',
                    width: 90,
                    align: 'center',
                    render(value) {
                        if (value || value === 0) return value
                        return '--'
                    },
                },
                {
                    title: <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                        <span>客服组内滚动客服号的周期</span>
                        <Tooltip title="/分钟，必须 >= 10">
                            <QuestionCircleFilled />
                        </Tooltip>
                    </div>,
                    dataIndex: 'rollingCustomerTime',
                    key: 'rollingCustomerTime',
                    width: 100,
                    align: 'center',
                    render(value) {
                        if (value || value === 0) return value
                        return '--'
                    },
                },
            ]}
            dataSource={getUserRotatePolicyList.data?.records}
            size="small"
            loading={getUserRotatePolicyList?.loading}
            scroll={{ y: 600, x: 1100 }}
            rowKey={'id'}
            bordered
            pagination={{
                total: getUserRotatePolicyList.data?.total,
                defaultPageSize: 20,
                current: getUserRotatePolicyList.data?.current,
                pageSize: getUserRotatePolicyList.data?.size
            }}
            onChange={(pagination) => {
                const { current, pageSize } = pagination
                setQueryParamsNew({ ...queryParamsNew, pageNum: current as number, pageSize: pageSize as number || 20 })
                setQueryParams({ ...queryParams, pageNum: current as number, pageSize: pageSize as number || 20 })
            }}
        />


        {/* 新增修改客服号轮换策略 */}
        {visible && <AddUserRotatePolicy
            visible={visible}
            value={editData}
            onChange={() => {
                setVisible(false)
                getUserRotatePolicyList.refresh()
            }}
            onClose={() => {
                setVisible(false)
            }}
        />}
    </Card>
};

export default UserRotatePolicy;