import React, { useCallback, useEffect, useState } from 'react'
import classNames from 'classnames'
import Y11com from './Y11com'
import Y22com from './Y22com'
import Y33com from './Y33com'
import Y44com from './Y44com'
import { API_goodsInfo } from '@/store/action/C1ledger'
import { C1GoodType } from '@/pages/A3_ledger/C1ledger/type'

export type Y1TabArrType = '藏品信息' | '库存信息' | '藏品附件' | '藏品日志'

export const Y1tabArr: Y1TabArrType[] = ['藏品信息', '库存信息', '藏品附件', '藏品日志']

type Props = {
  sId: number
}

function Y1main({ sId }: Props) {
  const [tabAc, setTabAc] = useState<Y1TabArrType>('藏品信息')

  const [info, setInfo] = useState({} as C1GoodType)

  const getInfoFu = useCallback(async (id: number) => {
    const res = await API_goodsInfo(id)
    if (res.code === 0) {
      setInfo(res.data)
    }
  }, [])

  useEffect(() => {
    getInfoFu(sId)
  }, [getInfoFu, sId])

  return (
    <div className='Y1main'>
      <div className='Y1tab'>
        {Y1tabArr.map(v => (
          <div
            key={v}
            className={classNames('Y1tRow', tabAc === v ? 'Y1tRowAc' : '')}
            onClick={() => setTabAc(v)}
          >
            {v}
          </div>
        ))}
      </div>

      {info.id ? (
        <div className='Y1info'>
          {tabAc === '藏品信息' ? <Y11com info={info} /> : null}
          {tabAc === '库存信息' ? <Y22com info={info} /> : null}
          {tabAc === '藏品附件' ? <Y33com sId={sId} /> : null}
          {tabAc === '藏品日志' ? <Y44com sId={sId} /> : null}
        </div>
      ) : null}
    </div>
  )
}

const MemoY1main = React.memo(Y1main)

export default MemoY1main
