import React, { useCallback, useMemo, useRef } from 'react'
import styles from './index.module.scss'
import { useParams } from 'react-router-dom'
import B3aTop from '../B3add/B3aTop'
import { TypeB3PageSta } from '../type'
import { Button } from 'antd'
import MyTable from '@/components/MyTable'
import { B3eTableC } from '@/utils/tableData'
import MyPopconfirm from '@/components/MyPopconfirm'
import history from '@/utils/history'

type Props = {
  pageSta: TypeB3PageSta
}

function B3editMain({ pageSta }: Props) {
  const { key, id } = useParams<any>()

  // 点击按钮调用子组件的方法获取数据
  const topRef = useRef<any>(null)

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

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

  // 点击保存
  const btnOk = useCallback(async () => {
    // 从顶部组件中拿到数据
    // const resData = topRef.current?.resData()
  }, [])

  // 点击取消
  const btnX = useCallback(() => {
    let url = '/entering'
    if (key === '2') url = '/enterTibet'
    else if (key === '3') url = '/register'
    history.push(url)
  }, [key])

  return (
    <div className={styles.B3editMain}>
      <div className='pageTitle'>
        藏品{key === '1' ? '入馆' : key === '2' ? '入藏' : '登记'}-{pageSta}
        {id}
      </div>

      <B3aTop
        info='xx'
        pageSta={pageSta}
        ref={topRef}
        Dom={
          <>
            {/* 藏品清单 */}
            <div className='B3eGoodTab'>
              <div className='B3eGtop'>
                <div className='B3eGtop1'>藏品清单</div>
                <div>
                  <Button type='primary'>从已鉴定的藏品中新增</Button>&emsp;
                  <Button type='primary'>新增</Button>
                </div>
              </div>
              {/* 表格 */}
              <MyTable
                list={[{ id: 1, thumb: '' }]}
                columnsTemp={B3eTableC}
                lastBtn={tableLastBtn}
                pagingInfo={false}
              />
            </div>
          </>
        }
      />

      {/* 底部按钮 */}
      <div className='B3eBtn'>
        <Button type='primary' onClick={btnOk}>
          保存
        </Button>

        <MyPopconfirm txtK='取消' onConfirm={() => btnX()} />
      </div>
    </div>
  )
}

const MemoB3editMain = React.memo(B3editMain)

export default MemoB3editMain