import React, { useCallback, useRef } from 'react'
import styles from './index.module.scss'
import { useParams } from 'react-router-dom'
import { Button } from 'antd'
import MyPopconfirm from '@/components/MyPopconfirm'
import history from '@/utils/history'
import { MessageFu } from '@/utils/message'
import B3aTop from './B3aTop'

export const B3TiaoObjUrl = {
  1: '/entering',
  2: '/enterTibet',
  3: '/register',
  4: '/delete'
}

export const B3TitObjKey = {
  '1': '入馆',
  '2': '入藏',
  '3': '登记',
  '4': '删除'
}

function B3add() {
  const { key } = useParams<any>()

  // 待完善，各种功能

  // 点击下方按钮
  const btnClickFu = useCallback(
    (val: number) => {
      // 从顶部组件中拿到数据
      const resData = topRef.current?.resData()
      console.log('从子组件获取数据', resData)

      if (val === 2) {
        // 存草稿 当前页保存 不跳转
        MessageFu.success('草稿保存成功')
      } else {
        const url = Reflect.get(B3TiaoObjUrl, key)
        history.push(`${url}_edit/${key}/${99}`)
      }
    },
    [key]
  )

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

  return (
    <div className={styles.B3add}>
      <div className='pageTitle'>藏品{Reflect.get(B3TitObjKey, key)}-新增</div>
      <B3aTop info='xx' pageSta='新增' ref={topRef} />
      {/* 底部按钮 */}
      <div className='B3aBtn'>
        <Button type='primary' onClick={() => btnClickFu(1)}>
          添加藏品
        </Button>
        <Button type='primary' onClick={() => btnClickFu(1)}>
          创建
        </Button>
        <Button type='primary' onClick={() => btnClickFu(2)}>
          存草稿
        </Button>
        <MyPopconfirm txtK='取消' onConfirm={() => history.go(-1)} />
      </div>
    </div>
  )
}

const MemoB3add = React.memo(B3add)

export default MemoB3add