import React, { useEffect, useState } from 'react';
import { connect } from 'react-redux';
import { DeleteOutlined, EllipsisOutlined, FormOutlined } from '@ant-design/icons';
import { Spin, Space, Button, Popconfirm, Row, Col, Tree, Table, Card, Switch, Tooltip, Breadcrumb } from 'antd';
import ProTable from '@ant-design/pro-table';
import { getDepById } from '../actions/user';
import { getDepMessage, getDepUser, createUser, updateUser, delUser, resetPwd, createDep, delDep, updateDep } from '../actions/user'
import { postUserRes } from '../actions/authority'
import UserModal from '../components/userModal';
import ResetPwd from '../components/resetPwd';
import DepModal from '../components/depModal';

const TreeNode = Tree.TreeNode;

const UserManage = (props) => {
    const { dispatch, loading, depMessage, depUser, clientHeight, user } = props
    const [modalVisible, setModalVisible] = useState(false);
    const [modalType, setModalType] = useState();
    const [modalRecord, setModalRecord] = useState();
    const [pwdModalVisible, setPwdModalVisible] = useState(false);
    const [depSelectedKeys, setDepSelectedKeys] = useState([])
    const [rowSelected, setRowSelected] = useState([])
    const [depModalVisible, setDepModalVisible] = useState(false);
    const [depModalType, setDepModalType] = useState();
    const [depModalRecord, setDepModalRecord] = useState();
    const [selectedTree, setSelectedTree] = useState();
    const [depCrumbs, setDepCrumbs] = useState([]);
    const [depUserCopy, setDepUserCopy] = useState([])//用于存放除了自己的管理的数组，即自己不能调整自己是否为管理员
    const [uid, setuid] = useState()
    const [editAble, setEditAble] = useState(user?.username !== 'SuperAdmin' && user?.userResources?.filter(i => i.resourceId === 'USERMANAGE')[0].isshow === "true" ? true : '')//控制操作(新增删除等操作，对应权限的'不可编辑')是否可操作
    const [depMessagedata, setdepMessagedata] = useState(depMessage)
    console.log('depMessagedata', depMessagedata)
    useEffect(async () => {
        if (depMessage.length) {
            console.log('depMessage', depMessage)
            //超级管理员展示所有部门
            if (user?.username === 'SuperAdmin') {
                setdepMessagedata(depMessage)
                setDepSelectedKeys([depMessage[0].id])
                dispatch(getDepUser(depMessage[0].id))
            } else {
                //不是超级管理员，展示相应部门的数据
                dispatch(getDepUser(user.departmentId))
                const res = await dispatch(getDepById({ deptId: parseInt(user.departmentId) }))
                console.log('resssss', res)
                setdepMessagedata(res.payload.data)
                // setDepSelectedKeys([res.payload.data[0].id])
                // dispatch(getDepUser(res.payload.data[0].id))

            }
        }


    }, [depMessage])
    useEffect(() => {
        let code = ['USERMANAGE', 'AUTHORIMANAGE']
        //console.log('你來u盧克嗎', depUser, uid)
        // console.log(depUser.filter(i=>i.phone===uid)[0]?.id,'当前的用户user')
        if (depUser?.filter(i => i.phone === uid)[0]?.id) {
            //console.log('你來u盧克嗎', depUser, uid)

            dispatch(postUserRes({ userId: depUser.filter(i => i.phone === uid)[0]?.id, resCode: code, isShow: false }))
        }
    }, [uid])
    useEffect(() => {
        dispatch(getDepMessage())
    }, [])
    useEffect(() => {
        console.log('depuser', depUser, user)
        const copy = depUser.filter((item) => {
            console.log('item1', item)
            return item.id !== user.id//把自己筛选出去
        })
        console.log('copy', copy)
        setDepUserCopy(copy)
    }, [depUser])
    useEffect(() => {
        if (depMessage.length) {


        }
    }, [depMessage])

    useEffect(() => {
        const list = handleCrumbs(depSelectedKeys)
        setDepCrumbs(list)

    }, [depSelectedKeys])
    const columns =
        [
            {
                title: '姓名',
                dataIndex: 'name',
            },
            {
                title: '手机号(用户名)',
                dataIndex: 'phone',
            },
            {
                title: '邮箱',
                dataIndex: 'email',
            }, {
                title: '启用状态',
                dataIndex: 'enable',
                render: (_, r) => {
                    return <Switch checkedChildren="启用" unCheckedChildren="禁用" disabled defaultChecked={r.enable} />
                }
            },
            {
                title: '是否管理员',
                dataIndex: 'isadmin',
                render: (_, r) => {
                    return <div>{r.isAdmin ? '是' : '否'}</div>
                }
            },
            {
                title: '操作',
                dataIndex: 'action',
                render: (dom, record) => {
                    // return record.username == 'SuperAdmin' ? '' : [
                    //     <Button type="link" onClick={() => { openModal('edit', record) }}>编辑</Button>,
                    //     <Popconfirm
                    //         title="确认删除?"
                    //         onConfirm={() => {
                    //             delUsers([record.id])
                    //         }}
                    //     >
                    //         <Button type="link">删除</Button>
                    //     </Popconfirm>,
                    //     <Button
                    //         type="link"
                    //         onClick={() => {
                    //             setModalRecord(record);
                    //             setPwdModalVisible(true);
                    //         }}
                    //     >重置密码</Button>
                    // ]
                    return [
                        <Button type="link" onClick={() => { openModal('edit', record) }} disabled={editAble}>编辑</Button>,
                        <Popconfirm
                            title="确认删除?"
                            onConfirm={() => {
                                delUsers([record.id])
                            }}
                            disabled={editAble}
                        >
                            <Button type="link" disabled={editAble}>删除</Button>
                        </Popconfirm>,
                        <Button
                            type="link"
                            onClick={() => {
                                setModalRecord(record);
                                setPwdModalVisible(true);
                            }}
                            disabled={editAble}
                        >重置密码</Button>
                    ]
                },
            },
        ];

    //弹窗确认
    const onConfirm = (values) => {
        console.log('values.contract', values.contract)
        if (modalType == 'edit') {
            dispatch(updateUser(modalRecord.id, values.contract)).then(res => {
                if (res.success) {
                    setModalVisible(false);
                    dispatch(getDepUser(depSelectedKeys[0]));
                }
            });
        } else {
            dispatch(createUser(values.contract)).then(res => {
                if (res.success) {
                    setModalVisible(false);
                    dispatch(getDepMessage())
                    setuid(values.contract.phone)

                }
            });
        }

    }

    //打开弹窗
    const openModal = (type, record) => {
        setModalVisible(true);
        setModalType(type);
        if (type == 'edit') {
            setModalRecord(record);
        } else {
            setModalRecord(null);
        }
    }

    //打开部门弹窗
    const openDepModal = (type, record) => {
        setDepModalVisible(true)
        setDepModalType(type)
        if (type == 'edit') {
            setDepModalRecord(record);
        } else {
            setModalRecord(null);
        }

    }

    //删除用户
    const delUsers = (ids, type) => {
        dispatch(delUser(ids)).then(res => {
            dispatch(getDepUser(depSelectedKeys[0]));
            if (type == 'batch') {
                setRowSelected([]);
            }
        });
    }

    //重置密码
    const onPwdConfirm = (values) => {
        dispatch(resetPwd(modalRecord.id, { password: values.password })).then(res => {
            if (res.success) {
                setPwdModalVisible(false);
                dispatch(getDepUser(depSelectedKeys[0]));
            }
        });
    }
    //部门新增及编辑
    const onDepConfirm = (data) => {
        console.log('depModalType:', depModalType);
        console.log('data:', data);
        if (depModalType == 'edit') {

            dispatch(updateDep(data)).then(res => {
                if (res.success) {
                    setDepModalVisible(false);
                    dispatch(getDepMessage());
                }
            });
        } else {
            dispatch(createDep(data)).then(res => {
                if (res.success) {
                    setDepModalVisible(false);
                    dispatch(getDepMessage());
                }
            });
        }

    }
    // 删除部门
    const delDepartment = (id) => {
        dispatch(delDep(id)).then(res => {
            if (res.success) {
                dispatch(getDepMessage())
            }
        });
    }
    const renderTree = (item, id) => {
        return <div style={{ display: 'flex', width: '6vw', justifyContent: 'space-between' }}>
            <Tooltip title={item.name}>
                <div style={{ width: '70%', textOverflow: 'ellipsis', whiteSpace: 'nowrap', overflow: 'hidden' }}>{item.name}</div>
            </Tooltip>
            <div style={{ width: '30%' }} >
                {
                    selectedTree == id ? <>
                        <FormOutlined onClick={() => {
                            setDepModalRecord(item)
                            setDepModalVisible(true)
                            setDepModalType('edit')
                        }} />
                        <Popconfirm title='是否确认删除?' onConfirm={() => { delDepartment(id) }}>
                            <DeleteOutlined style={{ marginLeft: 5 }} />
                        </Popconfirm>
                    </> : null
                }
            </div>

        </div>
    }

    const handleCrumbs = (id) => {
        let crumbsList = []

        depMessage?.forEach(d => {
            if (id == d.id) {
                crumbsList.push(d.name)
            }
            d.subordinate?.forEach(s => {
                if (id == s.id) {
                    crumbsList.push(d.name)
                    crumbsList.push(s.name)
                }
                s.subordinate?.forEach(a => {
                    if (id == a.id) {
                        crumbsList.push(d.name)
                        crumbsList.push(s.name)
                        crumbsList.push(a.name)
                    }
                })
            })
        })
        return crumbsList
    }


    return (<div >
        <Spin spinning={loading} /* style={{ height: "calc(100vh - 70px)" }} */>
            <Row gutter={16} /* style={{ overflow: "scroll" }} */>
                <Col flex="260px" style={{ height: '100%' }}>

                    <Card bordered={false} bodyStyle={{ padding: 8, paddingTop: 24, }}>
                        <Button
                            type="primary"
                            key="primary"
                            style={{ marginLeft: 10 }}
                            onClick={() => openDepModal('create')}
                            disabled={editAble}
                        >
                            新建部门</Button>

                        {
                            depMessage.length ?
                                <Tree
                                    height={clientHeight - 95}
                                    defaultExpandedKeys={[depMessagedata[0]?.id]}
                                    selectedKeys={depSelectedKeys}
                                    onSelect={(selectedKeys, e) => {
                                        // console.log('selectedKeys:',selectedKeys);

                                        if (e.selected) {
                                            handleCrumbs(selectedKeys)
                                            setSelectedTree(selectedKeys)
                                            setDepSelectedKeys(selectedKeys)
                                            dispatch(getDepUser(selectedKeys[0]))
                                        }
                                    }}
                                    style={{ paddingTop: 20 }}
                                >
                                    {
                                        depMessagedata?.map((s, index) => {
                                            return <TreeNode title={renderTree(s, s.id)} key={s.id} >
                                                {
                                                    s.subordinate.map(k => {
                                                        return <TreeNode title={renderTree(k, k.id)} key={k.id} onMouseOver={() => { setIShowIcon(k.id) }} onMouseOut={() => { setIShowIcon(null) }}>
                                                            {
                                                                k.subordinate.map(i => {
                                                                    return <TreeNode title={renderTree(i, i.id)} key={i.id} onMouseOver={() => { setIShowIcon(i.id) }} onMouseOut={() => { setIShowIcon(null) }}>
                                                                    </TreeNode>
                                                                })
                                                            }
                                                        </TreeNode>
                                                    })
                                                }
                                            </TreeNode>
                                        })
                                    }
                                </Tree> : ''
                        }
                    </Card>
                </Col>

                <Col /* flex="auto" */ style={{ width: "calc(100% - 260px)", height: '100%', display: "black" }}>
                    <Card bordered={false} height={clientHeight} bodyStyle={{ padding: 8, paddingTop: 24, overflow: "hidden", width: "100%" }}>
                        <Breadcrumb separator=">" style={{ marginLeft: 24 }}>
                            {
                                depCrumbs?.map((c, index) => { return (<Breadcrumb.Item key={index}>{c}</Breadcrumb.Item>) })
                            }
                        </Breadcrumb>
                        <ProTable
                            columns={columns}
                            dataSource={depUserCopy}
                            style={{ width: "100% ", height: clientHeight - 95, overflow: "auto" }}
                            rowSelection={{
                                selectedRowKeys: rowSelected,
                                onChange: (selectedRowKeys) => {
                                    setRowSelected(selectedRowKeys);

                                },
                                getCheckboxProps: (record) => {
                                    return {
                                        disabled: record.username === 'SuperAdmin',
                                    }
                                },
                            }}
                            options={false}
                            search={false}
                            rowKey="id"
                            toolBarRender={() => [
                                <span>
                                    <Button
                                        type="primary"
                                        key="primary"
                                        style={{ marginRight: 10 }}
                                        onClick={() => openModal('create')}
                                        disabled={editAble}
                                    >新建用户</Button>
                                    {/* <Button style={{ marginRight: 10 }} onClick={() => { dispatch(getDepUser(depSelectedKeys[0])); }}>刷新</Button> */}
                                    <Popconfirm title="确认删除?" onConfirm={() => { delUsers(rowSelected, 'batch') }} disabled={editAble}>
                                        <Button disabled={editAble}>批量删除</Button>
                                    </Popconfirm>
                                </span>
                            ]}
                        />
                    </Card>

                    {
                        depMessage.length && modalVisible ?
                            <UserModal
                                dispatch={dispatch}
                                visible={modalVisible}
                                onVisibleChange={setModalVisible}
                                modalType={modalType}
                                onConfirm={onConfirm}
                                editData={modalRecord}
                            />
                            : ''
                    }
                    {pwdModalVisible ? <ResetPwd visible={pwdModalVisible}
                        onVisibleChange={setPwdModalVisible}
                        onConfirm={onPwdConfirm} /> : ''}

                    {depModalVisible ? <DepModal visible={depModalVisible}
                        onVisibleChange={setDepModalVisible}
                        depModalType={depModalType}
                        data={depModalRecord}
                        onConfirm={onDepConfirm} /> : ''}



                </Col>
            </Row>
        </Spin>
    </div>

    )
}

function mapStateToProps(state) {
    const { depMessage, depUser, global, auth } = state;
    // console.log(state);
    return {
        clientHeight: global.clientHeight,
        loading: depMessage.isRequesting,
        depMessage: depMessage.data || [],
        depUser: depUser.data || [],
        user: auth.user

    };
}

export default connect(mapStateToProps)(UserManage);