import React, { useCallback, useMemo, useRef, useState } from 'react'
import styles from './index.module.scss'
import { baseFormData } from '@/pages/Zother/data'
import TableList from '@/pages/Zother/TableList'
import { RootState } from '@/store'
import { H1_APIgetList, H1_APIsave } from '@/store/action/Hexhibits/H1loan'
import { tableListAuditBtnFu } from '@/utils/authority'
import { loanTableC } from '@/utils/tableData'
import { Button } from 'antd'
import { useSelector } from 'react-redux'
import ExhibitionModal, { ExhibitionFormValues } from './components/ExhibitionModal'
import { MessageFu } from '@/utils/message'
import { openLink } from '@/utils/history'

const H1baseFormData = baseFormData()

function H1loan() {
  const tableListRef = useRef<any>(null)
  const [exhibitionModalOpen, setExhibitionModalOpen] = useState(false)
  // 从仓库拿数据
  const tableInfo = useSelector((state: RootState) => state.H1loan.tableInfo)
  const SEARCH_DOM = useMemo(
    () => [
      {
        type: 'time',
        key: ['dateOpen', 'dateEnd'],
        placeholder: `入藏日期`
      },
      {
        type: 'input',
        key: 'searchKey',
        placeholder: `请输入申请编号、发起人或藏品编号`
      },
      {
        type: 'time',
        key: ['startTime', 'endTime'],
        placeholder: `发起日期`
      }
    ],
    []
  )

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

  const tableBtnFu = useCallback((id: number | null, key: string) => {
    openLink(`/loan_detail/${id}`)
  }, [])

  const handleExhibitionOk = useCallback(async (values: ExhibitionFormValues) => {
    const res = await H1_APIsave({
      ...values,
      region: values.region.join(',')
    })
    if (res?.code === 0) {
      MessageFu.success('新增成功')
      tableListRef.current?.getListFu?.()
    } else {
      return Promise.reject(res?.message || '新增失败')
    }
  }, [])

  return (
    <div className={styles.H1loan}>
      <div className='pageTitle'>借展管理</div>

      <TableList
        ref={tableListRef}
        baseFormData={H1baseFormData}
        getListAPI={H1_APIgetList}
        pageKey='position'
        tableInfo={tableInfo}
        columnsTemp={loanTableC}
        rightBtnWidth={340}
        yHeight={585}
        searchDom={SEARCH_DOM}
        storyTableListToprr={({ clickSearch, resetSelectFu }) => (
          <>
            <Button type='primary' onClick={dataExport}>
              数据导出
            </Button>
            <Button type='primary' ghost onClick={() => setExhibitionModalOpen(true)}>
              新增
            </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}
              </>
            )
          }
        ]}
      />

      <ExhibitionModal
        open={exhibitionModalOpen}
        onOk={handleExhibitionOk}
        onCancel={() => setExhibitionModalOpen(false)}
      />
    </div>
  )
}

const MemoH1loan = React.memo(H1loan)

export default MemoH1loan
