import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import styles from './index.module.scss'
import { RootState } from '@/store'
import { F1_APIgetStorageList } from '@/store/action/Fstorehouse/F1inStorage'
import { useSelector } from 'react-redux'
import { useHistory } from 'react-router-dom'
import TableList from '@/pages/Zother/TableList'
import { tableListAuditBtnFu } from '@/utils/authority'
import { selectObj } from '@/utils/dataChange'
import { checkTableC } from '@/utils/tableData'
import { Button } from 'antd'
import { baseFormData } from '@/pages/Zother/data'
import { F4_APIgetList } from '@/store/action/Fstorehouse/F4check'

const F4baseFormData = baseFormData()

function F4check() {
  const tableListRef = useRef<any>(null)
  const history = useHistory()
  // 从仓库拿数据
  const tableInfo = useSelector((state: RootState) => state.F4check.tableInfo)
  const [allWarehouseList, setAllWarehouseList] = useState<any[]>([])
  const warehouseOptions = useMemo(() => {
    return allWarehouseList.map((i: any) => ({
      label: i.name,
      value: i.id
    }))
  }, [allWarehouseList])

  const dataExport = () => {
    console.log('数据导出了')
  }

  const getStorageList = async () => {
    const res = await F1_APIgetStorageList()
    setAllWarehouseList(res.data.records)
  }

  const tableBtnFu = useCallback(
    (id: number | null, key: string) => {
      history.push(`/check_edit/${key}/${id}`)
    },
    [history]
  )

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

  return (
    <div className={styles.F4check}>
      <div className='pageTitle'>藏品盘点</div>

      <TableList
        ref={tableListRef}
        baseFormData={F4baseFormData}
        getListAPI={F4_APIgetList}
        pageKey='position'
        tableInfo={tableInfo}
        columnsTemp={checkTableC}
        rightBtnWidth={340}
        yHeight={585}
        searchDom={[
          {
            type: 'time',
            key: ['startTime', 'endTime'],
            placeholder: `盘点日期`
          },
          {
            type: 'select',
            key: 'storageId',
            placeholder: `相关库房`,
            options: warehouseOptions
          },
          {
            type: 'input',
            key: 'searchKey',
            placeholder: `请输入申请编号、发起人或藏品编号`
          },
          {
            type: 'time',
            key: ['businessStartTime', 'businessEndTime'],
            placeholder: `发起日期`
          },
          {
            type: 'select',
            key: 'status',
            placeholder: `申请状态`,
            options: selectObj['藏品入库申请状态']
          }
        ]}
        storyTableListToprr={({ clickSearch, resetSelectFu }) => (
          <>
            <Button type='primary' ghost onClick={() => tableBtnFu(null, '1')}>
              发起申请
            </Button>
            <Button type='primary' onClick={dataExport}>
              数据导出
            </Button>
            <Button type='primary' onClick={clickSearch}>
              查询
            </Button>
            <Button onClick={resetSelectFu}>重置</Button>
          </>
        )}
        storyTableLastBtn={[
          {
            title: '操作',
            render: (item: any) => (
              <>
                <Button type='text' onClick={() => tableBtnFu(item.id, '4')}>
                  查看
                </Button>
                {tableListAuditBtnFu(item) ? (
                  <Button size='small' type='text' onClick={() => tableBtnFu(item.id, '3')}>
                    审批
                  </Button>
                ) : null}
              </>
            )
          }
        ]}
      />
    </div>
  )
}

const MemoF4check = React.memo(F4check)

export default MemoF4check
