import React, { useCallback, useEffect, useMemo, useState } from 'react'
import styles from './index.module.scss'
import { A1ListSelectType } from '../../data'
import { A4ListType } from '@/pages/A4antique/data'
import { A4_APIdel, A4_APIgetList } from '@/store/action/A4antique'
import { MessageFu } from '@/utils/message'
import { Button } from 'antd'
import MyPopconfirm from '@/components/MyPopconfirm'
import MyTable from '@/components/MyTable'
import { A4tableC } from '@/utils/tableData'
import A4add from '@/pages/A4antique/A4add'

type Props = {
  sId: number
  listAllRes: A1ListSelectType
}

function A4tab4antique({ sId, listAllRes }: Props) {
  // 获取列表信息
  const [list, setList] = useState<A4ListType[]>([])

  const getList = useCallback(async () => {
    const res = await A4_APIgetList(
      {
        pageNum: 1,
        pageSize: 99999,
        martyrId: sId
      },
      true
    )
    if (res.code === 0) {
      setList(res.data.records || [])
    }
  }, [sId])

  useEffect(() => {
    getList()
  }, [getList])

  // 点击新增、编辑
  const [editId, setEditId] = useState(0)

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

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

  return (
    <div className={styles.A4tab4antique}>
      <div className='A4t1btn'>
        <Button type='primary' onClick={() => setEditId(-1)}>
          新增文物
        </Button>
      </div>
      <MyTable list={list} columnsTemp={A4tableC} lastBtn={tableLastBtn} pagingInfo={false} />

      {editId ? (
        <A4add
          sId={editId}
          closeFu={() => setEditId(0)}
          addTableFu={getList}
          upTableFu={getList}
          listAllRes={listAllRes}
          martyrId={sId}
        />
      ) : null}
    </div>
  )
}

const MemoA4tab4antique = React.memo(A4tab4antique)

export default MemoA4tab4antique
