import React, { useCallback, useEffect, useMemo, useState } from 'react'
import styles from './index.module.scss'
import { Button, Checkbox } from 'antd'
import MyTable from '@/components/MyTable'
import { D1tableC } from '@/utils/tableData'
import { D1siteListType } from '../type'
import { D1_APIgetSiteList } from '@/store/action/D1storage'

type Props = {
  lookFu: (val: string[]) => void
  TreeDom: React.ReactNode
  tableId: number
}

function D1Loc({ lookFu, TreeDom, tableId }: Props) {
  const [isNull, setIsNull] = useState(false)

  const tableLastBtn = useMemo(() => {
    return [
      {
        title: '相关藏品',
        render: (item: any) => {
          return (
            <Button size='small' type='text' onClick={() => lookFu(['1', '2', '3', '4', '5'])}>
              查看
            </Button>
          )
        }
      }
    ]
  }, [lookFu])

  // 右边表格
  const [table, setTable] = useState<D1siteListType[]>([])

  const getTableList = useCallback(async (id: number) => {
    const res = await D1_APIgetSiteList(id)
    if (res.code === 0) {
      setTable(res.data)
    }
  }, [])

  useEffect(() => {
    if (tableId) getTableList(tableId)
  }, [tableId, getTableList])

  return (
    <div className={styles.D1Loc}>
      <div className='D1Ltop'>
        {/* 待完善 */}
        <Checkbox checked={isNull} onChange={e => setIsNull(e.target.checked)}>
          仅查看空置库位
        </Checkbox>
      </div>

      <div className='D1Lmain'>
        {TreeDom}
        <div className='D1Lmainrr'>
          {/* 表格 */}
          <MyTable
            yHeight={690}
            list={table}
            columnsTemp={D1tableC}
            lastBtn={tableLastBtn}
            pagingInfo={false}
            widthSet={{ description: 400 }}
          />
        </div>
      </div>
    </div>
  )
}

const MemoD1Loc = React.memo(D1Loc)

export default MemoD1Loc