import React, { useCallback, useEffect, useMemo, useState } from 'react'
import styles from './index.module.scss'
import MyTable from '@/components/MyTable'
import { useDispatch, useSelector } from 'react-redux'
import { A1_APIcancel, A1_APIdel, A1_APIgetList } from '@/store/action/A1webuser'
import { RootState } from '@/store'
import { MessageFu } from '@/utils/message'
import { A1tableType } from './type'
import { Button } from 'antd'
import MyPopconfirm from '@/components/MyPopconfirm'
import { A1tableC } from '@/utils/tableData'
function A1webuser() {
  const dispatch = useDispatch()

  const [fromData, setFromData] = useState({ pageNum: 1, pageSize: 10 })

  const getListFu = useCallback(() => {
    dispatch(A1_APIgetList(fromData))
  }, [dispatch, fromData])

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

  const { tableInfo } = useSelector((state: RootState) => state.A1webuser)

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

  // 点击取消认证
  const cancelTableFu = useCallback(
    async (id: number) => {
      const res = await A1_APIcancel(id)
      if (res.code === 0) {
        MessageFu.success('取消成功!')
        getListFu()
      }
    },
    [getListFu]
  )

  const tableLastBtn = useMemo(() => {
    return [
      {
        title: '操作',
        render: (item: A1tableType) => (
          <>
            {item.isAuth === 1 ? (
              <MyPopconfirm
                txtK='取消认证'
                onConfirm={() => cancelTableFu(item.id)}
                Dom={
                  <Button size='small' type='text'>
                    取消认证
                  </Button>
                }
              />
            ) : null}
            <MyPopconfirm txtK='删除' onConfirm={() => delTableFu(item.id)} />
          </>
        )
      }
    ]
  }, [cancelTableFu, delTableFu])

  return (
    <div className={styles.A1webuser}>
      <div className='pageTitle'>用户管理</div>

      <MyTable
        yHeight={700}
        list={tableInfo.list}
        columnsTemp={A1tableC}
        lastBtn={tableLastBtn}
        pageNum={fromData.pageNum}
        pageSize={fromData.pageSize}
        total={tableInfo.total}
        onChange={(pageNum, pageSize) => setFromData({ ...fromData, pageNum, pageSize })}
      />
    </div>
  )
}

const MemoA1webuser = React.memo(A1webuser)

export default MemoA1webuser
