import React, { useCallback, useEffect, useMemo, useState } from 'react'
import styles from './index.module.scss'
import { Button, Checkbox, Modal } from 'antd'
import MyPopconfirm from '@/components/MyPopconfirm'
import classNmaes from 'classnames'
import { MessageFu } from '@/utils/message'
import { A2_APIsetStock } from '@/store/action/Abench/A2bench'
import { RouterType } from '@/pages/Layout/data'

type Props = {
  sId: number
  arr: RouterType
  closeFu: () => void
  succFu: () => void
}

function A2setStock({ arr, closeFu, succFu, sId }: Props) {
  const [roleArr, setRoleArr] = useState<RouterType>([])

  useEffect(() => {
    setRoleArr(arr)
  }, [arr])

  // 多选框变化
  const onChange = useCallback(
    (val: boolean, id1: number, id2: number) => {
      setRoleArr(
        roleArr.map(v => ({
          ...v,
          son:
            v.id === id1
              ? v.son.map(c => ({
                  ...c,
                  authority: c.id === id2 ? val : c.authority
                }))
              : v.son
        }))
      )
    },
    [roleArr]
  )

  // 二级选中的数组id集合
  const checkIds = useMemo(() => {
    const arr: number[] = []
    roleArr.forEach(v => {
      v.son.forEach(c => {
        if (c.authority) arr.push(c.id)
      })
    })
    return arr
  }, [roleArr])

  // 点击提交
  const btnOk = useCallback(async () => {
    const res = await A2_APIsetStock(sId, JSON.stringify(roleArr))
    if (res.code === 0) {
      MessageFu.success('设置成功')
      succFu()
      closeFu()
    }
  }, [closeFu, roleArr, sId, succFu])

  return (
    <Modal
      wrapClassName={styles.A2setStock}
      open={true}
      title='常用功能'
      footer={
        [] // 设置footer为空，去掉 取消 确定默认按钮
      }
    >
      <div className='A2Smain'>
        <div className='Z5eboxrr'>
          {roleArr.map(v => (
            <div
              key={v.id}
              className='Z5eRow'
              hidden={v.son.length === 0 || (v.son.length === 1 && v.son[0].name === '工作台')}
            >
              <div className='Z5eRow1'>{v.name}</div>
              <div className='Z5eRow2'>
                {v.son.map(c =>
                  c.name === '工作台' ? null : (
                    <Checkbox
                      key={c.id}
                      checked={c.authority}
                      onChange={e => onChange(e.target.checked, v.id, c.id)}
                    >
                      {c.name}
                    </Checkbox>
                  )
                )}
              </div>
            </div>
          ))}

          <div className={classNmaes('Z5eErr', checkIds.length <= 0 ? 'Z5eErrAc' : '')}>
            至少选中一个
          </div>
        </div>

        <div className='A2Sbtn'>
          <Button type='primary' disabled={checkIds.length <= 0} onClick={btnOk}>
            提交
          </Button>
          &emsp;
          <MyPopconfirm txtK='取消' onConfirm={closeFu} />
        </div>
      </div>
    </Modal>
  )
}

const MemoA2setStock = React.memo(A2setStock)

export default MemoA2setStock
