import React, { useCallback, useEffect, useMemo, useState } from 'react'
import styles from './index.module.scss'
import { useDispatch, useSelector } from 'react-redux'
import { A4_APIdel, A4_APIgetList } from '@/store/action/A4proveSuo'
import MyTable from '@/components/MyTable'
import { RootState } from '@/store'
import { A4tableType } from '../type'
import { Button } from 'antd'
import MyPopconfirm from '@/components/MyPopconfirm'
import { MessageFu } from '@/utils/message'
import { A4tableC } from '@/utils/tableData'
import A4auth from './A4auth'
import A2template from '@/pages/A2orderSet/A2template'

type Props = {
  type: 'live' | 'neighbour'
}

function A4main({ type }: Props) {
  const dispatch = useDispatch()

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

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

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

  const { tableInfo1, tableInfo2 } = useSelector((state: RootState) => state.A4proveSuo)

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

  const tableLastBtn = useMemo(() => {
    return [
      {
        title: '操作',
        render: (item: A4tableType) => (
          <>
            {item.status === 0 ? (
              <Button size='small' type='text' onClick={() => setAuthId(item.id)}>
                审核
              </Button>
            ) : null}
            <MyPopconfirm txtK='删除' onConfirm={() => delTableFu(item.id)} />
          </>
        )
      }
    ]
  }, [delTableFu])

  // 点击审核
  const [authId, setAuthId] = useState(0)

  const [template, setTemplate] = useState(false)

  return (
    <div className={styles.A4main}>
      <div className='pageTitle'>团队认证</div>

      <div className='A4top'>
        <Button type='primary' onClick={() => setTemplate(true)}>
          认证模板设置
        </Button>
      </div>

      <MyTable
        yHeight={640}
        list={type === 'live' ? tableInfo1.list : tableInfo2.list}
        columnsTemp={A4tableC}
        lastBtn={tableLastBtn}
        pageNum={fromData.pageNum}
        pageSize={fromData.pageSize}
        total={type === 'live' ? tableInfo1.total : tableInfo2.total}
        onChange={(pageNum, pageSize) => setFromData({ ...fromData, pageNum, pageSize })}
      />

      {/*认证模板设置 */}
      {template ? (
        <A2template closeFu={() => setTemplate(false)} type='团队认证' />
      ) : null}

      {/* 点击审核 */}
      {authId ? (
        <A4auth sId={authId} closeFu={() => setAuthId(0)} editTableFu={getListFu} />
      ) : null}
    </div>
  )
}

const MemoA4main = React.memo(A4main)

export default MemoA4main
