import React, { useEffect, useState } from 'react';
import { connect } from 'react-redux';
import { Spin, Row, Col, Card, Button, Tree, Empty, Checkbox } from 'antd';
import { getDepMessage, getDepUser } from '../actions/user';
import { getResource, getUserResource, postUserRes, postUserReso } from '../actions/authority';
import { getDepById } from '../actions/user';

import Resource from '../components/resource';
import user from './user';

const Authority = (props) => {
    const CheckboxGroup = Checkbox.Group;
    const { dispatch, loading, depMessage, depUser, resource, userResource, clientHeight, user } = props
    const r1 = ['USERMANAGE', 'AUTHORIMANAGE', 'OVERLOADMANAGE', 'ROADMANAGE', 'BRIDGEMANAGE', 'MAINTENANCEMANAGE', 'TRANSPORTATIONMANAGE',
        'CONSERVATIONMANAGE', 'PATROLMANAGE', 'PUBLICTRANSPORTMANAGE', 'FILEMANAGE', 'PUBLICITYVIDEO', 'FEEDBACKMANAGE', 'REPORTMANAGE',
        'ASSESSMANAGE', 'VIDEOCENTER', 'BUILDINGPROJECT', 'WXPATROLREPORT', 'WXMAINTENANCEREPORT', 'WXFEEDBACKMANAGE', 'WXBUILDINGROAD',
        'WXTODOLIST', 'WXDONELIST'
    ]
    const [depUserCopy, setDepUserCopy] = useState([])//用于存放除了自己的管理的数组，即自己不能调整自己是否为管理员
    const [depSelectedKeys, setDepSelectedKeys] = useState([])
    const [userSelectedKeys, setUserSelectedKeys] = useState([])
    const [depSelected, setDepSelected] = useState()
    const [userSelected, setUserSelected] = useState()
    const [resCode, setResCode] = useState(userResource.map(i => i.resourceId))
    const [useName, setUseName] = useState()// 选中名字
    const [userType, setUserType] = useState()
    const [depMessagedata, setdepMessagedata] = useState(depMessage)

    const rescodeall = resource[0]?.resources?.map(i => ({ label: i.name, value: i.code }))
    //console.log(resource[0]?.resources?.map(i => ({ label: i.name, value: i.code })), '这个是总的骂')
    const [indeterminate, setIndeterminate] = useState(false);
    const [checkAll, setCheckAll] = useState(true);
    const [rescheckAll, setrescheckAll] = useState(false)
    const [isshow, setisshow] = useState(false);

    let plainOptions = depUser.map(i => ({ label: i.name, value: i.id }));
    const [checkedList, setCheckedList] = useState(depUser.map(i => i.id));
    const onChange = (list) => {
        // console.log(list,'选择的')
        setCheckedList(list);
        setIndeterminate(!!list.length && list.length < plainOptions.length);
        // setResCode(userResource.map(i=>i.resourceId))
        setCheckAll(list.length === plainOptions.length);
        dispatch(getUserResource(list))
        // if(list.length === plainOptions.length){
        //     setUseName('全部用户')
        // }
    };

    // console.log(userSelectedKeys,'当前1')
    const onresChange = (d) => {
        setResCode(d)
        setrescheckAll(d.length === r1.length)
    }
    const onresCheckAllChange = (d) => {
        setrescheckAll(d.target.checked)
        setResCode(d.target.checked ? r1 : [])

    }
    const onCheckAllChange = (e) => {
        setCheckedList(e.target.checked ? plainOptions.map(i => i.value) : []);
        setIndeterminate(false);
        // if(e.target.checked){
        //     setUseName('全部用户')
        // }

        setCheckAll(e.target.checked);
        // setResCode(userResource.map(i=>i.resourceId))
    };
    const onshowchange = (e) => {
        setisshow(e.target.checked)
    }
    //console.log('depMessagedata', depMessagedata)

    useEffect(() => {
        dispatch(getResource())
        if (!(depMessage && depMessage.length)) {
            dispatch(getDepMessage())
        }
        setResCode(userResource.map(i => i.resourceId))
        setisshow(userResource.some(i => i.isshow === "true"))
        setrescheckAll(userResource.map(i => i.resourceId).length === 14)
    }, [])
    useEffect(() => {
        setResCode(userResource.map(i => i.resourceId))
        setisshow(userResource.some(i => i.isshow === "true"))
        setrescheckAll(userResource.map(i => i.resourceId).length === 14)
    }, [userResource])
    useEffect(async () => {
        if (depMessage.length) {
            //('depMessage', depMessage)
            //超级管理员展示所有部门
            if (user?.username === 'SuperAdmin') {
                setdepMessagedata(depMessage)
                dispatch(getDepUser(depMessage[0]?.id))
                setDepSelectedKeys([depMessage[0]?.id])
                setDepSelected([depMessage[0]?.name])
            } else {
                //不是超级管理员，展示相应部门的数据
                dispatch(getDepUser(user.departmentId))
                const res = await dispatch(getDepById({ deptId: parseInt(user.departmentId) }))
                //console.log('resssss', res)
                setdepMessagedata(res.payload.data)
                // if (authDep.length > 0) {
                //     dispatch(getDepUser(authDep[0]?.id))
                //     setDepSelectedKeys([authDep[0]?.id])
                //     setDepSelected([authDep[0]?.name])
                // }
            }


        }


    }, [depMessage])
    // useEffect(() => {
    //     if(user.username!=='SuperAdmin'){
    //         dispatch(getDepMessage(user.departmentId))
    //     }
    // }, [depMessage])
    useEffect(() => {
        const copy = [...new Set(depUser)]
        setDepUserCopy(copy)
        if (copy.length) {
            setUserSelectedKeys([copy[0].id])
            setUserSelected(copy[0].username)
            dispatch(getUserResource(copy[0].id))
            setUseName(copy[0].name)
        }
        setCheckedList(copy.map(i => i.id))
    }, [depUser])
    //  console.log(depUser,'用户信息')
    const handleSave = () => {
        // console.log( userSelectedKeys[0],'当前选中的id')
        // checkedList.map(i=>{
        //     dispatch(postUserRes({ userId: i, resCode: resCode,isShow:isshow })).then(res => {
        //         if (res.success) {
        //             dispatch(getUserResource(i))
        //         }
        //     })
        //     dispatch(postUserReso({ userId: i, resCode: resCode,isShow:isshow }))
        // })

        dispatch(postUserRes({ userId: userSelectedKeys[0], resCode: resCode, isShow: isshow })).then(res => {
            if (res.success) {
                dispatch(getUserResource(userSelectedKeys[0]))
            }
        })
        dispatch(postUserReso({ userId: userSelectedKeys[0], resCode: resCode, isShow: isshow }))
    }

    return (
        <Spin spinning={loading}>
            <Row gutter={16}>
                <Col span={4} style={{ height: '100%' }}>
                    <Card title="部门" bordered={false} bodyStyle={{ padding: 8, paddingTop: 24 }}>
                        {
                            depMessagedata.length ?
                                <Tree
                                    height={clientHeight - 100}
                                    defaultExpandedKeys={[depMessagedata[0].id]}
                                    selectedKeys={depSelectedKeys}
                                    onSelect={(selectedKeys, { selected, selectedNodes, node }) => {
                                        setUserType(selectedNodes[0].type)
                                        setCheckedList(depUserCopy.map(i => i.id))
                                        // setResCode(userResource.map(i=>i.resourceId))


                                        if (selected) {
                                            setCheckedList(depUserCopy.map(i => i.id))
                                            setDepSelectedKeys(selectedKeys)
                                            setDepSelected(selectedNodes[0].name || "")
                                            dispatch(getDepUser(selectedKeys[0]))

                                            // setResCode(userResource.map(i=>i.resourceId))

                                        }

                                    }}
                                    treeData={depMessagedata}
                                    fieldNames={{
                                        title: 'name',
                                        key: 'id',
                                        children: 'subordinate'
                                    }}
                                /> : ''
                        }
                    </Card>
                </Col>
                <Col span={4} style={{ height: '100%', }}>
                    <Card title={` 用户列表`} bordered={false} bodyStyle={{ padding: 8, paddingTop: 24 }}>
                        {
                            depUserCopy?.length ?
                                <Tree
                                    height={clientHeight - 100}
                                    defaultSelectedKeys={[depUserCopy[0]?.id]}
                                    selectedKeys={userSelectedKeys}
                                    onSelect={(selectedKeys, { selected, selectedNodes, node, event }) => {
                                        const name = node.name
                                        setUseName(name)

                                        if (selected) {
                                            // console.log(selectedKeys,'选中的selectedKeys')
                                            // console.log(selectedNodes[0].username || '','node')
                                            // console.log(selectedKeys[0],'请求的值')
                                            setUserSelectedKeys(selectedKeys)
                                            setUserSelected(selectedNodes[0].username || '')
                                            dispatch(getUserResource(selectedKeys[0]))
                                        }

                                    }}
                                    treeData={depUserCopy}
                                    fieldNames={{
                                        title: 'name',
                                        key: 'id'
                                    }}
                                /> : <Empty />

                            //                             <div>
                            //                                  <Checkbox indeterminate={indeterminate} onChange={onCheckAllChange} checked={checkAll} disabled={user?.department?.type==="qifu"&&user?.userResources?.filter(i=>i.resourceId==='AUTHORIMANAGE')[0].isShow==="true"?true:''}>
                            //                                             全选
                            //                                      </Checkbox>

                            //   <CheckboxGroup options={plainOptions} value={checkedList} onChange={onChange} disabled={user?.department?.type==="qifu"&&user?.userResources?.filter(i=>i.resourceId==='AUTHORIMANAGE')[0].isShow==="true"?true:''}/>
                            //                             </div> : <Empty />

                        }
                    </Card>
                </Col>
                <Col span={16} style={{ height: '100%', }}>
                    <Checkbox onChange={onshowchange} checked={isshow} disabled={user?.username !== 'SuperAdmin' && user?.userResources?.filter(i => i.resourceId === 'AUTHORIMANAGE')[0]?.isshow === "true" ? true : ''}>
                        不可编辑
                    </Checkbox>
                    {depUserCopy?.length ?
                        <Card title={` 功能范围`} bordered={false} bodyStyle={{ padding: 8, paddingTop: 24 }}>
                            {/* <Resource
                                userSelected={userSelected}
                                roleData={resource}
                                userRole={userResource}
                                setResCode={setResCode}
                                userType={user?.department?.type==="qifu"&&user?.userResources?.filter(i=>i.resourceId==='AUTHORIMANAGE')[0].isShow==="true"?4:userType}
                            /> */}
                            <div>
                                <Checkbox
                                    onChange={onresCheckAllChange}
                                    checked={rescheckAll}
                                    disabled={user?.username !== 'SuperAdmin' && user?.userResources?.filter(i => i.resourceId === 'AUTHORIMANAGE')[0].isshow === "true" ? true : ''}
                                >
                                    全选
                                </Checkbox>
                                <CheckboxGroup
                                    options={rescodeall}
                                    value={resCode}
                                    onChange={onresChange}
                                    disabled={user?.username !== 'SuperAdmin' && user?.userResources?.filter(i => i.resourceId === 'AUTHORIMANAGE')[0].isshow === "true" ? true : ''}
                                />
                            </div>
                            <Row type="flex" justify="center" style={{ marginBottom: 16, marginTop: 16, textAlign: 'center' }}>
                                <Col span="24">
                                    <Button
                                        disabled={userSelected === "SuperAdmin" || userType === 4}
                                        onClick={handleSave}
                                        style={{ width: '60%' }}
                                        type='primary'>保存修改</Button>
                                </Col></Row>
                        </Card>
                        : <Card title={`[]功能范围`} bordered={false} bodyStyle={{ padding: 8, paddingTop: 24 }}>
                            <Empty />
                        </Card>
                    }
                </Col>
            </Row>
        </Spin >
    )
}

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

export default connect(mapStateToProps)(Authority);