import React, { useCallback, useRef } from 'react'
import styles from './index.module.scss'
import TableList from '@/pages/Zother/TableList'
import { tableListAuditBtnFu } from '@/utils/authority'
import { selectObj } from '@/utils/dataChange'
import { resourceTableC } from '@/utils/tableData'
import { Button } from 'antd'
import { baseFormData } from '@/pages/Zother/data'
import { RootState } from '@/store'
import { useSelector } from 'react-redux'
import { useHistory } from 'react-router-dom'
import { D4_APIgetList } from '@/store/action/Dmanage/D4resource'

const D4baseFormData = baseFormData()

function D4resource() {
  const tableListRef = useRef<any>(null)
  const history = useHistory()
  // 从仓库拿数据
  const tableInfo = useSelector((state: RootState) => state.D4resource.tableInfo)

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

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

  return (
    <div className={styles.D4resource}>
      <div className='pageTitle'>资源使用</div>

      <TableList
        ref={tableListRef}
        baseFormData={D4baseFormData}
        getListAPI={D4_APIgetList}
        pageKey='resource'
        tableInfo={tableInfo}
        columnsTemp={resourceTableC}
        rightBtnWidth={340}
        yHeight={585}
        searchDom={[
          {
            type: 'time',
            key: ['startTime', 'endTime'],
            placeholder: `使用日期`
          },
          {
            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 MemoD4resource = React.memo(D4resource)

export default MemoD4resource
