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 { D1canType, D1siteListType } from '../type'
import { D1_APIgetSiteList } from '@/store/action/D1storage'

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

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

  const tableLastBtn = useMemo(() => {
    return [
      {
        title: '是否空置',
        render: (item: D1siteListType) => (item.isEmpty ? '否' : '是')
      },
      {
        title: '相关藏品',
        render: (item: D1siteListType) => {
          return (
            <Button
              size='small'
              type='text'
              onClick={() =>
                lookFu({
                  layer1: item.layer1,
                  layer2: item.layer2,
                  layer3: item.layer3
                })
              }
            >
              查看
            </Button>
          )
        }
      }
    ]
  }, [lookFu])

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

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

  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
