import React, { useCallback, useMemo, useState } from 'react'
import styles from './index.module.scss'
import { Button } from 'antd'
import MyTable from '@/components/MyTable'
import { B3eTableC } from '@/utils/tableData'
import MyPopconfirm from '@/components/MyPopconfirm'
import classNames from 'classnames'
import Y1cathet from '@/pages/Y_goodsDetails/Y1cathet'

function B3goodsTable() {
  // 点击删除
  const delTableFu = useCallback(async (id: number) => {}, [])

  // 点击查看 新窗口打开 待完善
  const lookPage = useCallback((id: number) => {
    window.open('/#/goodsLook/99', '_blank')
  }, [])

  // 打开侧边栏
  const [cathet, setCathet] = useState(0)

  const startBtn = useMemo(() => {
    return [
      {
        title: '编号类型',
        render: (item: any) => {
          return (
            <span
              onClick={() => setCathet(item.id)}
              className={classNames('D1GtNum', item.id === cathet ? 'D1GtNumAc' : '')}
            >
              {item.num}
            </span>
          )
        }
      }
    ]
  }, [cathet])

  const tableLastBtn = useMemo(() => {
    return [
      {
        title: '操作',
        render: (item: any) => {
          return (
            <>
              <Button size='small' type='text' onClick={() => lookPage(item.id)}>
                查看
              </Button>
              <MyPopconfirm txtK='删除' onConfirm={() => delTableFu(item.id)} />
            </>
          )
        }
      }
    ]
  }, [delTableFu, lookPage])

  return (
    <div className={styles.B3goodsTable}>
      <div className='B3eGtop'>
        <div className='B3eGtop1'>藏品清单</div>
        <div>
          <Button type='primary'>从已存在的藏品中添加</Button>&emsp;
          <Button type='primary'>新增</Button>
        </div>
      </div>
      {/* 表格 */}
      <MyTable
        list={[{ id: 99, thumb: '', num: '一段编号_可点击' }]}
        columnsTemp={B3eTableC}
        startBtn={startBtn}
        lastBtn={tableLastBtn}
        pagingInfo={false}
      />
      {/* 打开侧边栏 */}
      <Y1cathet sId={cathet} closeFu={() => setCathet(0)} />
    </div>
  )
}

const MemoB3goodsTable = React.memo(B3goodsTable)

export default MemoB3goodsTable