import React, { useCallback, useEffect, useState } from 'react'
import styles from './index.module.scss'
import { useSelector } from 'react-redux'
import store, { RootState } from '@/store'
import { Button } from 'antd'
import { baseURL, iconUrl } from '@/utils/http'
import baseTouXiangImg from '@/assets/img/user.png'
import { getTokenInfo, removeTokenInfo, setTokenInfo } from '@/utils/storage'
import MyPopconfirm from '@/components/MyPopconfirm'
import history from '@/utils/history'
import { getUserInfoByIdAPI } from '@/store/action/Isystem/I7user'
import { RouterType } from '@/pages/Layout/data'
import A2table from './A2table'
import A2setStock from './A2setStock'
import A2editUser from './A2editUser'

const userInfoJting = getTokenInfo().user || {}

function A2bench() {
  // 设置常用功能
  const userRolePermissions = useSelector((state: RootState) => state.A0Layout.userRolePermissions)
  const [stockShow, setStockShow] = useState(false)
  const [stockList, setStockList] = useState<RouterType>([])

  const getUserInfo = useCallback(async () => {
    const res = await getUserInfoByIdAPI(userInfoJting.id)
    if (res.code === 0) {
      store.dispatch({ type: 'layout/userInfo', payload: res.data })
      // 设置常用功能
      if (res.data.permRtf) {
        setStockList(JSON.parse(res.data.permRtf || '[]'))
      } else setStockList(userRolePermissions)
    }
  }, [userRolePermissions])

  useEffect(() => {
    getUserInfo()
  }, [getUserInfo])

  // 获取组织管理列表
  // const dispatch = useDispatch()
  // useEffect(() => {
  //   dispatch(I5_APIgetTree())
  // }, [dispatch])

  // const { treeData } = useSelector((state: RootState) => state.I5organization)

  const { userInfo } = useSelector((state: RootState) => state.A0Layout)

  // 点击退出登录
  const loginExit = () => {
    removeTokenInfo()
    history.push('/login')
  }

  // 点击编辑个人资料
  const [editUser, setEditUser] = useState(false)

  // 更新用户信息
  const upUserInfoFu = useCallback(
    (obj: any) => {
      const userInfoOld = getTokenInfo()
      setTokenInfo({
        ...userInfoOld,
        user: {
          ...userInfoOld.user,
          thumb: obj.thumb,
          realName: obj.realName
        }
      })
      getUserInfo()
    },
    [getUserInfo]
  )

  return (
    <div className={styles.A2bench}>
      <div className='pageTitle'>工作台</div>
      <div className='A2ll'>
        {/* 顶部盒子 */}
        <div className='A2ll1'>
          <div className='A2ll1_1'>
            <img src={userInfo.thumb ? baseURL + userInfo.thumb : baseTouXiangImg} alt='' />
            <div className='A2ll1_1Txt'>
              <h1>{userInfo.realName || userInfo.userName || '匿名'}</h1>
              <p>
                {userInfo.userName}
                {userInfo.deptName ? <>&emsp;{userInfo.deptName}</> : null}
                &emsp;|&emsp;{userInfo.roleName}
              </p>
            </div>
          </div>
          <div className='A2ll1_2'>
            <Button onClick={() => setEditUser(true)}>编辑个人资料</Button>&emsp;
            <Button onClick={() => store.dispatch({ type: 'layout/passEditShow', payload: true })}>
              修改密码
            </Button>
            &emsp;
            <MyPopconfirm
              txtK='退出登录'
              onConfirm={loginExit}
              Dom={<Button>退出登录</Button>}
              loc='bottom'
            />
          </div>
        </div>
        <div className='A2ll2'>
          {/* 常用功能*/}
          <div className='A2ll2_1'>
            <div className='A2tit'>
              <div>常用功能</div>
              <div>
                <Button onClick={() => setStockShow(true)}>设置</Button>
              </div>
            </div>
            <div className='A2ll2RowBox'>
              {stockList.map(v1 =>
                v1.son.map(v2 =>
                  v2.authority && v2.name !== '工作台' ? (
                    <div key={v2.id} className='A2ll2Row' onClick={() => history.push(v2.path)}>
                      <img src={`${iconUrl}/${v2.name}.png`} alt='' />
                      <p>{v2.name}</p>
                    </div>
                  ) : null
                )
              )}
            </div>
          </div>
          {/* 最近使用 */}
          {/* <div className='A2ll2_2'>
            <div className='A2tit'>最近使用</div>
            <div className='A2ll2RowBox'>
              {changGetFu().length ? (
                changGetFu().map((v, i) => (
                  <div key={i} className='A2ll2Row' onClick={() => history.push(v.path)}>
                    <img src={`${baseURL}/baseData/tabImg/${v.name}.png`} alt='' />
                    <p>{v.name}</p>
                  </div>
                ))
              ) : (
                <div className='A2none'>暂无信息</div>
              )}
            </div>
          </div> */}
        </div>
        {/* 表格 */}
        <A2table />
      </div>

      {/* 编辑个人资料 */}
      {editUser ? (
        <A2editUser closeFu={() => setEditUser(false)} userInfo={userInfo} succFu={upUserInfoFu} />
      ) : null}

      {/* 设置常用功能 */}
      {stockShow ? (
        <A2setStock
          sId={userInfoJting.id}
          arr={stockList}
          closeFu={() => setStockShow(false)}
          succFu={getUserInfo}
        />
      ) : null}
    </div>
  )
}

const MemoA2bench = React.memo(A2bench)

export default MemoA2bench
