import React, { useEffect, useState } from 'react';
import { connect } from 'react-redux';
import { FormOutlined, DeleteOutlined } from '@ant-design/icons';
import { Spin, Tooltip, Button, Popconfirm, Row, Col, Tree, Card, Switch } from 'antd';
import ProTable from '@ant-design/pro-table';
import { getDepMessage, getDepUser, createUser, updateUser, delUser, resetPwd, createDept, updateDept, delDept } from '../actions/user';
import UserModal from '../components/userModal';
import ResetPwd from '../components/resetPwd';
import DeptModal from '../components/deptModal';
import './user.less';

const TreeNode = Tree.TreeNode;

const UserManage = (props) => {
    const user = JSON.parse(sessionStorage.getItem('user'));
    const [tableList, settableList] = useState([])
    const { dispatch, loading, depMessage, depUser, clientHeight, actions } = props;
    // 部门
    const [deptModalVisible, setDeptModalVisible] = useState(false);
    const [deptModalType, setDeptModalType] = useState();
    const [deptModalRecord, setDeptModalRecord] = useState();
    const { projectRegime } = actions
    // 成员
    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([])

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

    const projectList = (obj) => {

        dispatch(projectRegime.getProjectList()).then(res => {
            // console.log(res)
            if (res.success) {
                settableList(res.payload.data?.rows)
                //   setLimits(res.payload.data?.count)
            }
        })
    }

    useEffect(() => {
        if (depMessage.length) {
            setDepSelectedKeys([depMessage[0].id])
            dispatch(getDepUser(depMessage[0].id))
        }
    }, [depMessage])

    const columns = [
        {
            title: '姓名',
            dataIndex: 'name',
        }, {
            title: '用户名(手机号)',
            dataIndex: 'username',
        },
        {
            title: '职位',
            dataIndex: 'post',
        }, {
            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>
                ]
            },
        },
    ];

    //弹窗确认
    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(getDepUser(depSelectedKeys[0]));
                }
            });
        }

    }

    //打开弹窗
    const openModal = (type, record) => {
        setModalVisible(true);
        setModalType(type);
        if (type == 'edit') {
            setModalRecord(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 openDeptModal = (type, record) => {
        console.log(type, record, 'type, record')

        setDeptModalVisible(true);
        setDeptModalType(type);
        if (type === 'edit') {
            setDeptModalRecord(record);
        } else {
            setDeptModalRecord(null);
        }
    }
    const onDeptConfirm = (values) => {
        if (deptModalType === 'edit') {
            dispatch(updateDept(deptModalRecord.id, values.contract)).then(res => {
                if (res.success) {
                    setDeptModalVisible(false);
                    dispatch(getDepMessage())
                }
            });
        } else {
            dispatch(createDept(values.contract)).then(res => {
                if (res.success) {
                    setDeptModalVisible(false);
                    dispatch(getDepMessage())
                }
            });
        }
    }
    const delDepartment = (id) => {
        dispatch(delDept(id)).then(res => {
            if (res.success) {
                dispatch(getDepMessage())
            }
        });
    }

    const renderTree = (item, id) => {
        // let cannotDel = item.users.length || item.subordinate?.filter(is => is.users.length).length;//自己下面有成员 或者下级部门下有成员 不能删除
        return <div style={{ display: 'flex', width: '10vw', justifyContent: 'space-between' }}>
            <Tooltip title={item.name}>
                <div style={{ width: '80%', textOverflow: 'ellipsis', whiteSpace: 'nowrap', overflow: 'hidden' }}>{item.name}</div>
            </Tooltip>
            <div style={{ width: '20%' }} >
                {
                    depSelectedKeys == id && user.username === "SuperAdmin" ?
                        <>
                            <FormOutlined onClick={() => {
                                setDeptModalRecord(item)
                                setDeptModalVisible(true)
                                setDeptModalType('edit')
                            }} />
                            {
                                <Popconfirm title='是否确认删除?' onConfirm={() => { delDepartment(id) }}>
                                    <DeleteOutlined style={{ marginLeft: 5 }} />
                                </Popconfirm>
                            }
                        </> : null
                }
            </div>
        </div>
    }

    return (<>
        <Spin spinning={loading} style={{ height: clientHeight }}>
            <div className='dep-box'>
                <div className='top'>
                    <div className='title'>
                        <span className='line'></span>
                        <span className='cn'>部门</span>
                        <span className='en'>&nbsp;DEPARTMENT</span>
                    </div>
                    {
                        user.username === "SuperAdmin" && <Button
                            type="primary"
                            key="primary"
                            onClick={() => openDeptModal('create')}
                        >新建部门</Button>
                    }
                </div>
                {
                    depMessage.length ?
                        <Tree
                            style={{ width: 272 }}
                            height={150}
                            defaultExpandedKeys={[depMessage[0].id]}
                            selectedKeys={depSelectedKeys}
                            onSelect={(selectedKeys, e) => {
                                if (e.selected) {
                                    setDepSelectedKeys(selectedKeys)
                                    dispatch(getDepUser(selectedKeys[0]))
                                }
                            }}
                        // treeData={depMessage}
                        // fieldNames={{
                        //     title: 'name',
                        //     key: 'id',
                        //     children: 'subordinate'
                        // }}
                        >
                            {
                                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) }}>
                                                </TreeNode>
                                            })
                                        }
                                    </TreeNode>
                                })
                            }
                        </Tree> : ''
                }
            </div>
            <div className='user-box'>
                <div className='top' style={{ marginBottom: 19 }}>
                    <div className='title'>
                        <span className='line'></span>
                        <span className='cn'>用户</span>
                        <span className='en'>&nbsp;USER</span>
                    </div>
                    <div>
                        <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>
                    </div>
                </div>
                <ProTable
                    columns={columns}
                    dataSource={depUser}
                    style={{ width: "100% ", height: clientHeight - 371, overflow: "auto" }}
                    rowSelection={{
                        selectedRowKeys: rowSelected,
                        onChange: (selectedRowKeys) => {
                            setRowSelected(selectedRowKeys);

                        },
                        getCheckboxProps: (record) => {
                            return {
                                disabled: record.username === 'SuperAdmin',
                            }
                        },
                    }}
                    options={false}
                    search={false}
                    rowKey="id"
                    rowClassName={(record, index) => {
                        let className = 'global-light-row';
                        if (index % 2 === 1) className = 'global-dark-row';
                        return className;
                    }}
                />
            </div>
            {
                deptModalVisible ?
                    <DeptModal
                        visible={deptModalVisible}
                        onVisibleChange={setDeptModalVisible}
                        modalType={deptModalType}
                        onConfirm={onDeptConfirm}
                        editData={deptModalRecord}
                        depts={depMessage}
                    />
                    : ''
            }
            {
                depMessage.length && modalVisible ?
                    <UserModal
                        visible={modalVisible}
                        onVisibleChange={setModalVisible}
                        modalType={modalType}
                        onConfirm={onConfirm}
                        editData={{ ...modalRecord, structure: modalRecord?.structure || [] }}
                        tableList={tableList}
                    />
                    : ''
            }
            {pwdModalVisible ? <ResetPwd visible={pwdModalVisible}
                onVisibleChange={setPwdModalVisible}
                onConfirm={onPwdConfirm} /> : ''}
        </Spin>
    </>)
}

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

export default connect(mapStateToProps)(UserManage);