import { Button, Input, message } from 'antd'
import React, { useRef, useState } from 'react'
import styles from '@/pages/Customer/Company/components/ConnectCompany/index.less'
import consts from '@/basic/consts'
import { apiReceiveLock, queryReceiveList } from '@/services/product'
import { ProductLabel } from '../index'
import ProTable from '@ant-design/pro-table'
import CustomModal from '@/components/Modal/src/components/CustomModal'

const ReceiveNewLock = ({ refresh }) => {
  const tRef = useRef()

  const [tParams, setParams] = useState({
    search: null
  })
  const receiveLongle = async (name, id) => {
    const { code = -1 } = await apiReceiveLock({ id })
    if (code === consts.RET_CODE.SUCCESS) {
      message.success(`锁(${name})接收成功`)
      tRef.current?.reload()
      refresh()
    }
  }

  const columns = [
    {
      dataIndex: 'keyNum',
      title: '锁号'
    },
    {
      dataIndex: 'departmentName',
      title: '部门'
    },
    {
      dataIndex: 'product',
      title: '产品',
      width: '60%',
      render: text => <ProductLabel data={text} />
    },
    {
      dataIndex: 'opreate',
      title: '操作',
      render: (_, record) => (
        <Button size="small" onClick={() => receiveLongle(record.keyNum, record.id)}>
          接收
        </Button>
      )
    }
  ]

  const handleOnSearch = val => {
    setParams({ ...tParams, search: val })
  }

  return (
    <CustomModal
      title={
        <div className="flex flex-nowrap items-center justify-between">
          "新系统生成的锁，将在列表中按“本部门”展示。"
          <Input.Search
            style={{ width: '300px' }}
            placeholder="输入锁号/产品进行搜索"
            allowClear
            onSearch={handleOnSearch}
          />
        </div>
      }
    >
      <div className={styles.modalContent}>
        <ProTable
          rowKey={record => record.id}
          params={tParams}
          columns={columns}
          actionRef={tRef}
          toolBarRender={false}
          search={false}
          bordered={true}
          scroll={{ y: 460 }}
          request={async (params, _, filter) => {
            const { data: { longle, total } = { longle: [], total: 0 }, code = -1 } =
              await queryReceiveList({ ...params, ...filter })
            return {
              data: longle,
              success: code === consts.RET_CODE.SUCCESS,
              total
            }
          }}
        />
      </div>
    </CustomModal>
  )
}

export default ReceiveNewLock