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 { Z2_APIgetList } from '@/store/action/Z2numRule'
import MyTable from '@/components/MyTable'
import { RootState } from '@/store'
import { TypeZ2list } from './type'
import { Z2tableC } from '@/utils/tableData'
import Z2edit from './Z2edit'

function Z2numRule() {
  const dispatch = useDispatch()

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

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

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

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

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

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

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

  return (
    <div className={styles.Z2numRule}>
      <div className='pageTitle'>编号规则</div>
      {/* 顶部 */}
      <div className='Z2top'>
        <div className='Z2topll'>
          <Input
            placeholder='请输入编号类型'
            value={value}
            onChange={e => {
              const val = e.target.value.trim()
              valueRef.current = val
              setValue(val)
            }}
            maxLength={10}
          />
        </div>
        <div className='Z2toprr'>
          <Button type='primary' onClick={getListFu}>
            查询
          </Button>
          &emsp;
          <Button onClick={resetFu}>重置</Button>
        </div>
      </div>
      {/* 表格 */}
      <div className='Z2tableBox'>
        <MyTable
          yHeight={680}
          list={tableList}
          columnsTemp={Z2tableC}
          lastBtn={tableLastBtn}
          pagingInfo={false}
        />
      </div>

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

const MemoZ2numRule = React.memo(Z2numRule)

export default MemoZ2numRule
