import React, { useCallback, useEffect, useMemo, useState } from 'react'
import styles from './index.module.scss'
import MyTable from '@/components/MyTable'
import { GoodsType } from '@/pages/Zother/SonGoodsList/data'
import { selectObj } from '@/utils/dataChange'
import { API_GIsiteInfo } from '@/store/action/Cledger/C1ledger'

type Props = {
  info: GoodsType
}

function GItab2({ info }: Props) {
  // 藏品状态
  const goodsStatus = useMemo(() => {
    let txt = '（空）'
    const obj = selectObj['藏品库存状态'].find(v => v.value === info.siteStatus)
    if (obj) txt = obj.label
    return txt
  }, [info.siteStatus])

  const [list, setList] = useState<any[]>([])

  const getInfoFu = useCallback(async () => {
    if (info.id) {
      const res = await API_GIsiteInfo(info.id)
      if (res.code === 0) {
        const obj: any = res.data || {}
        const arr: any[] = []

        const keyArr = [
          { key: 'storageName', name: '仓库名称' },
          { key: 'managerUser', name: '仓库负责人' },
          { key: 'layer1', name: '排' },
          { key: 'layer2', name: '列' },
          { key: 'layer3', name: '层' },
          { key: 'layer4', name: '格' },
          { key: 'siteLocRemark', name: '位置备注' }
        ]

        keyArr.forEach((v, i) => {
          arr.push({
            id: i,
            xx1: v.name,
            xx2: obj[v.key]
          })
        })

        setList(arr)
      }
    }
  }, [info.id])

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

  return (
    <div className={styles.GItab2}>
      <h2>库存状态：{goodsStatus}</h2>

      {!info.siteStatus || [1, 2, 5].includes(info.siteStatus) || !info.siteId ? (
        <div className='GImainNone'>当前状态无库存信息</div>
      ) : (
        <MyTable
          list={list}
          columnsTemp={[
            ['txt', '库存信息', 'xx1'],
            ['txt', '库存详情', 'xx2']
          ]}
          lastBtn={[]}
          pagingInfo={false}
        />
      )}
    </div>
  )
}

const MemoGItab2 = React.memo(GItab2)

export default MemoGItab2
