import React, { useCallback, useState } from 'react'
import styles from './index.module.scss'
import { Button, Modal } from 'antd'
import { C4zipType } from '../data'
import MyTable from '@/components/MyTable'
import MyPopconfirm from '@/components/MyPopconfirm'
import { A3m_APIaddZip, A3m_APIaddZip_2 } from '@/store/action/A3machineReg'
import { MessageFu } from '@/utils/message'

type Props = {
  info: C4zipType
  closeFu: () => void
  againUpFu: () => void
  succFu: () => void
}

function C4imgModal({ info, closeFu, againUpFu, succFu }: Props) {
  const [btnAc, setBtnAc] = useState('成功')

  // 点击导入当前数据
  const btnOk = useCallback(async () => {
    const obj = {
      fileName: info.file?.fileName,
      filePath: info.file?.filePath,
      pcsError: info.err.length,
      pcsSuccess: info.succ.length,
      pcsTotal: info.err.length + info.succ.length,
      type: '3'
    }

    const res1 = await A3m_APIaddZip(obj)
    if (res1.code === 0) {
      const obj2 = [...info.succ, ...info.err].map(v => ({
        ...v,
        id: null,
        importId: res1.data.id,
        moduleName: 'goods',
        importError: v.description === '成功' ? '0' : '1'
      }))

      const res2 = await A3m_APIaddZip_2(obj2)

      if (res2.code === 0) {
        MessageFu.success('导入成功')
        succFu()
        closeFu()
      }
    }
  }, [closeFu, info, succFu])

  return (
    <Modal
      wrapClassName={styles.C4imgModal}
      destroyOnClose
      open={true}
      title={
        <>
          导入数据条数：{info.succ.length + info.err.length}&emsp;&emsp;校验成功条数：
          {info.succ.length}&emsp;&emsp;校验失败条数：{info.err.length}
        </>
      }
      footer={[]}
    >
      <div className='B1XLmain'>
        <div className='B1XLtop'>
          {['成功', '失败'].map(v => (
            <Button key={v} type={v === btnAc ? 'primary' : 'default'} onClick={() => setBtnAc(v)}>
              {v} {v === '成功' ? info.succ.length : info.err.length}
            </Button>
          ))}
        </div>

        <MyTable
          classKey='C4imgModal'
          yHeight={500}
          list={btnAc === '成功' ? info.succ : info.err}
          columnsTemp={[
            ['txt', '图片名称', 'fileName'],
            ['txt', '检验结果', 'description']
          ]}
          lastBtn={[]}
          pagingInfo={false}
        />

        <div className='B1XLbtn'>
          {info.type === '查看' ? (
            <Button onClick={closeFu}>关闭</Button>
          ) : (
            <>
              <Button type='primary' onClick={againUpFu}>
                重新上传压缩包
              </Button>
              &emsp;
              <Button type='primary' disabled={info.succ.length === 0} onClick={btnOk}>
                导入当前数据
              </Button>
              &emsp;
              <MyPopconfirm txtK='取消' onConfirm={closeFu} Dom={<Button>取消导入</Button>} />
            </>
          )}
        </div>
      </div>
    </Modal>
  )
}

const MemoC4imgModal = React.memo(C4imgModal)

export default MemoC4imgModal
