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

const Authority = (props) => {
   const { dispatch, loading, depMessage, depUser, resource, userResource, clientHeight } = props
   const [depSelectedKeys, setDepSelectedKeys] = useState([])
   const [userSelectedKeys, setUserSelectedKeys] = useState([])
   const [depSelected, setDepSelected] = useState()
   const [userSelected, setUserSelected] = useState()
   const [resCode, setResCode] = useState({})
   const [useName, setUseName] = useState()// 选中名字
   const [userType, setUserType] = useState()
   useEffect(() => {
      dispatch(getResource())
      if (!(depMessage && depMessage.length)) {
         dispatch(getDepMessage())
      }

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

   }, [depMessage])
   useEffect(() => {
      if (depUser.length) {
         setUserSelectedKeys([depUser[0].id])
         setUserSelected(depUser[0].username)
         dispatch(getUserResource(depUser[0].id))
         setUseName(depUser[0].name)
      }
   }, [depUser])

   const handleSave = () => {
      dispatch(postUserRes({ userId: userSelectedKeys[0], resCode: resCode })).then(res => {
         if (res.success) {
            dispatch(getUserResource(userSelectedKeys[0]))
         }
      })
   }
   return (
      <div className='main'>
         <Spin spinning={loading}>
            <div>
               <div className='title'>
                  <span className='line'></span>
                  <span className='cn'>权限功能</span>
                  <span className='en'>&nbsp;PERMISSION FUNCTION</span>
               </div>
               <div className='tree-box'>
                  {
                     depMessage.length ?
                        <Tree
                           height={clientHeight - 100}
                           defaultExpandedKeys={[depMessage[0].id]}
                           selectedKeys={depSelectedKeys}
                           onSelect={(selectedKeys, { selected, selectedNodes, node }) => {
                              setUserType(selectedNodes[0].type)
                              if (selected) {
                                 setDepSelectedKeys(selectedKeys)
                                 setDepSelected(selectedNodes[0].name || "")
                                 dispatch(getDepUser(selectedKeys[0]))
                              }

                           }}
                           treeData={depMessage}
                           fieldNames={{
                              title: 'name',
                              key: 'id',
                              children: 'subordinate'
                           }}
                        /> : ''
                  }
                  <div className='user-list'>
                     <div className='list-title'>
                        {(depSelected ? `【${depSelected}】` : "") + '用户列表'}
                     </div>
                     {
                        depUser.length ?
                           <Tree
                              height={clientHeight - 100}
                              defaultSelectedKeys={[depUser[0].id]}
                              selectedKeys={userSelectedKeys}
                              onSelect={(selectedKeys, { selected, selectedNodes, node, event }) => {
                                 const name = node.name
                                 setUseName(name)

                                 if (selected) {
                                    setUserSelectedKeys(selectedKeys)
                                    setUserSelected(selectedNodes[0].username || '')
                                    dispatch(getUserResource(selectedKeys[0]))
                                 }

                              }}
                              treeData={depUser}
                              fieldNames={{
                                 title: 'name',
                                 key: 'id'
                              }}
                           /> : <Empty />
                     }
                  </div>
               </div>
            </div>
            <Divider />
            <div className='list-title'>
               {`【${useName ? useName : '管理员'}】 功能范围`}
            </div>
            {depUser.length ?
               <Card bordered={false} bodyStyle={{ padding: 8, paddingTop: 24 }}>
                  <Resource
                     userSelected={userSelected}
                     roleData={resource}
                     userRole={userResource}
                     setResCode={setResCode}
                     userType={userType}
                  />
                  <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>
               : <Empty />
            }
         </Spin>
      </div>
   )
}

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

export default connect(mapStateToProps)(Authority);