import React, { useCallback, useEffect, useMemo, useState } from 'react'
import styles from './index.module.scss'
import { A1ListSelectType } from '../../data'
import { A3ListType } from '@/pages/A3clan/data'
import { A3_APIdel, A3_APIgetList } from '@/store/action/A3clan'
import { MessageFu } from '@/utils/message'
import { Button } from 'antd'
import MyPopconfirm from '@/components/MyPopconfirm'
import MyTable from '@/components/MyTable'
import { A3tableC } from '@/utils/tableData'
import A3add from '@/pages/A3clan/A3add'

type Props = {
  sId: number
  listAllRes: A1ListSelectType
}

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

  const getList = useCallback(async () => {
    const res = await A3_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 A3_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.A2tab2clan}>
      <div className='A2t1btn'>
        <Button type='primary' onClick={() => setEditId(-1)}>
          新增亲属
        </Button>
      </div>
      <MyTable list={list} columnsTemp={A3tableC} lastBtn={tableLastBtn} pagingInfo={false} />

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

const MemoA2tab2clan = React.memo(A2tab2clan)

export default MemoA2tab2clan
