import React, { useState } from 'react'
import { RendererEnv } from '../../../env'
import { SchemaNode } from '../../../types'
import { Badge, Button, Popover } from 'antd'
import { UserDetailPopover } from '../../UserDetailPop'
import { processNodeList } from '../type'
import './index.scss'

interface FlowTableRowProps {
  node: processNodeList[]
  nodeTypeObj: { 0: string, 1: string, 2: string, 3: string }
  env?: RendererEnv
  handleStatus: (body: string, dot?: boolean) => React.JSX.Element
  processNode: processNodeList[],
  render: (region: string, node: SchemaNode, props?: any) => JSX.Element
}

const FlowTableRow: React.FC<FlowTableRowProps> = ({ node, nodeTypeObj, env, handleStatus, processNode, render }) => {
  const [open, setOpen] = useState(node.length > 10)
  const [length, setLength] = useState(10)

  return <>
    {
      node.map((item, key) => {
        if (key >= length && open && key + 1 == node.length) {
          return <tr>
            <td colSpan={2} >
              <Button onClick={() => { setOpen(false) }} style={{ marginRight: 12 }}>
                展示剩余{node.length - length}人
              </Button>
              {(key - length > 10) && <Button onClick={() => { setLength(length + 10) }}>
                展示下十条
              </Button>
              }
            </td>
            <td colSpan={6} ></td>
          </tr>
        }
        if (key >= length && open) {
          return
        }

        return <tr key={key} >
          <td colSpan={1} style={{ textAlign: 'center' }}>{item.seq}</td>
          <td colSpan={1}>{item.nodeName}</td>
          <td colSpan={1}>{nodeTypeObj[item.nodeType] ?? item.nodeType}</td>
          <td colSpan={1}>
            {env ? <UserDetailPopover env={env} id={item.nodeUser.userId}>
              <a >{item.nodeUser.userName}</a>
            </UserDetailPopover> : item.nodeUser.userName
            }
            {item.referralList?.length > 0 &&
              <Popover placement="top" content={
                <div style={{ maxHeight: '500px', overflow: 'auto' }}>
                  {item.referralList.map((item, index) => <div key={index}>{item}</div>)}
                </div>
              } trigger="click">
                <span style={{ paddingLeft: '8px' }}>
                  <Badge status={'error'} dot style={{ width: 20, textAlign: 'center' }} />
                </span>
              </Popover>
            }
          </td>
          <td colSpan={1}>
            {handleStatus(item.nodeStatus)}
            {/* {statusObj[node.nodeStatus] ?? node.nodeStatus} */}
            {item?.errorList && item.errorList.length > 0 &&
              <Popover placement="top" content={
                <div style={{ maxHeight: '500px', overflow: 'auto' }}>
                  {item?.errorList.map((item, index) => <div key={index}>{item}</div>)}
                </div>

              } trigger="click">
                <span style={{ paddingLeft: '8px' }}>
                  <Badge status={'error'} dot style={{ width: 20, textAlign: 'center' }} />
                </span>
              </Popover>
            }
          </td>
          <td colSpan={1}>{item.nodeEndTime}</td>
          <td colSpan={1} style={{ whiteSpace: 'break-spaces' }}>{item.remarkComment}</td>
          {processNode.some(itme => itme.assignComment) && <td colSpan={1}>{item.assignComment}</td>}
          <td colSpan={1} style={{ whiteSpace: 'break-spaces' }}>
            {item.attachments?.length > 0 && render(`flow-node-${item.nodeId}`, {
              type: 'lion-upload',
              isImage: false,
              multiple: false,
              preAjax: false,
              disabled: true,
              readonly: true,
              tabSample: true,
              hideUploadButton: true,
              value: {
                value: item.attachments?.map(attach => attach.attachmentId).join(','),
                info: item.attachments?.map(attach => {
                  return {
                    preview: attach.thumbnailAddr,
                    preview_name: attach.preview_name,
                    name: attach.name,
                    size: attach.size,
                    addr: attach.addr,
                    thumbnailAddr: attach.thumbnailAddr
                  }
                })
              }
            })}
          </td>
        </tr>

      })
    }
  </>


}

export default FlowTableRow