import React, { useMemo, useState } from 'react'
import styles from './index.module.scss'
// import { useParams } from 'react-router-dom'
import MyTable from '@/components/MyTable'
import { Button } from 'antd'
import { B3FtableC } from '@/utils/tableData'
import X2lookText from '@/pages/X_stock/X2lookText'
import { textFu } from '@/utils/history'

export type ZflowTableType = {
  createTime: string
  creatorId: number
  creatorName: string
  id: number
  isAuto?: any
  name: string
  orderId: number
  rtfOpinion: string
  status?: any
  updateTime: string
}
type Props = {
  tableArr: ZflowTableType[]
  closeFu: () => void
}

function ZflowTable({ tableArr, closeFu }: Props) {
  // const { key, id } = useParams<any>()

  const tableLastBtn = useMemo(() => {
    return [
      {
        title: '审批结构',
        render: (item: ZflowTableType) => {
          const txt1 = item.status === 1 ? '同意' : item.status === 2 ? '不同意' : '（空）'
          const txt2 = item.isAuto === 1 ? '（自动）' : ''
          return txt1 + txt2
        }
      },
      {
        title: '审批意见',
        render: (item: ZflowTableType) => {
          if (textFu(item.rtfOpinion)) {
            return (
              <Button size='small' type='text' onClick={() => setLook(textFu(item.rtfOpinion))}>
                查看
              </Button>
            )
          } else return '-'
        }
      }
    ]
  }, [])

  //查看富文本信息
  const [look, setLook] = useState('')

  return (
    <div className={styles.ZflowTable} hidden={tableArr.length === 0}>
      <div className='B3Fbox'>
        <div className='B3Ftop'>
          <div>申请记录</div>
          <Button onClick={closeFu}>关闭</Button>
        </div>
        {/* 表格 */}
        <MyTable
          yHeight={570}
          classKey='ZflowTable'
          list={tableArr}
          columnsTemp={B3FtableC}
          lastBtn={tableLastBtn}
          pagingInfo={false}
        />

        {/* 查看富文本 */}
        {look ? <X2lookText closeFu={() => setLook('')} text={look} /> : null}
      </div>
    </div>
  )
}

const MemoZflowTable = React.memo(ZflowTable)

export default MemoZflowTable
