import React, { useCallback, useEffect, useState } from 'react'
import styles from './index.module.scss'
import { Button, Checkbox, Modal } from 'antd'
import MyPopconfirm from '@/components/MyPopconfirm'
import { A32treeData } from '../data'
import { A32_APIset } from '@/store/action/A32Routing'
import { MessageFu } from '@/utils/message'

type Props = {
  filterId: string[]
  succFu: () => void
  closeFu: () => void
}

function A32set({ filterId, succFu, closeFu }: Props) {
  // 多选框变化
  const [checkArr, setCheckArr] = useState<string[]>([])
  useEffect(() => {
    setCheckArr(filterId)
  }, [filterId])

  const checkFu = useCallback(
    (id: string) => {
      if (checkArr.includes(id)) setCheckArr(checkArr.filter(v => v !== id))
      else setCheckArr([...checkArr, id])
    },
    [checkArr]
  )

  // 点击保存
  const btnOk = useCallback(async () => {
    const obj = {
      id: '50000',
      type: 'goodsAccount',
      rtf: JSON.stringify(checkArr),
      name: '分账设置',
      ancestor: '0',
      parentId: '0',
      sort: 1
    }
    const res = await A32_APIset(obj)

    if (res.code === 0) {
      MessageFu.success('设置成功')
      succFu()
      closeFu()
    }
  }, [checkArr, closeFu, succFu])

  return (
    <Modal
      wrapClassName={styles.A32set}
      destroyOnClose
      open={true}
      title='分账设置'
      footer={
        [] // 设置footer为空，去掉 取消 确定默认按钮
      }
    >
      <div className='A32Smain'>
        <div className='A32Sbox'>
          {A32treeData.map(item1 => (
            <div className='A32Srow' key={item1.name}>
              <div className='A32Srow1'>{item1.name}</div>
              <div className='A32Srow2'></div>
              {item1.son.map(item2 => (
                <Checkbox
                  className='A32Srow2Check'
                  key={item2.id}
                  checked={checkArr.includes(item2.id)}
                  onChange={() => checkFu(item2.id)}
                >
                  {item2.name}
                </Checkbox>
              ))}
            </div>
          ))}
        </div>

        <div className='A32Sbtn'>
          <Button type='primary' onClick={btnOk}>
            保存
          </Button>
          &emsp;
          <MyPopconfirm txtK='取消' onConfirm={closeFu} />
        </div>
      </div>
    </Modal>
  )
}

const MemoA32set = React.memo(A32set)

export default MemoA32set
