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

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

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

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

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

  // 点击退出登录
  const loginExit = () => {
    removeTokenInfo()
    history.replace('/login')
  }

  const tableLastBtn = useMemo(() => {
    return [
      {
        title: '操作',
        render: (item: A1tableType) => (
          <Button size='small' type='text' onClick={() => setLook(item.id)}>
            查看
          </Button>
        )
      }
    ]
  }, [])

  // 点击查看
  const [look, setLook] = useState(0)

  // 点击扫一扫
  const codeClick = useCallback(async () => {
    // 检查token
    const res = await A1_APIcheckToken()
    if (res.code === 0) {
      if (res.data) {
        // token有效
        history.replace('/code')
      } else {
        MessageFu.warning('登录失效,请重新登录')
        loginExit()
      }
    }
  }, [])

  return (
    <div className={styles.A1list}>
      <div className='A1top'>
        <h1>核销记录</h1>
        <MyPopconfirm
          txtK='退出登录'
          onConfirm={loginExit}
          Dom={<div>退出登录</div>}
          loc='bottom'
        />
      </div>
      <div className='A1table'>
        <MyTable
          list={tableInfo.list}
          columnsTemp={A1tableC}
          lastBtn={tableLastBtn}
          pageNum={fromData.pageNum}
          pageSize={fromData.pageSize}
          total={tableInfo.total}
          onChange={(pageNum, pageSize) =>
            setFromData({ ...fromData, pageNum, pageSize })
          }
        />
      </div>

      {/* 扫一扫 */}
      <div className='A1btn' onClick={codeClick}>
        扫一扫
      </div>

      {/* 查看 */}
      {look ? (
        <A2look sId={look} closeFu={() => setLook(0)} type='查看' upTable={getListFu} />
      ) : null}
    </div>
  )
}

const MemoA1list = React.memo(A1list)

export default MemoA1list
