import React, { useCallback, useEffect, useState } from 'react'
import styles from './index.module.scss'
import { Button, Modal } from 'antd'
import { btnArr } from '../A4proveSuo/A4main/A4auth'
import MyPopconfirm from '@/components/MyPopconfirm'
import { MessageFu } from '@/utils/message'
import { A6_APIauth } from '@/store/action/A6record'

type Props = {
  sId: number
  status: number
  closeFu: () => void
  editTableFu: () => void
}

function A6auth({ sId, closeFu, editTableFu, status }: Props) {
  const [btnAc, setBtnAc] = useState(-1)

  useEffect(() => {
    setBtnAc(status)
  }, [status])

  // 点击提交
  const btnOk = useCallback(async () => {
    const res = await A6_APIauth(sId, btnAc)

    if (res.code === 0) {
      MessageFu.success('提交成功!')
      editTableFu()
      closeFu()
    }
  }, [btnAc, closeFu, editTableFu, sId])

  return (
    <Modal
      wrapClassName={styles.A6auth}
      open={true}
      title='审核'
      footer={
        [] // 设置footer为空，去掉 取消 确定默认按钮
      }
    >
      <div className='A6Arow'>
        <div className='A6Arowll'>审核状态：</div>
        <div className='A6Arowrr'>
          {btnArr.map(item => (
            <Button
              key={item.value}
              type={btnAc === item.value ? 'primary' : 'default'}
              onClick={() => setBtnAc(item.value)}
            >
              {item.label}
            </Button>
          ))}
        </div>
      </div>

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

const MemoA6auth = React.memo(A6auth)

export default MemoA6auth
