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 B3flowTableType = {
  createTime: string
  creatorId: number
  creatorName: string
  id: number
  isAuto?: any
  name: string
  orderId: number
  rtfOpinion: string
  status?: any
  updateTime: string
}
type Props = {
  tableArr: B3flowTableType[]
}

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

  const tableLastBtn = useMemo(() => {
    return [
      {
        title: '审批结构',
        render: (item: B3flowTableType) => {
          const txt1 = item.status === 1 ? '同意' : item.status === 2 ? '不同意' : '（空）'
          const txt2 = item.isAuto === 1 ? '（自动）' : ''
          return txt1 + txt2
        }
      },
      {
        title: '审批意见',
        render: (item: B3flowTableType) => {
          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.B3flowTable} hidden={tableArr.length === 0}>
      <div className='B3Ftop'>申请流程</div>

      {/* 表格 */}
      <MyTable list={tableArr} columnsTemp={B3FtableC} lastBtn={tableLastBtn} pagingInfo={false} />

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

const MemoB3flowTable = React.memo(B3flowTable)

export default MemoB3flowTable