import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import styles from './index.module.scss'
import { Button, Input } from 'antd'
import { useDispatch, useSelector } from 'react-redux'
import MyTable from '@/components/MyTable'
import { RootState } from '@/store'
import { I3tableC } from '@/utils/tableData'
import { I3_APIgetList } from '@/store/action/Isystem/I3numSet'
import { TypeI3list } from './data'
import I3edit from './I3edit'

function I3numSet() {
  const dispatch = useDispatch()

  const [value, setValue] = useState('')
  const valueRef = useRef('')

  const getListFu = useCallback(() => {
    dispatch(I3_APIgetList(valueRef.current))
  }, [dispatch])

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

  // 点击重置
  const resetFu = useCallback(() => {
    setValue('')
    valueRef.current = ''
    getListFu()
  }, [getListFu])

  // 从仓库中获取表格数据
  const tableList = useSelector((state: RootState) => state.I3numSet.tableList)

  const tableLastBtn = useMemo(() => {
    return [
      {
        title: '操作',
        render: (item: TypeI3list) => {
          return (
            <Button size='small' type='text' onClick={() => setEditObj(item)}>
              编辑
            </Button>
          )
        }
      }
    ]
  }, [])

  // 点击编辑
  const [editObj, setEditObj] = useState({} as TypeI3list)

  return (
    <div className={styles.I3numSet}>
      <div className='pageTitle'>编号设置</div>
      {/* 顶部 */}
      <div className='I3top'>
        <div className='I3topll'>
          <Input
            placeholder='请输入编号类型'
            value={value}
            onChange={e => {
              const val = e.target.value.trim()
              valueRef.current = val
              setValue(val)
            }}
            maxLength={10}
          />
        </div>
        <div className='I3toprr'>
          <Button type='primary' onClick={getListFu}>
            查询
          </Button>
          &emsp;
          <Button onClick={resetFu}>重置</Button>
        </div>
      </div>
      {/* 表格 */}
      <div className='I3tableBox'>
        <MyTable
          yHeight={632}
          list={tableList}
          columnsTemp={I3tableC}
          lastBtn={tableLastBtn}
          pagingInfo={false}
        />
      </div>

      {editObj.id ? (
        <I3edit editObj={editObj} editFu={resetFu} closeFu={() => setEditObj({} as TypeI3list)} />
      ) : null}
    </div>
  )
}

const MemoI3numSet = React.memo(I3numSet)

export default MemoI3numSet
