import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import styles from './index.module.scss'
import { useDispatch, useSelector } from 'react-redux'
import { C1btnArr, C1fromDataBase } from './data'
import { C1_APIgetlist } from '@/store/action/C1storageSet'
import { RootState } from '@/store'
import { B1listType } from '../B1ledger/data'
import { Button, Input, Select } from 'antd'
import history, { openLink } from '@/utils/history'
import { storageSelect } from '@/utils/select'
import MyTable from '@/components/MyTable'
import { C1tableC } from '@/utils/tableData'
import { B3devFu } from '@/utils/deriveFu'
import { authorityFu } from '@/utils/authority'
function C1storageSet() {
  const dispatch = useDispatch()
  const [formData, setFormData] = useState(C1fromDataBase)

  const getListFu = useCallback(() => {
    dispatch(C1_APIgetlist(formData))
  }, [dispatch, formData])

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

  // 输入框改变
  const timeRef = useRef(-1)
  const txtChangeFu = useCallback(
    (e: React.ChangeEvent<HTMLInputElement>, key: 'siteLoc' | 'num' | 'name') => {
      clearTimeout(timeRef.current)
      timeRef.current = window.setTimeout(() => {
        setFormData({
          ...formData,
          [key]: e.target.value,
          pageNum: 1
        })
      }, 500)
    },
    [formData]
  )

  // 点击重置
  const [inputKey, setInputKey] = useState(1)
  const resetSelectFu = useCallback(() => {
    // 把2个输入框和时间选择器清空
    setInputKey(Date.now())
    setFormData(C1fromDataBase)
  }, [])

  // 从仓库拿数据
  const tableInfo = useSelector((state: RootState) => state.C1storageSet.tableInfo)

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

  // 页码变化
  const paginationChange = useCallback(
    (pageNum: number, pageSize: number) => {
      setFormData({ ...formData, pageNum, pageSize })
    },
    [formData]
  )

  return (
    <div className={styles.C1storageSet}>
      <div className='pageTitle'>库房管理</div>

      <div className='C1top'>
        <div className='C1topll' key={inputKey}>
          <Input
            placeholder='库房位置'
            maxLength={30}
            showCount
            allowClear
            onChange={e => txtChangeFu(e, 'siteLoc')}
            style={{ width: 200 }}
          />
          &emsp;
          <Input
            placeholder='藏品编号'
            maxLength={30}
            showCount
            allowClear
            onChange={e => txtChangeFu(e, 'num')}
            style={{ width: 200 }}
          />
          &emsp;
          <Input
            placeholder='藏品名称'
            maxLength={30}
            showCount
            allowClear
            onChange={e => txtChangeFu(e, 'name')}
            style={{ width: 200 }}
          />
          &emsp;
          <Select
            allowClear
            style={{ width: 200 }}
            placeholder='库存状态'
            options={storageSelect}
            value={formData.siteStatus}
            onChange={e => setFormData({ ...formData, siteStatus: e })}
          />
          &emsp;
        </div>
        <div className='C1toprr'>
          {C1btnArr.map(v => (
            <Button
              key={v.id}
              type='primary'
              onClick={() =>
                authorityFu(v.id, `您没有藏品${v.name}页面权限`, () => {
                  history.push(v.path)
                })
              }
            >
              {v.name}
            </Button>
          ))}

          <Button onClick={resetSelectFu}>重置</Button>
          <Button type='primary' onClick={() => B3devFu(formData)}>
            数据导出
          </Button>
        </div>
      </div>

      {/* 表格 */}
      <MyTable
        yHeight={655}
        list={tableInfo.list}
        columnsTemp={C1tableC}
        lastBtn={tableLastBtn}
        pageNum={formData.pageNum}
        pageSize={formData.pageSize}
        total={tableInfo.total}
        onChange={(pageNum, pageSize) => paginationChange(pageNum, pageSize)}
      />
    </div>
  )
}

const MemoC1storageSet = React.memo(C1storageSet)

export default MemoC1storageSet
