import React, { useCallback, useEffect, useMemo, useState } from 'react'
import styles from './index.module.scss'
import { useParams } from 'react-router-dom'
import { Button } from 'antd'
import history from '@/utils/history'
import MyTable from '@/components/MyTable'
import { D2tableCSon } from '@/utils/tableData'
import { D2_APIaddDels, D2_APIgetSiteList } from '@/store/action/D2storSet'
import { TypeD2listSite } from '../type'
import D2Sarea from './D2Sarea'
import D2Sadd from './D2Sadd'
import MyPopconfirm from '@/components/MyPopconfirm'
import { MessageFu } from '@/utils/message'
function D2site() {
  const { id: sId, title } = useParams<any>()

  const getListFu = useCallback(async () => {
    const res = await D2_APIgetSiteList(sId)
    if (res.code === 0) {
      setList(res.data)
    }
  }, [sId])
  useEffect(() => {
    getListFu()
  }, [getListFu])

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

  // 点击删除
  const delTableFu = useCallback(
    async (id: number) => {
      const res = await D2_APIaddDels([id])
      if (res.code === 0) {
        MessageFu.success('删除成功!')
        getListFu()
      }
    },
    [getListFu]
  )

  const tableLastBtn = useMemo(() => {
    return [
      {
        title: '操作',
        width: 240,
        render: (item: TypeD2listSite) => {
          return (
            <>
              <Button size='small' type='text' onClick={() => setAddObj(item)}>
                编辑
              </Button>
              <MyPopconfirm txtK='删除' onConfirm={() => delTableFu(item.id)} />
            </>
          )
        }
      }
    ]
  }, [delTableFu])

  // 区域设置
  const [areaShow, setAreaShow] = useState(false)

  // 新增库位
  const [addObj, setAddObj] = useState({} as TypeD2listSite)

  return (
    <div className={styles.D2site}>
      <div className='pageTitle'>库房设置-库位设置</div>

      <div className='D2Stop'>
        <h2>{title}</h2>
        <div>
          <Button type='primary' onClick={() => setAreaShow(true)}>
            区域设置
          </Button>
          &emsp;
          <Button type='primary' onClick={() => setAddObj({ id: -1 } as TypeD2listSite)}>
            新增库位
          </Button>
          &emsp;
          <Button onClick={() => history.go(-1)}>返回</Button>
        </div>
      </div>

      <div className='D2Stable'>
        <MyTable
          yHeight={700}
          list={list}
          columnsTemp={D2tableCSon}
          lastBtn={tableLastBtn}
          pagingInfo={false}
          widthSet={{ description: 700 }}
        />
      </div>

      {/* 区域设置弹窗 */}
      {areaShow ? (
        <D2Sarea succFu={getListFu} sId={sId} closeFu={() => setAreaShow(false)} />
      ) : null}

      {/* 新增库位弹窗 */}
      {addObj.id ? (
        <D2Sadd
          addObj={addObj}
          sId={sId}
          addTableFu={getListFu}
          closeFu={() => setAddObj({} as TypeD2listSite)}
        />
      ) : null}
    </div>
  )
}

const MemoD2site = React.memo(D2site)

export default MemoD2site
