import React, { useEffect, useState } from 'react';
import { connect } from 'react-redux';
import { Spin, Row, Col, Tree, Button, Tooltip, Popconfirm, Input } from 'antd';
import { PlusCircleOutlined, EditOutlined, MinusCircleOutlined } from '@ant-design/icons';
import theStyle from './style.css';
import ResourceCatalogModal from '../components/resourceCatalogModal';
import MetadataTab from './metadataTab';
import MetadataDetails from './metadataDetails';
let expandedKeysData = [];
let allTreeNodeKeys = [];
let resourceCatalogRawData = [];

const LatestMetadata = (props) => {
    const { user, dispatch, actions, history, clientHeight, resourceCatalog, isRequesting, location, match, organization } = props;
    const { metadataManagement } = actions;
    const [isAdmin, setIsAdmin] = useState(false);
    const [resourceCatalogData, setResourceCatalogData] = useState([]);
    const [selectedKeys, setSelectedKeys] = useState([]);
    const [expandedKeys, setExpandedKeys] = useState([]);
    const [modalVisible, setModalVisible] = useState(false);
    const [editData, setEditData] = useState({});
    const [resourceCatalogId, setResourceCatalogId] = useState('');
    const [resourceCatalogKey, setResourceCatalogKey] = useState('');
    const [resourceCatalogPath, setResourceCatalogPath] = useState([]);
    const params = GetRequest(location?.search);

    useEffect(() => {
        const jumpSelectedKey = sessionStorage.getItem('jumpSelectedKey') || null;
        initData(true, jumpSelectedKey);
    }, [location?.search])

    useEffect(() => {
        const jumpSelectedKey = sessionStorage.getItem('jumpSelectedKey') || null;
        initData(true, jumpSelectedKey);
        dispatch(actions.organization.getOrganizationList());
    }, [])
    const initData = (configRefresh, jumpSelectedKey) => {
        dispatch(metadataManagement.getResourceCatalog()).then(res => {
            const { data } = res.payload;
            if (res.success) {
                resourceCatalogRawData = data;
                allTreeNodeKeys = []
                const resourceCatalogData = getTreeNodeData(data, null, 'rc', [], null);
                setResourceCatalogData(resourceCatalogData);
                if (data.length) {
                    if (configRefresh) {
                        if (jumpSelectedKey || selectedKeys.length)
                            expandedKeysData = jumpSelectedKey ? [jumpSelectedKey] : selectedKeys;
                        let expandedKeys = getExpandKeys(expandedKeysData);
                        params?.catalogKey ? setSelectedKeys([params?.catalogKey]) : setSelectedKeys(expandedKeysData);
                        params?.catalogKey ? setExpandedKeys(getExpandKeys([params?.catalogKey])) : setExpandedKeys(expandedKeys);
                        params?.treeId && setResourceCatalogId(params?.treeId);
                        params?.treeId && params?.treeId && setIsAdmin(user?.username === 'SuperAdmin'
                            || (user?.role === '系统管理员' && user?.orgId == resourceCatalogRawData.find(a => a.id == params?.treeId)?.orgId));
                        expandedKeysData = [];
                    }
                } else {
                    setExpandedKeys([]);
                    setSelectedKeys([]);
                };
            }
        })
    }
    const getExpandKeys = (selectedData) => {
        const keyArr = selectedData[0].split('-');
        keyArr.shift();//['rc-2-5']->返回'rc';keyArr:['2','5']
        const allExpandedKeys = allTreeNodeKeys.filter(k => keyArr.includes(k.id.toString()));
        const resourceCatalogId = keyArr.pop();
        !params?.treeId && setResourceCatalogId(resourceCatalogId);
        !params?.treeId && setIsAdmin(user?.username === 'SuperAdmin'
            || (user?.role === '系统管理员' && user?.orgId == resourceCatalogRawData.find(a => a.id == resourceCatalogId)?.orgId));
        setResourceCatalogKey(selectedData[0]);
        const resourceCatalogPath = allExpandedKeys.map(a => a.name);
        setResourceCatalogPath(resourceCatalogPath);
        return allExpandedKeys.map(a => a.key);
    }
    const getTreeNodeData = (dataSource, parent, key, searchKeys, searchvalue) => {
        let treeData = [];
        let data = [];
        if (!parent) {
            data = dataSource.filter(ds => !ds.parent);
            if (!expandedKeysData.length && data.length) {
                if (searchKeys && searchKeys.includes(`rc-${data[0].id}`) || !searchvalue)
                    expandedKeysData.push(`rc-${data[0].id}`);
            }
        } else {
            data = dataSource.filter(ds => ds.parent == parent);
        }
        data.map(ds => {
            if (!searchvalue)
                allTreeNodeKeys.push({ name: ds.name, key: `${key}-${ds.id}`, id: ds.id })
            if (searchKeys && searchKeys.includes(`${key}-${ds.id}`) || !searchvalue) {
                treeData.push({ title: renderTreeNode(ds, dataSource), key: `${key}-${ds.id}`, id: ds.id })
            }
        });
        for (let d of treeData) {
            d.children = getTreeNodeData(dataSource, d.id, d.key, searchKeys, searchvalue);
        }
        return treeData
    }

    const setTreeNodeTitle = (name) => {
        let content = <span>{name}</span>
        if (name.length > 6) {
            content = <Tooltip title={name}>
                {name.substring(0, 6) + '...'}
            </Tooltip>
        }
        return content;
    }

    const renderTreeNode = (ds, dataSource) => {
        return <div className={theStyle.icon} style={{ width: 180 }}>
            {setTreeNodeTitle(ds.name)}
            {(user?.username === 'SuperAdmin' || (user?.role === '系统管理员' && user?.orgId == ds?.orgId)) && <>
                <EditOutlined title='修改' className={theStyle.tip} onClick={() => {
                    let record = JSON.parse(JSON.stringify(ds));
                    let parentData = dataSource.filter(rc => rc.id === record.parent);
                    record.parentName = parentData.length ? parentData[0].name : '';
                    setEditData({ record: record, title: '修改子类', child: ds.parent ? true : false, });
                    setModalVisible(true);
                }} />
                <Popconfirm placement="top" title={'确定删除该资源目录吗？'} onConfirm={() => {
                    dispatch(metadataManagement.delResourceCatalog(ds.id)).then((res) => {
                        if (res.success) {
                            expandedKeysData = []; initData(true);
                        }
                        setModalVisible(false);
                    });
                }} okText="确定" cancelText="取消">
                    <MinusCircleOutlined title='删除' className={theStyle.tip} />
                </Popconfirm>
                <PlusCircleOutlined title='新建' className={theStyle.tip} onClick={() => {
                    setEditData({ record: { parent: ds.id, parentName: ds.name, orgId: ds?.orgId }, title: '新建子类', child: true, add: true });
                    setModalVisible(true);
                }} />
            </>}
        </div >
    };
    //新建、修改
    const onConfirm = (values) => {
        let obj = { ...values }
        if (editData.add) {
            obj = { ...values, ...editData.record || {} }
            dispatch(metadataManagement.postResourceCatalog(obj)).then(() => {
                initData(); setModalVisible(false);
            });
        } else {
            dispatch(metadataManagement.putResourceCatalog(editData.record.id, obj)).then(() => {
                initData(); setModalVisible(false);
            });
        }
    }
    const onSearch = value => {
        let searchKeys = [];
        let selectedKeys = [];
        //allTreeNodeKeys map遍历每个节点，找出所有相关节点及父节点
        allTreeNodeKeys.map(item => {
            if (item.name.indexOf(value) > -1) {
                let arr = item.key.split('-')
                if (arr.length) {
                    let str = '';
                    for (let i = 1; i < arr.length - 1; i++) {
                        if (str) {
                            str += '-' + arr[i];
                        }
                        else {
                            str += 'rc-' + arr[i];
                        }
                        if (!searchKeys.includes(str))
                            searchKeys.push(str);
                    }
                }
                if (!searchKeys.includes(item.key))
                    searchKeys.push(item.key);
                if (!selectedKeys.length)
                    selectedKeys.push(item.key);
            }
        });
        const resourceCatalogData = getTreeNodeData(resourceCatalog, null, 'rc', searchKeys, value);
        setResourceCatalogData(resourceCatalogData);
        if (selectedKeys.length) {
            let expandedKeys = getExpandKeys(selectedKeys);
            setSelectedKeys(selectedKeys);
            setExpandedKeys(expandedKeys);
        } else {
            setSelectedKeys([]);
            setExpandedKeys([]);
            setResourceCatalogId('');
            setResourceCatalogKey('');
            setResourceCatalogPath([]);
        }
    };
    const onChangeSearch = e => {
        const { value } = e.target;
        onSearch(value);
    };


    return <Spin spinning={isRequesting}>
        <Row>
            <Col style={{ width: 240 }}>
                <Input style={{ width: 220, marginBottom: 8 }} placeholder="输入资源目录关键字搜索"
                    allowClear onChange={onChangeSearch}
                    onKeyPress={onChangeSearch} />
                {user?.role == '系统管理员' && <Button type='primary' style={{ marginBottom: 16 }} onClick={() => {
                    setEditData({ title: '新建资源目录', add: true, record: { orgId: user?.orgId } });
                    setModalVisible(true);
                }}>新建资源目录</Button>}
                <Tree
                    // showLine
                    height={clientHeight - 180}
                    expandedKeys={expandedKeys}
                    selectedKeys={selectedKeys}
                    onSelect={(keys, e) => {
                        history.push(`/metadataManagement/latestMetadata`);
                        if (e.selected) {
                            setSelectedKeys(keys);
                            getExpandKeys(keys);
                        }
                        sessionStorage.setItem('jumpSelectedKey', keys.length ? keys[0] : selectedKeys && selectedKeys[0]);
                        history.push(`/metadataManagement/latestMetadata`);
                    }}
                    onExpand={(keys) => {
                        setExpandedKeys(keys);
                    }}
                    treeData={resourceCatalogData}
                />
            </Col>
            <Col style={{ width: 'calc(100% - 240px)' }}>
                {location.pathname.indexOf('detail') > -1 ?
                    <MetadataDetails resourceCatalogId={resourceCatalogId}
                        resourceCatalogKey={resourceCatalogKey}
                        resourceCatalogPath={resourceCatalogPath}
                        match={match}
                        isAdmin={isAdmin} /> :
                    <MetadataTab resourceCatalogId={resourceCatalogId}
                        resourceCatalogKey={resourceCatalogKey}
                        resourceCatalogPath={resourceCatalogPath}
                        params={params}
                        isAdmin={isAdmin}
                    />
                    //     <MetadataTab resourceCatalogId={params?.treeId}
                    //     resourceCatalogKey={params?.catalogKey}
                    //     resourceCatalogPath={resourceCatalogPath}
                    //     initTab={params?.type}
                    // />
                }
            </Col>
        </Row>
        {
            modalVisible ?
                <ResourceCatalogModal
                    resourceCatalog={resourceCatalog}
                    editData={editData}
                    onCancel={() => setModalVisible(false)}
                    onConfirm={onConfirm}
                    organization={organization}
                /> : ''
        }
    </Spin>
}
function mapStateToProps(state) {
    const { global, auth, resourceCatalog, organization } = state;
    return {
        user: auth.user,
        actions: global.actions,
        clientHeight: global.clientHeight,
        resourceCatalog: resourceCatalog?.data || [],
        isRequesting: resourceCatalog.isRequesting,
        organization: organization?.data?.rows || [],
    };
}
export default connect(mapStateToProps)(LatestMetadata)

function GetRequest(search) {
    let url = search; //获取url中"?“符后的字串
    let theRequest = new Object();
    if (url.indexOf("?") != -1) {
        let str = url.substr(1);
        let strs = str.split("&");
        for (let i = 0; i < strs.length; i++) {
            theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
        }
    }
    return theRequest;
}