import React, {useState, useEffect} from 'react';
import {Button, Checkbox, WhiteSpace, WingBlank} from "antd-mobile";

const AgreeItem = Checkbox.AgreeItem;

const TreeData = (props) => {
    const {data, onClick, closeModal} = props;

    const [treeData, setTreeData] = useState([]);
    useEffect(() => {
        const newData = JSON.parse(JSON.stringify(data));
        newData.map((item, index) => {item.subList = newData.filter(child => item.XH === child.LSID); item.keyIndex = index});
        setTreeData(newData);
    }, [data]);

    const [sGood, setSGood] = useState([])
    const checkGood = (keyIndex, checked) => {
        const newData = [...sGood];
        const Index = sGood.findIndex(item => item === keyIndex);
        checked ? newData.push(keyIndex) : newData.splice(Index, 1);
        setSGood(newData)
    };
    const submit = () => {
        getAll()
    };

    const getAll = val => {
        const result = data.filter((item, index) => sGood.indexOf(index) > -1);
        result.map(item => {
            const a = treeFindPath(treeData[0] && treeData[0].subList, item.keyIndex === item);
            console.log(a)
        })
    };
    function treeFindPath (tree, func, path = []) {
        if (!tree) return []
        for (const data of tree) {
            // 这里按照你的需求来存放最后返回的内容吧
            path.push(data.keyIndex);
            if (data.subList) {
                const findChildren = treeFindPath(data.subList, func, path)
                if (findChildren.length) return findChildren
            }
            path.pop()
        }
        return []
    }



    const getProps = (data) => (
        <div className="address-box">
            {data && data.length > 0 && data.map((item, index) => (
                <div key={index}>
                    <div onClick={() => onClick(item.keyIndex)} className="address-item">
                        <div className="address-title">{item.MC || ''}</div>
                        <img src="/img/rarrow.png" alt="" className={`icon18 ${item.checked ? 'icon-checked' : 'icon-unchecked'}`}/>
                    </div>
                    { item.checked && item.subList && (item.subList.length > 0 ? (
                        <div className="address-item-box">
                            {item.subList.map((child, index2) => child.subList.length === 0 ? (
                                <div className="address-item" key={index2}>
                                    <div className="xm-box pos-aline">
                                        <input checked={sGood.indexOf(child.keyIndex) > -1} className="auto-checkbox" type="checkbox" onChange={val => checkGood(child.keyIndex, val.target.checked)}/>
                                        {child.XM || ''}
                                    </div>
                                    <div className="address-user">
                                        <img alt="" className='smallIco mr-5' src='/img/tel.png' />
                                        <a className="address-phone">{child.YDDH || '无'}</a>
                                    </div>
                                </div>
                            ) : getProps(child.subList))}
                        </div>
                    ): (
                        <div className="address-item" key={item.keyIndex}>
                            <div className="xm-box pos-aline">
                                <input checked={sGood.indexOf(item.keyIndex) > -1} className="auto-checkbox" type="checkbox" onChange={val => checkGood(item.keyIndex, val.target.checked)}/>
                                {item.XM || ''}
                            </div>
                            <div className="address-user">
                                <img alt="" className='smallIco mr-5' src='/img/tel.png' />
                                <a className="address-phone">{item.YDDH || '无'}</a>
                            </div>
                        </div>
                    ))}

                </div>
            ))}
        </div>
    );
    return (
        <div>
            <WingBlank>
                <div className="address-box-auto">
                    {getProps(treeData[0] && treeData[0].subList)}
                </div>
                <WhiteSpace/>
                <div className="modal-form-footer">
                    <Button className="date-button mr-12 bg-gray" inline onClick={closeModal}>取消</Button>
                    <Button className="date-button" inline type="primary" onClick={submit}>确认选择</Button>
                </div>
            </WingBlank>
        </div>
    );
};

export default TreeData;
