import React, { useCallback, useMemo } from 'react'
import styles from './index.module.scss'
import { Table } from 'antd'

type props = {
  list: any //表格数据
  columnsTemp: any[][] //表格展示
  lastBtn: any[] //表格最后的操作
  // 为空的定制字段
  isNull?: string
}

function LookTable({ list, columnsTemp, isNull = '/', lastBtn }: props) {
  const dataChangeFu = useCallback(
    (v: any) => {
      /**
       * txt:正常数据
       * txtChange:判断显示不同字段
       * text:文字比较多的情况
       */

      const obj = {
        txt: (item: any) => item[v[2]] || isNull,
        txtChange: (item: any) => Reflect.get(v[3], item[v[2]]) || v[4] || isNull,
        text: (item: any) => {
          let tempCom: any = item[v[2]] || isNull

          if (tempCom.length >= v[3]) {
            tempCom = tempCom.substring(0, v[3]) + '...'
          }

          if (v[4]) {
            // tempCom = tableComObj(v[4], [tempCom, item[v[2]]]);
          } else if (item[v[2]].length >= v[3]) {
            tempCom = (
              <span style={{ cursor: 'pointer' }} title={item[v[2]]}>
                {tempCom}
              </span>
            )
          }

          return tempCom
        }
      }

      return Reflect.get(obj, v[0])
    },
    [isNull]
  )

  const columns = useMemo(() => {
    const arr: any = columnsTemp.map((v: any) => ({
      title: v[1],
      render: dataChangeFu(v)
    }))

    return arr
  }, [columnsTemp, dataChangeFu])

  return (
    <div className={styles.LookTable}>
      {/* --------------表格-------------- */}
      <div className='tableListBox'>
        <Table
          size='small'
          dataSource={list}
          columns={[...columns, ...lastBtn]}
          rowKey='id'
          pagination={false}
        />
        {/*  右下角的列表数量 */}
        <div className='tableNumBox'>
          共 <span>{list.length}</span> 条数据
        </div>
      </div>
    </div>
  )
}

const MemoLookTable = React.memo(LookTable)

export default MemoLookTable
