import { connect } from "umi";
import type { ConnectState } from "@/models/connect";
import { useEffect, useImperativeHandle, useState } from "react";
import { Tree } from "antd";
import { DownOutlined } from "@ant-design/icons";
import './selectShop.less'
import LoadingBox from "@/pages/reports/Finance/businessAnalysis/components/loading";
import { handleGetServerpartShopTree, handleGetSPRegionShopTree } from "../service";

type DetailProps = {
    onRef: any
    onShow?: boolean
    currentUser: any
    addFormRef?: any
}
const SelectShop = ({ onRef, onShow, currentUser, addFormRef }: DetailProps) => {

    const [treeData, setTreeData] = useState<any>()
    const [selectId, setSelectId] = useState<any>()
    const [treeLoading, setTreeLoading] = useState<boolean>(false)
    // 默认选择项
    const [defaultSelect,setDefaultSelect] = useState<any>()



    // 拿到树形的数据
    const handleGetTreeData = async (code?: any) => {
        // let provinceCode = 
        console.log('code', code);
        let req: any = {
            ProvinceCode: code || currentUser?.ProvinceCode || '734100',
            ShowWholePower: true,
            ShowState: true
        }
        console.log('req', req);
        setTreeLoading(true)
        const data = await handleGetSPRegionShopTree(req)
        console.log('data3232', data);


        // let list: any = []
        // if (data && data.length > 0) {
        //     data.forEach((item: any) => {
        //         let children: any = []
        //         if (item.children && item.children.length > 0) {
        //             item.children.forEach((subItem: any) => {
        //                 children.push({ title: subItem.label, key: `2-${subItem.value}`, value: subItem.value, type: 2 })
        //             })
        //         }
        //         let obj: any = {
        //             title: item.label,
        //             key: `1-${item.value}`,
        //             value: item.value,
        //             children: children,
        //             type: 1
        //         }
        //         list.push(obj)
        //     })
        // }
        // console.log('list', list);
        setTreeData(data)
        setSelectId(undefined)
        setTreeLoading(false)
    }

    // useEffect(() => {
    //     if (onShow) {
    //         handleGetTreeData()
    //     }
    // }, [onShow])

    // 赋值表单详情查到的门店选择
    const handleShopSelected = (list: any)=>{
        let res: any = []
        let idList: any = []
        if(list && list.length>0){
            list.forEach((item: any)=>{
                res.push({
                    label: '',
                    type: 2,
                    value: item.value,
                    key:`2-${item.value}`,
                })
                idList.push(`2-${item.value}`)
            })
        }
        console.log('res',res);
        console.log('idList',idList);
        
        setDefaultSelect(idList)
        setSelectId(res)
    }


    useImperativeHandle(onRef, () => ({
        selectId,
        handleGetTreeData,
        handleShopSelected
    }));

    
    

    return (
        <div className="selectShop">
            <div className="selectShopTop">选择关联门店</div>
            <div className="treeContent">
                {
                    treeLoading ? <LoadingBox /> :
                        <Tree
                            checkable
                            treeData={treeData}
                            fieldNames={{
                                title: "label",
                                key: "key"
                            }}
                            checkedKeys={defaultSelect}
                            onCheck={(checkedKeys: React.Key[] | any, info) => {
                                console.log('checkedKeys',checkedKeys);
                                setDefaultSelect(checkedKeys)
                                const selectedIds = info.checkedNodes.filter(n => n?.type === 2)
                                setSelectId(selectedIds)
                                console.log('info', info);
                                console.log('selectedIds', selectedIds);
                                // let list: any = []
                                // if (selectedIds && selectedIds.length > 0) {
                                //     selectedIds.forEach((item: any) => {
                                //         list.push({ label: item.label, value: item.value })
                                //     })
                                // }
                            }}
                        />
                }
            </div>

        </div>
    )
}

export default connect(({ user, }: ConnectState) => ({
    currentUser: user.currentUser,
}))(SelectShop);
