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

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

  const columns = [
    {
      dataIndex: 'keyNum',
      title: '锁号'
    },
    {
      dataIndex: 'category',
      title: '办事处'
    },
    {
      dataIndex: 'product',
      title: '产品',
      width: '60%',
      render: text => <ProductLabel data={text} />
    },
    {
      dataIndex: 'opreate',
      title: '操作',
      render: (_, record) => (
        <Popconfirm
          title="确定接收该锁吗？"
          cancelText="取消"
          okText="确定"
          onConfirm={() => receiveLongle(record.keyNum, record.id)}
        >
          <Button size="small">接收</Button>
        </Popconfirm>
      )
    }
  ]

  const handleOnSearch = val => {
    setParams({ ...tParams, search: val })
  }
  return (
    <Modal
      {...resetModalProps}
      width="50vw"
      bodyStyle={{ padding: '24px 24px 0' }}
      footer={false}
      getContainer={() => document.getElementById('root')}
      title={
        <div className="flex items-center justify-between">
          <span>
            以下锁为系统升级前未接收的锁，请及时接收。
            {/* <Tooltip title="新系统生成的锁，将在列表中按“本部门”展示。">
              <Attention theme="outline" fill="#333" />
            </Tooltip> */}
          </span>
          <Input.Search
            style={{ width: '300px', marginRight: '50px' }}
            placeholder="输入锁号/产品进行搜索"
            allowClear
            onSearch={handleOnSearch}
          />
        </div>
      }
    >
      <div className={styles.modalContent}>
        <ProTable
          rowKey={record => record.id}
          columns={columns}
          actionRef={tRef}
          params={tParams}
          toolBarRender={false}
          search={false}
          bordered={true}
          scroll={{ y: 460 }}
          request={async params => {
            const { data: { longle, total } = { longle: [], total: 0 }, code = -1 } = await queryOldLockList(
              params
            )
            return {
              data: longle,
              success: code === consts.RET_CODE.SUCCESS,
              total
            }
          }}
        />
      </div>
    </Modal>
  )
}

export default ReceiveLock