import React, { useCallback, useMemo, useState } from 'react'
import styles from './index.module.scss'
import { Button, Input, Modal } from 'antd'
import MyTable from '@/components/MyTable'
import { NumListType } from '../data'
import { useSelector } from 'react-redux'
import { RootState } from '@/store'
import MyPopconfirm from '@/components/MyPopconfirm'
import { A1_APINumdel, A1_APINumSave } from '@/store/action/A1record'
import { MessageFu } from '@/utils/message'

type Props = {
  closeFu: () => void
  upNumList: () => void
  AcId: number | undefined
}

function A1num({ closeFu, upNumList, AcId }: Props) {
  const numList = useSelector((state: RootState) => state.A1record.numList)

  // 点击删除
  const delTableFu = useCallback(
    async (id: number) => {
      const res = await A1_APINumdel(id)
      if (res.code === 0) {
        MessageFu.success('删除成功!')
        upNumList()
      }
    },
    [upNumList]
  )

  const tableLastBtn = useMemo(() => {
    return [
      {
        title: '操作',
        render: (item: NumListType) => (
          <>
            <Button size='small' type='text' onClick={() => setAddInfo(item)}>
              编辑
            </Button>
            {AcId === item.id ? null : (
              <MyPopconfirm txtK='删除' onConfirm={() => delTableFu(item.id)} />
            )}
          </>
        )
      }
    ]
  }, [AcId, delTableFu])

  // 新增和编辑
  const [addInfo, setAddInfo] = useState({ id: 0, name: '' })

  // 点击确定
  const addBtn = useCallback(async () => {
    if (!addInfo.name) return MessageFu.warning('请输入牺牲时所在单位名称')

    const obj = {
      id: addInfo.id > 0 ? addInfo.id : null,
      name: addInfo.name,
      type: 'pan'
    }

    const res = await A1_APINumSave(obj)

    if (res.code === 0) {
      MessageFu.success(addInfo.id > 0 ? '编辑成功' : '新增成功')
      upNumList()
      setAddInfo({ id: 0, name: '' })
    }
  }, [addInfo.id, addInfo.name, upNumList])

  return (
    <Modal
      wrapClassName={styles.A1num}
      open={true}
      title={
        <div className='A1Ntit'>
          <div>牺牲时所在单位管理</div>
          <Button type='primary' onClick={() => setAddInfo({ id: -1, name: '' })}>
            新增
          </Button>
        </div>
      }
      footer={
        [] // 设置footer为空，去掉 取消 确定默认按钮
      }
    >
      <MyTable
        classKey='A1num'
        yHeight={500}
        list={numList}
        columnsTemp={[['txt', '牺牲时所在单位', 'name']]}
        lastBtn={tableLastBtn}
        pagingInfo={false}
      />

      <div className='A1Nbtn'>
        <Button onClick={closeFu}>关闭</Button>
      </div>

      {addInfo.id ? (
        <Modal
          wrapClassName={styles.A1num2}
          open={true}
          title={addInfo.id > 0 ? '牺牲时所在单位编辑' : '牺牲时所在单位新增'}
          footer={
            [] // 设置footer为空，去掉 取消 确定默认按钮
          }
        >
          <div className='A1Ninput'>
            <div>
              <span>*</span> 牺牲时所在单位：
            </div>
            <Input
              value={addInfo.name}
              maxLength={20}
              showCount
              onChange={e => setAddInfo({ id: addInfo.id, name: e.target.value.trim() })}
            />
          </div>

          <div className='A1Nbtn'>
            <Button type='primary' onClick={addBtn}>
              提交
            </Button>
            &emsp;
            <MyPopconfirm txtK='取消' onConfirm={() => setAddInfo({ id: 0, name: '' })} />
          </div>
        </Modal>
      ) : null}
    </Modal>
  )
}

const MemoA1num = React.memo(A1num)

export default MemoA1num
