import React, { useCallback, useEffect, useRef, useState } from 'react'
import styles from './index.module.scss'
import classNames from 'classnames'
import { Button, Form, FormInstance, Checkbox, message } from 'antd'
import MyPopconfirm from '@/components/MyPopconfirm'
import { UserListType } from '@/types/api/Z1user'
import { Z1_APIgetAuthByUserId, Z1_APIsetAuth } from '@/store/action/Z1user'

type Props = {
  authInfo: { id: number; name: string }
  closeFu: () => void
}

function UserAuth({ authInfo, closeFu }: Props) {
  // 表单的ref
  const FormBoxRef = useRef<FormInstance>(null)

  const [authList, setAuthList] = useState<UserListType[]>([])
  const [selectList, setSelectList] = useState<number[]>([])

  const checkboxChange = useCallback((value: any) => {
    setSelectList(value)
  }, [])

  const getAuthList = useCallback(async () => {
    const res = await Z1_APIgetAuthByUserId(authInfo.id)
    if (res.code === 0) {
      setAuthList(
        res.data
          .map((v: any) =>
            v.children.map((v2: any) => ({ id: v2.id, label: v2.label, selected: v2.selected }))
          )
          .flat()
      )
      setSelectList(
        res.data
          .map((v: any) => v.children.filter((v2: any) => v2.selected).map((v2: any) => v2.id))
          .flat()
      )
    }
  }, [authInfo.id])

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

  const submit = useCallback(async () => {
    const res = await Z1_APIsetAuth({
      userId: authInfo.id,
      menuIds: selectList
    })
    if (res.code === 0) {
      message.success('修改成功')
      closeFu()
    }
  }, [authInfo.id, selectList, closeFu])

  return (
    <div className={styles.UserAuth}>
      <div className={classNames('UserAuthMain')}>
        <Form
          ref={FormBoxRef}
          name='basic'
          labelCol={{ span: 3 }}
          onFinish={submit}
          autoComplete='off'
        >
          <Form.Item name='authList'>
            <div className='UserAuthCheckbox'>
              <Checkbox.Group
                defaultValue={selectList}
                value={selectList}
                onChange={checkboxChange}
              >
                <div className='nrfb'>
                  内容发布：
                  {authList.slice(0, 7).map((v, i) => (
                    <Checkbox value={v.id} key={i}>
                      {v.label}
                    </Checkbox>
                  ))}
                </div>
                <div className='yyjl'>
                  预约记录：
                  {authList.slice(7, 9).map((v, i) => (
                    <Checkbox value={v.id} key={i + 7}>
                      {v.label}
                    </Checkbox>
                  ))}
                </div>

                <div className='yygl'>
                  预约管理：
                  {authList.slice(9, 10).map((v, i) => (
                    <Checkbox value={v.id} key={i + 9}>
                      {v.label}
                    </Checkbox>
                  ))}
                </div>
                <div className='yjfk'>
                  意见反馈：
                  {authList.slice(10, 11).map((v, i) => (
                    <Checkbox value={v.id} key={i + 10}>
                      {v.label}
                    </Checkbox>
                  ))}
                </div>
              </Checkbox.Group>
            </div>
          </Form.Item>

          {/* 确定和取消按钮 */}
          <Form.Item className='UserAuthabtn'>
            <div className='UserAuthabtnBox'>
              <Button type='primary' htmlType='submit'>
                提交
              </Button>
              <MyPopconfirm txtK='取消' onConfirm={closeFu} />
            </div>
          </Form.Item>
        </Form>
      </div>
    </div>
  )
}

const MemoUserAuth = React.memo(UserAuth)

export default MemoUserAuth
