import { editMediaFolder } from "@/services/launchAdq/material"
import { Form, message, Modal, TreeSelect } from "antd"
import React, { useEffect, useState } from "react"
import { useModel } from "umi"
import '../../../../pages/launchSystemV3/tencentAdPutIn/index.less'
import { DataNode } from "antd/lib/tree"
import { DownOutlined } from "@ant-design/icons"

interface Props {
    catalogueData: any[]
    isAll: boolean
    visible?: boolean
    onChange?: () => void
    onClose?: () => void
}
/**
 * 移动至
 * @returns 
 */
const MoveTo: React.FC<Props> = ({ isAll, visible, onClose, catalogueData = [] }) => {

    /*****************************/
    const { state, list } = useModel(isAll ? 'useLaunchAdq.useBdMedia' : 'useLaunchAdq.useBdMediaPup')
    const { selectFile, mediaType, belongUser } = state
    const [form] = Form.useForm();
    const [treeData, setTreeData] = useState<any[]>([]);
    const [loading, setLoading] = useState<boolean>(false)
    /*****************************/

    const handleOk = () => {
        form.validateFields().then(values => {
            if (selectFile && selectFile?.length > 0) {
                let hide = message.loading('移动至。。。', 0)
                setLoading(true)
                let ajax = selectFile.map(id => editMediaFolder({ sysMediaId: id, folderId: values.folderId, mediaType: mediaType as any }))
                Promise.all(ajax).then(res => {
                    console.log('移动至。。。', res);
                    if (res[0]?.data) {
                        list.refresh()
                        setLoading(false)
                        hide()
                        message.success('移动成功')
                        onClose?.()
                    }
                })
            }
        })
    }

    useEffect(() => {
        setTreeData(resettingTreedata(catalogueData))
    }, [catalogueData])

    const resettingTreedata = (tree: { title: string, id: number, childMedias?: any[] }[]): any[] => {
        return tree.map(item => {
            let children: DataNode[] = []
            if (item?.childMedias?.length) {
                children = resettingTreedata(item.childMedias)
            }
            return { title: item.title, value: item.id, children }
        });
    };

    return <Modal
        title={<strong>移动至</strong>}
        open={visible}
        onCancel={() => onClose?.()}
        onOk={handleOk}
        confirmLoading={loading}
        className='modalResetCss'
    >
        <Form
            form={form}
            labelCol={{ span: 4 }}
            labelAlign="left"
            className='ad_form_style'
            colon={false}
            initialValues={{}}
        >
            <Form.Item label={<strong>文件夹</strong>} name='folderId' rules={[{ required: true, message: '请选择文件夹' }]}>
                <TreeSelect
                    treeData={[
                        { title: belongUser == 1 ? '个人本地' : '公共本地', value: 0 },
                        ...treeData
                    ]}
                    switcherIcon={<DownOutlined />}
                />
            </Form.Item>
        </Form>
    </Modal>
}


export default React.memo(MoveTo)