import React, { useEffect, useMemo, useState } from 'react'
import styles from './index.module.scss'
import Y1cathet from '@/pages/Y_goodsDetails/Y1cathet'
import { selectObj } from '@/utils/select'
import { Button, Table } from 'antd'
import classNames from 'classnames'
import { openGoodsInfoFu, resJiLianFu } from '@/utils/history'
import { useSelector } from 'react-redux'
import { RootState } from '@/store'
import ImageLazy from '@/components/ImageLazy'
import { statusCollectObj, statusStorageObj } from '@/utils/tableData'
import { FourTableType } from '@/pages/B_enterTibet/B1collect/type'

type Props = {
  pageNum: number
  pageSize: number
  pageChangeFu: (pageNum: number, pageSize: number) => void
  advanced: boolean
}

function A32table({ pageNum, pageSize, pageChangeFu, advanced }: Props) {
  // 打开侧边栏
  const [cathet, setCathet] = useState(0)

  // 从仓库拿数据
  const tableInfo = useSelector((state: RootState) => state.A32Routing.tableInfo)

  const columns = useMemo(() => {
    const arr: any = [
      {
        title: '藏品编号',
        width: 100,
        fixed: 'left',
        render: (item: FourTableType) => {
          return (
            <span
              onClick={() => setCathet(item.id)}
              className={classNames('D1GtNum', item.id === cathet ? 'D1GtNumAc' : '')}
            >
              {item.num}
            </span>
          )
        }
      },
      {
        title: '封面图',
        width: 60,
        render: (item: FourTableType) => (
          <div className='tableImgAuto'>
            <ImageLazy
              width={60}
              height={60}
              srcBig={item.thumbPc || item.filePath}
              src={item.thumb}
            />
          </div>
        )
      },
      {
        title: '编号类型',
        render: (item: FourTableType) => item.numName || '（空）'
      },
      {
        title: '藏品名称',
        render: (item: FourTableType) => item.name || '（空）'
      },
      {
        title: '文物级别',
        render: (item: FourTableType) => item.dictLevel || '（空）'
      },
      {
        title: '文物类别',
        render: (item: FourTableType) => resJiLianFu(item.dictType)
      },
      {
        title: '年代',
        render: (item: FourTableType) =>
          item.dictAge === '其他' ? '其他' : resJiLianFu(item.dictAge)
      },
      {
        title: '质地',
        render: (item: FourTableType) => resJiLianFu(item.dictTexture3)
      },
      {
        title: '完残程度',
        render: (item: FourTableType) => resJiLianFu(item.dictTorn)
      },
      {
        title: '来源',
        render: (item: FourTableType) => resJiLianFu(item.source)
      },
      {
        title: '入藏状态',
        render: (item: FourTableType) =>
          Reflect.get(statusCollectObj, item.statusCollect) || '（空）'
      },
      {
        title: '库存状态',
        render: (item: FourTableType) =>
          Reflect.get(statusStorageObj, item.statusStorage) || '（空）'
      },
      {
        title: '展览状态',
        render: (item: FourTableType) =>
          (selectObj['展览状态'].find(v => v.value === item.accountIndoor) || {}).label || '（空）'
      },
      {
        title: '创建日期',
        render: (item: FourTableType) => item.createTime
      },

      {
        title: '操作',
        width: 80,
        fixed: 'right',
        render: (item: FourTableType) => {
          return (
            <Button size='small' type='text' onClick={() => openGoodsInfoFu(item.id)}>
              查看
            </Button>
          )
        }
      }
    ]

    return arr
  }, [cathet])

  useEffect(() => {
    const dom = document.querySelector('.ant-table-body') as HTMLDivElement
    if (dom) {
      dom.style.height = (advanced ? 550 : 605) + 'px'
    }
  }, [advanced])

  return (
    <div className={styles.A32table}>
      <Table
        scroll={{ y: advanced ? 550 : 605, x: 'max-content' }}
        dataSource={tableInfo.list}
        columns={columns}
        rowKey='id'
        pagination={{
          showQuickJumper: true,
          position: ['bottomCenter'],
          showSizeChanger: true,
          current: pageNum,
          pageSize: pageSize,
          total: tableInfo.total,
          onChange: (pageNum, pageSize) => pageChangeFu(pageNum, pageSize)
        }}
      />

      {/* 打开侧边栏 */}
      <Y1cathet sId={cathet} closeFu={() => setCathet(0)} />
    </div>
  )
}

const MemoA32table = React.memo(A32table)

export default MemoA32table
