import React, { useEffect, useState } from "react"
import '../../tencentAdPutIn/index.less'
import { Button, Card, Input, message, Select, Table } from "antd"
import { PlusOutlined, SearchOutlined } from "@ant-design/icons"
import { useAjax } from "@/Hook/useAjax"
import { delCopyWritingApi, getCopyWritingListApi } from "@/services/adqV3/global"
import ModifyCopyWriting from "./modifyCopyWriting"
import columns from "./tableConfig"
import { getErpUserAll } from "@/services/launchAdq/adq"

/**
 * 文案库
 * @returns 
 */
const CopyWriting: React.FC = () => {

    /*************************************/
    const [queryForm, setQueryForm] = useState<{ category?: string, content?: string, createBy?: number, pageNum: number, pageSize: number }>({ pageNum: 1, pageSize: 20 })
    const [queryFormNew, setQueryFormNew] = useState<{ category?: string, content?: string, createBy?: number, pageNum: number, pageSize: number }>({ pageNum: 1, pageSize: 20 })
    const [initialValues, setInitialValues] = useState<any>()
    const [visible, setVisible] = useState<boolean>(false)


    const getCopyWritingList = useAjax((params) => getCopyWritingListApi(params))
    const delCopyWriting = useAjax((params) => delCopyWritingApi(params))
    const allOfMember = useAjax(() => getErpUserAll())
    /*************************************/

    useEffect(() => {
        allOfMember.run()
    }, [])

    useEffect(() => {
        getCopyWritingList.run(queryFormNew)
    }, [queryFormNew])

    const del = (id: number) => {
        delCopyWriting.run(id).then(res => {
            if (res) {
                message.success('删除成功')
                getCopyWritingList.refresh()
            }
        })
    }

    const update = (data: any) => {
        setInitialValues(data)
        setVisible(true)
    }

    return <Card
        className="cardResetCss"
        title={<div className="flexStart" style={{ gap: 8 }}>
            <Select
                showSearch
                placeholder="请选择创建人"
                onChange={(e) => setQueryForm({ ...queryForm, createBy: e, pageNum: 1 })}
                filterOption={(input, option) =>
                    (option?.label as any)?.toLowerCase().indexOf(input.toLowerCase()) >= 0
                }
                allowClear
                style={{ width: 140 }}
                options={allOfMember?.data?.map((item: { userId: any; nickname: string }) => ({
                    value: item.userId,
                    label: item.nickname,
                }))}
            />
            <Input style={{ width: 200 }} placeholder="文案分类" value={queryForm?.category} allowClear onChange={(e) => setQueryForm({ ...queryForm, category: e.target.value, pageNum: 1 })} />
            <Input style={{ width: 200 }} placeholder="关键字" value={queryForm?.content} allowClear onChange={(e) => setQueryForm({ ...queryForm, content: e.target.value, pageNum: 1 })} />

            <Button type="primary" icon={<SearchOutlined />} onClick={() => setQueryFormNew({ ...queryForm })}>搜索</Button>
            <Button type="primary" icon={<PlusOutlined />} onClick={() => { setVisible(true) }}>新增文案</Button>
        </div>}
    >

        <Table
            columns={columns(del, update)}
            dataSource={getCopyWritingList.data?.records}
            size="small"
            loading={getCopyWritingList?.loading}
            scroll={{ y: 600, x: 1100 }}
            bordered
            rowKey={'id'}
            pagination={{
                defaultPageSize: 20,
                current: getCopyWritingList.data?.current || 1,
                pageSize: getCopyWritingList.data?.size || 10,
                total: getCopyWritingList.data?.total || 0
            }}
            onChange={(pagination) => {
                const { current, pageSize } = pagination
                setQueryForm({ ...queryForm, pageNum: current || 1, pageSize: pageSize || 10 })
                setQueryFormNew({ ...queryForm, pageNum: current || 1, pageSize: pageSize || 10 })
            }}
        />


        {/* 新增文案修改文案 */}
        {visible && <ModifyCopyWriting
            visible={visible}
            initialValues={initialValues}
            onChange={() => {
                setInitialValues(undefined)
                setVisible(false)
                getCopyWritingList.refresh()
            }}
            onClose={() => {
                setInitialValues(undefined)
                setVisible(false)
            }}
        />}
    </Card>
}

export default CopyWriting