import React, { useCallback, useEffect, useState } from 'react'
import styles from './index.module.scss'
import { useDispatch, useSelector } from 'react-redux'
import store, { RootState } from '@/store'
import { Button } from 'antd'
import { baseURL } from '@/utils/http'
import baseTouXiangImg from '@/assets/img/user.png'
import { getUserInfoByIdAPI } from '@/store/action/Z6user'
import { changGetFu, getTokenInfo, removeTokenInfo, setTokenInfo } from '@/utils/storage'
import { D4_APIgetTree } from '@/store/action/Z4organization'
import { treeLastIdFindFatherFu } from '@/pages/Z_system/Z6user/data'
import MyPopconfirm from '@/components/MyPopconfirm'
import history from '@/utils/history'
import A2editUser from './A2editUser'

const rrArr = [
  {
    name: '草稿',
    num: 6,
    key: [
      { key: 1, label: '藏品入馆 4' },
      { key: 2, label: '藏品入藏 2' },
      { key: 3, label: '藏品入馆 4' },
      { key: 4, label: '藏品入藏 2' }
    ]
  },
  {
    name: '待提交',
    num: 6,
    key: [
      { key: 1, label: '藏品入馆 4' },
      { key: 2, label: '藏品入藏 2' }
    ]
  },
  {
    name: '待审批',
    num: 6,
    key: [
      { key: 1, label: '藏品入馆 4' },
      { key: 2, label: '藏品入藏 2' }
    ]
  },
  {
    name: '未通过',
    num: 6,
    key: [
      { key: 1, label: '藏品入馆 4' },
      { key: 2, label: '藏品入藏 2' }
    ]
  },
  {
    name: '已完成',
    num: 6,
    key: [
      { key: 1, label: '藏品入馆 4' },
      { key: 2, label: '藏品入藏 2' }
    ]
  }
]

const arr3 = [
  { name: '藏品征集', num: 6 },
  { name: '藏品鉴定', num: 6 },
  { name: '藏品入馆', num: 6 },
  { name: '藏品入藏', num: 6 },
  { name: '藏品出库', num: 6 },
  { name: '藏品移库', num: 6 }
]

function A2business() {
  const getUserInfo = useCallback(async (id: number) => {
    const res = await getUserInfoByIdAPI(id)
    if (res.code === 0) {
      store.dispatch({ type: 'layout/userInfo', payload: res.data })
    }
  }, [])

  useEffect(() => {
    const userInfo = getTokenInfo().user
    if (userInfo && userInfo.id) getUserInfo(userInfo.id)
  }, [getUserInfo])

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

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

  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(obj.id)
    },
    [getUserInfo]
  )

  return (
    <div className={styles.A2business}>
      <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}&emsp;
                {userInfo.deptId
                  ? treeLastIdFindFatherFu(treeData, userInfo.deptId + '', 'name').join(' / ')
                  : '-'}
                &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>设置</Button>
              </div>
            </div>
            <div className='A2ll2RowBox'>
              {/* 待完善  设置常用功能 */}
              {['入藏管理', '藏品总账', '我的关注'].map((v, i) => (
                <div key={i} className='A2ll2Row'>
                  {v}
                </div>
              ))}
            </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)}>
                    {v.name}
                  </div>
                ))
              ) : (
                <div className='A2none'>暂无信息</div>
              )}
            </div>
          </div>
        </div>

        {/* 待审批 */}
        <div className='A2ll2 A2ll2Full'>
          <div className='A2tit'>待审批</div>
          <div className='A2ll2RowBox'>
            {arr3.length ? (
              arr3.map((v, i) => (
                <div key={i} className='A2ll2Row'>
                  {v.name}
                  <p>{v.num}</p>
                </div>
              ))
            ) : (
              <div className='A2none'>暂无信息</div>
            )}
          </div>
        </div>

        {/* 抄送未读 */}
        <div className='A2ll2 A2ll2Full'>
          <div className='A2tit'>抄送未读</div>
          <div className='A2ll2RowBox'>
            {arr3.length ? (
              arr3.map((v, i) => (
                <div key={i} className='A2ll2Row'>
                  {v.name}
                  <p>{v.num}</p>
                </div>
              ))
            ) : (
              <div className='A2none'>暂无信息</div>
            )}
          </div>
        </div>
      </div>
      {/* 右边我的申请 */}
      <div className='A2rr'>
        <h1>我的申请</h1>

        {rrArr.map(item => (
          <div className='A2rrRow' key={item.name}>
            <div>{item.name}</div>
            <div>{item.num}</div>
            <div className='A2rrRowShow'>
              {item.key.map(v => (
                <div key={v.key}>{v.label}</div>
              ))}
            </div>
          </div>
        ))}
      </div>

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

const MemoA2business = React.memo(A2business)

export default MemoA2business
