import { useAjax } from "@/Hook/useAjax"
import { Button, message, Modal, Space, Table } from "antd"
import React, { useEffect, useState } from "react"
import { Columns } from "./tableConfig"
import { delV3StrategyApi, getV3StrategyListApi } from "@/services/adqV3"
import { getAdqV3AdListApi } from "@/services/launchAdq/adqv3";
import '../../index.less'
import { DiffOutlined } from "@ant-design/icons"

interface Props {
    type: string,
    onChange?: (value: { dynamicMaterialDTos: any, mediaType: number, deliveryMode: string, creativeTemplateId: number, dynamicCreativesTextDTOS: any }) => void
}
/**
 * 使用素材
 * @returns 
 */
const SaveUseImg: React.FC<Props> = ({ onChange, type }) => {

    /***********************/
    const [visible, setVisible] = useState<boolean>(false)
    const [queryFormNew, setQueryFormNew] = useState<PULLIN.GetV3StrategyListProps>({ pageNum: 1, pageSize: 20, type })
    const [selectedRowKeys, setSelectedRowKeys] = useState<any[]>([])

    const getStrategy = useAjax((params) => getV3StrategyListApi(params))
    const delStrategy = useAjax((params) => delV3StrategyApi(params))
    const getAdqV3AdList = useAjax((params) => getAdqV3AdListApi(params), { formatResult: true })
    /***********************/

    useEffect(() => {
        if (visible) {
            getList()
        }
    }, [visible, queryFormNew])

    const getList = () => {
        getStrategy.run(queryFormNew)
    }

    const use = () => {
        setVisible(true)
    }

    const handleOk = () => {
        if (selectedRowKeys.length > 0) {
            onChange?.(JSON.parse(selectedRowKeys[0].strategyValue))
            setVisible(false)
        } else {
            message.error('请选择素材组')
        }
    }

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

    return <>
        <Button type='link' style={{ padding: 0, fontSize: 12 }} onClick={use} icon={<DiffOutlined />}>使用素材组</Button>
        {visible && <Modal
            title={<strong>使用策略组</strong>}
            visible={visible}
            onCancel={() => { setVisible(false) }}
            onOk={handleOk}
            width={700}
            confirmLoading={getAdqV3AdList.loading}
            className="modalResetCss"
        >
            <Space style={{ width: '100%' }} direction='vertical'>
                <Table
                    dataSource={getStrategy?.data?.records}
                    loading={getStrategy.loading}
                    columns={Columns(del)}
                    size="small"
                    bordered
                    rowKey={'id'}
                    scroll={{ x: 650 }}
                    rowSelection={{
                        type: 'radio',
                        onChange: (selectedRowKeys: React.Key[], selectedRows: any[]) => {
                            console.log(selectedRowKeys, selectedRows);
                            setSelectedRowKeys(selectedRows)
                        }
                    }}
                    pagination={{
                        total: getStrategy?.data?.total,
                        current: queryFormNew?.pageNum,
                        pageSize: queryFormNew?.pageSize
                    }}
                    onChange={(pagination) => {
                        const { current, pageSize } = pagination
                        setQueryFormNew({ ...queryFormNew, pageNum: current as number, pageSize: pageSize as number || 20 })
                    }}
                />
            </Space>
        </Modal>}
    </>
}


export default React.memo(SaveUseImg)