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 } from 'antd';
import ProTable from '@ant-design/pro-table';
import { getDepMessage, getDepUser, createUser, updateUser, delUser, resetPwd, createDep, delDep, updateDep } from '../actions/user';
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 } = 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();


    useEffect(() => {
        dispatch(getDepMessage())
    }, [])

    useEffect(() => {
        if (depMessage.length) {
            setDepSelectedKeys([depMessage[0].id])
            dispatch(getDepUser(depMessage[0].id))
        }
    }, [depMessage])
    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: '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) }}>编辑</Button>,
                        <Popconfirm
                            title="确认删除?"
                            onConfirm={() => {
                                delUsers([record.id])
                            }}
                        >
                            <Button type="link">删除</Button>
                        </Popconfirm>,
                        <Button
                            type="link"
                            onClick={() => {
                                setModalRecord(record);
                                setPwdModalVisible(true);
                            }}
                        >重置密码</Button>
                    ]
                },
            },
        ];

    //弹窗确认
    const onConfirm = (values) => {
        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());
                }
            });
        }

    }

    //打开弹窗
    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) => {
        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 => {
            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>
    }
    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')}
                        >新建部门</Button>
                        {
                            depMessage.length ?
                                <Tree
                                    height={clientHeight - 95}
                                    defaultExpandedKeys={[depMessage[0].id]}
                                    selectedKeys={depSelectedKeys}
                                    onSelect={(selectedKeys, e) => {
                                        if (e.selected) {
                                            setSelectedTree(selectedKeys)
                                            setDepSelectedKeys(selectedKeys)
                                            dispatch(getDepUser(selectedKeys[0]))
                                        }
                                    }}
                                    style={{ paddingTop: 20 }}
                                >
                                    {
                                        depMessage?.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%" }}>
                        
                        <ProTable
                            columns={columns}
                            dataSource={depUser}
                            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')}
                                    >新建用户</Button>
                                    {/* <Button style={{ marginRight: 10 }} onClick={() => { dispatch(getDepUser(depSelectedKeys[0])); }}>刷新</Button> */}
                                    <Popconfirm title="确认删除?" onConfirm={() => { delUsers(rowSelected, 'batch') }}>
                                        <Button>批量删除</Button>
                                    </Popconfirm>
                                </span>
                            ]}
                        />
                    </Card>

                    {
                        depMessage.length && modalVisible ?
                            <UserModal
                                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 } = state;
    // console.log(state);
    return {
        clientHeight: global.clientHeight,
        loading: depMessage.isRequesting,
        depMessage: depMessage.data || [],
        depUser: depUser.data || []

    };
}

export default connect(mapStateToProps)(UserManage);