import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import styles from './index.module.scss'
import { dictSelect } from '@/utils/select'
import { B1fromDataBase, B1listType } from './data'
import { Button, Input, Select } from 'antd'
import { useDispatch, useSelector } from 'react-redux'
import { B1_APIgetlist } from '@/store/action/B1ledger'
import MyTable from '@/components/MyTable'
import { RootState } from '@/store'
import A0addGoods from '../A0addGoods'
import { B1tableC } from '@/utils/tableData'
import { B1devFu } from '@/utils/deriveFu'
import { openLink } from '@/utils/history'
import { authorityFu } from '@/utils/authority'

function B1ledger() {
  const dispatch = useDispatch()
  const [formData, setFormData] = useState(B1fromDataBase)

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

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

  // 输入框改变
  const timeRef = useRef(-1)
  const txtChangeFu = useCallback(
    (e: React.ChangeEvent<HTMLInputElement>, key: 'searchKey') => {
      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(B1fromDataBase)
  }, [])

  // 从仓库拿数据
  const tableInfo = useSelector((state: RootState) => state.B1ledger.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]
  )

  // 点击藏品登记
  const [openAdd, setOpenAdd] = useState(false)

  return (
    <div className={styles.B1ledger}>
      <div className='pageTitle'>藏品总账</div>

      <div className='B1top'>
        <div className='B1topll'>
          <Input
            placeholder='请填入藏品编号或标题'
            maxLength={30}
            showCount
            key={inputKey}
            allowClear
            onChange={e => txtChangeFu(e, 'searchKey')}
            style={{ width: 300 }}
          />
          &emsp;
          <Select
            allowClear
            style={{ width: 200 }}
            placeholder='类型'
            options={dictSelect('藏品类型')}
            value={formData.typeDictId}
            onChange={e => setFormData({ ...formData, typeDictId: e })}
          />
          &emsp;
          <Select
            allowClear
            style={{ width: 200 }}
            placeholder='材质'
            options={dictSelect('藏品材质')}
            value={formData.textureDictId}
            onChange={e => setFormData({ ...formData, textureDictId: e })}
          />
        </div>
        <div className='B1toprr'>
          <Button
            type='primary'
            onClick={() => {
              authorityFu(400, '您没有藏品登记页面权限', () => {
                setOpenAdd(true)
              })
            }}
          >
            藏品登记
          </Button>
          &emsp;
          <Button onClick={resetSelectFu}>重置</Button>&emsp;
          <Button type='primary' onClick={() => B1devFu(formData)}>
            数据导出
          </Button>
        </div>
      </div>

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

      {/* 点击藏品登记 */}
      {openAdd ? <A0addGoods sId={-1} closeFu={() => setOpenAdd(false)} /> : null}
    </div>
  )
}

const MemoB1ledger = React.memo(B1ledger)

export default MemoB1ledger
